Should help-text be above or below the input?

Question

There are many frameworks that support some variant of "help text", that is text which supplements the heading, label and placeholder. It's often used to give a brief description of the purpose of the field when that purpose is complex or potentially unclear.

One example of this is Bootstrap's help text, shown here:

Another example is Django's help text examples, shown here:

Here is our current implementation, which has the supplement text above the inputs:

The question here is should form help / supplement text be above or below the corresponding input field?

Answer 1

In your case it should be above, but consider redesigning your form

---

Forms usually represent an overall workflow (the form) split up into micro workflows (each field).

---

This is a simple but powerful way of thinking about form UX, because it helps you make a lot of decisions around how to lay out a form.

1. First, the overall workflow needs to be clear. This is why forms are usually organized vertically so that the flow is clear to the user (top-to-bottom). Your form organizes fields in a 2x2 matrix which is an antipattern because the user has no indication of how to navigate it (across then down? down then across?).

   • Consider creating better overall flow by either organizing your fields vertically (better), or labeling them (1,2,3,4) so that the user has some cue for how to navigate the form. Even if the order-of-entry doesn't matter, flow is still important because the user doesn't know that.

2. Once you sort out your overall workflow, think of each field as a micro-workflow.

   • Your fields have a long label (what you call "help text") AND a placeholder. This presents the user with a lot of cognitive load just to fill in one field. The user has to read the long caption. Then he has to examine the field and read the placeholder, and relate that placeholder to the label he just read. The he has to fill in the field.
   • Don't do this!. Instead, think of the best way to accomplish the micro-workflow: the user simply needs to understand what the field does, and fill it in accurately.
   • That means, it's good practice to use a label or a placeholder but not both.
   • If you really need the long label, then leave the field blank. This presents the user with a clear micro-workflow: read the label, then fill in the blank field.

Once you think in terms of micro-workflows, the placement issue becomes much easier. If your form is organized top-to-bottom, then it makes sense to also orient your field micro-workflow from top to bottom: i.e. put the label on top and the input box below.

---

BTW

The micro-workflow model can also help you design fields with both labels and placeholders, if you really want to do that. Since the micro-flow is: 1. understand the field, then 2. fill it in, this tells you that you can use the label to describe the field, and the placeholder to describe how to fill it in:

Answer 2

The main reason why the helping text should always be displayed after the input field is because people search for help only when something is going wrong or is hard to understand. Think about other examples and where the help button is placed.

People that fill in those fields would go through the process of TRIAL and ERROR first, because it is known that usually text is ignored and people are reading only what seems important to them.

If people won't get most of the form, that means you've did it all wrong (the form itself) and not self-explanatory or the label text is confusing. You can always do some basic tests with a bunch of friends or users.

Help text on fields should come in hand when someone types something in and they don't get the expected outcome in the end (not relevant, errors, type details etc.)

Answer 3

Yours is a typical case of help text - it is complementary.

Complementary elements

Complementary means that there is another visual element (label/placeholder) to indicate the nature of the field in a short and generic way, and the help text provides a longer and more detailed description.

In your example, it seems that first time users will need the text (as the labels are not very clear), but experienced users will not (they have already learnt what the label means).

Since there is another element to provide a shorter description, which is all experienced users will need, there is a strong argument to have the text after the field - it won't be in the way for experienced users, but easily seen by first-time users.

Accessibility

However, the issue of putting the help text after the field is that screen readers will only get to it after the user has focused on the field.

This can easily be addressed by providing either the label or the field a title or aria-label attributes.

Progressive disclosure

If this form is more likely to be used by experienced users, it could be beneficial to make this help text 'on-demand', like having a question mark that provides the help text on hover/click, or to provide it only when the field is focused (title or a tooltip). This will save visual noise.

Placeholders vs labels

Placeholders disappear once the user starts entering text, label do not.

Placeholders are appropriate for single-visit type of forms, meaning the user fills the form and never goes back to the filled form again. Login and register pages are such example.

If users can revisit the field form (such with 'edit song details') labels are much better as unlike placeholders they will be seen.

Answer 4

It really depends on what your users want. Frameworks are available out there but as UX designer, you need to know about user group you are designing for and if they are comfortable with it after a user testing.

The placeholder text outside the field is always visible whereas the one inside the field disappears or sometimes user needs to delete and write. That is one of the disadvantages of placeholder text inside field.

Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.

You can find out more http://www.nngroup.com/articles/form-design-placeholders/

Answer 5

Help text is really important for novice user and if the form fields are really complex then it is required for everyone. Good design will be 'When Help is available along with the field'. Suggestive text is also a form of 'help' than tells user what kind of data to be filled. Example of form fields is given below,

Answer 6

Help-text should be below the input-field. This way users only need to scan the labels and hint-text within the input-field, so less cognitive load. If these are not sufficient enough, the user can read further underneath the input-field.

The placement underneath the input-field also offers a natural alignment for data-validation if needed. The data-validation text is a further explanation, making the help-text redundant.

This examples includes 2 interaction options, depending on the needed layout of the form.

Answer 7

It really doesn't matter whether the "help text" is above or below the field but what you need to make sure is that, it is closer to the field the you are describing about. Simply, it's fine as long as the user can recognize to which field the "help text" pertains to. Keep it simple.

Answer 8

I strongly argue that help text should

1. be something you truly need (all to often it's added out of habit rather than necessity, which just clutters the form and makes it more complex)
2. come before the field rather than after (after all, if you need help filling out the field, that information should be read before you get to the field)
3. combined into the label itself, as that is the most direct and accessible location for it to be.

As such, I think the way you have it is perfect.

Answer 9

Don't switch for the sake of change

If you have a user base that's used to seeing it above, it's hard to make a case for change. This is not going to make a big improvement in comprehension, so you'll want to do a lot of user validation before switching standards.

OTOH, normal is good

For the general population, below the field is a more common standard and will likely require less learning on the part of new users. If you plan to bring on a lot of new users and your user validation shows you the existing base can adjust with relative ease, I'd take the more common approach.

Answer 10

Helper text really needs to be above the actual field. User needs to know what he's entering before he enters that. This is to avoid complicated glancing regime on the user's part.

Top-down reading flow also feels more natural and is widely adopted.

You would love to check this amazing article on this same topic: http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan

Answer 11

It all comes down to the context between help and a helpful hint or supplement.

• If it's essential data or a label, above is clear and conforms to a vertical hierarchy.
• If it's an obvious hint like a phone number with a label above the field, infield would save space — especially on a phone.
• If a quick example can get the ball rolling for a user on a larger field (perhaps something with several answers separated by commas), below or to the right of the field could be helpful.