Due to the limited screen space, we usually replace text labels with icons wherever possible. Icons take less space, they don’t have to be translated, and people are familiar with them after all, right?

That’s not always true. Let’s see what does it take to make an icon user-friendly.

Benefits of Icons

The are a lot of benefits of using icons in design including:

• Icons make good targets. They are typically sized large enough to be easily touched in a finger-friendly UI.
• They save screen estate. Icons can be compact enough to allow display more content on a relatively small space.
• Icons are fast to recognize at a glance. This is particularly true for standard icons that people have seen and used before.
• Usually no need to translate icons for international users. Good example is an envilope. It looks the same in various countries.
• Icons enhance the aesthetic appeal of a design. Because they bring visual delight to the user experience.

And, last but not least, most apps use icons. It’s a design pattern which is familiar for the users.

Despite these potential advantages, icons often cause usability problems when they are designed without consideration for their many potential downsides.

Types of Icons

Let’s focus on types of icons and their impact on the user experience.

Universal icons

Icons are, by definition, a visual representation of an object, action, or idea. There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the shopping cart are such instances.

House icon for Home in YouTube app for Anroid. There is only one problem behind this group— “universal” icons are rare. Outside of examples above, most icons continue to be ambiguous to users due to their association with different meanings across various interfaces.

Confusing and Conflicting Icons

The trouble comes in when you’re implementing commonly-used pictogram that have contradictory meanings.

The “hamburger” icon is an excellent example of an icon that is striving to become universally known.

Hamburger icon for navigation. While the majority of interfaces use hamburger icon to squeeze navigation into a scrollable overlay that is hidden by default, some use the same (or a very similar icon) to stand for *a list*. For example, the list-management app *Buy Me a Pie* uses the 3-line icon as the way to access a list of frequently added items.  Bye Me a Pie app for Android. A functionality that differs from the more common “navigation-menu” meaning. The coloration is too subtle to make users realize that this icon has a different meaning.

Other icons frequently misunderstood by users include the heart and the star. Imagine you see this icon below an image in an app. What does this mean? What happens if you tap it?

Heart icon Not only does the precise functionality associated to these icons vary from site to site, but these two icons compete with each other.  Heart and Start icons. As a result, these icons and their exact meanings are *hard to interpret precisely*. 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. ##Unique Icons What to do when your product has *unique functions* beyond the standard actions of sharing, printing, etc. How to describe more abstract concepts — like reviewing your order history or tracking your sleep time — with a single pictogram?

A lot of designers try, and a lot of designers fail. They hide functionality behind icons that are actually pretty hard to recognize. Would you guess, for example, that you can send direct messages behind this icon in Instagram?

Instagram app for iOS. As an Instagram user, chances are you’ve seen it before, but have you ever used it? I’m not so sure.

When Google decided to hide other apps behind an unclear icon in the Gmail, they apparently got a stream of support requests, like “Where is my Google Calendar?”

Gmail interface for desktop. Symbolic representations of some icons are oversimplified and are sometimes meaningless. The Game Center icon, for example, is a group of colorful, glassy-looking circles:  Apple iOS Game Center icon. What does the Game Center icon mean? How does it relate to gaming?

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. And it’s a common mistake to assume that your users are either familiar with abstract pictograms or they’re willing to spend extra time exploring and learning them.

Labels and Usability

As Bruce Tognazzini once said, “a word is worth a thousand pictures.” This may come as a disappointment to those who say a picture is worth a thousand words but labels dramatically increase the usability of icons.

It’s a common misconception that users (especially mobile users) will play with all the different icons until they discover what each icon does. In reality, users are often intimidated by unfamiliar interfaces. Users want a clear idea of what will happen before they take an action in an unfamiliar product. So your icons need to set clear expectations for users before they click or tap on them.

Android 5.0 tab bar often confuse first-time users. The most important characteristic of a good user interface: clarity. And even if you’re using a standard icon, it’s often safer to include a label, especially if you slightly altered the icon to match your aesthetic preferences.  Apple AppStore labled icons enhance user experience. Users can be sure what exactly happens when they tap on a Purchased icon.

UserTesting study 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.

Tutorials and Onboarding

Some designers find that labels clutter up their interface. To avoid using labels, they’ll include instructions for using icons in onboarding, hoping to train users on how to interact with the icons. While this can be a great way to introduce unique or uncommon icons, usually it’s a bad idea. Because many users will skip your intro; they just want to get started with the app. Onboarding should be a tool, not a crutch.

Takeaway and Tips

Your icons should help your users do what they need to do without requiring effort. Don’t use an icon if its meaning isn’t a 100% clear to user. When in doubt, skip the icon. Reside to simple copy. If you want to keep the graphical advantages of icons, you can of course combine the icon with copy.

If you use icons in your app, strive to make them easy to recognize and memorize by following these guidelines:

• Avoid icons with conflicting meaning. Icons must first and foremost communicate meaning.
• Keep the icons simple and schematic. Reduce the amount of graphic details by focusing on the basic characteristics of the object rather than creating a highly realistic image.
• Use labels whenever it would help the user. This is especially true for complex features.
• ABC (Always be Testing). Watching a real first-time user interact with your interface will help you determine whether your icons are good enough. Test the icons both for recognizability and memorability. Ask a repeat set of users if they can remember the icon’s meaning after being told what it represented a couple weeks earlier.

Conclusion

Any icon in your interface should serve a purpose, whether you’re designing a website or an app. When done correctly, icons can help you guide users intuitively through a workflow.

A user interface is like a joke. If you have to explain it, it’s not that good. Startup Vitamins *You’re designing for your users*. The easier your product is for them to use, the more likely they’ll be to use it.

Thank you!