Icons Aren’t Always a Great Idea

The other day I was working on a web application with a co-worker who was doing all the UI work. When I grabbed the latest set of changes, I came across this icon:

Get it?

There were a bunch of other similar looking icons. Luckily there was mouse-over text explaining what they were. If it weren’t for that, I wouldn’t have had any idea how to navigate the site.

I know this might go against the grain, but I am going to say it: Using icons isn’t always a good idea.

First of all, the purpose of an icon is to give a user something that is quickly recognizable without having to read text. It acts as a symbol for an action or object. The image holds value, as it represents something.

I can haz iconz?

I hate to pick on an example, but look at the iPhone. The home screen is a series of icons. Some of the icons are quite obvious, even to someone who has never used an iPhone before, such as the calendar, phone, and mail icons. Thankfully the iPhone has small text descriptions of the item just below the icon. Other icons – in particular ones for certain apps, have little to no meaning for someone who has never used them before. Take for example, this one:

The first time I had no idea why there was an icon of an elephant on a co-workers computer (I wasn’t even entirely sure it was an Elephant at first). He then told me it was EverNote, and it seemed to make sense. Elephants never forget -> write down notes so you don’t forget stuff. Still though, if you’ve never seen it before, you would have no idea what it is.

Here’s another example – this being probably the worst of the bunch:

Even after using the application for several years, I still had no idea what half the icons meant.

If you have seen Toad (a database tool) before, you’ll recognize it – not because of it’s icon, but because of the sheer amount of icons in the application.

Don’t get me wrong – icons can be very useful and helpful, especially for users who might not share the same language as the developer, but over-using icons in my mind is a poor practice.

Here is my general rule of thumb:

  • If it is a common function, such as search, save, print or play, it is ok to use an icon.
  • If the feature can easily and clearly be described by an icon, it is ok to use one. (E.g.: Google Chrome’s wrench icon to access a tools menu).
  • If the icon represents a core piece of functionality and will be seen by users over and over again, it is ok to use an icon as users will quickly associate that icon with that functionality

If it doesn’t meet these criteria, there probably isn’t much point in giving it an icon – more so if the item only ever appears on a menu item.

Advertisements

2 comments

  1. Comrade

    While I tend to agree most icons are confusing and poorly design, icons also serve a secondary purpose that even poorly designed icons fulfill.
    The secondary purpose is that after using an application for enough time, you can instantly navigate by icon instead of by reading the identical looking text.

    I agree with (almost) always having text underneath your icons, but if I’m looking for Evernote in a folder of links, it’s lightning fast to double click on the “bright green icon with the grey splotch”; much faster than reading “Evernote”. In Windows Explorer, I commonly assign icons to frequently used folders, not so I can remember what those folders are, but so I can locate and click through it very rapidly.

    So even while many icons could use alot more work to enhance their, “What in the world is this?” symbolism, many do just fine with, “I already know what it is, help my mind visually find it amidst the clutter” distinguishment.

  2. Joel

    I think all your points there are definitely valid – especially about recognizing an icon after using it for some time, and navigating simply by icons. The problem comes in getting to that point. I find it very interesting that Windows 8 (and Windows Phone 7) generally seems to include a small piece of text on any of the tiles as well as the icon – and it makes perfect sense. Tell the user what it is using text for the new users, and have icons for the users who are already used to seeing icons.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s