Sep 17, 2018

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.

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

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 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.

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 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:

  1. I’ve fortunate to work with Yahoo on their icon set, Marvel app, and Shopify.

2020

2019

2018

2020

Sep 17

Entering product design – Chapter 4: Product designer key skill areas

Sep 14

Entering product design – Chapter 3: Misunderstanding of business

Sep 11

Entering product design – Chapter 2: Principles over steps

Sep 10

Entering product design – Chapter 1: Silver bullet

Sep 10

Entering product design – Overview

Sep 04

SAR: A framework for concise storytelling

Aug 27

Start your design with outcome

Aug 24

New medium post: Collaboration ground for design systems

Aug 17

Action points

Aug 13

Pulse check: Listen to your team

Aug 11

You should actively apply for a new job

Aug 10

Design systems' area of influence: Service (3/3)

Aug 04

Design systems' area of influence: Offering (2/3)

Aug 03

Design systems' area of influence: Identity (1/3)

Aug 01

My mom ran me to the hospital

Jul 29

Reader question: Do we need to build MVP for every product?

Jul 27

Reader question: Do I need formal design education?

Jul 24

Recognize assumptions

Jul 21

Sandbox for your personal growth

Jul 20

Start your week with questions

Jul 17

Specificity in feedback

Jul 15

Don't sell the design. Sell the business impact

Jul 14

Overwhelming inspiration

Jul 13

The framing trap

Jul 10

Everyone vs. Specific

Jul 09

The blind horse designer

Jul 08

Set the context in your meeting

Jul 07

Let's just try and see what happens

Jul 06

Managing expectation

Jul 05

Low UX maturity company

Jun 17

A simple exercise for career reflection

May 31

The “Coach sheet” – A paper-based system for people management

May 26

Bring calm to your remote team

Feb 13

Workshops can be more efficient than meetings

Feb 07

3 questions designers should be asking

Feb 06

Walking 1on1: A refreshing way to connect

2019

Nov 21

My hope for stubborn 'Innovators'

Jul 18

Five simple actions to help you gain more time

Apr 23

Evolving Product Experience Principles at Bukalapak

Mar 09

A framework to give better design feedback: Analyze, Discuss, Suggest

Jan 28

Making a decision is hard, here's my rule of thumb

2018

Dec 04

Essential skills for Product Designers

Nov 16

Quick life update

Nov 06

Things I learned from working at Shopify

Oct 15

About design critique

Sep 17

Common icon design problems you should avoid

Sep 06

Preface: Welcome to yellowstroke.com