logo

Colour Coded Websites

You all know I love a good analogy, right. Well, here's one I picked up while working with Andy Budd of Clearleft in his role as consultant. The client was in to the idea of colour-coding each section of their web application. Here's what Andy had to say on the matter:

The whole colour thing is like asking an interior designer to paint each room in your house a different colour so you always know what room you are in. It sounds good in theory, but in practice it's the bed that tells you that you're in the bedroom and the bath that tells you that you're in the bathroom, not the colour of the walls, which you probably won't even notice and definitely won't remember. It's at best pointless and at worst confusing and distracting.

It's a convincing argument, which won over both myself and the client. The application never did get colour coded sections. Normally I would have simply done as the client asked in cases like this. From now on I'll maybe put on my consultant hat and try to convince them otherwise.

Comments

  1. Not to mention that people with poor/no color vision would not pick up on your color coding at all! Color blindness (especially red-green) is surprisingly common.

    Sean

  2. I'd beg to differ on Andy Budd's content.

    >>not the colour of the walls, which you probably won't even notice and definitely won't remember.

    Every wall is a different color in my house, and it's one of my guests favorite features. From the moment they walk in they comment on how much the color adds.

    The bedroom is a soothing wedgewood blue. The office is a bright, refreshing melon, etc.

    It gets noticed. It is everything to the way visitors feel about the house, and, to stick with a website analogy, it keeps them coming back. :-)

    It's a great point about color-blind people, though. I had never thought of that.

  3. This site {Link} (Slovenian news site) uses different colours for different site content. There is yellow background for yellow journalism, erotic themes are pink and red, cinema news use grey and other sections (world, economy, IT...) have a neutral blue. I think it adds a nice touch to a site that has a lot of content and covers a broad range of themes. I must say I like it, and it is not at all pointless as Andy said. Still, everything depends on site and it's content and since we don't know what you and Clearleft are up to maybe Andy has a point.

    • avatar
    • Richard C
    • Tue 25 Apr 2006 08:22 AM

    Another site that uses colour-coded sections is The Register - {Link}

    Personally, I find colour-code sections a little bit distracting - gives me the "am I on the same website or have I gone to another site?" feeling.

    Now, having different colour walls in your house is entirely another matter/issue!

    • avatar
    • Jake
    • Tue 25 Apr 2006 08:28 AM

    Maybe the house room colour thing was a bad choice for the analogy. Sure, all rooms should have different colours. There's nothing more boring than a house where all rooms are magnolia.

    In a house though the colour-scheme isn't designed as a navigational aid for the visitor. It's merely to make it look nice and add variety. If this is the only reason to add different colours to a website - to make it look nice - then it's probably the wrong reason.

    There's seldom a good argument for colour coding different parts of a website. Unless maybe when they are truly distinct areas where it's important the users knows they are somewhere else.

  4. True, very true! However, whose to say that the only reason you *would* color code each section of a website just for navigation aid only?

    Being one who absolutely thrives on color, I can definately also see it for aesthetic reasons, provided:

    1. The navigation is clear enough regardless;

    2. The site design/brand/look and feel is clean enough that a color change doesn't make the reader feel they have been taken somewhere else.

    Those are pretty strong previsions, though. I think any site that could actually pull it off *deserves* to. :-D

  5. The second Lesson is written in the fourth chapter of the Book of Jakob, beginning at the sixteenth verse:

    Not to mention that it kind of kills the all-of-a-piece feel. In a house, for example, and barring some form of dimentia, one can easily determine whether or not one is still in the same building by casting one's thoughts back a few moments and asking oneself, "did I go outside?"

    One doesn't have that luxury on the web. Any given link can lead just about anywhere, and on complex corporate sites one might land on a different server or indeed in a different domain and still be on the "same" site. Consistency is a very reassuring key (and not merely the hobgoblin of little minds -- that only applies to the foolish variety). A user should not have to look for a logo (something they've trained themselves to ignore, for the most part) to figure out where they are.

    So if there is a sound reason for colour-coding, it should be reflected as the smallest possible change to an overall page design, such as the colour of rules in the "content block", while everything else stays as close to the "master" as possible (given the function of the page). Unless you're changing your brand (and that can certainly happen), then there's nothing to gain by wholesale changing of colours except a flash of "where am I now" in the users' minds. Remember -- regular folks are used to being sent on wild goose chases, and you don't want to give them that feeling on your site.

    Here endeth the lesson.

    • avatar
    • Mr Colour
    • Tue 25 Apr 2006 10:08 AM

    Learn how to spell colour you yanky boys :-)

    • avatar
    • CJ
    • Wed 26 Apr 2006 03:45 AM

    Whilst I wouldn't tend to change colour too much between sections I imagine it could be OK, as long as it's not really drastic and doesn't break away from the site look and feel. Going from white on black to black on white, or yellow on blue would be a bit over the top. Subtle colour changes I think you could get away with. People should know they are on a particular site by the way it's laid out. Although you use the analogy "the bed tells you it's a bedroom", on a website, how much difference is there between sections?? Not as much as the difference in house rooms:

    Bedroom = bed

    Kitchen = cooker

    Living room = sofa

    etc.

    Section 1 = text & pictures

    Section 2 = text & pictures

    Section 3 = text & pictures

    etc.

    The text and pictures will obviously tell the user where they are, but a subtle change of something I think might lend to the experience.

    • avatar
    • Jake
    • Wed 26 Apr 2006 03:59 AM

    CJ. There's usually something about each section of a website that differentiates it from the others to the user.

    For example, consider a website/intranet where there are sections called "my mail", events, downloads, news etc. If you're reading a news item it's obvious where you are. If you reading mail it's also obvious which section you're in. And so on. The bed=bedroom rule works for websites too.

    • avatar
    • CJ
    • Wed 26 Apr 2006 04:49 AM

    Jake,

    Possibly! Obviously there's something different about the content of each section, and if it *is* obvious then you may not need to differentiate between sections. Even if it isn't obvious you may not need to differentiate. All depends on the requirements.

    However, take this site for example. Click the menu through Blog, Articles, Sandbox, Feedback. I know you've just clicked the link, so you know what section you're in, but apart from Feedback, each section is virtually identical in appearance. Am I in Articles or Sandbox? There's no obvious "bed in the bedroom" to say where you are. Now say you had a little newspaper icon next to each article in that section, and a little sandcastle icon in the sandbox section that WOULD make it different and obvious what you were looking at... or perhaps you change the background colour to lemonchiffon or something in the sandbox one.

    By the way, I'm not in favour either way. Horses for courses and I can understand both options - but the argument you're making I don't think is quite right.

    • avatar
    • Jake
    • Wed 26 Apr 2006 06:26 AM

    CJ. Imagine on this site that anything in the sandbox was red and all blogs entries were green. What use would that be? It would only be of use if you knew, understood and remembered this convention each time you visited. Imagine every website you went to had its own - different - convention for colour coding each section. Life's complicated enough ... ;-)

    • avatar
    • Jake
    • Wed 26 Apr 2006 06:28 AM

    BTW: Sections on this site are of course highlighted by means of the "tab" at the top of each page. This to me is an adequate and accepted means of showing the current section to the user.

  6. Depends on if you have a 'bed' in each 'room'. Then you would know your in a bedroom but not which one.

    So out of the house and back to the interface... the contents should tell you where you are and who it's for... but the colour should assist you in recognising which sections are for you on a repeat basis.

    I think that minimal Color coding (or similar consistent identifier) can be of benefit to assist the user with selecting the areas of a form / page that are for them.

    (of course provided that they are not colour blind! and you don't use more than a handful of colours).

    • avatar
    • Opps!
    • Wed 26 Apr 2006 07:55 AM

    on a different note, has IBM given you permission to publish their help files on the WEB ?

    {Link}

  7. Another issue with color (colour) coded sites is that roughly 10% of the world population has some sort of color-blindness. Many forms of color-blindness blend different colors into a blurry haze.

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Tue 25 Apr 2006

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content