Article Submitted to ZDNet Developer (Design Usability section). Never published, no reply from ZDNet.
1500 words, 12 figures, 18 images, 6 pages
Bob Stein, email@example.com
<!--Colorize your hard-won mental models so your users gain them with ease.-->
"And what tremendous
possibilities for the variation of meaning are offered by the combinations
The human mind works wonders searching, discriminating and comprehending when given the right visual cues. Here are some ways I've found to take advantage of color to ease the tedium of complexity.
1. Consistency. If your work is infused by an all-important theme, there will be numerous chances to reveal it. You'll have a lot less explaining to do if you exploit each one the same way.
2. Moderation in color diversity. The power of color to inform fades fast without restraint. Two themes are a lot to try to colorize. Bring what's most important front and center with judicious use of color. Decorative color must play at best a subdued role.
On the right is a 3-color theme. Wherever I used this theme, it monopolizes the coloralmost all other information is in black, gray and white. This work actually has two major informative color themes and one minor one, but their diversity never overlaps: wherever one varies the others never do. And where any mixture occurs at all (not shown here) one theme clearly dominates.
These principles of consistency
and moderation are at tension with one another. To clarify, I don't
suggest moderation within a theme at all: I'd consistently colorize
everything you could. Rather: moderation between color themes. The only colors that
within any section are those from a single
Choosing the Colors
Web design is deeply infused by what standards sanction and what browsers support. In writing the HTML Card, I wanted to color-code browser and standards support for thousands of features. Here's how I chose the colors and applied them.
3. Resonate with precedent. Seek, recognize, and imitate precedent. Tap into the enormous body of common knowledge and common sense. You'll want your color choices remembered and relied upon effortlessly, subconsciously.
4. Understate tastefully. Tone it down if you can. Use bold color sparingly if at all. (It will jar the viewer; be sure you mean to.) With a little common sense, colors that inform can also decorate and charm for free.
Here are the precedents for the colors I chose to represent the two leading browsers and the standards body W3C®.
Obviously the first problem to resolve, more practical than aesthetic, is that Microsoft and Netscape logos use similar blues. I widened the difference significantly, going greenish for Netscape, and subdued purplish for IE. Then I toned down the bright pale yellow shade from the W3C home page and warmed it slightly for aesthetics.
Here again the two principles are in tension, precedent against visual gentleness. I loosened up on the former because I believe even tenuous precedent reinforces subconscious recognition. People are much more likely to remember a color association if they've seen something like it before.
Color-Deficient Vision Check
5. Color-Deficient Usability. With decorative color, the main issue with color deficiency is readability. But informative colors need to be distinguishable by everyone. Each color must appear unique.
There are many forms of color blindness. By far the most common are known as red-green color blindness, where certain reds, yellows, browns and greens can be indistinguishable. Since complete color blindness (black and white) is extremely rare, a more practical term is color-deficient vision.
The lower squares simulate deuteranopia, which is relatively common. Watered-down variations of this condition, called deuteranomalous, are the most common group of color vision deficiencies. Checking your color theme with a deuteranopic simulation is the single best way to ensure color-deficient usability.
The other red-green deficiencies are very similar to deuteranopia.
The main distinction of protanopia is that vivid reds can appear very dark. Red-green color deficiency affects 1 in 12 men and 1 in 250 women. Tritanopia, or blue-yellow color deficiency affects 1 in 30,000 people.
Simulations are courtesy of Visicheck. They offer very useful conversions online for images and web pages.
6. Intuitive Symbolism. The wise combination of color with shape, arrangement and other visual forms (backgrounds, borders, icons) can significantly enrich the food for intuitive thought. The idea is to use symbols and colors to portray the mental models you take for granted.
If you don't have vivid mental models, get them! Don't even try to invent usability before immersing in the subject. Then the challenge is to distrust your own illusions of simplicity, to help your users grasp easily what you learned the hard way. All subjects (a company, a technology, a person) have complex structure, and hard thinking on their nature is prelude to revealing it for users.
Almost all HTML references I've seen (to the extent they included it at all) try to show browser and standard support with check marks or icons, each symbol answering one question: support, yes or no. But I felt this was tedious. Most designers think of feature support in more atomic terms such as universal, Netscape-only, or all-but-Netscape. Not to mention the distraction and wasted space of three symbols next to every feature. I was hoping to answer three yes/no questions at a time, the eight combinations requiring eight unique symbolic forms of some kind. First, I could use no color at all to indicate universal support. And features not supported by any party I could simply leave out of the reference entirely. Six possibilities remain.
Note the background colors are a lightened version (30-40%) of the border colors. This was a practical compromise so text would be readable on the backgrounds and the borders would be sufficiently prominent.
Symbolism Examples, Sound-Bites
Examples of color symbolism:
The symbolism I thought to portray here is, roughly, background=insider, border=outsider. You're a Netscape-insider when you use Netscape-only features. And Netscape is the outsider when it doesn't support a feature that others do. Tedious and corny to explain, but I believe that even unexplained it works to reinforce the right mental models.
So with this scheme, features with limited support can stand out; it takes very little space to show exactly who does and does not support them; and eventually a user can rapidly interpret the details.
Until "eventually" happens, it's important to have verbal explanations handy, as in a legend. I believe that every single page where an informative color theme is used should explain itself a glance away.
Note that each symbol has both an embedded sound-bite and a verbose description nearby. On first use, the user's left-brain demands the verbose description. Eventually the sound-bite will be enough. Eventually the colors and shapes will be enough. The wording of each sound bite reinforces the patterns (background=only, border=not). Such gratuitous redundancy should have strong basis: this work relies heavily on the color theme.
Two goals of intuitive symbolism:
Here are some examples of icons colorized in line with the theme:
7. Special Cases. All rules have their exceptions. Handling yours with compassion and vision can forestall a lot of user frustration. Seek common ground with the dominant forms and reveal it.
Example 1: This symbol indicates a clash between Internet Explorer and Netscape. It appears next to any feature that acts differently in the two browsers. (Bugginess is a different symbol.) It's an icon of two swords, one in IE color, the other Netscape color. An unusual use of the colors to indicate an unusual situation. This one symbol lumps many special cases together, each one of which then I explain in elaborate detail online.Example 2: Many HTML character codes were adopted by both browsers after version 4 (that is, not until IE 5.0 or 5.5 or Netscape 6). For the HTML Card I indicated this soon-to-be-universal condition with a dotted border alternating between IE and Netscape colors. I think it's helpful to make special cases look special.
the strong visual availability of verbal help sound bites bold and
surrounded by the forms they're explaining. Verbose descriptions are right
next door (though cut off here).
One thing I think relieves that annoyance is, paradoxically, repetition. Isolated symbolisms don't promise much benefit to learning.
3: I introduced a new symbol and color to indicate character non-support
by the Apple® Macintosh®, a twist needed only in the character section
of the reference (not in the tags or styles sections). Because that symbol
is used repetitively though, I think users unconsciously forgive the
mental intrusion of a new color and symbol.
A special case of symbol and color merits good reason. All three of these examples are visual oddities but were needed in multiple places.
: : :
Most important for color and symbolic themes are consistency and recognizability (principles 1,5). It's not so important that a symbol stand alone without verbal explanation, as it is that it be recognizable once explained, and then reinforced at every turn. Making sure those needs are filled you could try for resonance with precedent, aesthetics, and symbolism (principles 3,4,6). Just make sure you don't ruin it with too much color diversity or too many visual exceptions (principles 2,7).
Here's wishing you're able to part the clouds of your user's confusion with a rainbow of informative color.