Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?)

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Cheers

share|improve this question
    
Hi JustCurious. Looks like you've picked a question that's been asked before, so I've closed this as a duplicate so we can try to keep all the relevant answers in one canonical place to help future people out when they're searching for answers. Hope you find some good answers on that post to help you out. –  JonW Nov 24 '12 at 9:41
add comment

marked as duplicate by JonW Nov 24 '12 at 9:38

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

3 Answers

up vote 2 down vote accepted

I would go for one of these UI patterns:

Input hints

enter image description here

Input prompt

enter image description here

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


Error messages

enter image description here Page 388

share|improve this answer
    
Where do contextual error messages go (especially in the first screenshot)? Usually they appear right underneath the input field. –  greenforest Nov 23 '12 at 15:09
    
They could be at the same spot, but with different styling. –  Jørn E. Angeltveit Nov 23 '12 at 15:33
    
Thanks for your help. Have bought the book you referenced and it's really good. Cheers. –  JustCurious Nov 24 '12 at 15:48
    
@just: Good call. It's a really good book! –  Jørn E. Angeltveit Nov 24 '12 at 20:24
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.