Webreakstuff's blog on design, development and strategy. Click here to subscribe.

Stop being crazy: make proper use of colors

Fred Oliveira on February 13, 2006

Imagine if this article was written in red. You would hate it. In fact, you’d be so pissed off about it that you’d stop reading. Red means danger, in traffic lights and brake lights. Animals use red to issue warnings and announce their mating season. Red is used to provoke erotic feelings. Red is the color of your blood. Most of all, red means STOP or ERROR.

Technorati using red

So, it is a shock to me when companies use red in their websites when displaying success messages (see Technorati screenshots) or in search boxes (see YouTube screenshots). Technorati should be using green, if any color, to show when I’ve just made something right (or when they have, rather), and why should YouTube be coloring my search term in red? Is that supposed to mean I won’t get any results?

Youtube using red

Stop being crazy: mind your use of colors in designing web applications. Remember humans associate color with feelings and states of mind - you don’t want to provoke anxiety or stress when showing something went right, do you?

Disclaimer: Even though I’m pointing mistakes in two public websites, the goal is not to mock their design (to be fair, they’re both good) but to point out some (unfortunately common) mistakes in use of color. I use both Technorati and Youtube, know people at both companies, and love their products - you should too. And if you’re really wondering why on earth someone would search for American Idol on YouTube, here’s the explanation.


Comments on this post

Caspar

Hold on. Please mind any cultural differences. In our western world, red does mean: “Excitement, danger, love, passion, stop, Christmas (with green)”. But for the Chinese: “Good luck, celebration, summoning”. While green for the Chinese: “Green hats indicate a man’s wife is cheating on him, exorcism”

Or so this article tells me:
http://webdesign.about.com/od/color/a/bl_colorculture.htm
http://webdesign.about.com/od/color/a/aa072604.htm

Should we design audience/culture specific stylesheets?

Alexandre Rocha

Usability to me means good sense. That´s what these people don´t have.

Jase Wells

My bank is an offender as well — after making a successful money transfer, the confirmation message is shown in red. I’m always thinking, “What? Did I make a mistake?”

On a related topic: Make proper use of icons, too. I’ve seen a “success” message shown with one of those yellow alert-type icons. Oops! (http://jasewells.com/blog/post/473)

Tom Markiewicz

Excellent points. Color has meaning and this is especially true when conventions have been established for errors and warning notices (red!)

Gaston

Leave design to designers please, and start developing usefull things, the cloud tag is the silliest thing i´ve seen in the last year

Drew

Heh, when I saw the title in my aggregator I thought it said “make proper use of colons.” Which would be apropos, given the colon mis-use in the second screenshot. Oops.

Fred

Drew: you’re right, my bad. Thanks for the heads up :)

Gaston: I’m sorry but I do have to difer from your opinion about tag clouds. They’ve proven to be (when used adequately) extremely powerful information visualization tools. By looking at a tag cloud you get immediate relevance and activity feedback, which is extremely valuable information.

Again, this is all assuming they’ve been used properly.

Tinus

Yes, Tag Clouds look silly from time to time. But I asked my visitors if I should get rid of the whole thing and they thought I was crazy. They loved it very much and most visitors used it every visit.

If you’re in doubt: try Google Analytics’ Site Overlay tool.

Nick Jones

I have never understood why in the U.S.A. the color red is used for “Exit” signs! (When red usually means Stop! or Don’t Go!) In Europe the sign is green (and usually an icon of a guy running to a door) The Exit Sign use of red is a serious offence to me, unless someone can explain any different.

Derek Powazek

So what does the giant red starburst at the top of this page mean? Stop? Bad? Error?

You’re right that color conveys meaning, of course. But at other people here have pointed out, the meanings are not universal.

In the end, I chose to use red for those status messages at Technorati for exactly the same reason you’re noticing it. I didn’t want those status messages to be missed. Looks like it worked.

Fred

Derek: the starburst is a notice, meant to call upon the attention of the viewer - but is also easy to ignore should you be a repeating visitor.

Bold, bigger, green text (heck, give it another one of the other great illustrations on the page) would have conveyed the right meaning for me (and apparently the rest of the people who look). The red doesn’t cut it. I look at it wondering if I’ve done anything wrong.

People don’t read unless they’re weirded out by something (like a red block of text). It follows that since the default message would be positive, people wouldn’t need to read anything, they’d assume everything was fine. Forcing them to read because the message is red causes frustration.

Derek

Do as I say, not as I do, huh? ;-)

I agree with you that color conveys meaning. But green text in Technorati already has a meaning: it’s one of our standard internal link colors. So no green for notification text.

Still, you’re absolutely right that there are other ways of drawing attention, and we’re always looking at ways to make Technorati better. Thanks for your feedback.

Delphine

Wow ! Fascinating how we feel and percieve so much about colors.. Does any one here have an idea where to find a scientific study on this item, panel orientated ?
Thanks

Xavez

I found your article quite interesting. The critique about colour meanings being different in every culture is not completely justified though (comments). Everyone’s blood is red. In nature, strong colors like bright red and yellow mean danger (e.g. http://www.rjc1.demon.co.uk/images/panama%20fauna/toxictreefrog1.jpg). Every stop-light/sign all over the world is red. Every single warning sign is in yellow(orange)/black or red. Colours with non-dangerous connotation are for instance green, brown and most shades of blue. High contrast use of colours is often considered as a warning too (yellow on black, red on black, bright blue on red etcetera).

Though I agree cultural differences exist, culture still has a long way to go before it can completely erase all of the links with our beast-like ancestors and the connotation they gave to certain colours.

@Delphine: Wikipedia is a good place to start: http://en.wikipedia.org/wiki/Color_psychology has a good overview on Colour Psychology

voip

pagine piuttosto informative, piacevoli =)

Something to say?