99

I am working on a mobile app that involves the user saving a favourite location. I wanted to use an icon to represent that feature, but I'm not sure which one is better – a star or a heart icon.

Some say heart icon tends to increase the rate of productivity, and some say they are used to a star icon to 'save' or 'bookmark' something.

What do go you guys think?

  • 9
    Star looks good from any direction; heart is not understandable upside-down. If this is a mobile application, there is a possibility we search something with my friend and he is handling the phone and I am looking at the screen seeing it upside down. Also, I would mark with a heart a place where my girlfriend lives. – Voitcus May 26 '15 at 11:54
  • 6
    Using symbol of Love as Favourite degrades it. Its also childish. Use star as universal favourite symbol. – user3123061 May 27 '15 at 7:07
  • 4
    Scenario #1: A man uses your mobile app to favourite his work colleague's address (who happens to be female). His wife sees a heart and goes berserk. Do we need a Scenario #2? – rybo111 May 27 '15 at 15:16
  • 1
    @rybo111 Well that guy will get a nice share of user experience :) – Hagen von Eitzen May 27 '15 at 20:33
  • 2
    A pin icon is familiar in a maps context. They can be colored diferently, you can have a star in a pin. Its equally good on the map as well as a menu. Aside: Feedly uses bookmark icon for articles. – Jesvin Jose May 29 '15 at 11:44
141

They have (slightly) different meanings and usage


Although both icons are similar and both are popularly recognized, they do have slightly different connotations.

❤ The heart icon

  • Is more emotive by its very nature. As such, it's more likely to be associated with positive feelings such as love, like, happy, etc.
  • Is used by popular applications such as Pinterest and Instagram for social "like" or "love" actions, which promotes this idiomatic meaning (i.e. widespread use reinforces popular meanings).
  • Can create some problems with color palettes because it's frequently red, which can conflict with error messages or warnings.

★ The star icon

  • Communicates something as special, but it's semantically less effective at communcating positive feelings/emotions.
  • Is used by very popular apps like Gmail, Google Maps, Chrome, and Firefox for bookmarking or saving items, which promotes this idiomatic meaning.

How to choose?

In a maps application...

  • If it's more important for users to be able to bookmark locations irrespective about whether they feel emotionally positive or negative, then a star is probably a more suitable UX.

    • For example, users might bookmark the dentist, the police station, an auto mechanic, or their tax advisor even though they don't enjoy visiting any of these places, because they are important to remember.
  • If it's more important for users to mark locations they feel positive about, then the heart icon may be more suitable.

    • For example, users might heart a luxury hotel, a pricey jewelry store, or a 3-star Michelin restaurant even though they are unlikely to visit any of these places because they are so expensive, because these locations are associated with like/love/positive/aspirational feelings.
  • Of course, users can and will use star/heart for all kinds of other reasons, but these examples may help illustrate the difference in idiomatic meaning and usage associated with the two icons.

  • There is evidence that the icons do drive different user interactions. The CEO of Airbnb described to the New York Times how switching from a star to a heart icon on their site created different user patterns:

    “We had these ‘stars’ on the site to save places, and we changed them to a ‘heart’ icon as an experiment,” Mr. Chesky said, noting that the experiment was shown to 1 percent of Airbnb users. “We quickly realized that people were saving these properties in a way that they hadn’t with the star icon, and that the amount of time they spent on the site went up dramatically.”

  • Obviously, this doesn't mean you should switch to a heart icon to drive site engagement, because what is appropriate for Airbnb may be completely inappropriate for your application.


For further reading, you may find this Quora question and this question helpful.

  • 28
    tldr: ❤ = I love it (personal). ★ = I want to save it for further review (functional). – Qix May 28 '15 at 8:56
  • Do you think the folks at twitter read your answer before changing the favourite icon? :) – icc97 Feb 14 '16 at 15:26
20

I think the difference between the two isn't huge, both are frequently used for the feature you are describing. Perhaps thinking of the emotion you are trying to evoke is more important.

For example, a favourite on this site is represented by a star. This makes sense, it's a 'professional' site. Whereas if I'm on a site like say AirBNB, a heart makes more sense - I might 'love' an apartment, but not 'love' a question.

In saying that locations mightn't always evoke this positive reaction.

So basically it's down to the subject of what you're favouriting and the context in which the user 'favourites' it.

Hope that helps!

  • 1
    Your example gives lots of clarity and are strong enough to let the developer decide whether to choose heart or start – exexzian May 26 '15 at 4:25
  • exactly, its all about the context. heart is to "love to.." as the star is to "add to.." the favorites. – pzv May 26 '15 at 5:52
9

Since the objective is to favorite a location in a mobile the recommendation would be a GEO-HEART. This is the ideal graphical representation to portray the favorite location.

Favorite Location

  • 2
    That just seems rather weird. In this situation, I think a star inside the pin would be better suited. – Keavon May 30 '15 at 7:25
  • 6
    Looks more like a hospital or blood donation center marker. – Calvin's Hobbies May 30 '15 at 20:46
  • It is a visual perception and the design is always subjective until it is designed for a particular target users It cannot be always generic. Can you please elaborate on what basis does this look like a hospital or blood donation icon. – Udhayakumar Keshavan May 31 '15 at 8:52
2

If you use a rating for your locations as well, I would go for a heart as favourite icon.

Stars are usually used for a rating like 3 out of 5. I've never seen this with hearts. Otherwise star and heart just have a different tone as Vincent already said.

0

IMO is, What are all the usages of FAVOURITE?

  • Priority should be high
  • List out in different ways
  • Easy way to find
  • We can follow them easily if it is some public/private thread

Based on the above usages, we can take the decision...


★ It is for our own usage. Start indicates something important than others. Also this is globalised accepted metaphor.

❤ Is the explore our feelings to others. Based on the above usage we can follow the particular thread but not loved one.

(★) is the perfect one for FAVOURITE.

-1

Because users will want to favorite locations for different purposes, they should also have the option to select different icons for the different folders they save the favorites in. A heart for family locations (or a cherished location) and a star for favorite restaurants, hotels, etc. Additionally, different colors of stars, push pins, hearts, etc.

Further, it is a popular feature to offer mod packs with future customization so that a user could have a choice from many other icons, such as a basket of kittens, a cross, a puppy, Waldo, Nyan cat, chess pieces, etc.

In a strict choice between heart and star, I choose star.

It is a good idea to come up with a new symbol for selecting a favorites submenu since users may expect the star to have functionality like that in Firefox. Maybe a bookmark with a star on it or a circle with FAV overlayed on it.

FAV-geo

Credit: the 'geo' shape was taken from the picture on Udhayakumar Keshavan 's post.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.