Sep 17, 2018 | by Budi Tanrim
Common icon design problems you should avoid
Nowadays, icons are often a part of the design system. It’s not a surprise because icons are effective to quickly communicate the idea at a glance, like the one in your smartwatch.
I’m fortunate because I had a chance to work on a few icon systems for various companies1. In this opportunity, I want to share some common problems I’ve encountered.
So, here it goes in no particular order.
Study by Byrne (1993) showed that simple icons are more accessible for people to find. Participants were given 3 different type of file icons: blank, simple, and complex. Simple icons clearly outperform blank and complex icons. Simplicity is crucial in icon design to improve the visual clarity. Adding too many details won’t help people understand the icon better; they slow people down.
Takeaway: Less is more. The icon can be visual noise and not helpful when it’s too complex. Simplicity is essential in icon design to improve the clarity. However, don’t oversimplify the icon because that won’t be effective either.
Study shows that abstract icon has a lower accuracy than the concrete icon (McDougall & Bruijn, 2001) and actually trigger a higher cognitive processing load. A concrete icon is friendly to the users since they can reference it based on their real-world object or experience.
Now, abstract in the design, like the battery example may not seem obvious here, but when you put it in the context - study shows the concrete icon perform 43% better.
Consideration: Whenever possible, try to create a concrete icon that based on the real-world object. However, from my experience, this will never be the absolute solution because not every action has a concrete concept. For example, when we need to create share icon – the share itself is abstract and in this case, we should fall back to what the most common icon used in the industry.
The designer often either forgets, neglect or underestimate the importance of the negative space around the icon. Failing at respecting the negative space can make icons looks funky when they’re sitting side by side.
Takeaway: Respect the positive and negative form altogether. Also, use icon-grid as a tool to help you see them through.
Icon works best when paired with the text label (NNgroup, 2014) because it helps overcome the ambiguity of the icon. But, oh boy. While that is true, you should still choose the icon metaphor considerably.
Takeaway: The label will help clarify the icon’s meaning, but they should work harmoniously. Failing at doing this will decrease the value of the icon.
Insensitive to different cultures
Even though there are few researches around this topic, it is still early to judge. However, coming from Indonesia and live in Canada makes me realize that cultural diversity leads to different views and assumptions. Which also true for the symbol, too.
Consideration: If people from around the world use your product, consider to generalize your icon design. In some cases though, localizing is better than internationalizing. I think the further study will still be needed on this.
A closing chat with the reader
Thanks for reading! To summarize, you have to be careful of these:
- The complexity of the icon
- The proportion of the icon
- The concreteness of the icon
- Relevancy of the icon
- Cultural sensitivity
It’s essential that you take these points with considerations of your own context and problem you’re facing. The points I make here is focusing on the general best practice for system icon (small icon) where the goal is to focus on helping users navigate or do action.
On the side, it’s worth to consider to create a set of principles when you see there are common issues with the icon while auditing them. Reach me out if you’re interested to chat about this.
- I’ve fortunate to work with Yahoo on their icon set, Marvel app, and Shopify. ↩