About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

|

To Hell with Color Coding

By color coding I usually mean assigning a specific color to a section or sub-section
of a web site (I realize that may be a bit of a narrow definition, but bear with
me here.) Mention color coding and I will, unsurprisingly, reply amazon. Now
before I go on let me state that color coding has both positive and negative
implications, but from this posts title it’s pretty obvious I think there’s
more wrong to color coding than good.

Good?

Color in general is an important facet of any web site. Different colors have
different connotations: red for warning, green for okay (simple example.) To seek attention designers
might use vibrant and bright colors, while for subtle communication more mid-toned
and pastel colors would be preferred. Colors are known to work subconsciously.
The thoughtful use of color can increase the speed of comprehension for the
user and produce instantaneous associations that are most easily recalled.

In color coding association is the important factor. Steve Krug (in his book “Don’t Make Me Think”) notes that
color coding sections is a very good idea — “as long as you don’t
count on everyone noticing.” Evidently color-blind people will have problems
detecting some color distinctions. Moreover from what Steve Krug observed “a
much larger percentage just are not aware of color coding in any useful way.”
So far I would say color coding is all good — it’s an additional
cue that does no harm, right?

Wrong!

Color adds value and meaning to communication, giving life to the visual message,
intensifying it, making it more identifiable and important. Color plays in important
part in daily life, no one will argue that. People associate themselves with
a particular color, or palette of colors. Color is personality. So if color
is so significant, in life but yet also on web sites, why waste it on color
coding? Personally I think color can be far more powerful in branding.

As I mentioned earlier color can produce instantaneous associations which users
remember subconsciously. But why not use such associations for the brand itself,
rather than sections of a web site? I think branding is far more important than
color coding to the success of a product, service or business. I would much
rather have customers say “Hey, look, that’s company X. I remember
that orange color” than, for example “Hey, that product is in section
Y, the green one. But, ermm, what was that company again?” I think color
has more value in an overall experience than in individual sections. Additionally I think a good interface does not need color coding to help users find their way around or determine their current location. Sidenote: an interesting research would be to user test two versions of the same interface: one full color and one grayscale. The outcome might be predictable, but how significant is the correlation?

Catch-22…

Furthermore, for color coding to be effective you need to use neutral shades
for other elements which are not going to be color coded. You don’t want
different items fighting for attention all the time — or have deplorable color combinations. So why is amazon color
coding sections? First they have such a strong brand and high recognition that
they don’t need to be associated with a color. Only a few brands are in
such a luxurious position, especially online — and amazon is one of them. Second, while amazon is one of the best web sites around — in terms of user experience —
on the internet today, it does not have style. Does it need style? Well, that
is of course a whole different story. As someone who values aesthetics highly
I would say yes, but even I have to admit that at the end of the day I just
want to order my product and have it shipped to my home as fast as possible.

To color code or not to color code, that is the question. I still maintain
my opinion that color has far more impact if used for the overall experience,
rather than sections. Color is a very powerful tool in marketing, branding and
design — use it wisely and effectively. That said, what’s your take
on the subject? To hell with color coding?

This item was posted by dhilhorst on Monday, April 12th, 2004.

Categories:

You can follow comments on this item via the RSS 2.0 feed.

Comments are closed.

14 comments on “To Hell with Color Coding”

  1. Posted by Owen on Monday, April 12th, 2004.

    Funny, I just added such colour coding to CSS I’m working on. There are seven sections but I don’t think there are seven appropriate colours. At this point it looks like more trouble than it’s worth, both from implementation and usability standpoints.

  2. Posted by Keith on Monday, April 12th, 2004.

    I think it really depends, as these things do, on the implementation. If you have 3 or 4 sections and you color code them with colors that tie into your brand and are used in such a manner as to accentuate that brand, would that not be a good thing?

    Color coding for the sake of color coding might not be a good idea. I’m quite sure that color coding has no significant usability value, so if it’s not done with purpose, what’s the point?

    Then again, what if the brand isn’t a concern? Here is another exception: We use 6 colors to code the different sections of our intranet down at the hospital. At one point we talked about taking them away and both our stakeholders and visitors had a bit of a fit. Why would that be?

    I guess I agree with you to a degree, but it depends on the situation and the implementation. There can be times when color coding is just fine and if done well and with purpose could actually tie and and reinforce the brand.

    For the most part though your point is well taken.

  3. Posted by David House on Monday, April 12th, 2004.

    [Just a quick comment: the word you’re looking for is Connotation, no Co-notation.]

    Personally, I totally agree. Brand through colour can be especially strong; just think for a second. What springs to mind when someone mentions ‘Ford’? Maybe, ‘Cars’, ‘Designed for living, enigineered to last’, and ‘Blue’. Blue: it’s all over the Ford brand; their adverts, cars, logo, posters & billboards etc….

  4. Posted by Tanny O'Haley on Monday, April 12th, 2004.

    Re: Keith at comment #2

    “At one point we talked about taking them away and both our stakeholders and visitors had a bit of a fit. Why would that be?”

    Because like it or not, users become accustomed to a design and for most users, change is difficult. This is like the story I heard of eBay changing the background color from yellow to white. When eBay changed the color to white, there was an uproar. They put the background color back to yellow, then gradually changed the color to white. This time, no complaints. Users could not cope with a sudden change, but they could cope with a gradual change.

    This is like the myth of the frog that you put in a hot pan and it jumps out. But put the frog in cold water and slowly turn up the heat and you can cook the frog.

    Maybe your users needed a gradual change.

  5. Posted by Didier Hilhorst on Tuesday, April 13th, 2004.

    Keith: good comment. I’m not entirely against color coding as such, as you mention it really depends on implementation. But I think it’s easier to get it wrong than right (as is with so many things). Besides I’ve never tested color coding among a large group of users so I have no figures to back up my statements, unfortunately. Your hospital case is an interesting example. To some degree I’ll have to agree with Tanny: users do get accustomed to a design. Once users know how it works it gets harder to make changes.

    David: Thanks for noticing my spelling error. It should be fixed by now (note to self: check a dictionary first!)

  6. Posted by Paul Watson on Tuesday, April 13th, 2004.

    Bit OT but I keep hearing people say that Amazon is a great user experience yet I find it cluttered and unusable. The only way I get into buying anything from Amazon is via a direct Google search result and then straight into my basket. Trying to find things starting at their front-page ends up with me going somewhere else.

    Are there any articles which have reviewed Amazon?

  7. Posted by Daniel on Thursday, April 15th, 2004.

    I can definitely appreciate, from an executional standpoint, how difficult a successful color coding implementation can be. As a user, I’m not sure I’ve ever noticed a poor implementation; but I can say that I have noticed effective implementation. Stopdesign is a premiere example.

  8. Posted by eric on Sunday, April 18th, 2004.

    Amazon’s color coding has never really served me as a user at all. It might be that I don’t frequent the site enough to have equated x color with y section, but I think in this case the content doesn’t justify color coding.

    I was playing with a portfolio site concept a while back that used 4 vertical panes of color, each expanding as it was clicked to show the entries for that section. The same effect couldn’t have been achieved without a color per section. Of course, I dropped the design, so there you go :]

  9. Posted by Bill Stocking on Sunday, April 18th, 2004.

    Useful discussion!

    I tried color coding our educational site with 4 different colors as backgrounds for the menus along with same colors for the header tags matching hover backgroud, etc.

    What a pain in the butt, updating 4 different style sheets every time I wanted to make some small change.

    I finally concluded it was probably more confusing than helpful as well as being too much work, (I know, I probably should have devided the style sheets up into color sheets and formatting sheets… at the time I didn’t know any better.)

  10. Posted by thomas on Monday, April 19th, 2004.

    When I was reading the first couple paragraphs of this article, I was thinking, “He’s right – it does take away from the overall brand impression. But what if you’re defining the brand elsewhere or with other means?” You’ve mentioned that somewhat (through your example of Amazon.com) but I feel if you’ve got something else that ties your site together (a good layout that remains constant, a nice logo that appears on every page, a stable navigation that ties the site together, etc., then color coding will not harm your site.

    But that’s only if you feel confident enough in your other form(s) of branding/consistency.

  11. Posted by Didier Hilhorst on Monday, April 19th, 2004.

    Thoughtful discussion going on here. Thomas raises an interesting point. Consistency is an important factor as far as user experience and branding is concerned. But it does not directly affect your choice to color code or not. Color coding can be succesful as long as it’s carried out with a certain logic. However, there’s indeed more to a brand than just color and those need to be accounted for too.

  12. Posted by Steven Woods on Monday, June 21st, 2004.

    Hi – I know this thread is archived now, but for an in-depth analysis of how colour-coding has transformed the BBC website, Google for “The Glass Wall” which is a PDF of the entire design and development process for said project.

    Well worth a glance.

  13. Posted by Carl Ross on Wednesday, June 30th, 2004.

    And this is my website.

    Carl Ross o

  14. Posted by Anne Burnett on Monday, August 2nd, 2004.

    As a UI Designer for web-based applications and someone very sensitive to visual stimuli, I have two points to make.

    First Point:

    In the web-based application arena I am consistently required to address 3 color-related issues. These are allowing customizable branding, drawing attention to dynamic content, and effective use of color for usability. The over-all colors need to be adaptive (generally meaning neutral) to accommodate branding customization. Neutral colors also address the need for the dynamic content to stand out. I often use gray text for labels, navigation and other static content for those reasons. Concerning the usability issue, color is necessary to bring attention to items that help the user identify disparate pieces of information, such as the page they are on, the sections within the page, or dynamic content. It is also necessary to have a palette accessible to draw attention to various types of alerts that require immediate attention. It is my strong opinion that color-coding sections always detracts from a quality user experience in web-based applications and that many of these points often apply, though not as strongly, to commercial or informational sites.

    Second Point:

    Being sensitive to visual clutter often makes it very difficult for me to find what I want in a site when many colors and shapes are vying for my attention, not to mention animated objects. For this reason, Amazon is very jarring to me. I believe that their implementation of color strongly detracts from the usability of the site. Not all people are as sensitive to color as myself (I’ve no idea what the breakdown is), but I do know that color does have an effect on everyone at some level. I generally abide by the principle that the objects on a page can be prioritized by importance and I apply color accordingly to aid in a visual hierarchy of attention.

    That said, I have seen some excellent web implementations of color coding to add a bit of interest, movement, and section differentiation. When color is blended with images and is only seen within sections it often works nicely. When it is applied with harsh contrast and all the colors are visible at once (as is the case with Amazon’s navigation) it instigates information overload. I believe it is most important to give special attention to the function of the product. For example, a site built for the entertainment industry will have vastly different visual stimulation requirements than one for a law firm.