UI cheat sheet: The 5 love languages of the web - Deepstash
Ultimate Guide to Reducing Churn

Learn more about product with this collection

How to analyze churn data and make data-driven decisions

The importance of customer feedback

How to improve customer experience

Ultimate Guide to Reducing Churn

Discover 62 similar ideas in

It takes just

9 mins to read

UI cheat sheet: The 5 love languages of the web

In this cheat sheet we will cover:

  • Types of patterns
  • Like
  • Save
  • Favorite
  • Rate
  • Views & listens
  • Closing thoughts
  • Further reading

4

29 reads

Types of patterns

Liking: Used for non-referenceable appreciation showing.

Favourite: To earmark content, to show its importance, or to reference easier.

Save: To bookmark content that isnā€™t yours to reference later.

Rate: To give users the opportunity to say they dislike something as well as like it.

Views: To track the number of people who have viewed something.

5

15 reads

Like

As a pattern, liking is just an action a user takes on someone elseā€™s content that doesnā€™t do anything apart from increase a tally. This means, there is also no way to reference the things you have liked. For example, you canā€™t go onto Instagram and easily see a list of all the content you have ever liked.

3

7 reads

Standard liking

The word ā€˜ likeā€™is also a good example of ā€˜ real worldā€™language being turned into a Ui. You wouldnā€™t say you ā€˜ heartā€™or ā€˜ Starā€™an Ice-Cream shop, you would say that you ā€˜ likeā€™it. There has also been a shift away from the thumbs up icon and towards the heart icon. According to Wikipeida ā€” it wasnā€™t Facebook who invented the like button (gasp!)

3

9 reads

Reacting

In the olden days, Facebook used to have the old school like button with the thumbs up. The idea that you could just ā€˜ likeā€™something without any effort took off, and then came in the awkward social interactions. This is where ā€˜ reactionsā€™come in. They provide the user with options other than ā€˜ likeā€™to better express their emotions towards a subject. Reactions are ā€˜ like ā€™, ā€˜ love ā€™, ā€˜ Haha ā€™, ā€˜ Wow ā€™, ā€˜ sad ā€™,

3

9 reads

Claps

Clapping hands is a way to show that you really like something. If you see something with 100 claps, it could have come from just 100 people or two people. If you have a crush on medium, go give their stories 50 claps. They will think you are weird, but at least they will appreciate the effort.

3

9 reads

Save

Saving is generally understood as a way to avoid losing something. While it was traditionally thought of as a method to protect your work, the meaning has broadened to include saving something you have seen online. For the sake of this section, we will be ignoring ā€˜saving work,ā€™ and ā€˜saving your place in a gameā€™ and just focus on saving content online.

3

6 reads

Save to a collection

Icon: Bookmark icon or the word ā€˜ saveā€™. Some sites allow you to save content to a collection or a group. This makes Referencing a lot easier. Y'all, I remember when the Pinterest button used to say ā€˜ pin itā€™. But then (Cue dramatic thundercloud sounds) they changed it to just say ā€˜ save ā€™.

3

6 reads

Add to wishlist or Add to registry

Adding to a Wishlist or a Registry is used almost exclusively in Ecommerce. If something is added to a Wishlist, it gives you an opportunity to continue interactions with your users about the product that they have their eye on, until you push them over the edge. If you are a fan of ye old dark patterns, you can even tell the users when you are about to run out of that product. The heart icon is more Emotive and less ā€˜ committalā€™than the save icon ..

3

1 read

Bookmark

You probably first became acquainted with Bookmarking in your Browserā€™s Bookmark bar. While it doesnā€™t work differently to saving, Bookmarking is usually used for something you have to complete like a movie or an article. Youtube also lets you add a Video to a ā€˜ watch laterā€™list, but it is more like the ā€˜ save to collectionā€™pattern.

3

0 reads

Rulebreaker example 1: Spotify & Youtube

On Spotify you ā€˜likeā€™ a song. You then go navigate to ā€˜Liked Songsā€™ and replay it 23 times.

3

4 reads

The Way The Like Button is Used

Facebook used to use the classic like button and are fairly synonymous with it, although now they use reactions. However, you can still just hit the ā€˜likeā€™ button as opposed to choosing a reaction.
Instagram uses a heart-shaped icon.
Twitter used to have a favourite (star) icon but moved over to using a heart button to align with everyone else. (source)
Vimeo are the original like button creators.
TikTok apparently also uses the like button. But being on the wrong side of 25 I canā€™t confirm this.
Dribbble also uses a like button.

3

4 reads

Favorite

Like ā€˜savingā€™, ā€˜favoritingā€™ is referenceable. But unlike saving, it is usually used on your own content. Favoriting is usually used to help the user organize their own ā€˜thingsā€™ like emails and files.

3

3 reads

Standard

The Star icon is usually used to indicate importance in your own content, as opposed to content owned by others. Email services like Gmail use the Star icon to group important Emails.Google photos uses the Star icon to group your favorites.

3

3 reads

Rule Breaker

The product I work on is a) science-based and, b) collaborator sourced. So while we initially wanted to put star ā€˜ratingsā€™ on our content, it wasnā€™t a good move for our collaborators. We didnā€™t want their content getting ā…• starts (even if it deserved it). So, the next option was ā€˜likingā€™ which felt a bit too unprofessional for the brand. Leaving our last option which was favoriting. It works for the product, even though users were favoriting content that wasnā€™t their own.

3

3 reads

Rating

Ratings are kinda like the people of the world trying to help other people of the world out. Movie is 3 stars? Wait till it comes out on Netflix. Restaurant is 4.5 stars and only has one $? Count me in. Not sure what to read on your holiday with your in-laws to make yourself seem clever? Rank those business books according to popularity.Ā 

3

2 reads

Standard five-star rating

Generally speaking, when you rate something it will usually be out of 5. Why 5? Iā€™m not sure, but here are a few of my best guesses:

  • It is easier to Substatize 5 stars than it is to count to 10.
  • 5 stars are easier to work with than 10.
  • 5 is an odd number, which means that a neutral score is possible. E.g. If you say something is 3 stars, you neither love it nor hate it.

3

2 reads

Rating and Reviewing

When rating something, it is seldom that you will do it without attaching a written review alongside it. More and more sites are also using multiple ratings to get an overall score. A rental property could be perfect except the host wasnā€™t very good at replying to messages, which should affect the whole score. As a general rule, the less specific the products are (for example on Amazon) the less detailed you can be with your rating and review form. Sometimes, you see Brand-Specific ratings,

3

4 reads

Like vs Dislike

Youtube in 2010 moved away from a Star rating system to a ā€˜ Like/Dislikeā€™one. The staff said the change was because users seldom used the numbers 2,3,4 and preferred the 1 and 5 stars. This style creates quite Polarising opinions of a piece of content.

3

3 reads

Up/down voting

Up/down voting is a really interesting method of surfacing content that other users would find interesting. Like the ā€˜ Like/Dislikeā€™pattern it can be fairly polarizing. One of the big disadvantages of this is quickly burning through interesting or controversial content due to early down voting.

3

2 reads

Views & listens

Images and short text posts don't usually get view counts that are publicly visible. Instagram counts something as a view after 3 seconds according to Matthias Funk for Tubics. Music apple music and Spotify both donā€™t show the amount of views, while Soundcloud does. If you are on one of the first two, you are already ā€˜ famousā€™and if you are on Soundcloud you are more ā€˜ Garage-Bandyā€™in which case, Listens/Views count.

3

2 reads

But how does the money work?

Encourage users to sign up for pro accounts, and then distribute the fee across the artists that they spend the most time interacting with. Back 2017, the service paid $0.0064 per stream. By last year, that number had risen to $0.00783. Today, that number has settled at $0.00735. Spotifyā€™s Per-Stream rate ranks as one of the worst, and it appears to be falling.

3

3 reads

IDEAS CURATED BY

verne

Commissioning Editor

Other curated ideas on this topic:

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Personalized microlearning

ā€”

100+ Learning Journeys

ā€”

Access to 200,000+ ideas

ā€”

Access to the mobile app

ā€”

Unlimited idea saving

ā€”

ā€”

Unlimited history

ā€”

ā€”

Unlimited listening to ideas

ā€”

ā€”

Downloading & offline access

ā€”

ā€”

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates