Input Prompt Edit
Problem summary
The user needs to enter data into the system
Example
Usage
- Use when the label of an input field does not fully explain what should be filled into it or when using such a label feels like over-explaining the interface.
- Use when an example text or question answers what should be filled into an input field just as well as a label.
- Use when you want to save the space that a label otherwise takes up.
- Use in combination with a label, to further explain what kind of input is needed.
Solution
An input field is pre-filled with an example text or question that prompts the user what to do or type.
The Input Prompt pattern is most successfully used with dropdown lists and text fields. As the dropdown list has a fixed set of choices the user can choose from, it is often words like Select or Choose the prompt text begins with. For text fields, the prompting string often begins with a call to action: Enter, Type, Search. End the string with the noun the input is describing, for instance Enter city or Enter an address.
For text fields, the Input Prompt pattern is often combined with scripting that removes the prompting text once the user’s focus is on that box. Once the user enters the input field to type in content, the prompting text is removed and replaced with nothing so that the input field is free for the user to fill out.Rationale
When a user fills out a form it is most often with the purpose of filling it out as quickly as possible to get on with the service the website is offering. This is why the user often just scans through form fields and labels without giving the labels much of a glance. By using input prompts, immediate attention is drawn to what the user needs to fill in. The user can’t miss it. Although you must beware of removing labels entirely, as the input prompt is removed once focus has been set to the text field.
Input prompt is often used for small forms that are key to the core functionality of a site as inserting the label inside the text field itself helps save space. For more elaborate forms, there are often more than enough room available to explain each input field.
More example images of the 'Input Prompt' pattern
-
-
The search form at everyblock.com utilizes the input prompt pattern.
This document is in version 1 and was last updated on Dec 25, 2008 by Anders. Edit this pattern.
Related information
Collection
Related patterns
- Forgiving Format
- Structured Format
- Fill In The Blanks
- Input Prompt
- Good Defaults
- Captcha
- Inplace Editor
- WYSIWYG
- Live Preview
- Password Strength Meter
- Input Feedback
Related links
Input Prompt has 2 comments
-
3 months ago
Bernard
9 Mar 2009
One note of usage instead of labels. From UX point of view – while this might look like a cool way to provide labels, this works only for small forms and should really be used only when necessary. Because labels inside fields disappear when you enter data, there is a danger of loosing context – there is no label to refer to if you’re unsure what the question was.
It works great for small forms, like a search box though. -
2 months ago
Bob
17 Apr 2009
“The user needs …” The user may or may not need to do this (or anything else) — I think what you should say is the application needs user input.