A picture says a thousand words. While this may be true, the words that picture represents could be different for each person, depending on how they interpret it. This is one of the main issues with using icons. While they do represent a specific meaning or function, that meaning or function could vary depending on the context in which the icon is used, and the user’s familiarity with a particular concept. There is even disparity among even the most commonly used icons. While icons are great solution for many design problems, it comes at a cost. Clarity and ease-of-use for the user are sometimes compromised for beautiful interfaces and quick solutions. In this article, we will explore some of the pros and cons, misconceptions, and facts about using icons in user interfaces.
Icons, Text Labels, or Both?
Using icons-only should be reserved for specific conditions where screen space is limited and the feature is common and familiar to the user. They can add visual interest by breaking up the monotony of an all-text interface, as well as help to reinforce a brand’s identity. The problem with using icons by themselves is that their meaning can be vague, especially when introducing a new feature.
Choosing text labels instead of icons can ensure clarity in their meaning. Text labels should be used when space is available, and the features they represent are unique, unfamiliar, or hard to convey through a simple illustration.
If space permits, choosing icons with text labels is your best option. It provides clarity, adds visual interest, and reinforces a company’s brand. The benefit of providing labels with icons is that you can introduce new features and be reassured that your users will know what to expect when they interact with it.
Issues with using Icons-only in a User Interface
When using icons-only, problems arise when you start introducing new features and the illustrations that represent them. Take, for example, the “Pin” icon in the Pinterest app. Based on what the app is used for, the pin icon makes sense that it would save the selected post. But without labels, the user is required to already be familiar with both the app and the concept of a push pin. Pinterest has added labels with their icons to remove any doubt from the user, creating an easy-to-use and uniquely branded experience.
A few icons/features are so commonplace that it’s easy to assume that people will know what it represents based on the icon alone. A “star” icon means to bookmark or save an item, while a “heart” means to “like” something, right? These two icons are often used interchangeably. Considering they often mean one or the other, it seems like a harmless misinterpretation. But this can cause the user to become apprehensive, as they can’t be entirely sure of the result of the button’s function.
Many users won’t start clicking buttons to find what they need if it isn’t immediately obvious. The uncertainty of an icon’s function puts the user in a state of doubt. It requires them to think about the icon instead of focusing on their task. Worst case scenario is the user accidentally clicks on something and the result is undesirable and potentially irreversible.
The uncertainty of an icon’s function puts the user in a state of doubt. It requires them to think about the icon instead of focusing on their task.
Statistics about Icons and Text Labels
Human memory is limited. The general rule for the number of things a person can store in short-term memory is seven, plus or minus two. Forcing the user to expend mental energy on interacting with the interface can create frustration, or cause them to abandon their task altogether. Learning new icons, especially ones that are unique to an app, require the user to use the app repeatedly so they can become familiar with the icon’s meaning without having to consciously think about it.
Aside from taking up less screen space and reinforcing brand attributes, people like the look of icons because they add a more human touch. Using only icons is the emotional choice. They appeal to our feelings. On the other hand, the rational choice is to use labels. It guarantees clarity and functionality, but can make an interface feel cold. People are both emotional and rational beings, so finding a balance is to use icons with labels wherever possible.
Using common icons found across multiple interfaces can increase familiarity with users without them needing a label. But this isn’t 100% accurate, as icon meanings can slightly differ between different apps (e.g. heart vs. star = “like” or “favourite”). One study shows 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.
Text labels have the clearest meaning but take up more screen space. Icons add visual appeal, brand reinforcement, and take up less screen space but their meaning can be misinterpreted. The ideal scenario would be to have an icon plus text label, if space permits. The ultimate goal is to make sure the user can complete their tasks with ease, and one way is to make the path as clear as possible.