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. Along the way, 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.

Complex icon reduce clarity 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.

Complex icon reduce clarity

Complex icon reduce clarity if the icon become too abstract, it's harder to grasp the idea.

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.

Complex icon reduce clarity
negative space 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.

Complex icon reduce clarity 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 some 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. That said, I firmly believe this is true for the symbol, too.

internationzalitation is important 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 make your icons a bit more general. 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.

Next:

Preface: Welcome to yellowstroke.com

Sep 06, 2018