Window Research 4: Color Guidelines & Applications

by Luke Wroblewski December 21, 2003

Another survey of existing literature. I was mostly looking for research that could support the use of color to visually group related information or activites that existed in seperate windows. I think we have all hit the point where there have been too many windows on our monitor. The result, of course, is clutter. Can color help? (There are also a lot of general color usage guidelines within these quotes.)

Tufte, Edward. (1989). Visual Design of the User Interface. Armonk, NY: IBM Corporation.

Use of color in Windows:

Of all design elements, color most exemplifies the wholeness of design, the necesity to reason globally. The first principle of color is “above all, do no harm”. Color must work to enhance information resolution.

  1. The border of an active window should be light in value (to avoid clutter with other windows), yet deeply saturated( to provide a conspicuous signal)
  2. Yellow is the only color jointly satisfying those conditions, and therfore proves valuable for bordering windows.
  3. Inactive areas are grayed down, calming the background surrounding the active window
  4. A good way to avoid colorjunk is to use colors found in nature, particularly toward the lighter side, such as the grays, blues, and yellows of the sky
  5. Nature’s colors are familiar and have a widely accepted harmony.

Tognazzini, Bruce. (1996). Tog on Interface. Reading, MA: Addison-Wesley Publishing Co.

“I think the window border colors should be tied to the color of the document icon. Or to a color chosen for the application’s menu bar. Or to a combination, where the menu bar always reflects the color of the icon, and a new document reflects the color of the application until the user changes it. .. this would also give (people) a redundant cue about the window and its content’s relationship to the rest of the world.”

Apple Computer, Inc. (1992). Macintosh Human Interface Guidelines. Reading, MA: Addison-Wesley Publishing Co.

Use of Color in Windows:

  1. Distinguishes the active window from other windows and enhances the appearance of user controls on the window frame.
  2. Scroll bars and title bars are gray
  3. User controls are colored to make them more apparent
  4. Inactive window borders are gray to make them recede into background and active windows black border stands out.
  5. User can change colors from color control panel
  6. User chosen highlight colors will be used in windows and dialog boxes.

Limit the number of Colors

  1. To maintain consistency with operating system, use as few colors as possible.
  2. Fewer colors results in less visual clutter on the screen

Colors on Gray

  1. Colors look best against a background of neutral gray
  2. Colors will stand out more if the background and surrounding areas are gray black, or white

Beware of Blue

  1. Light Blue is the color most difficult to distinguish. Avoided for text, thin lines, and small shapes.
  2. If you want things to be unobtrusive, thought, light blue is the perfect color.

Small Objects

  1. People cannot easily distinguish color in small areas.
  2. If different colors are used in a small object, the differences must be obvious.

Color for Categorizing Information

  • If use color to code categories of information, limit the use of color elsewhere
  • Using color to label or distinguish groups of information can make information clear
  • Providing user with a small initial selection of distinct colors (4-7) with a capability to change or add more is the best solution

Galitz, Wilbert O. (1996). The essential guide to User Interface Design. New York. John Wiley & Sons

Two most common problems are screen backgrounds being more attention grabbing than screen data, and overuse of color as a graphic language or code (the color itslef meaning something to the screen viewer). This kind of use forces the user to interpert a color’s meaning before the message it is communicating can be reacted to.

Use color to assist in formatting a screen

  • relate or tie elements into groupings
  • break apart separate groupings of information
  • associate information that is widely separated on the screen
  • highlight or call attention to important information by setting it off from other information

Howlett, Virginia. (1996). Visual Interface Design for Windows: Effective User Interfaces for Windows 95, NT and 3.1. New York: John Wiley & Sons.

Color to communicate

  1. Affordance is a popular interface design concept taken from the world of psychology. It means a subtle design characteristic that conveys the correct use of an object.
  2. Color coding works when we mentally group objects by color. However, we are slow to associate a color with an abstract concept.
  3. Specific colors can be used to communicate as well as attract attention
  4. Color has emotional properties: red excites the eye and blue calms it.
  5. Color attracts the eye, and once the eye is engaged attention focuses on the object
  6. Researchers agree that we often use color for grouping or relating things to each other.
  7. Color codes are most effective when there aren’t too many of them, they are used repetitively, and are associated with a common cultural use of color.
  8. Difficult to focus the color blue, makes blue a great background color, but not for text...

Shneiderman, Ben. (1998). designing the Use Interface: Strategies for Effective Human-Computer Interaction. Reading, MA: Addison-Wesley Publishing Co.

Color is a subtle variable that can significantly enhance the decision maker’s ability to extract information.

Color can:

  1. Soothe or strike the eye
  2. Add accents to an uninteresting display
  3. Facilitate subtle discriminations in complex displays
  4. Emphasize the logical organization of information
  5. Draw attention to warnings
  6. Evoke strong emotions of joy, excitement, fear or anger

Guidelines

  1. Use color conservatively –show meaningful relationships
  2. Limit the number of colors –4 to 7
  3. Recognize power of color as a coding technique –speeds recognition
  4. Ensure that coding supports the task – close linkage between tasks and color coding
  5. Have color coding appear with minimal user effort –should not be assigned by users each time they perform a task
  6. Place color coding under user control –turn off if needed
  7. Be consistent in color coding use throughout system
  8. Be alert to common expectations of color codes – outside computer significance.
  9. Be alert to problems with color pairings.
  10. Use color changes to indicate status changes
  11. Use color for greater information density

Mandel, Theo. (1997). The Elements of User Interface Design. New York: John Wiley & Sons.

Use and Misuse of color

  1. color is probably the most misused element in user interface design
  2. “Properly used, color can be a powerful tool to improve the usefulness of an information display system. The inappropriate use of color can seriously reduce the performance of such a system, however.” –Gerald Much (1984)
  3. Color can be used in a qualitative way to show differences, but can also be used in a quantitative way, to show amounts
  4. Bright colors attract customers and users, but users don’t need colors that distract them from their work.
  5. Aaron Marcus (1990)- ten commandments of color:
    • Maximum of 3-7 colors
    • Use foveal and peripheral colors appropriately; red/green center of visual field, blue for backgrounds and borders
    • Use colors that exhibit a minimum shift in color/size if the colors change in size in the imagery.
    • Do not use high-chroma, spectrally extreme colors simultaneously
    • Use familiar, consistent color codings with appropriate references.
    • Use the same color for grouping related elements
    • Use the same color code for training, testing, application and publication
    • Use high-value , high-saturation colors to draw attention.
    • If possible use redundant coding of shape as well as color
    • Use color to enhance black and white information
  6. Research has suggested color-coding has substantially improved error rates

Zeite, Carl. (1995). Practical User Interface Design: Making GUI’s Work. London: McGraw Hill Book co.

  1. More design errors committed with colors then any other aspect of UI design
  2. Color is meaningful –people associate meanings and implications with color
  3. Color is ergonomic –eye is drawn to color, disrupting flow of the screen
  4. Color is operational –users expect color difference to be semantic, color changes are interpreted as having meaning: designer should support this assumption
  5. For the background of a window, it is important that the color chosen be restful, rather than tiring
  6. Taking into account icons, windows, decoration and fields, the designer should expect to use no more than a dozen or so colors within windows.
  7. The golden rule is the designer must never rely on color alone, it must always be a redundant clue.

Many of these guidelines can be applied beyond windowing.