The Definitive Guide to Form Label Positioning

When it comes to the design and development of forms, one of the most popular topics is the positioning of labels.

There are a range of different options, but many articles on the subject touch on only some of the advantages and disadvantages of some of these options.

How do you put all that disparate information together to make a good decision, especially if you’re in a hurry?

It was clearly time to bring everything together in one place. Read on for the different options for form label positioning, and the complete list of advantages and disadvantages for each.

If you haven’t got time for that, the main thing you need to know is:

The most usable and accessible option is to have labels always visible, and located above or beside the field.

There’s also a handy guide to choosing between these options.

Options for positioning form labels

For English-based forms, the main options (1) are:

  1. Label on top of the field
  2. Label to the left of the field, and flush left
  3. Label to the left of the field, and flush right
  4. Label inside the field
  5. Label as a tool tip

Five options for positioning form labels

Some of these choices are much better than others. Here’s the complete list of advantages and disadvantages for each approach.

1. Label on top of the field

Option 1: Label on top of the field

Advantages

  • On small screens, when focus is in-field, label can still be seen (despite zoom).
  • User may be able to see the label and the field within one glance.
  • Label length can be longer than field length.
  • Allows for different label lengths when form is translated into other languages.
  • Form is narrower compared to having labels beside fields.
  • Longer labels that wrap are easier to read, as there is a consistent left edge for the eye to return to.
  • Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
  • Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
  • At any time, users can compare their answers to the labels.
  • Easy to implement well.
  • In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
  • It’s easy for users to see where they have to enter information.
  • Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
  • Works with touch interfaces.

Disadvantages

  • Form is twice as long compared to forms with labels beside fields.
  • Labels are harder to scan, as they are separated by fields.

2. Label to the left of the field, and flush left

Option 2: Label to the left of the field, and flush left

Advantages

  • Form is shorter compared to having labels above fields.
  • Label length can be longer than field length.
  • Labels are easier to scan, as they are not separated by fields.
  • Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
  • At any time, users can compare their answers to the labels.
  • Easy to implement well.
  • In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
  • It’s easy for users to see where they have to enter information.
  • Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
  • Works with touch interfaces.

Disadvantages

  • On small screens, when focus is in-field, label may not be visible (because of zoom).
  • User is unlikely to be able to see the label and the field within one glance.
  • When form is translated into other languages, labels may no longer fit into allocated space.
  • Form is wider compared to having labels above fields.
  • Labels may be far away from their corresponding fields, so it can be hard to see which goes with which (zebra striping can help to minimise this issue).

3. Label to the left of the field, and flush right

Option 3: Label to the left of the field, and flush right

Advantages

  • User may be able to see the label and the field within one glance.
  • Form is shorter compared to having labels above fields.
  • Label length can be longer than field length.
  • Labels are easier to scan, as they are not separated by fields.
  • Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
  • Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
  • At any time, users can compare their answers to the labels.
  • Easy to implement well.
  • In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
  • It’s easy for users to see where they have to enter information.
  • Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
  • Works with touch interfaces.

Disadvantages

  • On small screens, when focus is in-field, label may not be visible (because of zoom).
  • When form is translated into other languages, labels may no longer fit into allocated space.
  • Form is wider compared to having labels above fields.
  • Longer labels that wrap are harder to read, as the left edge is ragged, making it more work for the eye to find the start of each line.

4. Label inside the field

Label inside the field

Advantages

  • On small screens, when focus is in-field, label can still be seen (despite zoom).
  • User may be able to see the label and the field within one glance.
  • Form is narrower compared to having labels beside fields.
  • Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
  • Works with touch interfaces.

Disadvantages

  • Label length has to be less than field length.
  • When form is translated into other languages, labels may no longer fit into allocated space.
  • Labels are harder to scan are they are contained within fields.
  • Doesn’t allow for longer labels that wrap.
  • If label disappears completely once the field is being filled out, the user has to remember what the label was, and will be derailed by interruptions.
  • If label disappears completely once the field is being filled out, the user can’t later compare their answers to the labels.
  • If the label stays as is, even when the field is being filled out, the user has significantly less room to enter information. It’s also very hard for users to distinguish labels from answers, and there is no real space-saving.
  • Difficult to implement well.
  • In HTML, use of the placeholder attribute as a replacement for label reduces accessibility.
  • Because fields look like they’ve already been filled out, it’s difficult for users to see where they have to enter information, so error rates are higher.
  • Doesn’t work with field types other than text boxes and possibly drop downs.

5. Label as a tool tip

Label as a tool tip"

Advantages

  • Allows for different label lengths when form is translated into other languages.
  • Form is somewhat narrower compared to having labels beside fields.
  • Labels are visually associated with their corresponding fields, so it easy to see which goes with which.
  • It’s easy for users to see where they have to enter information.

Disadvantages

  • Atypical design, so likely to confuse and frustrate users.
  • Breaks the conversational pattern that is central to successful form filling: ask the question before collecting the answer.
  • On small screens, when focus is in-field, label may not be visible.
  • User unlikely to be able to see the label and the field within one glance.
  • When form is translated into other languages, labels may no longer fit into allocated space.
  • Form is somewhat wider compared to having labels above fields.
  • Labels are impossible to scan as they are hidden.
  • If label disappears completely once the field is being filled out, the user has to remember what the label was, and will be derailed by interruptions.
  • If label disappears completely once the field is being filled out, the user can’t later compare their answers to the labels.
  • Difficult to implement well.
  • Reduces accessibility.
  • Doesn’t work with field types other than text boxes and possibly drop downs.
  • Doesn’t work well with touch interfaces.

Deciding on position

Even if you don’t actually read the text in the bullet points above, it’s clear that there are many more disadvantages than advantages for:

  • label inside the field
  • label as a tooltip.

So in most cases, these are going to be poor choices. Instead, go with one of the following:

  • label on top of the field
  • label to the left of the field, and flush left
  • label to the left of the field, and flush right.

To decide between these three options, ask the following questions:

Question to ask about the form How answer impacts label positioning
Will this form be filled out on small screens? Best choice for small screens is label above field.
Will the form be accessed via touch? Avoid labels inside fields or as tool tips.
Are the labels mostly short? Labels beside fields works best when labels are short.
Are the labels full questions (e.g. “When do you want your new policy to start?”)? With full questions, labels can be either above or beside the field, but should be flush left.
Will the form be translated? Labels above fields gives the most flexibility for translation.
What types of fields does the form have? If there are fields other than text boxes, you can’t put labels inside fields. Labels as tool tips is also a poor choice.
What resources are available for development? Labels above fields take the least development time, closely followed by labels beside fields.
At what skill level are the developers? Labels inside fields or as tool tips should only be attempted by expert developers with plenty of time.

Consistency

Within a form

Like all elements of an interface’s design, consistency with label positioning helps users and minimises errors. This is because the brain is wired for patterns; when positioning is consistent the brain will rapidly learn where to look for labels. This means it’s best if you can stick just one approach per form.

Across forms

If users may encounter more than one form from your organisation, usability and accuracy are further aided by using consistent positioning across forms. Sometimes this means going for the next-to-best choice for an individual form, for the sake of overall usability.

For example, it may be that labels above fields are the ideal choice for the form you are currently working, but most other forms within your organisation work better with labels beside fields.

Summary

Form label positioning is a hotly-debated topic, with many people quick to declare one approach is a clear winner. In reality, the situation is more nuanced. But that doesn’t mean that deciding on positioning has to be hard. Using the questions and advantages/disadvantages above, you can easily determine what’s going to be best for your particular situation (and hopefully use that approach consistently).

What’s been your experience with label positioning? Are there any advantages and disadvantages that have been missed? Tell us in the comments.

Further reading