Making Your Icons User-Friendly: A Guide to Usability in UI Design

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.

Types of icons and their impact on the user experience

Easy icons

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.

Confusing and conflicting icons

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.

Outdated icons

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.)

Unique icons

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:

• Placement. Twitter separates its icons for doing (writing a tweet, taking a photo, and uploading an image) vs. exploring (feed, notifications, messages, people, and search). If users want to create a post, the bottom of the screen is their one-stop shop.
• Label on the desktop version. Lots of folks use Twitter for the first time on their computer. If they do, they’ll see the word “Tweet” prominently next to the quill.
• Memorability. While the quill pen could certainly be considered outdated technology, like the floppy disk, it’s highly unique and easy to remember. You don’t find quill pens in very many apps, so users don’t have to try to recall slight differences between functions from other products.
• Branding. The feathers on the pen reflect the feathers on Twitter’s logo. This creates a sense of unity between the brand and the action of writing a tweet.

Labels and usability

This may come as a disappointment to those who say a picture is worth a thousand words:Labels dramatically increase the usability of icons.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.

Our study results: labels vs. no 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.

Workarounds

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.

Icons as part of an awesome user experience

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:

• Avoid icons with conflicting meanings
• Don’t get too fancy or clever
• Use labels whenever it would help the user
• Always test your design choices

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.