Where should form instructions or hints be placed?

Question

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:

^{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:

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

The same approach is used in Wufoo:

and in JotForm:

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

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

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 this
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).