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:
- sighted users will be able to see the instructions;
- visually-impaired users will hear the instructions when using a screen reader; and
- 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.
- This is okay for visual users when an option hasn’t been selected yet. But, if one has been selected, it’s hard to understand, as is the case with the colour menu shown above.
- Motor-impaired users will find it harder to select the field due to the smaller hit area.
- Screen reader users will struggle to understand what’s going on. The values will be announced as “Select size, Small, Medium, Large”—that is, they’re a mix of instructions and options to pick.
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.
- Visual users will be okay to begin with due to the placeholder. But placeholders are problematic for many reasons. One example is that once the user starts typing the instruction disappears.
- Motor-impaired users again will find it harder to select the field.
- Screen reader users will find it difficult because the placeholder is not announced.
- If a foreigner wants to translate the page using the browser’s translation routine, the placeholder is ignored which causes confusion.
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.