4

It's known that red buttons are mostly used for dangerous actions. This makes sense and it's all great. But then some big companies come and start using them as primary buttons.. And not just any companies, I'm talking about companies known for caring about user experience and design principles, like YouTube or Netflix. I googled it but found no explanation why they do this or any type of justification. Could someone elaborate on this? Or do we all agree that this is a "because they can" situation haha?

  • 8
    You know what YouTube and Netflix have in common? Their primary brand colour is red. – JonW Sep 20 '17 at 13:18
  • Primary brand colours are often used in primary CTAs. I have worked on several sites where the primary brand colour was red and (therefore) the primary CTAs were red - we did not notice any detrimental effect. – Andrew Martin Sep 20 '17 at 13:24
  • See also: McDonalds, Target, Pinterest. – Ken Mohnkern Sep 20 '17 at 13:27
  • ...Coca Cola, HSBC, K-Mart... Honestly, it's going to be harder to find a company with a Red primary brand that don't use red for primary CTAs. – JonW Sep 20 '17 at 13:28
  • To add to the above comments. The red buttons are rarely prime red as well. They are either a specific (branded) hue or a subtle gradient. – Socrates Kolios Sep 20 '17 at 13:32
3

There are A/B tests that tell us red is more effective than green. But you have to ask why the A/B test swung that way. All we know really is that red was more effective because more people clicked on it. There could be a whole bunch of reasons, some centered around subconscious human behaviour, and some related to an actual physical difference.

A straight A/B test between red and green buttons with a white label does not reduce simply down to 'colour of the button'. There is the contrast ratio to consider - white text on a red background has a higher contrast ratio than white text on a green button. Higher contrast ratios make for a more legible text, and therefore make it stand out more.

Obviously we can't ignore the red=danger aspect, but people don't go round thinking 'I'm not clicking on that because it's RED and dangerous'.

But what red might do is appeal to the subconscious to defer to the conscious mind in order to asses the situation for actual danger before continuing. The conscious analysis of a red submit button says "that's fine, it's just a submit button, it's not dangerous" or "it's ok, that's clearly just the brand colour".

This surfacing of a situation to the conscious is an effective 'stop and think' step, the outcome of which is 'it's ok to proceed'. All the time, your subconscious is trying to process all the information you see, only deferring to the conscious when an automatic (instinctive or gut) reaction can't be made.

The 'stop and think' step, paired with a positive assessment of the situation can be a more progressive step than a subconscious ambivalence.

So yes, red probably makes a good primary button colour.

However, if the CTAs on a page are such that they need to be compared for the best option, or for one that least likely leads to a loss, or that fights against one of hundreds of other cognitive biases, then the conscious mind is going to actually have to make a decision - not just to vett the content, but to resolve conflicts. That's when we get a bit confused. That's when people give up and avoid making a decision at all.

So to clarify - red makes a good primary button colour in isolation.

Start mixing it in with other colours in a similar context - even between pages - in a way that has no clear pattern or reasoning, and red will start to lose it's effectiveness.


A curious thing happened at the end of writing this answer. I had in mind pictures of deep red buttons. I went to click on 'Post Your Answer' and stopped suddenly because I was expecting the button to be red! Had it been red I might have clicked it straight away because it was what I was expecting. This is a great example of the subconscious quickly learning what's ok, what's expected, whats normal right now, and what stands out as unexpected based on recent activity.

Red makes a good primary button colour in isolation and providing that the user has not recently been given the opportunity to associate red with something negative, or to associate another colour as the positive.

2

The opinions are mixed on this. Some studies show that red buttons can in fact increase conversion. Yet there's also research out there that says otherwise. The main takeaway point is: it doesn't matter. As long as you don't use both next to each other simultaneously, it will make no difference. As soon as you see both at once, you'll start making the red=danger, green=good connection.

Conversion strength seems to not be based on color itself, but on color contrast. The CTA will need to stand out. That's why red scored better results in the below example.

red vs green

More here: https://www.sitepoint.com/button-ux-red-green/

1

Consistency is the key. Red buttons are OK as action buttons as long as the style is consistent throughout the experience. There's a small price to pay for swimming against the current (red warning buttons): they will have to find another way to amplify warning color styles (ie black text on orange).

User testing should verify if using Red buttons help or hinder the user. Hopefully, user testing can verify positive results before the site goes live and not after the fact.

Alternately, if all-the-world uses the same color conventions -- I suppose I would be less inspired by the lack of diversity. IMO, I welcome the effort to promote the brand over blindly following universally color styles.

  • 1
    I agree with you, but consistency is the problem here. For example, you have red as your brand primary color and use red for your CTAs. Imagine you have a toolbar with the following buttons: Save, Cancel and Unsubscribe. Wouldn't it be a problem to have your "Save" button in red (because it's a primary action) and then again the "Unsubscribe" button in red (because it's a "negative" action)? – Javier Viola Sep 20 '17 at 15:57
  • You're correct, @Javier. That is why my 3rd sentence suggests to find ANOTHER color for your "negative" actions. Using all the same colors would slow down the UX as viewers try to decipher buttons and colors. Hopefully, someday, there will be a UX Police who can arrest designers on sight? – jhurley Sep 20 '17 at 16:21
1

Lot of a solid answers here already. Red buttons are usually associated with a negative (or dangerous) effect, however, if that is your brand's color, it can be used for primary CTAs.

Keep in mind, it still needs to make sense above all else. Don't pair a green button next to a red button if the red button is the positive action you want the user to take - instead, use a neutral colors. Another suitable option here is to introduce ghost buttons.

I just went to youtube and pulled this (as you can see, they actually use blue):

enter image description here

1

First of all, remember that red -as all colors- comes in different shades and degrees.

There are cases where Red is used as a meaningful color to certain situations. Red in UI design yes has been known as danger, warning, alert most used color. However, Red also expresses love, passion, affection and power. Red roses, Red dress, Valentine...etc. It is an emotional color.

I saw it used for situations related to tragedies. One example is to use the text "Send Love" on a red button to replace the word "Donate" on a green button. When I saw it, yes it alerted me (for all the right reasons), at the same time it related so much to the situation, and Encouraged me to click on it not refrain from doing so. So in that specific situation I found Red suits the situation more than i.e. Green!

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.