XD Essentials: Icons as Part of a Great User Experience
Icons are an essential part of many user interfaces as a visual expression of an object, action, or idea. When done correctly, they can communicate the core idea and intent of a product or action. But when done wrong, they can confuse your users, lead them down the wrong path, and ruin their experience with your product.
An icons’ first job is to guide your users to where they need to go and in this article we’ll see what it takes to make that possible.
The Benefits of Using Icons in User Interface
Icons bring a lot of nice things to user interfaces. They:
- Save screen real estate. Icons can be compact enough to allow the display more controls in a relatively small space.
- Enhance the aesthetic appeal. When icons are used properly they make the UI more graphically pleasing and bring personality to the user experience. Every app needs a beautiful, memorable app icon that attracts people in the app store and stands out on a home screen.
- Good for internationalization. The use of icons in the UI is an excellent metaphor if they represent objects with a strong physical analog. There is no need to translate such icons for international users, because its message is understandable to everyone.
And, last but not least, most apps and sites use icons. It’s a design pattern which is familiar to users.
Despite these advantages, icons can cause usability problems when app designers hide functionality behind icons that are hard to recognize.
Types of Icons
As mentioned before, icons are a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to visual noise that can prevent users from completing a task.
There are three types of icons ⎼ universal, conflicting, and unique. Let’s focus on these types and their impact on the user experience.
There are a few icons that enjoy mostly universal recognition from users. The icons for home, print, and the shopping cart are such instances.
There is only one problem with 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.
Icons With Conflicting Meaning
The trouble comes when you’re implementing commonly-used pictogram that have contradictory meanings. The heart and the star are an excellent example of this problem. Not only does the functionality associated to these icons vary from app to app, but these two icons compete with each other.
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. And this hinders the ability for users to understand and rely on these icons when they are encountered in future experiences.
Icons are especially bad for anything abstract since they generally do not have strong visual representation. How can you describe a unique action, such as sending a direct message, with a single pictogram? Would you guess, for example, that you can send direct messages behind this icon in Instagram?
An icon might make complete sense once you know what it’s supposed to represent, but it can take some time for first-time users to figure things out. And another problem for this group: users tend to avoid interface elements they cannot understand. It’s in human nature to distrust the unknown.
Labels and Usability
Icons can save space over text, but at the price of recognition. It’s a serious misconception to assume that users are either familiar with your abstract pictograms or they’re willing to spend extra time discovering what each of them does.
In reality, users are often intimidated by unfamiliar interfaces. What users really want is a clear idea of what will happen before they take an action in an unfamiliar app. That’s why your icons need to set clear expectations for users before they click or tap on them.
In order to beat the ambiguity that most icons face, a text label must be present alongside an icon to clarify its meaning in a particular context. And even if you’re using a universal icon, it’s often safer to include a proper label.
The most important characteristic of a good user interface is clarity. A clear interface is simply a better interface. In the context of user interface design, icons must first and foremost communicate meaning. They should help your users do what they need to do without requiring additional effort.
If you decide to include icons in your interface, do research first and choose icons that are easy to recognize and memorize. Keep a few things in mind when you make the selection:
- Don’t use an icon if its meaning isn’t absolutely clear to a user. Try to avoid unique icons and icons with conflicting meaning. When in doubt, skip the icon. Reside to simple copy. If you want to keep the visual benefits of icons, combine the icon with copy.
- In most cases, icons aren’t the place to be creative. If you design new icons, keep them 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.
- “A picture is worth a thousand words” doesn’t work for icons. Labels significantly increase the usability of icons and you should always try to include a visible text label whenever it would help the user.
Last but not least, if you use icons always have them usability tested. Watching a real first-time user interact with your interface will help you determine whether your icons are clear enough.
Don’t make your users think. Make clarity in your app a priority!