Always use a label

Adam Silver
Jul 1, 2016 · 3 min read

Sometimes designers oversimplify a form by removing the labels. The problem is that minimal does not always mean it’s simple — which is certainly the case for labels. Labels, in fact, are an essential part of designing easy-to-use forms. Here’s why:

A) Sighted users will see the instructions and know what to do. Without a label this is challenging at best.

The visual label helps sighted users understand what to type

B) Visually-impaired users will hear the instructions when using a screen reader. Without a label this is impossible.

“Username” will be read out by screen readers

C) Motor-impaired users will find it easier to activate a control using a mouse or finger, due to the hit region increasing in size. This is because clicking (or tapping) a label acts as if the user clicked the control itself.

Larger hit area helps motor-impaired users activate a control

But sort/size/colour/quantity menus don’t need labels do they?

ASOS’ product form omits labels on drop downs

Instead of a label, they rely on the first option in the menu to provide meaning. Whilst this is sort of okay for visual users in the non-selected state, it does suffer from points B and C — and A when a value has been selected — as is the case with the colour menu as shown above.

House of Fraser shows a label with their quantity menu improving usabilty for everyone:

House of Fraser has a label for their quantity menu

But a simple search form doesn’t need a label does it?

Selfridges’ search form omits the label

Instead of a label, they rely on the submit button (in this case a magnifying glass) and the placeholder to provide meaning. But this is unnecessarily difficult to use for less abled people — and of course —placeholders should not be used as a replacement for labels.

Smashing Magazine shows that including a label can be both beautiful and functional at the same time:

Smashing Magazine’s search form uses a label

Summary

Please hit ♥ below if you found this post useful so others can read it.

By the way, because forms are such an important part of the web, I am writing an entire book about how to design and build them. If you want me to let you know when it’s finished subscribe here and I will keep you posted. Thank you.

Simple = Human

Design, Development and Leadership articles written and…

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins

Adam Silver

Written by

Author of Form Design Patterns and interaction designer focused on design systems and inclusive design.

Simple = Human

Design, Development and Leadership articles written and curated by Adam Silver & Mark Jenkins