Color-Coded Sections
From http://johncoltrane.com |
|
What: |
Use color to identify which section of an application or site that a page belongs to. |
|
The UI is a large application with many pages or windows, which can be organized into sections (or chapters, sections, sub-applications, etc.). You might be using a Visual Framework to unify them visually, but you also want each section to have a distinctive look. Perhaps each section needs separate branding, or each has a different purpose or audience. |
Why: |
This is an example of a "signpost" -- something that gives
the user a clue where he is. It does so with some subtlety; colors
work visually instead of verbally, and it's not even something
that users will necessarily notice immediately (though it's hard
to miss in the vivid Coltrane example above). Once users are
attuned to the color schemes, they can use them. Even before
then, they'll know when they've left one section for another, if
they notice that the color scheme changed.
So color-coding works to distinguish one section from another; it makes the boundaries clear. It's easier for users to mentally map out smaller chunks of a navigational space, such as one section, than the whole space at once -- you should do this with a large UI in any case, whether you use color coding or not. Creative uses of different colors can also make your UI look nicer and less boring. It might even contribute to the branding of the UI -- see the Apple example below. |
How: |
Pick one of the interface colors and change it for each
section. Usually, the background color is too much change --
the Coltrane example only works because the visual framework is so
strong and distinctive. Most designs work better with a trim
color, like a border, or the background of a small amount of text.
Remember that colorblind users won't necessarily see the differences in colors from one section to another. That's why color should never be the only way of distinguishing sections. You also need to have other signposts -- indicators on navigation bars, for instance, and page or window titles. |
Examples: |
From http://apple.com Apple's web site provides a more typical example of color coding. Look at the top of each screenshot. The tab and the bar below it change color (and texture!) to match the content -- for example, blue for QuickTime or brushed metal for OS X. In the page graphics, you can see the theme colors echoed in titlebars and logos. The effect is subtle but noticeable. It contributes to both usability and branding, while not detracting from the unity of the overall site. (Notice that the tabs are the Global Navigation in this Web site, while the secondary navigation links live on the colored bar.) |