Designers often rely on icons to save space and to take advantage of the speedy recognition of visuals. With increasing popularity of small-display devices — smartphones, wearables, and so on — the use of icons has likewise increased. But, how usable are these icons? The only way to know whether a particular icon will work is to test it with users.
What Do You Test When You Test an Icon?
Different testing methods address different aspects of icon usability. But what makes an icon usable? Here are 4 quality criteria for icons:
- Findability: Can people find the icon on the page?
- Recognition: Do people understand what the icon represents?
- Information scent: Can users correctly guess what will happen once they interact with the icon?
- Attractiveness: Is the icon aesthetically pleasing?
All of these issues will be critical for the success of the final design, but must be considered separately to determine how to improve an icon.
Methods for Icon Testing
There are several techniques for evaluating icon designs, and which one you use will depend on your goals and on your stage of design. The methods can be separated into 2 main categories: out-of-context and in-context testing, depending on whether the icon is shown to the user in isolation or in the context of the actual interface. More importantly, however, is choosing a method based on what you need to learn in order to move forward with your design confidently.
Keep in mind that, even with methods where the icon is presented out of context, your test participants should always be part of the intended target audience and thus familiar with the overall industry and with relevant concepts.
Findability Methods
To gauge findability, icons must be shown in their native habitat — in the context of the full interface. In-context testing can help you determine if multiple icons appear too similar and users will have a difficult time distinguishing among them, or if the icon is hidden under a false floor or in an ad-rich area and is thus overlooked.
Time-to-locate tests are the best measurement of whether or not users can easily find an icon (or some other interface element) among the crowd of the full design. In these tests, participants must click or tap the UI element to achieve a given task. Measure how long it takes people to successfully select the correct icon, as well as the rate of first-click selections (that is, how often their first click is on the right icon: wrong selections indicate that the icons are not suitably differentiable, while slow-but-correct selections are a discoverability issue).
Recognition Methods
Testing for recognition is best done out-of-context: the icon is shown in isolation, in the absence of a text label or of other interface elements. Users presented with an icon must guess what that icon symbolizes. In some ways, this is the icon version of a Rorschach inkblot test. The purpose of this test is to make sure that icons are recognizable, and that people can easily deduce the object that it depicts.
Look for common phrases and terms to gain insight into people’s initial interpretations. If users’ guesses don’t relate to what you intended to represent, ditch that icon idea and start over.
If you know that your icon will be accompanied by text, you may think that it would be reasonable to show users the label and ask them to select the icon that best represents that label among several possible options. However, we don’t particularly advocate this method, because in real life some users may actually ignore the label in the final UI and look only at the image. This testing method therefore only makes sense in cases where users would somehow already know to look for a particular functionality within an interface, and are simply trying to locate a matching graphical representation (which is not a common circumstance).
Information-Scent Methods
What matters in the end is not only whether users can recognize what real object the icon resembles, but also if they can infer what functionality that icon may stand for. In fact, as long as people understand what function a symbol represents, it doesn’t matter if they don’t know what the object is — we needn’t worry about finding an old floppy disc to present to youths as long as they continue to understand that the strange square symbol means Save.
The same out-of-context testing method used to assess recognition can also be applied to judge information scent. However, rather than simply asking people what the icon may represent, instead ask what they would expect to happen if they selected that icon. Unlike for recognition tests, you should provide some minimal contextual information about the type of system where that icon will appear. For instance, study participants may be told that a suitcase icon is part of an e-commerce website and asked to guess what the icon may denote in the context of that type of website. (Note however that no specific information about what that website may look like, nor any hints to possible functionality are actually provided to the users.) This general reference framework allows researchers to understand whether the mental model behind the iconography corresponds to users’ expectations.
Later down the road, A/B experimentation can be used to help designers assess which out of several candidate icons may have the stronger information scent. With this form of A/B testing, a percentage of users are exposed to one version of the icon on the live site, while others see another. Measure any difference in interaction rates between versions of the icon, as well as whether users click on the icon and go back to the original page very quickly. This behavior is called probing, and usually is a signal of poor information scent; it indicates that users were disappointed in the content behind the icon and hence returned to the prior page. Be sure to maintain the same position and label for the icons when testing for the optimal graphic, to make sure that no other variable produced the change in user behavior.
Attractiveness Methods
Besides testing for recognition, icons should also be tested for attractiveness, both individually and as part of an icon family. One of the common reasons to use icons in the first place is to add visual appeal to a design, but not all icons are equally good-looking.
The simplest attractiveness test is to ask people to score each icon on a 1–7 scale. If you have alternative designs of the same icon, you can also ask people to pick the most attractive from each set of alternatives and explain why they like or dislike particular images. Finally, you can show people an entire icon family and ask them to pick out the one they like the best and the least. This last test can help you avoid the common problem where most of your icons are fine, but there are one or two less attractive ones that require a do-over to better match the aesthetic of the full design.
Standard Usability Testing and Icon Testing
Standard usability testing can also reveal issues with an icon. However, keep in mind that there can be many reasons why an icon may be ignored in a standard usability test, some unrelated to the usability of the icon per se. For example, users may get distracted by some other elements in the interaction or in the site design and may not get to ever complete the task. And even if the icon design is at fault, it’s hard to pinpoint exactly which of the features of the icon are problematic: is it the case that people cannot recognize the icon, cannot understand what its meaning is, or maybe they simply cannot find it?
For example, no participant interacted with a clock icon representing Recently Viewed Pages during a study of a controversial site redesign, but it’s hard to know whether the reason was because they did not notice the icon in the header or because the clock did not have a clear meaning in that context.
Because of the multitude of factors involved, you should not rely on standard usability testing as the only way to determine the usability of your icons.
Phases of Product Development
Like with all UX research methods, when choosing a testing method for your icons consider the current stage within the project lifecycle.
- Strategize: In this early concept phase, focus on methods to ideate and explore numerous design options. Out-of-context techniques for recognition and information scent are the most applicable during this time, to determine the feasibility of using icons at all and to hone in on the appropriate mental models for the icons.
- Execute: During this design–and–implementation stage, focus on research methods that will continually guide you toward the best icon design for your system. Once icon designs are recognizable, focus on out-of-context testing for attractiveness until clear winners emerge. Once more of the UI is designed, transition to in-context icon-testing methods. Time-to-locate testing is helpful to quantify the findability of an icon and its placement within several potential variations of the interface. Usability testing (beginning with paper prototypes and transitioning to higher fidelity versions) can give you some additional insights about the expected meaning for icons and their discoverability.
- Assess: Once the system or feature is launched, methods that measure success and allow for incremental improvements are the most applicable. Benchmark testing with usability studies and time-to-locate tests can be conducted periodically to track performance. To continually improve an icon, A/B experimentation is the best method to measure performance and determine the optimal design.
Other Considerations
As with all methods of research, be sure to avoid introducing biases in tests. Pay particular attention to the terms used in the phrasing of tasks, as they can easily prime the imagery associated with the icons. Especially for out-of-context testing methods, consider conducting the study multiple times with various ways to phrase the survey question (using synonyms, omitting branded terms, and so on) to ensure that task wording did not influence the response selection.
Not all these testing methods need to be used in order to reach a usable icon design, but they are each helpful for different purposes and at different stages of the design process. Additionally, each method should be used iteratively, to incrementally move toward a meaningful icon–label relationship, and an optimal placement within the interface.
For more information on icons and their usage in mobile designs, consider our full-day training course on Visual Design for Mobile & Tablet.
