Where should form instructions or hints be placed?
Which of the following is the best place for the example (e.g. 12345) on long/short/busy/simple forms? (...and why?)
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
I would go for one of these UI patterns:
(My answer assumes a left-to-right, top-to-bottom language.)
In my experience - based on quite a bit of user testing across different domains - just below the field works best for input format instructions (my answer might be different for other types of assistive text).
Being just below the field means it is in closest possible proximity to the field (proximity communicates connection) and being to the left-hand-side means it is likely to be seen within the same glance as at the field itself.
In summary, I endorse the first, but not second, example given by Jørn.
Strictly speaking, instructions and examples should appear before the field. This is particularly important for those who read the page in a linear fashion from top to bottom, for example those using a keyboard and screen reader. It also helps those who can only focus on part of the screen at a time, such as those using magnification or a braille display.
Assuming we're talking about an HTML form, if the example is reasonably short, it's good practice to include it within the
label element so that it can be announced by screen readers at the same time as reading the label and prompting for input.