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:

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.

  • 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, 2012 at 18:35
  • @BenBrocka I've just added a few more screenshots from popular web builders.
    – dnbrv
    Jun 27, 2012 at 18:50

5 Answers 5


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

  • 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, 2012 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. Jun 28, 2012 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, 2012 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, 2012 at 10:09

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.

  • 1
    Have you tested other layouts in the early days?
    – dnbrv
    Jun 28, 2012 at 14:22

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.

  • 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, 2012 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, 2012 at 8:16
  • Oh, yeah, screen-reader-friendly DOM is a must.
    – dnbrv
    Jun 28, 2012 at 14:25

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

  • I'm looking for a factual explanation not personal preferences.
    – dnbrv
    Jun 28, 2012 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, 2012 at 18:18
  • 1
    @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, 2012 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, 2012 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, 2012 at 18:50

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

  • 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, 2012 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. Jun 27, 2012 at 21:15

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.