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.

Image for post
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.

Image for post
“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.

Image for post
Larger hit area helps motor-impaired users activate a control

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

They do and unfortunately, it’s rather common to find missing labels on product forms. ASOS suffers from this problem as you can see below:

Image for post
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:

Image for post
House of Fraser has a label for their quantity menu

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

It does and unfortunately, search forms are often designed without a label. As an example you can see Selfridges below:

Image for post
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:

Image for post
Smashing Magazine’s search form uses a label

Summary

Accommodating labels into a visual design can be challenging but shying away from the challenge is not the answer. Embrace the challenge, don’t over simplify. And of course, always use a label.

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…

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store