Icons as Part of an Awesome User Experience
by Nick Babich
Due to the limited screen space, designers often replace text labels with icons. Icons take less space, they don’t have to be translated, and people are familiar with them after all, right? Well, not always. Let’s see what does it take to make an icon user-friendly.
Benefits of using icons
Here are a key benefits of using icons in design:
- Icons are good targets for mouse or user fingers. They are typically sized large enough to be easily clicked or touched.
- They save screen estate. Text labels take more space than icons.
- The meaning of icons can be recognized at a glance. This is particularly true for standard icons that people have seen and used before.
- Do not require translation for international users. Good example is an envelope that is used for email apps. This icon looks the same in various countries and users are familiar to this icon.
Despite these potential advantages, icons often cause usability problems when they are designed without consideration for their many potential downsides.
Three 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 shopping cart are such instances.
There is only one problem behind this group— “universal” icons are rare. Outside of examples above, many icons continue to be ambiguous to users due to their association with different things.
Conflicting icons
The trouble comes in when you’re implementing commonly-used pictogram that have contradictory meanings. For example, icons that are frequently misunderstood by users include the heart and the star. Imagine you see the following icons without any text labels in the app. What do they mean? What happens if you tap one of them? These icons are hard to interpret precisely for many users. Users need to interact with this icon to understand the meaning.
Unique icons
What to do when your product has unique functions beyond the standard actions of sharing, printing, etc. How to describe complex concepts such as reviewing your order history or tracking with a single pictogram?
All too often designers hide functionality behind icons that are actually pretty hard to recognize. Of course, designers assume that the users will learn the meaning of icons. However, it’s not always happens. When Google decided to hide other apps behind an unclear icon in the Gmail, they got a stream of support requests, like “Where is my Google Calendar?”
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
A picture worth a thousand words, right? Not always. As Bruce Tognazzini once said,
“A word is worth a thousand pictures.”
It means that labels can dramatically increase the usability of icons. Users are often intimidated by unfamiliar interfaces. They want to have a clear idea of what will happen before they take an action in an unfamiliar product.
The most important characteristic of a good user interface: clarity
So your icons need to set clear expectations for users before they click or tap on them.
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.
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.
Practical tips for improving usability with icons
- Follow KISS principle. Keep the icons simple and schematic. Reduce all unnecessary graphic details and focus on the basic characteristics of the object.
- Test the icons both for recognizability and memorability. Watch real first-time users interact with your interface and track their problems. This will help you determine whether your icons are good enough.
Learn how to design user interfaces
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
Conclusion
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 and use simple text label. If you want to keep the graphical advantages of icons, you can of course combine the icon with copy.
Thank you!
Originally published at babich.biz
