Dynamic Input Hints mini
Also known as: Automatic Inline Help, Form Field Hints
Dynamic Input Hints are instructional texts or examples that are shown when a user clicks or tabs to an input field.
Showing input hints only when people feel they need them keeps the form simple and uncluttered compared using Always Visible Input Hints. Therefore, Dynamic Input Hints should be considered to be used especially with complex, long forms with many input fields. Also, this patterns works best for forms containing questions that most people can answer, but they are not sure why or how they should give their answers.
When the user moves to an input field, the helps text should appear immediately below or beside the input field, and the selected input element should be highlighted. Usually an input hint is related to one form field, but sometimes it is a better idea to bound the help text to a set of inputs. In both cases it is important to tie the help text visually to the input field it is connected to.
If it is important to show the help text before the user moves to an input field, consider using Input Prompt (show the help text inside an input box).
On Recipefy, the input hint is shown directly above the text field to which it applies.
Useful links
- Form field hints with CSS and JavaScript - Ask the CSS Guy
- Input Hint Overlay - jQuery Plugins
- Cut & Paste Form Field Hints - JavaScript Kit
- Hover Popover - Twitter Bootstrap
- Twitter Bootstrap "popovers"
Code snippets
- No code snippets yet.
Twitter Bootstrap popover example
Source: http://twitter.github.com/bootst...Can be added to anything, hook the javascript behavior to the class.
eBay registration form
Source: http://ebay.com/Ebay uses dynamic Input Hint to provide guidance on how to choose a good password. This kind of highly visible Input Hints can be annoying if used in everyday context, but are good and effective way of communication in forms that are used rarely.
Flight search
Source: http://www.finnair.fi/Finnair uses Input Prompts as labels for text fields, and Dynamic Input Hints after the text field is clicked.

Creative Commons
Comments
logiebil July 28, 2011 10:32
awesome guidelines.
Leave a comment