1

I should start by mentioning that I am looking for studies or general observations about using the color red. I am less interested in critique about the design. The specific concern that I have is if red alerts the user that they are doing something wrong or to stop. Red is typically used as an alert. So I am wondering how red impacts the user experience by perhaps causing them to hesitate.

The reason I am even using red is because it corresponds with our brand identity and I have to use red already as the color for links.

Here are my current button prototypes

Default

default button state

Hover

hover button state

So the other option I am considering is to maintain the font color and also use that for the border

[Alternative] hover

enter image description here

Of course downloads might not really be secondary but tertiary calls-to-action which might change how we approach this.

  • Have you tested with orange? – Danny Varod Apr 28 '14 at 20:40
  • @DannyVarod I have not but that would be outside of the prescribed color palette. However I agree that it would normally be a great choice. – JGallardo Apr 28 '14 at 20:52
2

Hubspot says Red beats Green

http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx

They have pretty extensive data to back it up, and my personal experience shows the same.

  • This makes sense, but I think I may have asked the wrong question. You did provide what was requested but I think that I should have focused on red for primary colors. In my case I was using this color scheme for a download button. – JGallardo Apr 29 '14 at 4:19
  • Then you should post a mockup of the whole page. Hard to say if you don't show the context. – AutomaticLuke Jul 3 '14 at 6:17
1

I certainly do not have studies to back me up as you are requesting. However I do have some feedback based on experiences with products launched.

In many cases, it is absolutely fine to use your brand's colors in a call to action. As long as the red isn't any different than the red found throughout the website. The key is to use consistency. Often when you use color in your call to actions, you will use a neutral color like grey as a cancel button.

In your case, if you change the button color to be outlined in red as the hover state, you will likely confuse the user into thinking there is an error. Different hover states can often be achieved by either using a darker shade or playing with shadows. Rarely should you use a different color all together (grey to red).

There are certainly times where the use of red could become confusing and as you mentioned signal that there is an error. You will have to play with it. As long as you are consistent with your design though, users should pick up on what you are doing.

I think a great example for you to use would be Target. They use red, however they add a gradient to it to be less alarming.

  • Ok good point about the consistency. I am leaning towards the alternative button choice with #444 rather than red. Because as you point out, it almost looks like there is an error. – JGallardo Apr 28 '14 at 20:33
1

Red really isn't the same as any other colour when it comes to psychology. Red is both a warning and a call to attention, exciting and dangerous. It may draw the user's attention but it may not give them the confidence to click a button.

With any ui, you want the user to navigate with confidence, they shouldn't have to think too hard about whether it is safe to click a button. A better strategy for a download call to action is using a downward pointing arrow icon beside the button text.

If the client / business really wants to stick to red for brand identity, it is definitely worth doing some usability testing to see if it will be a problem. If it is an issue, you can go back to them with hard evidence.

  • I agree on the downward arrow and I went ahead and implemented that. – JGallardo Apr 29 '14 at 4:20

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.