24

After reading this question about Big Bad Red buttons, where it was generally agreed upon that red buttons draw the user to click, I was left thinking: then when are they good affordance and interaction design?

  • Red buttons usually mean something negative, so I suppose users will be expecting that of a red button.

  • Red buttons draw users to click instead of avert from it.

The two statements above seem to work against each other. So is the red color "out" for buttons? When is it a good idea to use it, if at all?

Improve this question
1
  • I s'pose this is about Gmail's Compose button?
    – user541686
    Dec 29, 2011 at 12:43

5 Answers 5

Reset to default
31

Red buttons are appropriate when a primary action is negative in nature.

That is, the user is very likely to want to hit the button anyways, and the action triggered is canceling, ending, deleting, or some other "negative" action. Here are a few examples from iOS:

enter image description here

Note that in the image on the right, the user has already indicated they would like to leave the current page, so they are likely to want to hit that "Delete Draft" button. If that action had been of secondary importance in this context, I would not go with red (and that location and size on the screen).

This pattern reinforces the nature of the action while also calling attention to the place you are likely to want to click/touch given the context.

Improve this answer
4
  • Oh I get it, and in the first example, supposing two iPhone users on a call with each other, SOMEONE will need to eventually press that "End" button, so it's pretty much the primary and most important action on the call screen. Thanks!
    – Vic Goldfeld
    Nov 23, 2011 at 16:38
  • This is not entirely true, red is danger only in some cultures, and even on ours it sometimes has other (not negative) uses.
    – Naoise Golden
    Dec 29, 2011 at 11:16
  • @NaoiseGolden An important point. This answer makes the assumptions that the user base is "Western" culturally (somewhat likely to perceive the negative red connotation), and that there is some sort of color system in use, where different colors (or grayscale vs. red in iOS's case) are employed to convey different meanings. As a generic highlight color, red is not out of bounds, and as you point out, draws the eye like no other color.
    – peteorpeter
    Dec 29, 2011 at 14:28
  • Indeed the Google redesign employs red heavily for emphasis, and though this has sparked some discussion, I don't think this is necessarily a problem because, at least in Gmail's case, the red button is the only one on the page - red isn't serving to distinguish this action from other similar ones.
    – peteorpeter
    Dec 29, 2011 at 14:33
4

May not be relevant in the context above, but I vaguely remember that in your peripheral vision, the colour red is the most easily distinguished colour. This application is often used in real world UI's rather than on screens. I guess as screens are usually small enough in size that you do not require your peripheral vision.

Improve this answer
1

The colour red indicate in most cases a potential risk. But in addition to the colour of actions the sequence, the placement, the grouping (see screen 2) and the shape/size is important. I would use other colors for attention buttons.

Improve this answer
2
  • other colors? such as?
    – Vic Goldfeld
    Nov 29, 2011 at 8:33
  • You can use a typical corporate colour (e.g. blue) for positive action. But it depends on the corporate design and the platform (OS). So only destructive actions can be coloured in red.
    – sysscore
    Nov 29, 2011 at 11:50
1

Of course, all of this "conventional wisdom" can now be appropriately questioned given that Google has now completely violated this "rule" on MOST of its web apps.

Here's a G+ conversation on the same thing: https://plus.google.com/113117251731252114390/posts/RNM3ki72Yby

Improve this answer
1

For sure you need to find the address in branding guidelines, but for sure at some points, red color means "deny", but if you checked below images you see some examples those used red color to get actions. Netflix

invision

Improve this answer

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.