Unlabeled Icons: Sacrificing Usability for Aesthetics
Do you really not have room to label that?
People have been confused by unlabeled pictograms for over 10,000 years. I am not the first person to write a version of this article. However, despite 2021 being several thousand years after the invention of written language, modern applications are still swarming with naked, unlabeled symbols.
Do people understand unlabeled icons?
No. We can dive deep into user research to tell us this, or we can simply take a look around us and honestly admit how often we ourselves are confused about icon meaning. If you’re reading this, you likely work in UX, or at least in a field related to tech. If you, an expert, have trouble interpreting icon meaning, then it’s very safe to assume that the public is totally baffled…and their parents are twice as baffled.
Vague Icons, Unsure Effects
Remember, when you are considering presenting an unlabeled icon to a user, the question isn’t:
Does this icon make sense when I know the function?”
It is:
Can all of the users guess the whole function accurately from only the icon?
Take a look at these unlabeled icons used in extremely popular applications, where they are presented with minimal context. Try and quickly guess what functions they indicate:
It’s very difficult to do accurately. They are, in order, “Start a Group Order”, “Sort by Popular” and “Show Available Devices”. If you tested random people on the street, you probably wouldn’t expect many to get them right.
Below are two examples of a somewhat common icon, but what exactly will happen when you tap them on a page with no label?
Quite different effects. Information scent and clarity is very important. If a user is unsure of the effect of an input, they experience confusion, avoidance, and frustration. Even if a user is able to interpret the general meaning of this icon (create something with video), that still isn’t enough to give them an accurate picture of the icon’s function across sites.
For extraordinarily commonly used, old, and consistent icons, such as the magnifying glass for search, recognizability can be pretty good. However, the number of icons in this class are few. If you have to think at all about what icon should represent a given functionality in your product, then your icon is almost certainly not among them.
Inequitable Icons
For mass consumption, symbols sometimes successfully cross culture and ability barriers, but often they fail. If you’re designing for a diverse audience, this becomes an issue.
For low-vision users, many icons contain tiny details that make them indistinguishable. For screen-reader users, they are totally unreadable unless tagged properly. For users with fine motor impairment, the tiny unlabeled icon you chose to just barely fit the UI is a nightmare to tap accurately. It’s also a nightmare for all users when they try to operate your app with one thumb while carrying groceries on the bus.
The super snazzy icon you whipped up to fit the site theme might even work great for users in your country, but completely mislead users in another. In China, a compass icon means “More Options” (the equivalent of a hamburger or three-dot icon), a T-shirt means “Customization Options”. Or, for example, mailboxes in their country might look completely different than mailboxes in your country. Once you’ve made a mistake like this, it’s often hard to catch. Are you planning to test your product on users from multiple different cultures?
Inconsistent Icons
Then we have delightful things like the one thousand different share icons. You might have memorized these, but do you expect a seventy year-old, a child, or someone who spends 1/100th of the time you do on the internet to have memorized them?
Yikes. Icons used in this way require a lot of experience and thought to help the user guess at their meaning. Unfortunately, this isn’t even the end of the problem. As difficult as it is for many users to identify uncommon or somewhat vague icons, there are even more impossible examples.
Totally New Icons Nobody Has Ever Seen Before
Here are some lovely new icons invented just in the last few years, with almost no visible clues as to their meaning. Again, these are presented without labels in their respective apps.
The first is, of course, “Toggle Top-Tweets/Latest-Tweets” from Twitter. The second is “Gaming”, an icon that had never been seen in history before Facebook created it recently. These icons are, for all intents and purposes, impossible for a first time user to correctly identify. Their creators are expecting users to tap/click them blindly and deduce the function.
This is not ideal user-centered design.
The Simple Solution: Use Labels
Given all of these serious difficulties, is there some possible technique we could employ to drastically increase functionality? I’m glad you asked. Yes, all this can be avoided by just slapping one or two word labels on those icons.
Well written labels are absolutely fantastic for conveying complex actions. They are much harder to misinterpret. In fact, the icon and the label can even work synergistically, each conveying meaning which becomes even more clear based on it’s contextual relationship to the other. No research that I know of has ever shown labeled icons to be less scannable/recognizable than unlabeled ones. You can’t lose.
As designers, we know this already. Non-designers know this already. If I took you out on the street and bet you $100 that people would more accurately guess the functions of a list of twenty labeled icons versus twenty unlabeled icons…..None of you would take me up on that bet.
So Why Are Unlabeled Icons Used So Frequently?
There are a few reasons, both spoken and unspoken, behind this practice:
Icons are quickly recognized once learned, even faster than text!
This is a very bad argument for several reasons.
- You’re still sacrificing the experience of new users during their introduction to your product and onboarding process. This is the most crucial usability period, as it’s when users are deciding if they will bother to to use your product. Being confused or frustrated here will often lead to them leaving and never coming back. They have no investment to hold them on your platform.
- Jakob’s Law. User’s spend most of their time using other products, not your product. Since icons are regularly used inconsistently across other products, it’s extremely difficult for users to actually learn their specific functions in your product. Other products are constantly teaching them the “wrong” meanings.
- If your user gets confused and can’t remember or infer an icon meaning in your app one time, or even just has to think hard for a few seconds to figure it out, then time and effort wasted massively outweighs the tiny incremental benefits of faster icon recognition. This happens more than one time in reality.
- Experienced users actually often don’t even look at signifiers at all, they memorize the position of buttons. What UI change always drives power users insane? When an update moves where a button is located.
Naked icons save space, we can’t possibly fit labels into this interface!
Ok, this is true. Icons do save space. However, knowing just how many severe and common problems there are with using unlabeled icons, there must be a very compelling reason you can’t fit labels into an interface. Is this actually the case in the wild?
Absolutely not.
And these are examples of interfaces planned around using small unlabeled icons, which we can still easily fit labels on. If designers were really prioritizing labels, they could design completely different interfaces to specifically accommodate text for all icons displayed. If you can’t fit five labels across the top of your app, maybe you could reduce the items to four categories instead.
Is it harder to design UI’s where each button has a minimum size and restricted aspect ratio based on font size and word length? Yes. But it’s not impossible, or even particularly challenging for most applications. Most products are not Autodesk Maya.
But I don’t think space or usability claims are the primary reason for the current situation. I think the real reason we continue to see so many unlabeled icon is this:
They look very nice!
Now first of all, looking good is not a trivial benefit. Multiple studies have shown that people generally report more satisfaction and rate usability higher on attractive interfaces. Having a beautiful product is good and UX designers should think about beauty. The issue is when designers lose sight of what is being sacrificed to achieve that look.
Replacing a sea of text with a few artistic icons is very satisfying. It looks very clean and minimal. It looks very “designed”. It’s how interfaces have looked for many years, and it’s something we’re used to. It’s very easy, from the position of creators, to forget just how much it’s hurting users to do this.
Designers and developers work on a product intensely for weeks, months, or even years. Every single icon and it’s function has been engraved into their brains a thousand times over. When you know what a button does as intensely as the design team after finishing a project, it’s very hard to remember just how much your users won’t know it. After long enough, people legitimately forget there can be any other interpretation for an icon. This is why creators often get so shocked and frustrated watching user testing. After enough repetition, the idea that someone wouldn’t see this as “Show Available Devices” becomes surprising and unbelievable.
Other stakeholders in the process face the opposite problem. They look at the interface occasionally as a manager or to sign off their approval, but rarely ever actually use it. For these people a “clean” attractive interface looks fantastic, and the problems created by stripping out all the descriptive text are rarely experienced. If they do “use” the interface, it’s often just clicking around aimlessly without any real goal or purpose. For this use case, unlabeled icons perform excellently.
This isn’t a criticism of those roles. It’s not their job to critique usability, they aren’t designers. But it does lead to a system of perverse incentives where a design which performs worse can often receive more praise and attention than a design which performs better.
The collision of these roles, and the unfortunate status-quo where a designer can easily back up a decision to use indecipherable icons by pointing out Facebook and Apple doing the same thing, has led us to the sub-optimal spot we’re at today.
We’re making progress. Some big players are releasing updates labeling more icons right now, and there are some great popular apps with excellent descriptive (and pretty) interfaces. But…we’re still not there yet.
How do we fix this?
First of all, user testing. Actually going out and putting the interface in front of the user gives both the designers and the rest of the team the reality check they need, hopefully with some quantifiable metrics to objectively back things up for stakeholders. If you’re running A/B tests, make sure one of your trials compares labeled versus unlabeled variants. Even if you’re working on a small project without the budget for extensive research, at least make sure you force all your friends to try things out at multiple steps in the process. Resist assuming afterward that all your friends are dumb and your design is perfect.
Secondly, education. This is something that designers need to know deeply, and consciously hold in mind throughout the creative process. Especially on those small teams and bootstrapped startups, where there’s nobody with the time or energy to check your work, you need to empathize with those confused users. If you’re responsible for establishing style guides or design patterns, make it default practice to have everything labeled.
Deciding to use a naked icon isn’t the end of the world. Sometimes it really is the best solution for a situation, but you should be weighing the potential serious downsides when making that decision, not just doing it on a whim or to fit a style.
It’s not going to feel natural. It feels natural to just assume everyone knows what you mean and copy Snapchat.
