A look at the cons of Icons
By: Darshan Kanade
Tags: UI Design, Design, UX Design, UX, Icons

Needless to say, icons continue to be in use to easily communicate the meaning and to serve the aesthetics of a design. And while it’s true that icons make good targets their use is almost invariably not done right.

Here’s a quick test for you-

Take a look at these icons from Gmail’s home page and see if you can correctly identify their meaning. Scroll down for the answers (Hey, No cheating!).

Now even if you identified all of them correctly you’d agree that not most people can. That’s because our icons have some cons associated with them.

Icons are rarely universal

Sure, they save space and they are visually pleasing but the biggest problem with icons is that they can convey a thousand different meanings. There are no standards in icons except a few as the likes of home, camera, print, shopping cart and magnifying glass for search.

Universal Icons for Home and Search used in Netflix android app

Outside of these few instances, you’ll see that

Icons are mostly ambiguous

I mean just take a look at these icons from Microsoft Outlook toolbar and try to guess what they are supposed to mean (Scroll down for the answer).

Ridiculous, right? They all look similar, especially the first two. Icons in a design continue to be ambiguous in their meaning. For abstract functions icons rarely work well.

Also sometimes they can have different meanings on different interfaces which is why

Icons can be conflicting

Notice how Google Chrome and WhatsApp use star icon for bookmarking while Medium uses a flag for the same. Thus we see that there’s no standard icon for some actions over all the interfaces.

Google Chrome and WhatsApp both use star icon for bookmarking

Medium uses a flag icon for bookmarking

But hold on this gets even more confusing where you’ll see that WordPress has both the star and the flag icons! And yes, you guessed it right, they both represent different actions.

WordPress uses both the star and flag icons

Here flag icon is used for bookmarking while the star icon is for liking the posts of fellow bloggers.

And as we know, when it comes to Instagram the same liking action is represented using a heart icon, not a star… there’s no star.

Some may say that no matter what we can always adapt to these differences across various platforms. And sure you may but we still aren’t short of cons regarding icons. Here comes another-

Icons are hard to memorize

Many studies show that we remember things spatially i.e. we rely on our ‘Positional Memory’. This is the reason we seldom customize the position of apps on our screens.

Who can remember what each icon means? Not me. — Don Norman

To learn how people remember icons UIE conducted two experiments wherein first, they changed the imagery of the icons in a toolbar but kept them in the same place. Users easily adapted to this change.

Next, they kept the original imagery for icons but shuffled their positions on the toolbar. This time though users really struggled with locating the icons and couldn’t complete common tasks… whoever said icons enhance usability.

We might not remember the graphical representation of a function but we do remember its location. This article explains this issue with a great example.

So then how do we deal with these blemishes of our dear icons?

Well, there are two ways as common sense would dictate.

First, add a hover text that will reveal the name or function of the icon when the cursor is positioned over it. And while it’s a neat solution which won’t take up space for labels and does the work, it still isn’t perfect.

Not only does it fail to translate well on touch devices but also the user still has to do the task to figure out the meaning which costs us something called the interaction cost.

So here goes the second way, add labels along with the icons. This works because there’s zero interaction cost and the icons are no longer ambiguous.

So coming back to our guess games from above, this is what the ‘Icon + Label’ design looks like:

Painless, isn’t it? But one may also wonder that if icons are so problematic why don’t we just get rid of them? Or as some like to say — The best icon is a text label.

But here’s a catch too. Us humans! We are both emotional and rational beings.

A ‘Label only’ design functions very well as it provides rational benefit but it feels cold and less humane and that doesn’t bode well with us. We like the fun, the simplicity and the beauty — the emotional benefit that the icons provide.