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 need to place example input text [abc@pqr.com] for a field or label.
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.
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:
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: amdin@user.gov
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.
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.
