Icon for adding/removing from favourites: indicating state vs. action

Question

Lets say that we have a mobile app that allows users to search for favourite artist and follow add them to their favourites. While searching for new artists, probably some of them are already to the favourites list.

The picture above has two examples.

• The stars on the left suggest about the state of the artist: is it currently added to the favourites or not.
• The x and + imply the action what will happen when the icon is tapped: the artist will be either removed or added.

If we use only icons without text, which should be the main focus of the icon: state or action? Also would it be better to have a different design (show or hide icons) for favourite list (everything is already added) and to the search list (most of the items are not added to favourites)?

Answer 1

I have to say, the hollow-vs-gold-star state approach is standard enough that I think it would be your best bet. Not only is it common enough to become intuitive, but it acts as both state AND action: users are fairly familiar with the "tap this to add it to my favorites - oh look, now it's gold, it is IN my favorites." It is a nice, concise package of control and information all in one - leverage it!

Answer 2

First of all, a bit of conceptualisation: states comes from actions. An empty place is nothing, is emptiness. An empty place with the possibility of performing actions could be absolutely anything.

The concept above is important because it will help you decide different paths every time a problem like this is presented to you.

Now, back to your specific question, I think there's some information missing (oooh, the dreaded "context is everything"). For example, we don't know if your actions will add/remove an item from favorites, or if it will save it / delete it. While there are similarities, a favorite is basically a bookmark, a shortcut to a database entry. Hence, it could act similar to a saved item in cloud environments. However, saving means the user actually has the item, even if in a digital form, or even in his own segment of the cloud.

With this in mind, your proposed icons aren't very clear. Stars are usually used for ratings, so it has a bit of friction. MAybe you could use a heart icon for favorited item. However, and more important, is the add/delete set of icons. Having them at a side of the fav icon has quite some friction as well, so instead of using the fav icon to communicate a state, you could use it as an action trigger and get rid of the other 2 action icons. For example, if you use the heart, you could use a hollow heart for an element with no action performed (remember the empty place above?), and filled heart for added item. These would be the states.

Then, for the actions, you set a conditional on click :

if emptyItem (click) --> filledItem
elseif filledItem (click) --> deletedItem
else continue

and then you can use a broken heart for deleted item to add some playful vibe. Please note I don't say "get back to hollow", but to mark it as deleted so the user knows the she has interacted with the item and she deleted it. Alternatively, you could use a menu with add delete as items and be a happy camper.

And all this being said: use labels. Always. There's a reason why labels are good UX

Answer 3

As said by other answers, the Empty Star/Filled Star style (and the star itself) is very common, so recognition is likely to be high among users. I don't have relevant statistics to back this up, but I can certainly anecdotally say I've seen it a lot. I think you can also look to how websites handle Like and Dislike buttons, as they perform a similar function.

In the absence of stats, we can look to how large corporations handle this issue though to get some information that might have the benefit of research behind it.

Microsoft has used the star to represent favorites for many versions of its OS now, but this isn't so relevant to us because there's no actual button for favoriting as I can tell in Windows 7. I can confirm that they've also avoided this issue in Internet Explorer by using the star to simply toggle the Favorites bar, from which the user is able to add or remove the page from their favorites.
Turning to my development tools, having reviewed the 2015 Visual Studio Icon Set to see what icons pertain to favorites, they have both an Add to Favorites icon and icons with filled and empty stars (these aren't for star ratings; there's another set for those too with half stars), so there's no clear answer there.

For reference, here's Visual Studio's Add to Favorites Icon:
(I this this style of button is an acceptable concession to those who might not get why a star is there in the page, but whether this is desirable to you might be dependent on your target audience and app's overall layout.)

In fairness to Apple, I had a quick search for what OSX does, and it seems (please correct me if I'm wrong) they just believe in a pane on the side of the file explorer where you drag commonly used folders for quick access. Although not really relevant at first glance, it does inform us that maybe you could have a tap or tap and hold behavior on the artist's name to prompt to add to favorites, but this isn't really in line with the goal of visually obvious actions that you're aiming for.

Google meanwhile opts for state-as-action buttons for dual state concepts like favorites. Like/dislike buttons on Youtube are a good example (they highlight blue when checked, and are a dull grey color when not). Their Chrome browser is another. It has an empty star on the right hand side of the address bar, which is filled when you're on a page that you've already favorited. The one nice thing they do is provide a visual feedback and editing stage after you hit the star, to allow the user to specify what folder the favorite is in, the title, etc.

Like so:

What this means is that it's clear what has happened when the user presses the button, in the event the user is computer illiterate.

In the mobile context, this could be as simple as having a dialog popup appear at the bottom of the app for a short period saying "Added to Favorites!", before fading away.

I don't have a picture, but the Youtube App on Android does this exact behavior when you add a video to a category (like Watch Later or indeed Favorites (although the addition isn't a one button press operation)), or like/dislike/unlike/undislike a video. A small notification pops up and then vanishes. The same is true of Chrome for Android (where the favorites icon is in the sandwich menu at the top right, also in a state as action style), opting for a brief notification instead of a window with options like its desktop version. I believe this behavior is in keeping with Google's Material Design standards on Acknowledgement (I would link it, but alas, I'm limited to two), which states:

Acknowledgement removes uncertainty about implicit operations that the system is taking. It may be paired with an option to undo the action.
[When an action is executed] ...An acknowledgment in the form of a toast appears, then fades after a few seconds.

You might be able to tell my bias as I've lingered on this last option for a while, but I think it's sensible (and clear as to what has happened), particularly because it's difficult to miss, accidentally performing the operation won't cause any damage and undoing it is as easy as tapping the button again.

Granted, It isn't a substitute for statistics pertaining to user recognition, but we can at least surmise that Google thinks that this approach is appropriate for its not insignificant target audience.

Answer 4

I think you should be consistent with the majority of current web interfaces which use the state paradigm. For example, the chrome favorites buttons is showing the state rather than asking for actions from the users.

Also Youtube uses the same paradigm:

Therefore, use the state paradigm rather than action in order to aviod violation the consistency usability heuristic.