When building a mobile app, there comes a time when you have to decide whether to use solid or outline icons. Which style is better for user experience?
Some think the difference between them is just a matter of preference, but research shows there’s more to it than that–one style has a faster recognition rate than the other.
Knowing when to use solid or outline icons will make it easy for your users to navigate your mobile app. They’ll be able to recognize your icons faster and select the right options.
A research study, “Filled-in vs. Outline Icons: The Impact of Icon Style on Usability,” discovered that icon style affects task performance. Task performance was measured by the speed and accuracy of recognizing and selecting icons.
Solid icons were generally faster to recognize than outline icons, but with a few exceptions. And some icons showed no difference in task time. This has to do with characteristic cues.
Characteristic cues are what users use to identify icons. If characteristic cues are absent or hard to notice, the icon becomes unidentifiable.
For example, the tail of a comment bubble icon is its characteristic cue. Without it, it’s simply a circle. The keyhole on a lock icon is its characteristic cue. Without it, it’s easy to mistake the icon for a bag. The teeth on a cog icon is its characteristic cue. Without it, it looks like a doughnut.
The lock icon used in the study had no keyhole and was the most misidentified icon with over a quarter of all failures. The keyhole is a necessary characteristic cue because without it the icon looks like a bag, purse, or even a pot.
These characteristic cues are what users rely on for icon recognition. When using icons, make sure it includes all the characteristic cues users need to identify them. If an icon could look like a different object, consider adding extra characteristic cues to it.
When Outline Icons Are Faster
In addition to including characteristic cues, the cues must be salient or easy to notice. Sometimes the characteristic cues on certain icons are more salient in an outline style than solid style.
The study found three icons that were faster to recognize in outline style–comment bubble, trash can, and key. These icons have subtle characteristic cues that appear on the outer edges of the shape. Because of this, an outline style makes those cues easier to notice.
The comment bubble tail is easy to miss as a solid, but more apparent as outlines. The trash can lid is hard to notice in solid style, but more visible in an outline one. The key teeth are subtle, but the jagged edges are more distinct in an outline style.
When an icon’s characteristics cues are subtle and appear on the edges of a shape, use an outline style. This makes the cues more salient which results in faster recognition.
When choosing icons, it’s best to stick to a consistent style. Instead of mixing solid and outline styles, try to choose a set of icons that have salient characteristic cues with sharper angles that point outward.
For example, if you compare the comment, trash can, and key icon to ones with more salient cues you can see the difference. The more salient cues jut out and are easier to notice.
When Solid Icons Are Faster
Most icons represent physical objects in the real world. These objects are in a solid form and appear as silhouettes. Viewing icons as outlines is not a realistic representation of what most are used to seeing. This is why solid icons are faster to recognize.
Despite this, users are still able to recognize outline icons. But it’ll take them longer to do so if the icon’s shape outlines are too close together.
The study found that the thumb, scissors, phone, and tools icon were faster to recognize in a solid style. This is because the outline style of these icons all have narrow inner spacing on their cues that create visual noise.
It’s best to use solid icons for objects that have a narrow inner spacing. The silhouette form offers a simpler shape, making the icons more identifiable.
When Style Makes No Difference
The study found icons that were easy to recognize in either style. For example, the star, shopping cart, and flag icon all had similar recognition times.
This means the outline style for these icons didn’t slow users down. The reason is due to the wide inner spacing they have that reduces visual noise. The more narrow the inner spacing is, the more noise it creates, which interferes with recognition.
Icon Style for Button Selection
It’s common practice to use a solid icon to highlight the active button in a tab bar, while the other buttons remain in outline form. But this design practice is backward and should be the other way around.
Users need more recognition speed on options they haven’t discovered yet, not on the one they have already selected it. A solid icon for the active button isn’t necessary. It’s more important for the inactive buttons to get solid icons.
Use an outline icon to highlight the active button, not a solid icon. It offers a clearer change in style and color that reinforces the selected button.
If task speed is important to your users, the icon recognition rate must be considered. And if you want a faster recognition rate, solid style icons are better. But there’s an exception to this rule that you should keep in mind. Knowing the exception to the rule allows you to make use of outline styles when the situation fits.
In summary, here’s what you should keep in mind when using icon styles:
- Icons consist of characteristic cues that need to be identifiable and salient
- Solid icons are faster to recognize unless their cues are subtle and not salient enough
- Outline icons are more recognizable when they have wide inner spacing
- Use outline icons if the solid version has subtle characteristic cues on the edges
- Use solid icons if the outline version creates narrow inner spacing
Originally published at uxmovement.com on February 20, 2019.