Input Prompt

Problem

Sometimes people don’t know what to put into fields on forms.

Solution

Supply an explanation or example of what a person should do with an input inside of the input itself.

Context

• You have fields that can use extra clarification because either the field isn’t familiar to people or because you allow or expect values that people aren’t familiar with.
• You can’t or have a good reason not to constrain the values using a specific input control such as a Drop Down Chooser, Date Picker, etc.
• You don’t provide the hints in some other way such as input hints or nearby, contextual help on the view the fields are in.

Rationale

It’s not uncommon to have fields on forms that require a little extra bit of explanation. Particularly for free text entry fields, unless people are very familiar with the kinds of values (such as first name, city, that sort of thing) that make sense, it is very helpful to add that little bit of extra guidance.

You could argue that input prompts are better than Input Hints. While a person could overlook or ignore hints located around an input field, they pretty much have to look at the input itself to fill it out. Further, with a good input prompt, people can almost ignore the labels and just fill out based on the prompts, which keeps their focus right where it has to be to get the job done.

On the other hand, because the prompt has to go away to allow for the value a person enters, the record of what the value is will go away unless you supplement with a label, so you need to be sure that people have a good way to identify their values (in other words, keep the labels, too). And if there’s a high chance of needing or wanting to change a value, it may be better to use an input hint so that the guidance remains visible without them having to remove the old value just to get the guidance back.

As noted already, you should only use them if they’re needed—don’t just put a prompt in every input because you can.

Implementation

Devise an appropriate prompt. Because it has to fit in the input itself, it usually needs to be very brief, not even complete sentences are necessary. For instance, a drop down chooser could simply say “Select” or “Choose” to prompt people to pick a value. A text box might just say “type a <value>“ to indicate that’s what people need to do, where <value> is the thing they need to type. You can also use it to simply indicate the format, as Orbitz does for its date input fields.

If the prompt is in a text box, it should typically go away when people focus on it so as not to get in the way of their entering a value. Another option is to auto-select the whole prompt when they focus on it—that lets them still see the prompt up to the point where they start typing, which should blow away the prompt. If a person leaves the field without entering a value, the prompt should return. And if it is on a drop down chooser, you need to consider whether the default value (the prompt) is an okay choice; if not, you need to handle validation to ensure they pick a valid value.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Input Prompt pattern is implemented in all of the ASP.NET editor controls. Check out the samples browser to see it in action.

Sources

Jennifer Tidwell, Input Prompt

Tags

Data Entry, Help.