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.

I need to place example input text [abc@pqr.com] 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.

share|improve this question
    
Who are your users that they don't know how an email address is formatted? –  zzzzBov May 13 '13 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 May 14 '13 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 May 29 '13 at 23:12

5 Answers 5

up vote 6 down vote accepted

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

share|improve this answer
    
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 May 13 '13 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. May 13 '13 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. –  Dominik Oslizlo May 13 '13 at 13:28
    
@Spicerjet: You are referring to source order, not display order. –  nibra May 13 '13 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 May 14 '13 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: amdin@user.gov

  • 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)
share|improve this answer
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. –  plainclothes May 13 '13 at 18:00
    
@plainclothes thanks :) –  rk. May 13 '13 at 18:06
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. –  Renee Grebe May 13 '13 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 May 14 '13 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

share|improve this answer

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

share|improve this answer

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.

share|improve this answer
    
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 May 14 '13 at 1:56

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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