The Second Edition is out!
Visit designinginterfaces.com to read excerpts and learn more.

Input Hints


From the Mac OS X system preferences

What:

Beside an empty text field, place a sentence or example that explains what is required.

Use when:

The interface presents a text field, but the kind of input it requires isn't obvious to all users. You don't want to put more than a few words into the text field's label.

Why:

A text field that explains what goes into it frees users from having to guess. If you visually separate the hint from the main label, users who know what to do can more or less ignore the hint, and stay focused on the label and control.

How:

Write a short example or explanatory sentence, and put it below or beside the text field. Two examples conjoined by "or" works fine too. Keep the text small and inconspicuous, though readable; consider using a font two points smaller than the label font. (A one-point difference will look more like a mistake than an intended font-size change.)

Also, keep the hint short. Beyond a sentence or two, many users' eyes will glaze over, and they'll ignore the text altogether.

This pattern is often used in conjuction with Forgiving Format, as illustrated by the Word example below, or Structured Format. Alternative patterns are Input Prompt (in which a short hint goes into the control itself), and Good Defaults (which puts an actual valid value into the control). Input Hints permit longer, more permanent help text than Input Prompts, but because no default value is present in the text field, the user is forced to consider the question and give an answer.

Examples:


From Word for Windows

The printing dialog boxes used by several Microsoft Office applications supply an Input Hint below a Forgiving Format text field -- it takes page numbers, page ranges, or both. The hint is very useful to anyone who's never had to use the "Pages" option, but users who already understand it don't need to focus on the written text; they can just go straight for the input field.