Color-Coded Sections

Examples:

[rewrite this] From Information Architects: pg 83 (Peachpit Press), 168-69 (3M), 182-83 (rainforest poster), 188-89 (Apple multimedia book), 212-213 (chair demo), 222-223 (college search)

Context: The artifact is made up of a large number of Navigable Spaces, which is organized into a small number of major subsections.

Problem: How can an artifact both give users a sense of place, and also tell them where they are, within a large network of spaces?

Forces:

The user has a need to know approximately where he or she is, at all times.
Sometimes it's impractical to use a Map of Navigable Spaces to show where a user is, due to space constraints, look and feel issues, or a lack of appropriate technology.
A text label saying what section the user is in may be ugly or unnoticeable, and the user has to take the time to read and parse it.
Iconic labels may have the same problem with being ugly or unnoticeable, and may be far more incomprehensible than text.
Your visual interface may look better with a little livening up.

Solution: Use color to identify the major sections of the artifact. Pick one color per major section, and use it on every space or working surface within that section. It may be a background color, a trim color, or even a text color, but make sure it is used in the same way throughout the artifact. In particular, use it within a consistent visual framework which unifies the artifact; the user should remember the artifact's distinctive look, not the look of a subsection.

If you're using the section color as a background, or otherwise using a lot of it, then use subtler, lighter, or less saturated colors -- vivid colors in large areas make a strong impression. If the color is used in smaller visual elements, be bolder, so that the color gets noticed. Colors chosen from a single hue, but with varying lightness or saturation, may be interpreted as being "more or less of something" -- they imply an order, which may not be what you want. On the other hand, colors from different hues (red, blue, green, yellow, etc. being the primary ones) don't imply any relative order, so they may be better for sections that are random-access, or that are equal in status or importance.

Resulting Context: Don't forget to provide a way to go to other major sections (Clear Entry Points), or to the "home space" of the artifact (Go Back to a Safe Place). Consider also that you may have color-blind users, so if this is an important navigational feature, you may want to offer a non-color-based alternative in addition to the color, like text labels.

Why it works:

Color is highly identifiable by the human visual system, probably more so than text labels or icons; a user just sees it, and doesn't have to think about it.
It is used here as both a unifier (of a bunch of diverse spaces within one section of the artifact) and as a differentiator (between the sections). It therefore lends structure to a set of spaces, from which a user can easily form a correct mental model.
It also helps create a sense of place for the user, when combined with a consistent visual layout -- it becomes repetitive, familiar, and reassuring, while at the same time making a layout more colorful and interesting.

Notes: -

Comments to: jtidwell@alum.mit.edu
Last modified May 17, 1999