UI Patterns and Techniques

Short Description

Use when:

There are elements in the UI whose purpose or meaning aren't obvious or might be hard to remember.

Why:

A concise description of the element, placed beside it, makes the UI self-explanatory. If the user's never seen this part of the UI before, they have something to go on; if they've forgotten what the element is, the description is a convenient reminder. Thus it also reduces memory demands on the user.

How:

Write a descriptive phrase -- no longer than two sentences -- that succinctly defines the element in the context of the UI. When the user selects the element or rolls over it (see Rollover Effects), show the short description, either on the page or in a floating "tooltip."

Normally you write several of these at once, for items in a list or buttons on a toolbar. Use parallel grammatical constructions in the descriptions. For instance, make them all start with a verb ("Cut selection," "Copy selection," etc.) or a noun ("Fill color," "Border color").

In older UIs, you might see short descriptions show up in status bars, at the bottom edges of application windows. These are too far away from the item in question -- users rarely saw them! Spatial proximity is important.