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.
Visually complex
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.
Simplicity is crucial for clarity.
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.
Conceptually abstract
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.
Imbalance proportion
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.
Even though they're in the same dimension, the negative space cost a visual illusion.
Takeaway: Respect the positive and negative form altogether. Also, use icon-grid as a tool to help you see them through.
Irrelevant message
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.
Taken from the real project. For real, this happens.
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.
Dollar sign here works for most countries with $ concept, but not necessarily work for all countries. The paper bill concept is more abstract but still get to the point.
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.
Footnotes:
- I’ve fortunate to work with Yahoo on their icon set, Marvel app, and Shopify. ↩
Hi, this blog is no longer active. I move to substack. You can subscribe below or go to newsletter.buditanrim.co
