Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I was wondering what research I can find on what colors to use for primary 'call-to-action' buttons. I know the size of the button and the contrast it has in relation to its background play a big part. I see blue and orange used a lot, but im wondering where I can find more information on this that will help determine the color of the primary buttons in a site design...

share|improve this question
3  
Which countr(ies) / culture would be the main target audience for this site ? –  PhillipW Nov 18 '11 at 22:01
add comment

2 Answers

up vote 5 down vote accepted

Good question! I'm dealing with this issue myself with submit, cancel, and exit buttons on a page.

Here is The Visual Weight of Primary and Secondary Action Buttons for the visual weight of primary and secondary buttons.

Here is Primary & Secondary Actions with a longer list at the bottom.

Here is Working with Visual Weight in Your Designs that addresses colors specifically, although it only lists 5.

I found a book online: Graphic Design: the new basics. While it gives very good overall design tips, the section on color helped me understand the terms and the basics.

I recently found this section on color at MS Dev Center - Windows UX Interaction Guidelines: Color that talks about Microsofts approach to UX. It has a very brief section on what basic colors mean to a user that I found interesting.

Here is a basic summary of what I found:

  • Make the primary action button stand out. Use primary and secondary colors to coinside with the primary secondary buttons or use a stronger saturation color for the primary and the secondary buttons more muted. Soft gray color is a good way to show muted secondary buttons.
  • For other options besides color, you can use: contrast, lightness/darkness, size, density, complexity in the button design itself.
  • Use links as special opposite actions to avoid confusion.
  • Try to avoid secondary buttons when possible.

Last of all here is a basic chart for color meaning:

enter image description here

share|improve this answer
3  
Please provide a summary of what each link does. The reason being a link can go down and then people who see this answer will have no idea what that link was about. –  Mervin Johnsingh Mar 4 '13 at 16:41
3  
Can you please summarize the findings in these links? All I see is a bunch of places to go in this answer, but not any actual content in the actual answer. –  Matt Rockwell Mar 4 '13 at 17:19
    
Matt & Mervin, thanks for the comments so I could improve my answer. –  James Drinkard Mar 4 '13 at 20:34
add comment

The choice of color for primary button is also dependent on the color palette your interface is using. Choose the color that is not the dominant color, yet it offers sufficient saturation and contrast to stand out from other elements. Primary button color should be used sparingly- use it for emphasizing or highlighting elements, not as the dominating color.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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