10 Mistakes in Icon Design

Blog: Secrets from the Chef

All Entries
Journal
Articles

10 Mistakes in Icon Design

Author: Denis Kortunov
12 February 2008

It is much easier to criticize somebody else’s work than to create something cool yourself. But if you apply a systematic approach to criticizing, make a numbered list and prepare illustrations, it will be regarded as a fully-fledged analysis! In my opinion, icon design is undergoing a transitional period. On the one hand, screen resolutions are increasing, hence enhancing icons. On the other hand, we still have good old pixels. Icons sized 16×16 and even smaller are still widely used. And so, here are the most commonly observed mistakes in icon design…

#1 Insufficient differentiation between icons

Sometimes within one set of icons, we have icons that look alike and it is very hard to understand what is what. If you miss the legends, you can very easily get the icons mixed up.

Icons from the Utilities section in Mac OS X. I am always getting them confused and launching the wrong application.

The problem is aggravated by having small size icons displayed on screen.

#2 Too many elements in one icon

The simpler and more laconic the icon, the better. It is preferable to keep the number of objects in a single icon to a minimum.

Nevertheless, Microsoft’s designers, inspired by the new format of icons featured in Windows Vista, decided to go big and drew bloated icons to justify their bloated budget:

Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.

#3 Unnecessary elements

An icon should be easy to read. The fewer elements it has, the better. It is better if the whole image is relevant and not only part of it. Therefore, you have to pay attention to the context of using icons.

Let us take for instance some database icons:

At first glance everything looks alright.

But if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part:

The sense is not lost here but the icons become much more discernible.

Here is a real-life example of unnecessary elements occurring in BeOS 5 icons:

Ticks here are absolutely superfluous. By the way, why are they done in red?

#4 Lack of unity of style within a set of icons

It is a unity of style that unites several icons into a set. The uniting property can be any of the following: color scheme, perspective, size, drawing technique or a combination of several such properties. If there are only a few icons in the set, the designer can keep some rules in his head. If there are many icons in the set and there are several designers working on them (for instance, icons for an operating system), then special instructions are created. Such instructions describe in detail how to draw an icon so that it fits straight into the set.

A multitude of styles in the shell32.dll file in Windows XP. This is the default set of icons suggested to a user wishing to change an icon.

#5 Unnecessary perspective and shadows in small icons

Progress does not stand still: interfaces have gained the potential to display semi-transparent objects, lost the limitation on the number of colors and there is now a trend towards 3D icons. But is it really all that useful? Not always! Especially if we are talking about icons sized 16×16 or smaller.

For example, let us take the application manager from GNOME 2.2.0 (RedHat 9):

Perspective in icons of such minute size is unnecessary and even counter-productive.

And here is the application manager from Windows XP:

As standard, icons in Windows XP are given a two-pixel black shadow; but in 16×16 size the shadow appears too large and makes the icons look dirty. The Address Book icon looks especially bad in this set.

#6 Overly original metaphors

Selecting what is to be displayed in an icon is always a compromise between recognizability and originality. Before a metaphor (image) is developed for an icon it is wise to see how it is done in other products. Maybe the best solution lies not in coming up with something original but rather in adopting the existing solution.

An example of excessive originality is the bin icon in OS/2 Warp 4, which is not actually a bin at all but a shredder.

Another problem with choosing a shredder is that there is no one well-known type of shredder out there. The icon appears very much like a printer with an octopus hidden inside. What is more, it is absolutely unclear how a full bin would be displayed according to this metaphor.

#7 National or social characteristics not being taken into account

It is always necessary to take into account the conditions in which your icon is going to be used. An important aspect here is national characteristics. Cultural traditions, surroundings and gestures can differ radically from country to country.

Let us suggest that we need to draw an icon for working with e-mail. It makes perfect sense to use a metaphor of real paper mail. A mailbox for example.

These images are courtesy of the Wikipedia article entitled Post box.

The answer can be found in the manual on creating icons for Mac OS X: “Use universal imagery that people will easily recognize. Avoid focusing on a secondary aspect of an element. For example, for a mail icon, a rural mailbox would be less recognizable than a postage stamp.”

The idea of using a stamp is great but the use of the ~~eagle~~ red-tailed hawk image is definitely questionable.

However, you need to account not only for national features… That reminds me of something funny. Once, we needed an icon for a data filter, which is often portrayed using the metaphor of a funnel. It was drawn like this:

The client’s response was as follows: “I do not really understand why for a filter, you drew an icon shaped like a Martini glass!”

#8 Images of real interface elements in icons

The manual on creating icons for Mac OS X warns us: “Avoid using Aqua interface elements in your icons; they could be confused with the actual interface.” But all in vain! For instance, take a look at the following icon:

You reach out to click on the radio button but end up clicking the whole icon!

Here is an interesting example from the OmniWeb browser interface:

Pay attention to the Previous and Next buttons, a rare type of button with legends underneath. Oops! They are not buttons at all, they are icons!

#9 Text inside icons

This mistake is commonly seen in application icons. Clearly the first thing that comes to mind when working on an application icon is to adapt the application’s logo. What is so bad about the text inside the icon? Firstly, it is directly language-related and so impedes localization. Secondly, if the icon is small, it is impossible to read the text. Thirdly, in the case of application icons, this text is repeated in the name of the application.

#10 Outside the pixel framework

As a rule, this problem occurs if you use a vector editor for drawing icons. In large size everything looks pretty and clear; but in reality the icons are small, and under rasterization anti-aliasing frets the objects’ borders.

Related entries

10 Outstanding Metaphors in Icon Design

Next entryPrevious entry

Comments

Wow, great article ! Lots of subtle things that I hadn’t thought about before but make lots of sense when you point them out.

Reply Sacha, 12 February 2008

Great … but I’m not sure to get the meaning of the 10th point … if the icon is meant to be 16×16, you don’t have to use it in a greater format …

The 9 other ones are just cool and exact …

Reply Wile, 12 February 2008

Ótima matéria, mas discordo PARCIALMENTE do item #9, que se a refere textos em ícones. Quem usa o programa ACDSee (visualizador de imagens para Windows), sabe o quanto é útil ter texto nos ícones. O programa cria ícones para cada extensão de arquivo de imagem. Por exemplo: imagens em JPG recebem um ícone marrom com o texto “JPG”, os arquivos GIF recebem um ícone verde com o texto “GIF”, etc.

Reply Thiago Mendes, 13 February 2008

Interesting article! It’s hard to find icon design related articles nowadays :D Anyway, few points:

1. For point #2, sometimes you have no choice but to include multiple elements in an icon just to fulfill point #1. If I’m not mistaken, there is a ‘rule’ that an icon should have at most 3 elements though it’s best to avoid them.

2. Point #3 is okay but for some software that has a lot of buttons/icons, it also leaves you no choice. For example, if the software has two ‘Save’ buttons, ‘Save A’ and ‘Save B’, you have to put an extra element just to fulfill point #1, again.

3. I totally agree with point #5, especially the shadows part. However, in my opinion, the shadows would be useful for multi-element icons just to create the effect that the elements are ‘separated’.

4. Point #8 applies to the current Firefox 3 (beta) icons design.
blog.mozilla.com/faaborg/2008/02/10/a-second-look-at-firefox-3s-icons/
I’m not sure if it’s called a ‘mistake’ or not.

Reply Lim Chee Aun, 13 February 2008

Excellent post. A lot of useful advices!

Reply Felipe Ribeiro, 13 February 2008

Simple (wich is good) and very useful article. The examples make it very clear. Thank you!

Reply Guillaume, 13 February 2008

Let’s add one more:

Don’t create an icon that reveals what you’re REALLY up to.

Case in point: a program icon consisting of a fist holding a globe.

The product?

The central tabulator election software created by Diebold Election System Inc.

It’s a more colorful version of the corporate logo of Dr. Evil in the Austin Powers series. My entry for “worst yet funniest program icon ever”.

Reply Jim March, 13 February 2008

I think the ticks in #3 is because they’re supposed to illustrate “settings”.
But, I’m just guessing. Great article!

Reply Gustav, 13 February 2008

What a great set of guidelines. Interesting how even GUI masters at Apple can mess up on a few of these. I think, however, that using an eagle on a stamp icon is OK. Stamps come with pretty much everything on them, so putting a national symbol on stamp icon (they are often placed on actual) stamps would be very much acceptable. I’m not from the U.S. and the eagle doesn’t confuse me at all. Political overcorrectness can be annoying.

Reply Aleksey Smalianchuk, 13 February 2008

I kinda disagree with #2 i feel that many elements gives more of a sophisticated view..which exactly what technology is growing towards every single minute.

#3 is a great example

Overall a very good quality post..you have earned yourself another regular reader now.

Take Care

Reply Desi, 13 February 2008

@Jim your point is only useful for application icons, not system icons or toolbar icons.

Reply Lim Chee Aun, 13 February 2008

An interesting post with some good points. However, I don’t think you’re correct in #8, regarding OmniWeb: the Previous and Next buttons are indeed buttons. Clicking on one does not select it, instead it highlights like normal to reflect that it was clicked, and then causes the next or previous preference pane to be displayed, respectively. Clicking repeatedly will rotate through all of the preference panes. Perhaps I’m misinterpreting your point?

(I should probably note that I work at Omni.)

-andrew

Reply Andrew Abernathy, 13 February 2008

I don’t think that you’re fully correct on #9.
The flickr “text” IS the logo, and I think it would be wrong not to use it.

Reply Gustav, 13 February 2008

“if this application (or a separate toolbar) deals only with databases, we can (and should) remove the unnecessary part”

- This is why Linux icons look like crap? Too simple. Look like drawn by a 6 year old.

Reply The Lucifer Principle, 13 February 2008

“I am always getting them confused and launching the wrong application.”

Even with the text underneath. Ahhh, poor you, you must need everything explaining to you :(

Reply boink, 13 February 2008

@ the lucifer principle
You think the linux icons look like crap? The oxygen icons of kde4 look very nice imo. www.oxygen-icons.org/?cat=3
But about gnome, you are possibly right, gtk is ugly.

Reply Mike, 13 February 2008

Great article. It’s funny how things look almost obvious when explained clearly.

I’m curious about the icons in #2. What are they supposed to mean?
The 1st one with the pc and the clock and the green arrow… what, refresh date? Change date? Syncronise with NTP? And why do they added a central unit+a screen to the clock, then?
The 2nd looks like some parental control stuff, or maybe anti-virus, with the shield. Or maybe user permissions control?
The 3rd one is really a mistery. A floppy (do people still use that?) and a printer. One is a storage device, the other a printing device, so maybe it’s devices managment? Anyway, that’s far from being clear.

Reply enoo, 13 February 2008

@ Mike:

The Oxygen icons you refer to have some inconsistencies:
1) some icons have shadows, others don’t,
2) the devices and application icons are drawn from different angles.

Reply jjdmol, 13 February 2008

Hmm, a few points.
for #1, there really isn’t a fantastic but radically different way to represent those three utilities imho, although apple’s tweaked the terminal icon in leopard to look more shiny and not evocative of older Macs and previous UI iterations from osx. Terminal is self explanatory, Activity Monitor is self explanatory, and Console is fairly self explanatory. It’s unfortunate that they’re all square, but any icon can only be shrunken so much before you lose meaning. And if you haven’t started using at the least Spotlight, and maybe other applications like Quicksilver, you should really look into them for launching applications.

re #7, I’m not sure why you find the eagle questionable. Birds, including eagles, are portrayed on stamps worldwide, it is not only some symbol of the US. Common stamp designs include people, national things (flags, locations, memorials), holidays and events. An eagle is less national and probably more global and better understood to be likely on a stamp design than most of the others I’ve mentioned.

Your point in #8 is sort of moot. I’m not sure what you find wrong with how OmniWeb does things..not that I’m a fan of their products or anything.

In #9, it seems it’s fairly common practice to have individual file types in the icon representing it on a mac. In this case Flickr may be part of the Flickr Uploadr icon, but the Playlist icon isn’t for iTunes itself but for the playlist files iTunes can open. While the Playlist example is probably a bad one in terms of L10n, many of the others are usually an extension/protocol i.e. txt or http. Those can’t really be localized so I’d imagine it wouldn’t be as big of a problem. There is usually a hint otherwise as to what the file has to do with, so it’s not a complete loss even if it is inconvenient for localization – in the Playlist example there is an iTunes icon…for .txt it’s a piece of paper with one upturned corner that has text on it…for .webloc files it’s an “@” symbol on the paper with upturned corner (which, if you haven’t noticed by now, is fairly common for document type files, so there’s one massive hint in itself).

I think I want to point out most that there aren’t that many ways to be creative and display THAT much information in a 16×16 icon. Some things work great for that (arrows, checks, crosses, simple symbols pretty much), and applications with distinctive or very simple icons everyone knows fall into that category, but most won’t. I even have a hard time with the Adobe CS3 icons. They’re all square boxes, and if it weren’t for the colors I wouldn’t be able to tell much between Photoshop vs. Indesign at 16×16.

Really, with all the gripes you have over some of these icon designs, I’m wondering if you have a better way to get across the point that a file is a text file, a .m3u playlist, a movie…

Reply jane, 13 February 2008

OS/2 shredder originally did not have undelete capability. It truly was a shredder (delete only) and not a trash can.

Reply Mark, 13 February 2008

The best work on icons has been done by the Opensource Tango project. I have no idea why MS and Apple, with their immense budgets, don’t pay as much attention to what one would think is a crucial part of the OS.

Reply devolute, 13 February 2008

@ Wile: It’s about pixel grid. You should match pixel when you drawing icons in vector application. Sometimes it’s pretty hard and you get blured (because of anti-aliasing) raster image.

@ Thiago Mendes: Thank you for comment! But it’s pretty hard for me to understand you. What language has you use?

@ Lim Chee Aun: 1) Hmmm… Never heard before about this “3 objects” rule. Can you provide a link? 2) Sure, sometimes pretty hard to remove element from icon. But if it possible – you should do it. It will help to focus on function. 3) Great remark about shadow in icons with multiple objects! I always add shadow to increase contrast between objects.

@ Gustav: You’re right. But user know about it without tics. There is a title “Preferences” on top of the window.

@ Andrew Abernathy: The point about buttons is: why put a button caption below? I mean this is the same situation, if there will be a button with X on it, and “delete” below. Why use buttons there? You can use icons with arrows.

Reply kortunov, 13 February 2008

So is it actually better to use a program like Photoshop instead of a vector editor for drawing icons?

Reply Alex, 13 February 2008

@Denis The “3 objects” rule as stated here:
msdn2.microsoft.com/en-us/library/ms997636.aspx
“We suggest that you use no more than three objects in an icon.”

Reply Lim Chee Aun, 13 February 2008

That is not an eagle, it is a hawk.

Reply Tim Cnossen, 13 February 2008

Can I translate this post in French?

Reply Franck Hanot, 13 February 2008

Without the big round base, I’d have a hard time viewing that as a martini glass, but putting a handle on the side or near the rim of the funnel may have made it more obvious for the client.

Reply Britain W., 13 February 2008

When are you going to do an article about contrast? I know of a good website with greenish text on a green background used in the comments section. It burns the eyes after 5 seconds of reading. You should check it out!

Good article though.

Reply Jeff, 13 February 2008

geez.

why are you whining about flickr? how is that hindering ease of use? you seemed very nitpicky about pathetic stuff. “oh my god, the icon looks dusty.” so does your mattress. go out and get some. you wasted my time.

Reply frederick szczepanski, 13 February 2008

re: #8, it’s OK to use buttons because they ARE buttons and they will work exactly the way the user expects them to.

re: #9, bad examples: one is a logo, one is an Aqua-style filename extension tag (hence not subject to localization). The last one is okay, though still not subject to localization (being a given name).

Reply millenomi, 13 February 2008

one mistake in making a webpage – forgets to check your page across all browsers, specially IE6 since 60% of the people uses it and it always screw up.

p.s. fix your page in ie6

Reply Xin, 13 February 2008

I can only hope the people creating icons for Foobar2000 listen to #9. Their mime-type icons are different colors, which is nice, but have text labels which are utterly indistinguishable at small sizes.

Reply Jake T, 13 February 2008

You lack background to understand the beOS icons. The red tick mark is an overlay.

It clearly means, Configure.

So, if you see a printer, it’s an icon to USE said printer. Now, it you see a printer with a red tick, its an icon to CONFIGURE the printer.

Reply Gabriel, 13 February 2008

Mark, not only it was a permanent delete, it was an actual shreder. it had the option to physicaly overwrite the content of the file before unlinking it.

Reply BLS, 14 February 2008

Great article. I am likely to reference this article instead of trying to teach people myself in the future.

You did miss one problem. When bad metaphors become standard. Do you adhere to the standard making experienced users happy, or do you use a better metaphor for the target users and make future users happy?

Here is an example I have been working on for some time. Photoshop did not invent the colour picker tool, but the imagery has become standard in the photo editing and art industry. Photoshop has a eyedropper/pipette image for the colour picker. This imagery seems to come from the photography process of film developing, but is not a match for the tool it represents even then. I am unsure about photographers, but artists do not know intuitively what the icon represents. I have spoken to many artists who did not get used to this icon for six months or more. I have been doing studies on artists and art software beginners and I have found that the two images they like the most are a crayon on a fishing hook, and a chameleon. The crayon/fishing hook is instantly the most recognisable for all involved, but even after an extra second to relate the chameleon to the tool, the chameleon is the most popular for simple imagery.

Even experienced artists find these two new images easy to understand. So which one do you run with? Do you continue the confusion for the next 20 years of art software? Do you put experienced graphics users through occasional discomfort (let’s be honest, experienced users do not look at the UI and use keyboard shortcuts instead).

Photoshop has many other bad icon metaphors, but this is the worst.

Reply NotSure, 14 February 2008

Top marks from me. It’s nice to include this as almost a ‘best practices’ guide.

Reply Michael Ott, 14 February 2008

Really Good Post, Well worth a read! Its the one thing I have never really bothered to make, but after using Windows for many years and now working with Vista sometimes I reckon its time for me to make some Icons of my own :D. Cheers

Eating Design

Reply Eating Design, 14 February 2008

#3 shows why a designer shouldn’t evaluate technical icons, or at least understand context before commenting on them. The second version you show as being better is far inferior from the target audience’s perspective, DBA’s and other technical people. Any application having your ‘improved’ icons would not be accepted by that audience because it would show a lack of knowledge and understanding of standard, common computer symbols.

These symbols go back to before the web days and arose from need to have a standard way to represent common items in modeling systems. Go to any modeling/design book meant for IT professionals and you will see what I’m talking about.

Icons are meant to be understood without having to read the text, otherwise dispense with the icon and just put the text up there. Look at your example 4 for a sample of what I am talking about. Do you see any text in that icon display?

If you notice, each database icon represents two things, as specified in the text, a database and the operation to be done. That is also why there are two objects in each icon, the standard representation of a datastore, stacked cylinders, and the operation. To understand what you are adding too, searching, etc. you need the context and not just the action, hence the + sign and the datastore symbol. In your ‘improved’ version, try to understand what you are adding without having to read the text.

Or do as you did in #4 and show them without text. How helpful are your improved icons now?

Now look at a DBA gui and see how many different things can be added, deleted, etc. You’ll quickly see how deficient just having simplified icons showing just the action is.

My reaction would be add what? remove what? search what? etc.

Turbomilk

Blog: Secrets from the Chef