Any best practices with feedback colours?

Question

I have a few that I think are correct. These are background colours for messages.

• ERROR: red;
• INFO: blue;
• SUCCESS: green;
• NOT IMPORTANT INFO: yellow

Have I got the blue and yellow around the wrong way? Any hex values that are a de facto standard for these?

I am curious considering web development, but I think the answers will be agnostic.

Here is an interesting thought (I'm sure I've read about it in an article). What colours would the errors be on Target's website, considering all their branding is red?

Answer 1

These are pretty much straightforward. For non-important info, I don't if a yellow would be good since it's usually interpreted as "warning" or "look-here!".

I would be inclined to go for a gray or maybe a tan colour (like Windows default tan colour). A non-alertful colour.

Answer 2

A word of warning, Red/Green color-blindness is the most common form. So creating a UI that requires the user to distinguish them might get you into trouble.

Too bad no one thought about this when they developed traffic lights.

Update: Found this interesting article that gives you a workaround and explains better how red-green color blind people actually perceive these colors. Apparently by creating differences in saturation and brightness they CAN learn to distinguish the colors.

Its a good read: "Red-green-color blindness doesn't mean you cant distinguish red from"

Answer 3

There are no standards for hex values to use. In most cases you will want to consider the choice in the context of the site or application. Try a range and you'll find one that sticks.

Colour can mean different things in different countries so you may want to consider alternatives if you need to support users in a country like China.

Answer 4

Yellow usually means warning. Less important info might be gray text without any special icon or background color.

But ultimately it needs to make sense to your users.

Answer 5

It's important to understand there are no 'right' colors.

For instance, this could be 'correct' within an existing interface that is designed in a particular way:

• ERROR: yellow/black;
• INFO: grey;
• SUCCESS: blue;
• NOT IMPORTANT INFO: beige

So this kind of question makes designers wince:

"Have I got the blue and yellow around the wrong way? Any hex values that are a de facto standard for these?"

At a basic level, within an existing design structure that is all blue, another panel that pops up in blue will be easily missed. If you are producing something within a brand color scheme and then force a 'correct' hierarchy of colors without consulting a designer, you won't be popular.

But UI design is far more complex than this. For instance, if a red message pops up every time you load a page, you'll start to ignore red messages because of their frequency.

It wouldn't hurt to read something entry-level like Don't Make me Think - http://www.amazon.co.uk/Dont-Make-Think-Usability-Circle-Com/dp/0789723107, even if you're not really going to be doing this kind of decision-making often because it will help you understand the people who do.