I need to place example input text [[email protected]] for a field or label. Four examples of places to display example format of acceptable input (example is email address)

Where should I place example (or sample) input description? Here, I have shown four examples of an email ID input for discussion. The fields in my use case are different though.

Please help me decide best option and understand the rational behind the decision. I am looking for inputs from usability and accessibility perspectives.

  • Who are your users that they don't know how an email address is formatted?
    – zzzzBov
    Commented May 13, 2013 at 17:48
  • I have clearly mentioned that fields in my use case are different. 'Email' is just an example. And even it makes sense to have email with 'example' for user group having cognitive disabilities.
    – Spicerjet
    Commented May 14, 2013 at 1:24
  • Keep in mind that the answer may be different for different fields (i.e. types/qualities/quantities of information) so the closer the field in your question is to your actual field the better.
    – uxzapper
    Commented May 29, 2013 at 23:12

5 Answers 5


I think all of these are quite functional, but there are pros and cons for each one:

1st: may need a lot of vertical space.

2nd: does not consume any additional space at all, but will disappear once user enters this field. It's quite popular though, and not a bad practice.

3rd: again, should the example text be longer, it may force you to make the left side too much, and it may look bad if you decide to right-align the field names (which I would suggest, by the way).

4th: again (and even in your example) it makes you expand the field itself, because in this case, using longer example text will look abd otherwise.

I suggest doing something else and using the space below each field:

enter image description here

  • I am not sure about accessibility though .. My ASSUMPTION is that for option 1 and 2, order for screen reader would be: Label>input text>description, so if disabled user doesn't get example before entering text, it seems useless. This might be satisfied in 3rd and 4th option. What do you think?
    – Spicerjet
    Commented May 13, 2013 at 12:42
  • 2
    @Dominik, In the 2nd option, many sites do not remove the text till the user starts typing, even if the input box is selected.
    – rk.
    Commented May 13, 2013 at 13:26
  • You are right, however I would not worry that much about it. Examples are easy to spot and user can refer to them only when necessary. Commented May 13, 2013 at 13:28
  • @Spicerjet: You are referring to source order, not display order.
    – nibra
    Commented May 13, 2013 at 16:55
  • @nibra: For option 1 and 2, I think display order is Label>input text field>description which is the order screen reader will follow. Please help me understanding how it is source order and not display order.
    – Spicerjet
    Commented May 14, 2013 at 1:38

Go with the 2nd option. It is a standard practice followed by many websites. It allows for showing examples in-context which is better than giving directions for the user to follow. eg: Enter email below,example: [email protected]

  • Make the text visibly lighter (grey) than the default color.
  • Optional: Give some added visual que like changing the border/background color of the input box to highlight in-focus input. (Look at the search bar in Stack exchanges)
  • 2
    To expand on rk's point about context: By placing the hint in the field you make things cognitively simpler for the user by not forcing eye movement to a third location (label->hint->field or label->field->hint). You can further aid your users by not wiping the hint upon focus but waiting until first entry. Commented May 13, 2013 at 18:00
  • 2
    There's value to both #2 as noted above, but also in the "below the field" option suggested above. For simple hints, like email address format, "placeholder" text insides of the input is good. For longer examples, or things users may need to reference later to help understand what is being asked, leaving a footnote below the input might be the better UX. Think about the use-case and the need for assistance and implement accordingly. Commented May 13, 2013 at 22:52
  • @rk: How does screen reader work in this case.. What is the sequence it follows: Label>input text>description OR Label>description>input text ?
    – Spicerjet
    Commented May 14, 2013 at 1:52

I agree with Dominik Oslizlo,
in your example, description should be placed below the text field. You can also read Extensive Guide To Web Form Usability


I am not sure if the question is specific or general but in this very peculiar case I would not recommend to use a description at all.

You want the user to put his email address. If you consider she can use this address for any reason in your application, then she knows what a email address looks like.

You want to show an example in case the email is misspelled and the user forgot something. And only in this case:

Do not punish those who did it well with some perhaps confusing, certainly disconcentrating text.

Therefore you want to display a message only when the input does not respect the format you want.

If really you are afraid the user does not knows what she is doing (small kids, old people...) have a look at Twitter signup. They really are helping, with a little bit of condescension but not too much.

enter image description here


There was a study done by UX matters. They use eye-tracking and field association in their study.

From the results of our second test, we knew that the nearer a label is to its input field, the more quickly users could move from the label to the input field. So, we were not surprised when we noticed that most of the fixations were right on the input fields rather than on the labels, as the eyetracking data in Figure 3 shows.

Contrary to this study a different article makes the case:

Alignment of labels: top vs. left vs. right Contrary to common advice, above the input field is not always the most usable location for a label. It’s ideal if you want users to fill in the form as fast as possible. But there are times when you’ll want to deliberately slow them down, so that they notice and read the labels attentively.

  • Thanks for contrary views @cpattersonv1. That's the reason I have kept last option field below label. However I am also interested in understanding it from accessibility point of view considering how screen readers will read it and how we want screen readers to read it.
    – Spicerjet
    Commented May 14, 2013 at 1:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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