Color meanings with regard to buttons: Opinions/research?
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.
Get the feed
Comments
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. :>
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:
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 :)
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.
Thanks for the input Tania :)