Monday, May 11, 2015

usability - Star vs Heart icon to represent save as a favourite



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?



Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...