Back in 2005, a young man by the name of Jensen Harris was an intern program manager at Microsoft. During that summer, he says, he learned a key UX lesson — on the use of icons — that carried over into the DNA of the now-ubiquitous “Ribbon” toolbar.
In a post titled “The Importance of labels,” he explains a user issue that had come to the Outlook 98 team’s attention:
“Part of the user experience effort around Outlook 98 was improving the menu and toolbar structure. One of the problems noticed again and again among non-expert users was that people didn’t use the (icon) toolbar at all!
With the exception of the “Delete” icon (which was perhaps familiar from the Windows 95 shell), people used the menus to reply, forward, and to create new messages.”
Microsoft’s design team tried several approaches to address the issue, including:
- Introducing new icons
- Rearranging the position of the icons
- Positioning icons under the menus from which the commands came from.
Nothing changed.
So Microsoft, in their wisdom, made a small change to the UI: they added labels to the most important toolbar buttons.
The result? According to Harris, significant increase in use across users of all skill levels.
Are icons inherently bad?
Harris’ story, at first glance, may seem to argue that icons without labels are automatically bad. That’s not entirely accurate. Icons can actually be a significant benefit when it comes to creating positive, intuitive user experiences for people.
Icons can contribute greatly, speeding comprehension and understanding, when their form is recognizable and builds on a user’s past experience. It’s a lot like writing: if you can say it in three to five words, there’s no reason to write an entire paragraph.
So don’t get the idea that I’m advocating a ban on icon use, or insisting that labels be added to every icon. Using icons in your UI design comes with very significant benefits:
- For mobile use, icons make excellent touch targets. When sized large enough (e.g. 48 px), they’re easily activated. And as a bonus, this also makes it very easy to hit them with a desktop or laptop cursor.
- They save space. Their compact size means that more icons linked to critical functionality can be displayed in a relatively small space.
- They’re quick to recognize, provided that users have familiarity with the chosen icons, and have seen or used them before (e.g. play, pause, print, like, etc.)
- They can transcend language barriers. For international users, certain symbols hold universal meaning (e.g. the envelope icon used for email).
- They’re aesthetically pleasing to the eye. Images tend to add some visual interest and life to otherwise dull UI screens, particularly in B2B or enterprise apps and systems.
In order for any or all of that to happen, however, the icons chosen have to be clearly representational in nature, and the use scenario at hand should be one that benefits from the use of an icon.
If you’ve ever wondered when you should use an icon — or an icon with a label, or just a label — download my FREE ‘When to Use Icons’ Cheat Sheet. It’s a simple series of Yes/No questions that will help you determine when (and when not) to use an icon.
In most cases I see, the reason labels become necessary is because the icons chosen are too abstracted to be easily recognized. That’s because these choices are typically arbitrary, or borrowed from other, unrelated products, or inherited via templates (e.g. Bootstrap) that don’t clearly explain the meaning or purpose of each icon.
The four types of icons
According to the seminal book Universal Principles of Design,* Icons fall into four categories. Familiarizing yourself with them will allow you to make smarter choices when using them in your UI design:
- Similar icons are useful for very simple actions and concepts that are easily understood. For example, a sign indicating a sharp curve ahead can be represented by a similar icon (e.g., curved line). A sign to reduce speed, however, is an action not easily represented by similar icons. In apps, sites and systems, we often see a “previous” or “next” arrow indicating the ability to move forward or backward through a workflow.
- Example icons use images of things that exemplify or are commonly associated with an action, object, or concept. They are particularly effective at representing complex actions, objects, or concepts. For example, a sign indicating the location of an airport uses an image of an airplane, rather than an image representing an airport. In similar fashion, an envelope is often used to indicate the ability to send an email message.
- Symbolic icons use images that represent an action, object, or concept at a higher level of abstraction. These metaphors are effective when actions, objects, or concepts involve well-established and easily recognizable objects. For example, unlocking settings in a control panel or in a software application (e.g. Photoshop’s “lock layer”) an image of a padlock to indicate its function, even though there’s no physical interaction with an actual padlock.
- Arbitrary icons bear no resemblance to the targeted concept; the meaning and relationship has to be learned through repeated exposure. These are mostly used when introducing industry standards that will be used for a long period of time — in other words, people will have time to learn the meaning. These are mostly used for concepts that are otherwise impossible to depict. The 3-line “hamburger” icon is an excellent example of an icon that was introduced as a new concept, and is on its way to becoming universally known.
Icons should clearly convey meaning
The object or action represented by an icon has to be one that’s familiar to users in the first place; otherwise, the icon just becomes visual noise. For example, the following icons are intimately familiar to most of us:
These icons work because they’re familiar. With the exception of younger, first-time users, we all have a great deal previous experience with these on a daily basis.
As such, the place to start with using icons is to look at those commonly used on the operating systems and platforms your product will live on or around:
- App icons should be based on commonly used Android or iOS icons.
- Desktop or laptop software icons should be based on commonly used Windows or Mac OS icons, in addition to commonly used software on those platforms (e.g. Microsoft Office, Google Chrome).
- Website icons should be based on commonly used icons, along with those used by competing or complementary sites.
Here’s an excellent rule of thumb imparted to me by a colleague years back:
If you spend any more than 15 minutes trying to come up with an icon to represent something, it’s a pretty solid bet that an icon won’t work in that instance.
Label plus icon is hard to beat.
People are different, and so are their experiences. Those differences color their preconceptions and understanding of what things mean. That’s a difficult thing to overcome, so any icon that forces a person to think about what it might mean is a candidate for a label.
Now, you might be thinking (or may have heard) that icons without labels invite play and investigation. That people enjoy playing with different icons to see what they do.
With the exception of children and adolescents, whose innate curiosity is essentially their default setting (see Snapchat), this is not true.
Would it be obvious to a new user what this icon means and does?
More often than not, people are intimidated by things they don’t understand. And when it comes to icons, usability lab testing bears this out. Users typically either stop in their tracks and ask someone else what this means, or simply avoid interaction with the icon altogether.
Every icon has to set an expectation that enables a user to predict what’s going to happen if they click or tap an icon. When we can’t predict, we’re reticent to act. A text label goes a long way in setting that expectation and enabling that predictive ability.
The added label clarifies meaning and functionality.
In 2015, UserTesting conducted a series of tests comparing icon use. They set up a remote usability study exploring UX with icons on mobile apps. The team watched 35 users interact with 190 icons on a series of Android apps.
Some icons were obvious, like a magnifying glass indicating the search function. Some were less so, like a flag indicating group membership. Some had text labels, and some didn’t. Here’s what they found:
- For icons with labels, users were able to correctly predict what would happen when they tapped the icon 88% of the time.
- For icons without labels, this number dropped to 60%. And for unlabeled icons that were unique to the app, users correctly predicted what would happen when they tapped the icon only 34% of the time.
The results speak for themselves: the usability of icons increases dramatically when combined with a label.
When in doubt, test (and test again)
There is no substitute for watching people interact with what you’ve built, period. So even if you’re confident that the icons you use are easily understood, test them anyway. If you can’t get access to actual users, test with 20 people you know in the office or on Facebook.
In particular, there are two attributes you’re testing for. You want to know if they are:
- Recognizable. Ask people what they believe the icons to stand for. If the icons cause them to wonder what they mean or do, either add a label or just use text. The majority of your users are not going to do the work to find out.
- Memorable. Icons that are hard to memorize won’t work either. A week or two after your test subjects have seen the icons, follow up with them, show the icons again and ask if they can remember what each means (and does).
In closing, I want to caution you not to fall in love with the beauty of icons. Use them only when they serve as a better choice than a text hyperlink, when they speed comprehension and reduce a user’s cognitive load.
And keep in mind these immortal words from Bruce Tognazzini, one of the forefathers of Interaction Design:
“A word is worth a thousand pictures.”
*Images: Universal Principles of Design, Rockport.
. . . . . . . . . . . . . . . .
If you’d like to get more advice from me every month on topics like this — in the form of training videos, full-length courses, e-books, downloadable templates and more — check out my NEW online school, the UX 365 Academy. Every month I publish new content, and you also have access to every course, book and training video I’ve ever created — some of which have never been published online before now.
