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 was browsing Forrst and came about a screenshot of a form designed with Twitter Bootstrap that had the label on the left, the input field on the right, and the instruction that it's required under the field itself, like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I almost commented that it's the wrong way but decided to check Twitter itself. It appears to be that such a layout is a part of their style guide:

enter image description here

and here's how it appears in the live Twitter:

enter image description here

The same approach is used in Wufoo:

enter image description here

and in JotForm:

enter image description here

But Google Forms put the help text under the label and before the input field:

enter image description here

Placing the help text after the field seems to violate some of the key principles of cognition (instructions before the task) and UX (minimize back-and-forth eye movements). I've looked around but the only studies I have found relate to labels (top, right, or left of the field) and it seems there's nothing about hints and/or instructions besides the suggestion of making them inline and shown on field focus.

So what's the "right" way to place hints/instructions/directions/etc with relationship to the field and the label? The current choices include: under the label, above the field, after the field, and next to the field as inline callouts.

share|improve this question
2  
Instructions before the task doesn't make much sense here; instead a visual heirarchy has been created where the instructions are clearly sub-items of the form. In fact I'm not sure I've ever seen instructions before each form item, just some general instructions before a form itself. –  Ben Brocka Jun 27 '12 at 18:35
    
@BenBrocka I've just added a few more screenshots from popular web builders. –  dnbrv Jun 27 '12 at 18:50
add comment

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

5 Answers

I always place input hints/errors/min-requirements directly beneath and color-code them with the border highlighting of the input e.g. red -> error

I can't see google's reasoning for placing them above, although a big motivation for their decisions is based on user research

In addition, here is an opinion from Six Revisions

share|improve this answer
    
I'm looking for a factual explanation not personal preferences. –  dnbrv Jun 28 '12 at 18:12
    
If you're not sure of Google's reasoning then I don't see how you can be 100% sure it's based on user data. –  JonW Jun 28 '12 at 18:18
    
@JonW everything google does is based on user feedback, its why their lead designer left a couple years ago. Google's obsession with data over design Six Revisions input hint placement –  dannydev Jun 28 '12 at 18:22
    
@dnbrv sorry for the inadequate answer, just new to posting on stackoverflow. Trying to be of assistance as I'm a lead designer and face these decisions all the time. Six Revision's Personal Opinion its not math there is no right answer its all opinion and psychology. –  dannydev Jun 28 '12 at 18:26
    
@dannydev: I've seen that article by Six Revisions before. Unfortunately, it doesn't give any supporting evidence to why hints have to be that way. As for answers here: if you get good with answers on SO/SE, you'll be able to fend off the pickiest of clients because we're picky here. =) –  dnbrv Jun 28 '12 at 18:50
show 3 more comments

For a decent accessible website the instructions should always be before the field. They're not just there for typical users, but also are important cues for accessibility.

For example: Screen readers will hit the description / hint before reading the form field details so the user will know what is needed to complete the field successfully. If the hint comes after the field then there is a good chance they will have already filled it in before they hear the hint text.

If the hint is also used as a validation / failure text then it is poor accessibility to display these after the field for the same reason. The user needs to know the failure reason before hearing their actual entered value so they can hear how their entry broke the validation. Otherwise they would have to assume each field has failed and then wait to hear if it failed. Hearing the validation first prepares them 'ok, this field that is about to be read out has an error in it'

(Actually, for even better accessibility you should list out all the validation failures at the very top of the form so the user knows straight away what fields failed and how many there were that did)

Also, don't forget Keyboard users. If someone is using a keyboard and is tabbing through fields without using the mouse and the form has many fields 'below the fold' then tabbing into lower down fields will only bring that field into view and not the hint text if that text falls below the field.

share|improve this answer
1  
+1 for a good explanation but I want to see data. This question evokes the "common sense UX" but it's dealing with brain functions (cognition & association) so studies are imperative. –  dnbrv Jun 28 '12 at 2:15
2  
@dnbrv fair enough that you're looking for studies about the visual position of the information, but regardless of what those studies do find please make sure you markup your HTML to include the help / error text before the fields. Even if you opt to visually display the text after the field it should come before the field in the markup. Physically placing the instruction text above fields just means that everyone gets to see / hear the same thing. –  JonW Jun 28 '12 at 8:16
    
Oh, yeah, screen-reader-friendly DOM is a must. –  dnbrv Jun 28 '12 at 14:25
add comment

JotForm developer here.

These hints are mostly used to help users with the input type or a few examples of a correct entry. It will be confusing and crowded for users to see help texts right under the question. We usually want them to focus, only on the question. When they come to answer asked question they can read a simple hint about the expected entry or they may completely ignore the hint, hence the small font and light gray color.

You don't want to show too much information and scare away potential submitters of your survey.

share|improve this answer
1  
Have you tested other layouts in the early days? –  dnbrv Jun 28 '12 at 14:22
add comment

Because these instructions are supposed to be read after the user has tried and failed to interpret a field, not read first of all by every user.

In the case of the Twitter examples, these texts often don't actually explain how to fill in the field, but rather how to make a decision. That is, they are supposed to be read only if a user struggles with a decision point. Users who know the domain or have 'slot in' responses (common when filling in identifying features) don't need to see the text, so it can sit in a subsidiary location.

There are other factors at play, too. Instructions before form fields would make it harder to associate pairs, because having the (usually larger) form field first establishes a visual heirarchy (as Ben Brocka mentions in the comment above). It also means that fields and labels can sit very close together, which aids parsing (especially when a user is seeking a field to edit it after the original submission).

share|improve this answer
    
Thanks for a new perspective on the IA of Twitter help. I didn't think of them that way, of which I'm ashamed. However, I'd like to see a study that confirms that instructions before the field hinder comprehension of relationships. –  dnbrv Jun 28 '12 at 2:12
1  
@dnbrv You're 'ashamed' that you didn't think of something a certain way? I love UX as much as anyone, but even I don't take things that seriously. Sometimes we miss concepts just thanks to perspective, but make up for that by helping our peers overcome their own blind spots. Don't sweat it. –  Jimmy Breck-McKye Jun 28 '12 at 8:46
    
Heh. If 'ashamed' is too strong, I'm embarrassed & feel silly, simply because I usually catch such semantic differences right away. Thanks for "opening my eyes". =) –  dnbrv Jun 28 '12 at 14:25
    
For the mentioned reasons, I like Yahoo's solution of placing those hints to the right of the text-box, and only on focus. –  Dvir Adler Dec 17 '12 at 10:09
add comment

If the task is pretty straight forward (for the majority of users) then the instructions shouldn't get in their way.

E.g. use tool tips or show slightly smaller and greyer text below input boxes (perhaps only of current field and fields with invalid inputs).


If the task is complex (for the majority of users) then the instructions should be a lot more noticeable.

E.g. Box help messages and place them to the side of the form (e.g. to left of the form if it is LTR) and have arrows pointing towards the inputs.

Kind of like thisenter image description here
But with colors that stick out a lot less (e.g. light grey), except perhaps for active field (perhaps darker grey) and errors (red).


If all you want to do is mark required field, then using a different background (e.g. yellow instead of white or dark yellow instead of black) + text below could be a good solution.

Using stars with explanations elsewhere can force the users to start looking for the explanations.

Using links to help forces the user to open help tabs/windows instead of getting a preview in-place. - Unless it is an overlay pop-up with click outside to close with a clear differentiator for regular links (e.g. double underline).

share|improve this answer
    
Do you have any studies to support any of your claims? As of right now, your answer sounds like nothing but personal opinions & preferences. –  dnbrv Jun 27 '12 at 20:02
    
The examples are just that - meant to illustrate my point about different levels of guidance and nothing more. As of the need to use different levels of guidance for different level of complexity, that shouldn't require a study. –  Danny Varod Jun 27 '12 at 21:15
add comment

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.