Color Coding On The Web -- Your Take
February 23, 2005 | 
21 Comments
Summary: A casual discussion about color coding, branding and usability on the Web. Add your thoughts.
Last night I got an e-mail from one of my readers, Richard Doyle. He was curious to get our opinion on color coding for Web sites, specifically multiple internal sites. This is an issue that’s come up in various forms for me over the years so I thought it might make for an interesting discussion.
Richard’s situation is typical. He’s got multiple internal Web sites and applications and he’s wondering if there is any value to having multiple color schemes for his internal site. Or, would it be better (say for example with branding) to have a single, branded color scheme across all his sites?
There is no right answer here, but it’s a common discussion that comes up with stakeholders, so let’s talk about this.
Personally I feel if you’re talking about different sites within an intranet, say for different departments, there is little value in going with a unified color scheme, unless there is an extreme internal need to reinforce your brand.
The same goes with sections of an intranet. At Children’s we used different colors to delineate which section (clinical, administrative, etc.) the user is looking at and that works just fine. In fact the users really wanted this…but that’s a different story. We did something similar for the external site, although in that case we chose colors that directly aligned with our brand colors.
Having said that, I don’t think there is any value, at least in terms of usability, in color coding and in some cases it may dilute your brand. I do see how it may add subtle value to some people’s experience with your site, but I don’t think you should ever rely on color alone to convey important meaning—such as where you are in a site.
So, as with most things related to design for the Web—it depends on your audience, your goals, etc.
What do you think?
Filed under: Web Design
Comments
1. Magnus Hjelm said:
I have used a color coded intranet for two years now and I still have no clue which color is related to a certain section.
I am not saying it is bad to color code but I think it is a good idea to invistigate if it serves any purpose before doing it.
Then there is always the problem with content beloning to two or more sections. Which color should be used then?
Posted on February 23, 2005 12:17 PM | #
2. Dave P said:
Your timeliness never ceases to amaze me… we’re going through the same discussions at my organization.
IMHO, I do see a definate usibility benefit on larger sites, specifically where there are several differing but similar “rich client” experiences.
For example, if the intranet in question has sections for both internal and external markteting, colour coding the sections may help users who need to use similar web-applications (such as a mass emailing tool) from both sections.
(Wordy, but I think you can get my drift)
The hardest thing I’ve found however, is actually making the colour coding work while maintaining the brand and overall similar feel.
I’m really interested in seeing what all your other readers think on this one.
Posted on February 23, 2005 12:23 PM | #
3. Philip said:
I’d be more concerned that the structure of the sites is the same than that the colors matched up well as far as usability goes. When I look on a university website, I have a really hard time finding what I want because each department lays their page out differently. I would say it’s more important that structure/design is simalar than whether your colors are all the same or schemed.
Though I do find it harder at (again) a university site when everything is the same school colors, it makes me look for things in the same spot because I expect to be in the same site. But that is not the case, as said above, each department looks different and it’s more confusing.
So maybe this all goes to say that if you are going with a consistant layout, do what you please with colors. If your layout changes, but it’s really just subsections/subsites of the main one, change the colors so the user knows to refresh their mind and eyes on what/where to look.
Posted on February 23, 2005 01:06 PM | #
4. Sheldon Kotyk said:
Color is simply one of many different ways to draw attention to something. Unfortunately with color, you are creating an accessability issue as there are colorblind people out there. You also run the risk of someone with a grayscale monitor not noticing the difference between sections on a site.
However, if done properly it can be effective, just look at Wired.
Posted on February 23, 2005 01:08 PM | #
5. Sheldon Kotyk said:
Whoops, gotta check my example before posting. Wired dropped their color coding of different sections.
Posted on February 23, 2005 01:10 PM | #
6. john said:
Obviously, color coding only really benefits those who don’t have any visual impairments. But, I’m not going to say therefore you shouldn’t do it. I do think color coding does add a nice subtle touch to the website, even if some users don’t notice it. Just don’t spend too much time on it.
Posted on February 23, 2005 01:11 PM | #
7. Jason Marble said:
Well, first thing that poped into my mind was Scriv’s post about the Yahoo CSS Redesign, specifically his bit about adding a splash of color. He explains how color can help us identify specifc sections more easily. Yahoo does use different colors to signify the different searches when you click on images, video, and so on.
I have to agree with Magnus regarding the fact that some people tend not to ever memorize the relation of a color and section. Though, I do believe it can be helpful for the user’s experience, especially if the layout of the page does not change much from section to section.
As far as color choice goes, it would be quite daring to veer to far from the brand’s hue. As Scrivs even suggests himself in his post, his color choices aren’t exactly wonderful.
Just don’t underestimate the power of color. Be carefull of certain colors. Don’t veer to far from the company brand. Some people hate certain colors and it could negate their user experience (haha seriously though). And, even though there are billions of different colors, we are still somewhat limited to our primaries. So, if you have an intranet with a ton of different sections, it may be quite difficult to assign a certain color to every layout, while still maintaining the company brand somewhat. In this case, you may just have to get a little more creative than just changing up the layout’s color scheme.
Posted on February 23, 2005 01:26 PM | #
8. Jeff Croft said:
I’m with you, Keith. I think the color coding can be a nice touch, but it really doesn’t add much value, in my opinion. If you are comfortable with your brand, or color is not a major part of your identity, and you really want the color-codedness, go for it – but don’t expect a whole lot of usability return from it.
Posted on February 23, 2005 01:41 PM | #
9. Shaun Inman said:
I don’t have any experience with intranets but the last handful of sites I’ve done for Silverpoint have relied on distinct section colors to help cluster related information. The general assumption we’re working off of is that someone trying to remember where a page that could potentially exist in multiple locations was located might remember an orange header and have an easier time picking up their scent.
I think Choate does this successfully. If you visit the sitemap, you’ll see that the colors used in the section bars relate to the page headers in each section. Saint James does this in a subtler, maybe even unnoticeable, fashion.
The Choate project was complicated by having two distinct constituencies to address, perspective students (to which the majority of the site is dedicated) and those who already have a relationship with the school (the current students, parents of students, faculty/staff and alumni). Similar colors were used where perspective and existing constituents needs might overlap (the Academics and Student sections, or the Support Choate and Parents sections).
I think the Choate navigation might be improved by adding the section colors to the drop-down navigation hover states.
Personally, if used consistently I find color subliminally improves way-finding when exploring a site for the first time and when revisiting content later. But as a designer I might be more sensitive to these things than the casual user.
Posted on February 23, 2005 01:42 PM | #
10. Keith said:
Jeff – I’m not really saying that it doesn’t add value, it very well may, as Shaun points out. What I am saying is that it shouldn’t be relied upon to convey important information on it’s own.
The primary reason being colorblindness in users or lack of proper color perception.
Shaun – I think your examples are good ones, thanks for sharing those. I’m all for it where appropriate, as long as, again, it isn’t relied upon for way-finding, etc.
Posted on February 23, 2005 01:55 PM | #
11. Richard Doyle said:
Just to add what was said above, the same project that’s considering colors has already been working on a consistent header, footer, acceptable navigation schemes, etc. So all the pages will have the same (or at least very, very similar) layout.
Keep in mind have literally hundreds of websites (plus dozens of web apps) internally.
In my opinion when finding stuff is critical to doing your job, any cue we can give them for the sake of remembering is useful. Along those lines, a single color scheme may actually hurt usability.
Please keep the comments coming!
Posted on February 23, 2005 02:07 PM | #
12. John Zeratsky said:
We used color coding by section (News, Sports, Op/Ed, Arts) in our redesign of the Badger Herald online. Although it doesn’t add a lot of value, I don’t think it dilutes our brand either, which doesn’t rely much on the visual impact of a particular color. We used it as a way to remind readers what section they are in (particularly if they arrive at an article from an outside link).
Posted on February 23, 2005 02:37 PM | #
13. Alistair said:
For internal sites, I generally keep them really simple. A simple masthead and a top level to designate what part of the site they are viewing. Of course, that could be a by product of me having the graphical ability of a gnat on a computer ;)
In my opinion, it is more important to make your navigation clear and logical than it is to add colour to it. That said, as above, I’d happily agree that adding subtle colour to a site can add to grouping of information and/or addition way-finding (as Shaun put it) information.
Posted on February 23, 2005 02:57 PM | #
14. Kevin Tamura said:
I think there is definitely a value add when an accent color is used to distinguish different sections: section A headlines are all in blue and section B headlines are all in green (or something along those lines). However, to rely solely on color to distinguish different section and way finding is a no win situation. Color is a good helpful tool and should be treated as such.
Here’s an example from this weekend: when going up the elevator at Jenel’s (my girlfriend) condo we pressed 3 instead of 4. When the doors opened we both knew it was the wrong floor because the carpet in front of the elevator was a different color. It was a very subtle cue to that let us know our folly right away. Now had we never pressed the wrong floor to begin with we would never know that each floor has a different color of carpet in front of the elevator. (Yeah I went through the building looking at each floor)
Posted on February 23, 2005 03:05 PM | #
15. Britt said:
When I first started work at my current job, the intranet was color coded. It was one of the first things I changed. I rely on clear headings, breadcrumb navigation, and other clear (text) reminders to let people know what section they are in.
Color coding is one of the things I disliked about Apple’s site. They have changed it a bit, but it still doesn’t make any sense.
Posted on February 23, 2005 03:29 PM | #
16. Richard Doyle said:
Brit,
Do you have any non-textual clues about where a user is on the intranet? Did you conduct any usability tests or receive other feedback? How big is your intranet?
Posted on February 23, 2005 03:51 PM | #
17. Dan Jallits said:
I use a combination in all my intranet sites for clients. The basic layout templates remain the same, so header and footer content remain consistent and reflect the companies branding. This way people remember they are at work, and who they work for.
The actual content portions of the site have different, yet similar color schemes that blend well with the corporate scheme. This is the hardest task, as we are dealing with a limited number of combinations. Color schemes vary depending on what subject (department, priority, etc.) of the site we are browsing.
Posted on February 23, 2005 04:05 PM | #
18. Boyink said:
I was recently involved with the redesign of AmericanSeating.com. Part of the redesign was the implementation of market-specific “sitelets”, with banners and high-level content developed specifically for that audience, while pulling common lower-level content from a core database.
Part of that work was using subtle color changes in the navigation.
A user probably won’t notice or remember the specific market “color”, but I think it even if it helps the internal content owners differentiate one sitelet from another it’s probably worth it.
Posted on February 24, 2005 08:24 AM | #
19. Jonathan Snook said:
I think we can all agree that colour shouldn’t be the sole method of informing the user of where they are in the site. But it can be an effective approach to help create a sense of cohesion in the minds of users. I’ve also seen shape used in a similar fashion.
However, this should only be something used on large sites. It’s likely to be distracting on a small site where a user would tend to drift from section to section. And on a large site, it should be used when it is expected that the user will focus his or her browsing activities mainly on one section of the site. Universities and hospitals are good examples of this.
Posted on February 25, 2005 07:03 AM | #
20. Dominic Chloe said:
The stepping stone to any successful design ideas, be it architecture or interior or exterior or home design, is well selected and skillfully executed colour scheme ideas
Posted on July 31, 2005 02:00 AM | #
21. John McDonald said:
Link Exchange Requested.
Posted on September 22, 2005 01:05 AM | #
Comments are now closed