Always use a label

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?

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:

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?

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

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

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.


Show your support

Clapping shows how much you appreciated Adam Silver’s story.