Infield top-aligned labels: use with care!

In April, Anthony from UX Movement posted a detailed article arguing for a new way to position field labels in forms. For a number of reasons, Anthony said, the best location for a field label is just inside the top left border of the field. He called this label positioning “infield top-aligned”.

We think it’s great that people like Anthony are continually looking for ways to improve the form-filling experience for users. Sometimes the worst design is always doing what’s always been done! Indeed, our recent article about required versus optional fields declares it’s time for that aspect of form design to evolve.

However, we think there are some real problems with the infield top-aligned approach, and the arguments on which it is based. We wanted to share these concerns, so you can make an fully-informed decision. You may also want to refer to our Sitepoint article “The Definitive Guide to Form Label Positioning“.

Problems with the motivation

The article argues that currently-used label positions – especially above or inside the field – are not satisfactory because they:

  1. Make scanning harder than it needs to be, because:
    • more fixations are needed;
    • whitespace between questions acts as a barrier; and
    • labels disappear (when inside the field).
  2. Make a form look longer.
  3. Make a form longer than it needs to be (when the label is above the field).

We feel these arguments have some pretty important weaknesses, as we’ll explain.

Proposed problem 1: The current approaches make scanning harder than it needs to be, because more fixations are needed, whitespace is a barrier and labels disappear

For starters, with forms the primary activity is filling in, not scanning. Our priority should always be supporting the primary action.

Yes, some people scan before filling to see how big a form is. But not everyone does this, yet everyone experiences answering questions. It’s also just as likely that people who scan pre-fill are looking at overall size, rather than reading individual field labels.

Kahneman (1973) reported that the area in focus is about 2 degrees, or about the width of 9 characters. This means a label and its field can be seen at the same glance. Having labels outside fields creates should not significantly increase fixations.

There is no evidence for the assertion that whitespace between questions acts as a barrier to scanning. Moreover, whitespace between questions is a valuable – and low-cognitive-burden – cue for the end of one question and the start of another.

We totally agree that scanning a form to review it after completion is basically impossible if labels disappear. But that’s a reason to never use inline labels. There’s also the problem of people thinking the field has already been filled-in.

Proposed problem 2: The current approaches make a form look longer

It may seem like putting the label inside the field saves vertical space, but it’s an illusion.

If a label is above a field, the label takes up “L” pixels of vertical space and the field takes up “F” pixels of vertical space, giving a total vertical space of L+F.

If you put the label inside the field, top-aligned, the field has to stretch to F+L height, in order that there’s still enough room for the field. So the total vertical space if L+F, exactly the same as if we put the label above the field.

True, the total vertical space, with labels infield and top-aligned, can be smaller if you reduce the font size of the label. But that causes serious usability and accessibility issues.

Proposed problem 3: Labels above fields make a form seem much longer than it is

It is true that positioning labels above fields makes a form twice as long as positioning them beside the field. But for the reasons given above, putting the label infield doesn’t actually solve this problem.

The supposed advantages of infield top-aligned

There isn’t a strong basis for trying a new position for field labels but maybe it’s a better approach anyway? The advantages of infield top-aligned labels, as given in the article, are:

  1. Yields a leaner, more compact form.
  2. Gives stronger focus to fields.
  3. Creates its own grid to guide field placement.
  4. Echoes an approach used on paper forms.

Unfortunately, each of these arguments is fairly weak.

Yields a leaner, more compact form

A form without whitespace between questions is leaner and more compact. But is that form less intimidating and more usable? Not necessarily.

It’s well established that whitespace helps a design ‘breathe’. When presenting prose, we have whitespace between lines of text because if they were completely up against each other, not only would the text seem dense and thus less inviting, but it’s hard to know and keep one’s place. There’s no reason to believe forms are any different, so the form without whitespace between questions may in fact be less appealing and more difficult for the form-filler.

Gives stronger focus to fields

To be honest, we’re not quite sure what Anthony is trying to say in this part of the article. Gestalt principles do tell us that the border of a field will separate it, somewhat, from its label. When the label is inside the field, there is less separation.

But actually what’s happened is a border has been put around the combined label+field, and the field itself has no border (if it’s a text input). Is this better or perhaps even worse? Fields look less like fields, so maybe form-fillers will have a harder time finding what they need.

Creates its own grid to guide field placement

The idea here is that the width of the label+fields will determine how they should be arranged. Conveniently, the examples used in the article have fields that fit nicely beside each other, like pieces of a jigsaw puzzle. This is rarely the case, though.

Furthermore, the 9-character width of focus of vision tells us that the fields to the right will often be not seen and therefore not answered. This is especially the case if the answer given to the left-hand-side field is only short, so there’s no reason for the eye to go to the end of the label+field. This is why, regardless of where you position your labels, we always recommend fields be stacked so there is only one field per line, and there’s a clear vertical path to completion.

Echoes an approach used on some paper forms

Finally, the article makes the claim that “older, less tech-savvy” people “aren’t used to interacting with online forms” and because some paper forms historically used labels inside fields – we believe these were called “caption” style labels – such users will feel more comfortable if we place labels infield top-aligned.

We see two major problems with this claim. Firstly, research repeatedly shows that older people are not necessarily “less tech-savvy” than younger people [1]. Secondly, we’re not sure that the caption style was used frequently, consistently and recently enough to be instantly recognisable and create a feeling of comfortable familiarity.

Disadvantages of infield top-aligned

On top of weak/unsubstantiated claims about advantages, there are some fairly serious disadvantages to infield top-aligned labels, none of which are mentioned in the article. The main ones we can think of are:

  • Doesn’t lend itself to clear, usable error messaging (this was mentioned by quite a few commenters to the original piece).
  • Doesn’t work well for labels that are longer than fields.
  • Means more visual noise when compared to the current approaches, because you need boxes around every label+field combination.

New techniques always need testing

A number of commenters to the original article asked whether the proposed positioning had been tested. Apparently so, but the results can’t be shared because of commercial confidentiality.

Unfortunately, not knowing anything about the testing – e.g. number of participants, what the metrics were, whether any comparisons were made, statistical significance and power etc – means we have no information on the in/effectiveness of the approach. Would be great to see some rigorous, comparative testing with a good cross-section of participants. Until then, it’s crucial to do your own testing, if you’re considering implementing infield top-aligned labels.

In conclusion, use with extreme care

We acknowledge that, like all humans, we have a bias against change – and thus new form design approaches – when first proposed. But we feel we are equally open to the evolution of form design if it genuinely results in better user experiences.

When it comes to infield top-aligned labels we strongly suggest you use great care, given that:

  • the problems with current approaches aren’t as great as suggested;
  • the supposed advantages of infield top-aligned are flimsy;
  • the infield top-aligned approach has significant disadvantages; and
  • there is yet no publicly-available, high-quality evidence to support infield top-aligned labels.

What do you think? Please leave a comment and let’s continue the discussion.