Icon Comprehension Test

Improve interfaces by measuring how well users understand the information an icon communicates.

Introduction

Understanding how users comprehend an icon is an important part of determining whether it is easy to use. While a user may recognize an icon, this will not guarantee that they will be able to use it correctly. There are many reasons why a user may comprehend an icon differently than you intend. These include:

  • lack of experience with the icon,
  • previous experience with the icon (or similar icons),
  • the context in which the icon is being used,
  • the device on which the icon is being used, and
  • cultural factors.

Test Setup

Icon comprehension setup

The icon on the right is a stylized version of an icon commonly used to complete a “sharing” action. Common uses include sharing a website or article to social media, or sharing an image from a gallery.

We tested this “sharing” icon by itself (without context) using a question test with multiple choice answers. Participants were asked to look at the icon and answer the question:

“What do you think this icon represents?”

We ran this test with 100 participants.

Preview this test

Results

Icon comprehension results

There was a fair amount of confusion about what this icon represents without a label or website for context. Most participants thought that the icon represented “uploading,” while only 17% thought that it represented “sharing.”

View test results

Insights

It’s easy to see why many participants understood it to be an “uploading” icon, as it shares similar visual elements to common icons for uploading. In particular, the upward-pointing arrow is used in common uploading icons, like the ones below.

Icon comprehension upload

In fact, there are a wide variety of “sharing” icons in use across the web, which makes assessing the viability of any given icon without a label or context difficult. Users may respond differently depending on their experience with different sharing and uploading icons, or which mobile operating system they use. For example, below are just some of the various sharing icons that have seen mainstream usage:

Icon comprehension icons
Image via Fast Co Design

The results of this test show that there are clear differences in how users comprehend the “sharing” icon that was tested, which most likely resulted from its similarity to other icons that perform different actions.

In this case, there are two actions that could help the situation:

  • Label the icon to make it easier to understand.
  • Select an alternative icon that your audience can more readily identify.

Which action you take might depend on the time you have for further testing, how labeling could impact the overall design, and which other icons are used in the design.