8 February 2016

Should icons have labels?

A common debate within User Experience is whether an icon should be accompanied by a label; we put the argument to the test with the Brandwidth team . . .

The ‘for’ argument:
The interaction cost is the sum of efforts — mental and physical — that the users must deploy in interacting with a site in order to reach their goals. Without a label the interaction cost of engagement is increased.

The ‘against’ argument:
Users are familiar with the icon. They see it all the time and therefore the meaning is ingrained in their memory forever more.

The hypothesis to test:
By removing labels from common and familiar icons users would find it difficult to match them to their respective meanings.

The test:
Users were shown an icon and then four label options, of which only one was the correct answer. There were 19 icons in total, and all the icons were taken from popular iOS apps (mostly from the Top 20 list in the App Store or from apps that come as part of the iOS firmware).

The results:
Of the 144 people who played the game (at the time of writing), 61.81% managed to identify between 4–7 of the icons. A further 22.92% managed to get between 8–13. But no one was able to identify 14 of more icons, let alone the whole 19.

Round up:
Sadly, as much as we may wish it to be, the game above is not scientific. It does however, help to demonstrate the importance and relevance of UX guidance in a way that we can all resonate with. Demonstration of concepts is perhaps the most important tool in the UX practitioner tool belt. If a client buys-in to the guidance being offered then suddenly we have a real opportunity to improve user experience. For example, one of Brandwidth’s clients decided to add the label ‘Menu’ below their hamburger icon on the mobile version of their website. That one small change resulted in a 42.09% uplift in click activity on that icon. By adding a label the icon suddenly became more visible to users.

But how do we account for the individual expertise of users? For example, user A engages with an app 4 times a day, and has been doing so for the best part of a year; they become familiar with the layout and are accustomed to how the app works in every way. User B has downloaded the app for the first time; they have never seen the UI before. User A has a far greater expertise level than User B.

That is where progressive reduction comes into play, the idea that as a user becomes more familiar with an interface they have less need for signposting. This in turn frees up the design to be cleaner and allows the user to focus on other tasks relevant to their expertise level.

For the last few years digital web/app/product development has been heavily focused on adaptive and responsive design, ensuring users have access to content across multiple devices. We now need to take what this design approach has started, and begin applying it to the way users orientate and consume content. The first step is to understand the importance and strength of the Signs we are creating. Only then can we consider optimising and personalising the experience. Only then can we start to remove the labels.

Take the test yourself