What is a bad icon? And how can we avoid them?

Yesterday I read the What’s new Material design guidelines and the guidelines for Offline states.

It’s basically states how the app should inform the user that the phone has no internet access but still let the user do an action.

This was a good read but one thing that stuck in my mind was the icon they had chosen to show this offline mode. I didn’t get it and it got me thinking more about the usage of icons, how it’s not crystal clear all times and how we can think when designing icons.

 

•   •   •

 

Offline pin icon from Material design

Offline pin icon from Material design

 

The offline icon

This Offline pin icon should be used together with text label Offline when the user could get data and do some actions in the app even if internet access is lacking.

For me this icon didn’t make sense, i couldn’t feel the offline vibe.

This got me thinking. How often do I interact with icons that don’t have the vibe, icons that is misunderstood and icons that don’t make sense? And how do I find out the meaning?

It happens time to time and one simple way to find out — click it. The interaction could go two ways; surprisingly happy or annoyed angry, a happy or pain point. An icon could really increase or decrease the user experience.

Icon design gone wrong

Microwave icons — I never get them.

Another thought is about misunderstand an icon or not get the icon at all. Both cases are bad but which case is the worst? I think the not get it at all is the worst, if the user misunderstood an icon they had a knowledge on thought what it could be because they could associate it with something else. And next time they will hopefully remember but if they don’t get it at all I think they will not remember and maybe never click it.

As a designer the meaning of the icon could be super clear but we need to talk to the user about it. It’s how they interpreter it that matters.

So really what’s the thing about icons? We use icons because it’s more appealing. Lack of space could be another argument of using icons instead of text. But how appealing is it for the user when they don’t get it. The appeal and the margins are pointless if the user experience is bad. But if the icon is perceived right the user experience could be more than great.

 

•   •   •

 

Archive icon Gmail app

Archive icon Gmail app

 

The Archive Icon

One icon I have a huge problem with is the Archive button in Gmail app and web.

It’s not only that I don’t understand the icon, I also don’t understand the action. What do archive means? Where does the archived email goes? It’s a trash can icon besides it, what’s the difference? So many questions and I’ve a hard time finding the answer when I’m using the mail service.

My questions as a user should be answered by using the app.

I’ve accidentally clicked it so many times both in the app and on the web, always I wonder where did the email go? I give the search a try quickly get tired tryings and move on without a solution. This have made afraid of clicking the icons in Gmail. Except the trash can, a universal icon, it could not mean anything else than delete and it doesn’t.

Universal icons are a few, it’s icons that have the same meaning like home, like, favorites and search independently on service and platform.

 

•   •   •

 

So how can we design better icons?

Here are some tips:

→ Ask ourselves do we actually need an icon?

→ Think about in which context it will be used, it’s often easier to understand the meaning of an icon if it’s placed in a context where the user have a special task to complete.

→ Think about if it will be more icons that could collaborate with each other and make it more clear and reduce misunderstanding.

→ Research! See how other have solved it. Can we see a pattern that we can follow. If the user recognise an icon they will have a first guess what they can do with it.

→ Test them on users! Do user tests and see if they understand what the icon means. And then I don’t mean to only show them a blank paper with the icon, put the icon where it will be used and then ask: what do you think this icon means?

→ Make sure to have a solution on the scenario: “The user accidentally push the icon”. How should we handle that?

→ Use universal icons if possible.

→ Design simple and clean icons, let them be straightforward.

 

•   •   •

 

Thanks for reading!

Feel free to share and follow me @ Medium if you like what I'm writing.