How color defines purpose in user assistance content

Of all the visual cues in your help interface, color is one of the strongest. Users will recognize and react to the color of each element in your help window before reading a single word of text.

Color allows users to determine the purpose of each element on the computer screen.

When designing the visual aspect of your help content (via CSS and so on), as well as the help interface itself, be sure to use the same color for objects that share a purpose.

For example, the screenshot below of the Mozilla Firefox help shows effective use of color.

Notice the gray background around the In this section list. This convention is used throughout the help system. Users can quickly spot the list in any Firefox help topic.

Background color is also used for menu commands. Notice the blue shading behind the Tools > Downloads command. This convention allows users to quickly recognize a menu command within a procedure.

The Back and Forward buttons in the navigation rely on color as well. Both are green when enabled, and gray when disabled. By consistently switching between these two colors, the designers quickly teach users how to determine when they can click each button.

Color can also be used to differentiate content. For example, web designers often use bright colors for advertisements and muted colors for other content. This convention draws attention to the ads, but allows users to quickly recognize and ignore such content if they aren't interested in the subject of the advertisement.

By using color to group elements, you can quickly teach users to identify the purpose of each element in your help content and interface.

Same color, same purpose.

If you enjoyed this post, you might also like: