Any icon in your interface should serve a purpose, whether you’re designing a website or an app. Sure, icons are there to save space on the screen. But more importantly, they’re there to aid your users. When done correctly, icons can help you guide users intuitively through a workflow without relying on too much copy. But when done wrong, they can confuse your users, lead them down the wrong paths, and ruin their experience with your product.
Since so many apps and websites use confusing icons, we wondered: what does it take to make an icon user-friendly?
We set up a remote usability study exploring the user experience with icons on mobile apps. We watched 35 users interact with 190 icons on a series of Android apps. Some of the 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 we learned.
Some icons are nearly universal. It's a pretty safe bet that a house-shaped icon will take you to the homepage or home screen, and a shopping cart will let you purchase an item.
In most cases, icons aren’t the place to be creative. You can rely on your other design elements to convey your brand message. Your icons’ first job is to guide your users to where they need to go. Fancy or overly clever icons for basic functions can ruin the user experience.
The trouble comes in when you’re implementing commonly-used icons that have contradictory or mixed meanings.
Here’s an example. Imagine you see this icon below an image in an app. What does this mean? What happens if you tap it?
It’s clear that this icon is used to indicate that you like something.
But does it save that image or item to a list of favorites? Does it notify someone that you’ve liked it? Will it shape your preferences and add similar images or items to your feed? Or is it just a general expression of approval?
Like the heart, there are quite a few icons we’re used to seeing in multiple contexts, but they perform slightly different functions from one product to the next. Consider these common icons that have multiple meanings:
Even in the context of the app itself, these symbols can be really confusing when the user is expecting one outcome and gets a different one.
And that’s not to mention the differences between iOS and Android conventions. Standard bar icons can vary drastically from one OS to another, creating extra confusion for users. If you’re not convinced on this one, just read this article showing 12 different variations of the Share icon, including several that could easily be mistaken for something other than Share.
Lots of commonly used icons reference outdated or obsolete technology. Most of us who remember using floppy disks have no problem with the Save icon still seen in lots of applications, but many users born after 1995 just think it’s a strange quirk that old folks insist on clinging to. Continuing to use icons like the floppy disk can make your brand feel old-fashioned to a younger user base.
Even the symbol for a telephone may have to evolve as younger users are less likely to recognize a phone receiver. (You may laugh, but I’ve heard a small child ask her mother why the phone symbol isn’t shaped like a phone. And yes, I was horrified.)
One of the trickiest icon challenges is what to do when your product has unique functions beyond the standard actions of sharing, favoriting, uploading pictures, writing text, and so on.
How can you convey more abstract concepts—like viewing your upcoming trips, sending an audiobook to a friend, reviewing your order history, or tracking your sleep patterns—with a single symbol?
A lot of designers try, and a lot of designers fail. No matter how much sense an icon makes once you know what it’s supposed to represent, it can be a completely different experience for first-time users.
That’s not to say you always have to stick with common icons if you want to create a usable interface. Some unique icons are very effective at conveying their meaning for first-time users as well as returning users.
Twitter’s famous quill pen icon is a great example. Despite having no label, in our study, 80% of users correctly guessed what it would do.
Let’s take a look at what Twitter got right with this icon:
This may come as a disappointment to those who say a picture is worth a thousand words:
It’s a common misconception that users (especially mobile users) will tap around and play with all the different icons cheerfully until they discover what each icon does.
In reality, users are often intimidated by new interfaces and don’t explore outside their comfort zone as much as we would like them to. Users want a clear idea of what will happen before they take an action in an unfamiliar product.
Your icons need to set clear expectations for users before they click or tap on them, and that often means using text labels.
In our study, we found that 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 are unique to the app, users correctly predicted what would happen when they tapped the icon only 34% of the time.
In the example below, the Meetup app uses a nametag icon to indicate group activity and add a little extra brand identification. But, since a blank nametag doesn’t make most folks automatically think of activity or notifications, they added a label. 100% of our test participants were able to correctly guess what this unique, labeled icon would do.
Some designers find that labels defeat the purpose of using icons and clutter up their interface. To avoid using labels, they’ll include instructions for using icons in tutorials or coach screens, hoping to train users on how to interact with the icons.
While this can be a great way to introduce unique or uncommon icons, it shouldn’t be a substitute for a more intuitive design choice. And remember: users often skip through the tutorial or quickly forget everything they’ve learned. Tutorials should be a tool, not a crutch.
Your icons should help your users do what they need to do without requiring effort or brainpower. You can accomplish this by keeping a few things in mind:
Once you’ve gotten used to an interface (say, if you’re the designer), it can be really difficult to see it with fresh eyes and tell whether your icons make intuitive sense. Watching a real first-time user interact with your interface will help you determine whether your icons are clear enough and whether you need to use labels.
You’re designing for your users. The easier your product is for them to use, the more likely they’ll be to use it. Make your icons work for you and your users.
Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.