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

Input Prompt


From http://orbitz.com

What:

Prefill a text field or dropdown with a prompt that tells the user what to do or type.

Use when:

The UI presents a text field, dropdown, or combo box for required input. Normally you would use a good default value, but you can't in this case -- perhaps there is no reasonable default, as in the Orbitz form above. The user needs only a short reminder of what is required.

Why:

It helps make the UI self-explanatory. Like Input Hints, an Input Prompt is a sneaky way of supplying help information for controls whose purpose or format may not be immediately clear.

With an Input Hint, someone quickly scanning the UI can easily ignore the hint (or miss it entirely). Sometimes this is your desired outcome. But an Input Prompt sits right where the user will type, so it can't be ignored. The advantage here is that the user doesn't have to guess whether she has to deal with this control or not -- the control itself tells her she does. (Remember that users don't fill out forms for fun -- they'll do as little as needed to finish up and get out of there.) A question or an imperative "Fill me in!" is likely to be noticed.

An interesting side effect of this pattern is that users may not even bother to read the label that prefixes the text field. Look again at the Orbitz screenshot above. The labels "from" and "to" are completely superfluous, in terms of the form's meaning. Because the user's eye will be drawn first to the white text fields, those prompts will probably be read before the labels anyway! That said, don't remove the labels -- that prompt is gone forever once the user types over it, and on subsequent readings of this form, she may not remember what the control asks for.

How:

Choose an appropriate prompt string, perhaps beginning with one of these words:
  • For a dropdown list, use Select, Choose, or Pick.
  • For a text field, use Type or Enter.

End it with a noun describing what the input is, such as "Choose a state," "Type your message here," or "Enter the patient's name." Put this phrase into the control where the value would normally be. (The prompt itself shouldn't be a selectable value in a dropdown; if the user selects it, it's not clear what the software should do with it.)

Since the point of the exercise was to tell the user what they were required to do before proceeding, don't let the operation proceed until they've done it! As long as the prompt is still sitting untouched in the control, disable the button (or other device) that lets the user finish this part of the operation. That way, you won't have to throw an error message at the user.

Examples:


From Powerpoint

Input Prompt has historically been unusual in desktop applications, but it's as good an idea in this context as it is on the Web. Note its use on a WYSIWYG editor's canvas here -- it doesn't indicate a "required field" as such, but the application clearly communicates its intent to the user, who doesn't have to puzzle out what he should do next.