It’s really a shame when the icons that designers so carefully choose to make applications intuitive for users have the absolute opposite effect.  It goes without saying that users expect an obvious relationship between an icon and the concept it represents.

For example, the “New Tab” page for the Chrome browser features icons for common Google services:

• Chrome Web Store = Webstore logo, which is a shopping bag (shopping = store)
• Gmail = Gmail logo, which is an envelope (envelope = mail)
• YouTube = YouTube logo, which is a TV screen with a play button (you watch TV)
• Google Search = “g” in a blue box logo

It’s worth noting that there is one weakness to these icons:  The Google search icon doesn’t match the favicon, which can be a bit confusing because it breaks the 1:1 relationship established in favicons.

Icons That Just Don’t Make Sense

Bad icons are everywhere – from the websites and software we work on everyday to that kiosk in your grocery store and those minor home appliances you still can’t figure out.

Example:  During our recent trip to Ireland, it was quite cold and wet.  (The people of Ireland are lovely and delightfully friendly, and their warmth to a large extent mitigated any physical discomfort.)  Nevertheless, we really wanted to turn on the heat in our hotel room.  We found the air conditioner control panel on the wall, and turned up the temperature without paying much attention to the rest of the interface.  

A little later, when we were still cold, we turned up the heat some more. Eventually, we had the thermostat set on 30? C (~86? F) and we were still cold. So we went to investigate and fiddle around further.

Our major point of confusion was whether the heat was on or not. We expected the snowflake to mean “make things cooler”, but then what were the other two icons — a raindrop (or is it a flame) and a blazing sun. A blazing sun could mean “make things warmer”, but I’m more likely to associate it with “summer”. So did these icons represent settings we’d use in a particular season or the cooling/heating processes? 

Ultimately, we determined that snowflake meant “winter” by the time consuming process of trial-and-error.

Extrapolation:  Where Good Icons Go Bad

So how do designers and developers end up with bad icons? What usually happens is this: the developer knows he needs to create an icon and begins to think about a worthy and appropriate metaphor for the task at hand.  And so he might come up with reasoning along the lines of (continuing with the air conditioning example):

I need an icon for heat.

Well, I could use fire – like in a fireplace because you light one of them when it’s cold outside and it brings you warmth, but is that really very clever?  (Everyone does that!)

Well, you need heat is when it’s cold outside.  And a lot of times when it’s cold outside, there’s also snow.  I’ve got it!  A snowflake!  Genius!

This is going to be THE GREATEST ICON ever.  I really think it makes the interface!

See what he did there – he extrapolated an indirect relationship between the icon and the concept it represented.  Instead of keeping it simple, obvious, and straightforward, he over-thought the situation until he ended up with an icon that was – quite literally – the polar opposite of what he intended to represent.

Our UX Tip  

There should be an obvious and direct relationship between the concept you’re representing and the appearance of the icon, with no degrees of separation in logic. Icons should be simple, obvious, and consistent with other icon representations (favicons, avatars, etc.)