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.
B) Visually-impaired users will hear the instructions when using a screen reader. Without a label this is impossible.
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.
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:
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:
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:
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:
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.
