As a UX practitioner I constantly find myself in a position where I need to demonstrate a UX concept to a client, colleague, or friend in a way that instantly resonates, ideally on an emotional level but most importantly, on a “Ah! I get it and I can’t really argue with you” level.
A recurring point of contention is the importance of accompanying an icon with a label.
They argue:
Users are familiar with the icon. They see it all the time and therefore the meaning is ingrained in their memory forever more.
And there’s certainly been plenty of debate on the matter. Zoltán Gócza and Zoltan Kollin provide some interesting research to debunk the myth that icons enhance usability, while Min Ming Lo entertainingly argues the problem facing the share icon in particular.
The debate also transcends UI icons, impacting branding in general. Take Uber’s rebrand of their app icon…
Uber’s old design followed the Silicon Valley convention of using the first letter of the brand name as the icon. In this instance the label has been distilled into a single character. A safe way to reinforce the brand at all times.
But following the rebrand, the icon — perhaps in an attempt to be more emotive — has lost some of its meaning. The label has been completely removed, its purpose is no longer overt, and the user is forced to try interpret its meaning. What is the polo mint and Aztec background trying to tell me?
Flipbook, Medium, Facebook, Vine, and Primer all incorporate the first letter of the brand/product into the icon design
Of course, like all change, over time users adapt and become familiar with the new status quo. (Panic over). But does the problem really go away?
Let’s return to UI icons in general. A good user experience can be defined in many ways, but one measure is the ability to reduce the user’s effort to think. The Nielson Norman Group define this as the interaction cost.
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.
An important factor that contributes to the mental effort is the ability to determine meaning. In semiotic theory this is called the Sign.
The Sign is made up of two parts: the Signifier and the Signified. For example, imagine a shop door that has a red placard that reads “Closed”. This is the Signifier, it is something tangible that exists in the real world. In this instance the Signified would be that the shop is shut for business. The Signified is abstract, conceptual, a thought. Both these elements make up the Sign and together they create meaning that can be interpreted by the user.
The Signifier is often made up of a number of components. The “Closed” placard in my example benefitted from colour psychology and context, as much as it did the written communication (aka the label). A strong Signifier will make use of as many components as possible if it hopes to reduce the interaction cost and create an effortless user experience. By removing one of these components the Signifier is weakened and the Signified becomes blurred. But…
Users are familiar with the icon. They see it all the time and therefore the meaning is ingrained in their memory forever more.
Or so the argument goes. But how true is that premise?
The Game
I wanted to test the theory and so I created a game based on the following hypothesis that:
By removing labels from common and familiar icons users would find it difficult to match them to their respective meanings.
The game was simple. Users were shown an icon and then four label options below, 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).
Example questions from the game
I was very aware that showing the icons out of the context of the app itself would put the tester at an unfair advantage. But the game was also multiple choice, which I felt evened things up. And surely if these icons are ingrained in our memory matching them should be a piece of cake…
Well, if you want to see for yourself just how easy or difficult the game is then you can still play it here: http://www.motionbrothers.co.uk/signified/
Results
The results were revealing. 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.
But 19 is a lot of icons to remember, right? Well (again at time of writing) the Facebook iOS app alone is currently using at least 19 icons in its UI.
In Practice
Sadly, as much as I may wish it to be, the game above is not scientific. It does however, help to demonstrate a point to a client, colleague, or friend in a way that instantly resonates. They themselves can play the game and quickly understand the importance and relevance of the UX guidance being offered. 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, a client I work for 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.
The Future of Labels?
I’ll return once more to the argument that:
Users are familiar with the icon. They see it all the time and therefore the meaning is ingrained in their memory forever more.
To be fair, there is some truth in this statement. Yes, the data shows that labels improve the user experience for the majority of users by strengthening the Sign. But what the data can’t take into account is the expertise level of a lone user.
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.
Usability theory tells us that the best way to design icons for both User A and User B would be to include labels — designing for the lowest common denominator. But surely the ultimate goal of UX is to design for individual user needs. Only then can we achieve a truly personalised experience. Enter progressive reduction.
I first read about progressive reduction in an article put forward by Allan Grinshtein. The concept is simple enough. As a user becomes more familiar with a UI then they have less need for signposting. In the same way that on the first visit to a high street department store we may need to consult the floorplan, but over time and after repeat visits the need for orientation is required less and less. We swiftly learn that men’s ties are on the top floor at the back, or women’s shoes are on the ground floor.
When applied to a digital product, progressive reduction can help to remove labels that are no longer needed once the user knows what the button does. This frees up the design to be cleaner and allows the user to focus on other tasks relevant to their expertise level.
Here is an example of how the Medium app could have used progressive reduction to remove labels from commonly used icons as the user engages with the app over a period of time.
Progressive reduction example using the Medium app
For the last few years we involved in digital web/app/product development have 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.