Color-Coded Sections

Examples: 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?


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:

Notes: -

Comments to:
Last modified May 17, 1999

Copyright (c) 1999 by Jenifer Tidwell.  All rights reserved.