Testing Iconography

A picture says a thousand words. Make sure it’s speaking the right language.

Introduction

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.
  • Visual appeal
    When used well, icons can enhance the look and feel of a design.
  • Mobile friendly
    Icons can be sized and positioned to be easy touch targets on mobile displays.
  • Transcend text
    Icons don’t need to be translated for international users, although cultural differences can exist.

Important considerations

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:

  • Findability
    How easily the icon can be found by the user.
  • Recognizability
    How quickly the icon can be identified by the user.
  • Comprehensibility
    How easily the function of the icon can be understood by the user.
  • Visual appeal
    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.

Testing

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.

Findability

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.

Key questions

  • 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?

Example tests

  • Use a click test to measure how long it takes users to locate a particular icon on the page.

Recognition

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.

Key questions

  • Do users recognize the object or metaphor represented by the icon?

Example tests

Comprehension

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.

Key questions

  • What does a user think will happen if they click the icon?

Example tests

Visual appeal

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.

Key questions

  • Is the icon aesthetically appealing?
  • Does the icon work as part of the broader icon set?
  • Is the icon memorable?

Conclusion

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.