Icons have become a mainstay in the way we interact with digital mediums. From websites to apps, they have proven to be useful – and in some cases, iconic.
So what is an icon? Google's Material Design spec describes icons as quick, intuitive images to represent core ideas, capabilities, or topics. Icons are best at adding value when they are well recognized and improve the visual design and usability of a design. An icon should always make an interface simpler to use rather than introduce more complexity.
There are a number of key reasons why a designer might use an icon in a design:
Reduce the learning curve for new users
Some icons are nearly universal so are quickly understood by new users.
Save on screen space
Icons are more concise than text so are an economic use of screen space.
When used well, icons can enhance the look and feel of a design.
Icons can be sized and positioned to be easy touch targets on mobile displays.
Icons don’t need to be translated for international users, although cultural differences can exist.
When using icons, it is important to ensure that they are easy for users to interact with. There are four key usability attributes that can be measured:
How easily the icon can be found by the user.
How quickly the icon can be identified by the user.
How easily the function of the icon can be understood by the user.
How aesthetically pleasing the icon is to the user.
The distinction between recognizability and comprehensibility is subtle, and is worth clarifying. Recognizability refers to whether the user can identify what real-world object or metaphor it represents. Comprehensibility refers to whether the user can easily determine the function of the icon.
A good icon is easy to recognize and comprehend. For example, a “Trash” icon often looks like a trash can, making it extremely easy to recognize, and it completes the function of putting an item in the trash, so users can easily comprehend what it will do. On the other hand, a "Save" icon often looks like a floppy disk. Though this convention is quite widely understood, users born in the 21st century may have never seen a floppy disk before, so will need to be familiar with the convention in order to know what the icon will do.
It should also be noted that the introduction of text labels can dramatically improve icon usability. While text is not always preferable to icons, there are many cases where users might benefit from a label in order to increase usability. Many popular websites and apps continue to use text for their most important navigation/action components for this very reason. Microsoft Office is a fantastic example of this.
The terms “in context” and “out of context” are frequently used when testing icons. “In context” relates to an icon being displayed on a website or app in the same way it would be in the finished design. Displaying the icon in context allows you to gather broader information about the placement and suitability of the icon in the design. “Out of context” regards showing the icon in isolation, usually on a white background. This allows you to gather information on the specific icon without any hints that may come from the rest of the interface or design.
There is no use in having a fantastic icon if it can’t be found! Improving the findability of an icon can significantly improve the user's ease of interaction with your interface.
- How clear is the icon to see on the page?
- Is the icon where you would expect it to be in the design?
- Does the icon work in context?
- Use a click test to measure how long it takes users to locate a particular icon on the page.
Do people understand what your icon is? If people don’t know what it is, they won’t click on it! Strong recognition is vital to ensuring your icon performs well.
- Do users recognize the object or metaphor represented by the icon?
- Recognition testing is best done out of context, so show the user the icon only.
- Ensure there are no labels that may give away the icon’s intended meaning.
Do people understand the action that will happen if they click on your icon? Just because they can recognize the icon doesn’t mean they can comprehend how it is being used.
- What does a user think will happen if they click the icon?
The visual appeal of an icon will affect the overall appeal of wherever it is applied. Poorly designed icons can distort the user experience and create friction, so ensuring you use a properly designed icon is vital.
- Is the icon aesthetically appealing?
- Does the icon work as part of the broader icon set?
- Is the icon memorable?
The visual appeal of icons are best tested both in and out of context. When testing out of context, you may also consider testing with the broader icon set to ensure they look cohesive when placed together.
Testing the icons used in a design brings many benefits. Quick, easy usability testing can confirm that each icon meets the key requirements, and uncover potential usability hazards that icons can introduce.