Color meanings with regard to buttons: Opinions/research?

11 Nov 2011 - 11:19am
2 years ago
5 replies
1820 reads
tdellaringa
2006

One problem that has continually surfaced in my recent work at my place of employment has been button colors. Specifically, little or no thought goes into the meaning of what color is being used for the button in regard to its functionality. Even worse, there is often no thought given to a consistent treatment of buttons across an interface.

So for example, I'll see save buttons that are red, and I'll see the same color being used for a save, change and exit button.

As I'm sure many of you know, it's one thing to simply try and explain such a thing to people, and another to point to some solid research or writing to back it up. I often feel that without something behind what I am saying, I get the "well that's just your opinion" reaction - no matter how correct my observation.

I'm currently trying to modify an interface that is causing our customers a lot of problems, and a big issue to me is the buttons and their colors. So with that, I'm wondering if anyone has any input, links, research or opinions to share on the issue of what types of color to use for what types of buttons. I certainly have my own opinions, but I would love to hear yours and see what references (if any) you might have.

I did find these three interesting pages:

First, this MS WIndows article on MSDN in regard to color in their OS:
http://msdn.microsoft.com/en-us/library/windows/desktop/aa511283.aspx (scroll down to "Color Meaning")

A nice little blog post on Green vs. Red (a big issue in our interface)
http://blog.kissmetrics.com/communicating-color-efficiently/

A nice blog post by Lee Munroe on Associating Colour with Interactions:
http://www.leemunroe.com/interaction-colour-associations/

Looking forward to your input.

Comments

11 Nov 2011 - 1:26pm
krystaylor
2010

Color is a tricky subject.  I'll be very honest; it's a subjective subject.

There are only a couple things about color that are truly indisputable facts.  First of all, color is culturally influenced.  Here in the US, green means go and red means stop.  In China, red means wealth and luck. So if you are trying to make a case for usage of color, share research on what color means to the primary culture that is going to use your product.

Second is that contrast plays a strong role in usability.  So, a button color which blends too much with the app around it will not stand out.  

Beyond that, most things are subjective. You can find a research study to support just about any color you want to use as being the right color.  Just google "[color] meaning" or "[color] preference" or "[color] psychology".  Your best bet is to try to slowly and systematically educate your colleagues on color theory, because once they understand color theory they'll have a vocabulary to work with.  

I do recommend this article on saturation's relationship to user efficiency - it's well written and laymen seem to respond well to it.  http://uxmovement.com/color/how-color-saturation-affects-user-efficiency/

I'd say though, that far more important than what color your buttons are, is that it's used consistently.  Maybe I'm a heretic, but red is fine for Save if Save and other positive actions are always red.  Consistency matters WAY more than specific color, because even if it's non-intuitive to start, the user can at least file away in their mind "Oh, on that website/in that app, red means go."  You're not helping your user as much as you could, but at least you're not completely blocking them from learning your app.

Hope this helps.  Sorry there's no black-and-white answer (pun intended), but there never is.  :>

14 Nov 2011 - 4:05am
krystaylor
2010

As Krys said consistency is very important. I would add that you should consider it not only throughout your application but also in the more wide ecosystem of applications that your customers are using. This is easier if you know exactly who your users are and can check their PC but even if your application has a more wide and diverse base of users you could conduct a survey or think about their daily work-flow and imagine what other applications they could be using: Open Office, Basecamp, a well known accounting system, ... Your application, which is the new one for your customers, should try to use similar colors with similar meaning if that's not possible at least they should not have opposite meanings as "green = save" in one application and "green = cancel" in your application, as this causes a great cognitive effort and can easily lead to errors. This kind of consideration is especially true if yours or other applications in the work-flow are mission critical.

m2c

Nicola De Franceschi


Il 11/11/2011 19.55, krystaylor ha scritto:

Color is a tricky subject.  I'll be very honest; it's a subjective subject.

There are only a couple things about color that are truly indisputable facts.  First of all, color is culturally influenced.  Here in the US, green means go and red means stop.  In China, red means wealth and luck. So if you are trying to make a case for usage of color, share research on what color means to the primary culture that is going to use your product.

Second is that contrast plays a strong role in usability.  So, a button color which blends too much with the app around it will not stand out.  

Beyond that, most things are subjective. You can find a research study to support just about any color you want to use as being the right color.  Just google "[color] meaning" or "[color] preference" or "[color] psychology".  Your best bet is to try to slowly and systematically educate your colleagues on color theory, because once they understand color theory they'll have a vocabulary to work with.  

I do recommend this article on saturation's relationship to user efficiency - it's well written and laymen seem to respond well to it.  http://uxmovement.com/color/how-color-saturation-affects-user-efficiency/

I'd say though, that far more important than what color your buttons are, is that it's used consistently.  Maybe I'm a heretic, but red is fine for Save if Save and other positive actions are always red.  Consistency matters WAY more than specific color, because even if it's non-intuitive to start, the user can at least file away in their mind "Oh, on that website/in that app, red means go."  You're not helping your user as much as you could, but at least you're not completely blocking them from learning your app.

Hope this helps.  Sorry there's no black-and-white answer (pun intended), but there never is.  :>

(((Please leave
14 Nov 2011 - 11:26am
tdellaringa
2006

Thanks for the input, and that's a good article on saturation of color. I certainly agree with the consistency aspect, as I mentioned in my original post. That was one of the first things I tackled.

In regard to their ecosystem, that's something I cannot measure. The interface goes in front of customers who set up our slot machines in casinos all over the world. They are all kind of people with all kinds of backgrounds and experiences. And they do this for multiple vendors, who all have their own interfaces, of which I've never seen!

An interesting challenge, to say the least :)

16 Nov 2011 - 1:00pm
Tania Schlatter
2007

Here are the steps I usually go through to define buttons for an application. I create a set of button styles for an application, similar to creating a typographic hierarchy. When there is a set of styles with a rationale and a clearly defined visual hierarchy, buttons are consistent and not subjective. 

  • I review the application and/or sketch/ and/or wireframe to get a sense of the number of button types I am going to have – generally 3-4. Types are based on what the buttons do – submit, submit and move the user to a different page, just move the user to a different page, open a closed area, etc.

 

  • I decide on the hierarchy for the types – which should be most important/visually prominent, which should be the least. Again, this is based on the importance of the button function and its importance relative to the other button actions. 

 

  • I think about what colors I have to work with. First I think about any existing brand attributes that need to be conveyed. If there are colors associated with the brand, I think about if they are appropriate to use for buttons. I decide which of the button types need to contrast with the rest of the application, and how much. I decide how much I need to buttons to contrast with the other button styles to look distinct. I select colors based brand and how much contrast I need. The goal is to define a visual hieracy for the set of buttons that reflects and conveys the relative importance of the button types. 

 

  • I apply the button styles consistently. This can be a back and forth process, and it can take a few rounds to make definitive decisions about which button action should get which style. Often I need to go back and adjust the color or type or shape/treatment of the styles to make sure they read as intended.   

 

Hope this helps,
Tania

 

16 Nov 2011 - 2:39pm
tdellaringa
2006

Thanks for the input Tania :)

Syndicate content Get the feed