Always use a label

First sent to my private mailing list.

You might be tempted to remove labels from some form controls to create a minimal aesthetic and save space. But it’s a UX myth that saving space and minimalist design equates to better experiences.

Labels are essential because:

  1. sighted users will be able to see the instructions;
  2. visually-impaired users will hear the instructions when using a screen reader; and
  3. motor-impaired users will find it easier to select a field thanks to the larger hit area. This is because clicking a label will move focus to the control.

Let’s take a look at two examples whereby designers frequently ditch the label.

1. Add to basket form

When a form uses a select menu, designers sometimes rely on the first option in the list to denote meaning. Take a look at ASOS’s add to basket form.

ASOS’ product form omits labels on drop downs
The menus are mising labels

Notes

2. Search form

When a form has just one field—as would be the case with a search form—designers rely on placeholder text and the submit button to denote meaning. Take a look at Selfridges’ search form.

Selfridges’ search form omits the label
The search field is missing a label

Notes

Summary

Trying to declutter an interface to reduce noise is a noble goal. But labels aren’t noise. Removing labels to save space causes unnecessary usability problems.

Accomodating a visual label might be a design challenge, but we should embrace this challenge by prioritising their inclusion during the early stages of design. This ensures our forms are user-friendly.

Join my newsletter

If you want to read about designing inclusive, simple and human experiences on the web, you'll probably love my newsletter.