Input Prompt mini
Also known as: Labels Within Inputs
Input Prompt is an info text placed inside a text box. It guides the user on how the text field should be filled or how it can be used. The input prompt inside a text field will disappear if clicked, therefore an Always Visible Input Hint or Dynamic Input Hint should be used in situations where it’s important for the user to see the info text while answering.
Input Prompt helps users understand how to fill in the input fields without having to guess. Also, by using Input Prompt the label of the text field can be kept short. In some cases Input Prompt can be even used to replace the label on text fields.
Input Prompt shouldn’t look like a default answer, because users will take it as such and skip filling in the text field. Common way to separate Input Prompt from a default answer is to make it gray. Also, the text in the Input Prompt shouldn’t be a possibly valid input. So, if you are asking for a destination of travel, don’t use “Paris” as Input Prompt, but use “city” instead.
Well-designed Input Prompt should disappear when the text field gets selected or when the user starts typing, and appear again if the user leaves the field without typing anything.
Quora uses Input Prompt instead of a label in it’s multi-use text field.
Useful links
- Input Prompt - UI-Patterns.com
- Input Prompt - UI Patterns and Techniques
- Input Prompt - Quince
- jQuery Form Input Hints Plugin - Rob Volk's Dev Blog
- Input Prompt Text: A Better Way - Kyle Schaeffer
- Forms - Twitter Bootstrap
Code snippets
Job search
Source: http://www.theladders.com/Offering two possible keywords and separating them with “or”-word helps people understand that the text inside the input box is help text and not a default value.
Task management
Source: http://rememberthemilk.com/As the help text is inside the text box, there is more space for the input – the name of the task.
Sign up form
Source: http://www.tumblr.com/Here the input prompt is shown also on focus. The prompt disappears when the user starts typing.
Creative Commons
Comments
lakmalone April 27, 2011 20:44
Although I find the economy of this approach appealing it is worth noting that in some cases this approach causes user errors. Shari Thurow has done research on placing hits inside search boxes and found that users often fail to fill in the box because they see that there is already information in it. She advises placing the help text underneath a search field instead.
janne April 27, 2011 22:10
@lakmalone There are caveats with using this pattern, but if designed well, I believe it is a good way to provide help. It is important to make people see the difference between help text inside the text field and the answer text. And, that can be done making the help text gray and using help text that doesn't look like a valid input, for instance.
Is that research you're referring to available online somewhere?
Leave a comment