When working on a set of changes to a website and mobile app, there was a discussion about how one of the main actions should be presented to the user. It is a feature that allow users to "Like" a photo by clicking on a button with a hearth icon.

In my understanding (and others thought as well), in the default state ("not liked yet") the button's color should be black, and then turn red when liked by the user.

However, it was decided that it should be the exact opposite: default state (not liked) being red, and after the photo was liked by the user, the button would turn black.

Is there any specific reason for choosing this kind of color combination? (considering it was well thought and not just random).

  • The default state, for a photo that you didn't add as favorite. Icon for a photo that is not a favorite

  • The icon used for favorited photos. enter image description here

  • 1
    I think it is a good question, the basic idea in the question is what color is best for a call to action and there are plenty of non-speculative answers out there, such as this article where a case study found that red buttons converted 34% higher than green (I'd wager even more conversion over gray). So assuming you want users to click the button, it'd make sense to try using red as the default state to entice users into clicking.
    – DasBeasto
    Jan 27, 2016 at 15:20
  • Thanks for the link @DasBeasto, it sure helps to understand. Jan 27, 2016 at 17:32

1 Answer 1


One possibile explanation might be that they thought along the lines of:

Red = encouraging an action. Black = indicates the action has been performed.

Ergo, they want you to favourite, and so want to draw your attention to the act of favouriting more than they want to the act of having favourited. Perhaps they weren't getting enough favourites when the button was grey as active, and made a stark change.

Whether or not this is 'correct' or 'aligns with users mental models' isn't for me to say. Gaining understanding about UI decisions like these often depends upon the larger context; the greater colour palette, established interaction patterns across the site, etc etc.

  • 1
    Yeah, your example of "they may use red becuase weren't getting enough attention to the button" sounds reasonable. Jan 27, 2016 at 3:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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