Where is the best place to put example input for a form? [duplicate]

Question

Possible Duplicate:
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?)

^{download bmml source – Wireframes created with Balsamiq Mockups}

Cheers

Answer 1

I would go for one of these UI patterns:

Input hints

Input prompt

(From "Designing Interfaces: Patterns for Effective Interaction Design" by Jenifer Tidwell)

---

Error messages

Page 388

Answer 2

(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.

• Below the field label is problematic, as people tend to jump to the field itself as soon as they believe they have read enough of the label to answer (and therefore will skip the input instruction). This is why it's best to put any kind of frame (e.g. "In the last 4 weeks") at the start of the question rather than the end. Also, strictly speaking, the input format example relates to the field, not the field label, so this is where it should be located.
• Text to the right of the field often gets missed because the range of vision can sometimes not extend to the end of the field (especially if the field contents can have varying lengths).
• Above the field is relatively uncommon, so I'd be concerned that it wouldn't be seen. You'd also need to be very careful with spacing to make it clear that the example relates to the field below, not above.
• Avoid within the field, as this will disappear as soon as the user starts typing. If they want to check it, they have to undo their work, wait for the in-place text to show up again, and then start typing again.

In summary, I endorse the first, but not second, example given by Jørn.

Answer 3

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.