Turbomilk

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.
http://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. http://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:
http://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.

There are also other deficiencies in this post that show your lack of understanding on technical matters, e.g. difference between OS/2′s shredder and the recycling bin/trash can. Maybe you should have focused your icon commentary to icons within subject matters that you have a good understanding of instead of spreading bad information.

Reply joel, 14 February 2008

The funny thing about the commentary on putting an eagle on a stamp is that there are lots of current U.S. stamps with birds on them, but none of them are eagles. They’re mostly ducks.

Reply Bozo, 14 February 2008

I don’t like saying what 20 people have already said, but I think I have to this time. This was a great article. thanks.

Reply Brad C, 14 February 2008

Awesome ideas presented wonderfully. Also this general Web site kicks much ass. Thanks.

Reply Sam Wilson, 14 February 2008

IIRC, the reason for the recycle bin/shredder icons is because Apple owns design patents on the Trash Can. Sometimes you just can’t use the obvious, because someone else annoyingly and maliciously copyrighted it to thwart you.

Reply Simon Cooke, 14 February 2008

Great article! Even though I’m just a humble blogger, I’ve always been interested in the finer points of interface design. I’ve never really thought of all these, but they’re worth considering in web design as well as for GUIs.

By the way, you might find this evolution of icon design page interesting:

http://www.guidebookgallery.org/articles/onethousandsquarepixelsofcanvas

Reply Troy, 14 February 2008

What your article left me thinking is… is there any well designed icon in the world??

Reply Diego, 14 February 2008

There is a better example for #1: The specialized folders icons in Mac OS X 10.5 (e.g. Library, Documents, Pictures, etc.). They all have embossed graphics. While Terminal, Console and Activity Monitor can be distinguished by color of the detail which blends with the icon, when they are small, try to distinguish a kind of shadow of something 10 pixels size!

Reply Douglas, 14 February 2008

You forgot the MOST important point of all: Not everything needs an icon! This is particularly true in menus and program categories – icons should focus on the common, main menu items.

Reply pytechd, 14 February 2008

Great article. Very informative and useful. One nit to pick on item #7, the cancellation mark on the stamp says “Hello from Cupertino” and bird pictured is a Kite Hawk (aka. Cooper’s Hawk or Sharp-shinned Hawk) which is indigenous to that region of California.

Reply spot_on, 14 February 2008

Great article. May I suggest as a correlary to #5 that reflection is also unnecessary? It often reduces contrast to the detriment of clarity. Case in point: the Vista back arrow in the new Mozilla icons. The bottom corner of the arrow is lost in the shiny reflection.

Reply Narc, 14 February 2008

regarding 6 – What if the function is “shredding”, as in secure delete. You don’t need to show that it is “full” because it never needs to be opened since things sent to it have been permanently destroyed. I think a particular style or ambiguity of a shredder is no more difficult to deal with than a printer.

Reply Harpoon, 14 February 2008

nice article. HOWEVER, i tend to disagree with most of the points. If anything this article’s title should be “10 mistakes in icon design – [for 16x16 sized that is]“
as you pointed out, icons are evolving but so is the way they’re being used and viewed. These days lots of people use big icons and viewing modes such as coverflow in osx or the 256×256 size icons in vista. Sure there’s still 16×16.. but that’s usually for list views and when people are in list views they generally look at the filename for information. Ofcourse the icon does give the user a SLIGHT idea of what it is {i.e. folder or file), the filenames are more important in a list-styled view IMO. Therefore the letters/words inside icons are quite justifiable. So are the amount of elements considering the size of screens and view-styles these days.

Reply rick., 14 February 2008

You have already given great examples for #3 – however an even more ubiquitous and egregious example is the placing of a rectangular sheet /document behind all kinds of icons.

Compare for example the text justification, columns, and indent icons of OpenOffice/GTK (with background sheet) with that of MS Office.

The ‘background sheet’ is useless visual information, makes the icons harder to quickly differentiate because of the similarity in silhouettes, and makes the toolbar look ‘cluttered’. Damn shame because it really detracts from the otherwise beautiful Tango icons (even though iirc this practice is specifically proscribed in the Gnome UI guidelines).

Reply Darryl Rees, 14 February 2008

I only agree in #3.

#1. Are you color blind? The difference is obvious. And it’s understandable really well without reading the app file name.

#5. Check out Tango icons, that’s old example. No comment on 16×16 XP icons. I hated to follow it’s guideline.

#9. You should read Apple’s HIG first. It’s adviced to put text inside the icon. And i don’t understand why you choose Flickr upload and Jet n Gun icon, you are talking about document type of the app.

#10. Good icon designer will not scaled down its creation without revamping the pixels.

Reply Ncus, 14 February 2008

This is a great article! I pretty much agree with everything that you’ve pointed out here. Some of it is painfully obvious, yet somehow ignored.

As mentioned, there are a few errors/quirks.

1) Microsoft hired The Iconfactory to design the bulk of their icons, but not all. The icons in #2 were designed by The Iconfactory to Microsoft’s (absurd) liking. I would say these are not the best examples of The Iconfactory’s work.

2) Flickr Uploadr was an unfortunate example of a valid point. The flickr wordmark *is* the logo, and identifier. Choosing something else would have been inappropriate.

3) The Mail application icon features a hawk, not an eagle.

Reply Michael, 14 February 2008

While I agree with most of the points here and think that some other are good to be noted here I possibly cannot figure out what’s the thing in #1 and 5#.

First of all, why the heck you for example do not read what program you’re up to starting since you always start wrong applications because of the bad icon? I think it’s not icons fault but yours since you do not read the text label of the icon.

And as for second note. Linux icon themes are even more constantly developing and highly inconsistant for most parts. Using something like old GNOME from RedHat Linux 9 is so outdated that it doesn’t make sence anymore.
It would have been better to find those icons from newer sets like KDE4 Oxygen or GNOME Tango.

Windows XPs icon theme is outdated too but since it’s still used by many people I guess this part was worthy mentioning.

Reply AnXa, 14 February 2008

Wow, such a graet article dude!

I always confuse terminal icons in Mac OS X too :)

Reply sogas, 14 February 2008

Awsome post. bookmmarked and RSS feed subscribed.

Keep em Coming

Reply ayushsaran.com, 14 February 2008

Nice post Denis, very informative. It reminded me to checkout Apple Human Interface Guidelines

Reply Larz, 14 February 2008

That crayon on a fish hook idea suggested in one of the comments above (for replacing the eyedropper icon) is one of the most ludicrous ideas I’ve ever heard. If it takes an artist (and I am one, btw) 6 months to get used to what the eyedropper means maybe it’s best to step away from the computer and go back to finger painting.

Good article btw.

Reply Whit Matthews, 14 February 2008

Thiago Mendes wrote in brazilian portuguese. Here’s a translation:

Excellent work, but I partially disagree with item #9, which refers to text inside icons. Who uses the ACDSee program (image viewer for Windows), knows how much it is useful to have text in the icons. The program creates icons for each extension of image archive. For example: images in JPG receive a brown icon with text “JPG”, archives GIF receive a green icon with text “GIF”, etc.

Reply Diego Aranha, 14 February 2008

Well, hopefully Apple doesn’t follow these “advises” and not a lof people won’t follow your advise to find an hairdresser.

Reply Gérard Depré, 14 February 2008

Excuse me… but uhm… if I want to know the extention, I look at the extention, not at the icon.

Reply Andre, 14 February 2008

Great article. I must admit I kind of assumes all post boxes were red until recently.

I have one question that I’m really quite curious about, what icon did you end up creating t represent a filter. I have toyed with this for ages and never been able to decide on anything that I’m particularly happy with.

I must say on point 9 I totally agree other than I don’t really have a problem with extensions being inside the icon so long as its only found on the extra large icons. That said I wouldn’t do it myself.

As for point 10 I have used a grid in illustrator to ensure that the anti aliasing doesn’t do too much damage when rastered to 16×16.

Reply Jixor, 15 February 2008

@Whit Matthews

You are an artist? This is not relevant on a one case situation.

Have you tested icon imagery with test subjects? If you have, and if you had not had nay input into their responses, you would find that most people need to learn most of the Photoshop icon set by rote. Adobe is very bad with their imagery. In fact, I have studied the imagery of art software interfaces going back 25 years. It was a blast going over many of the old software I used to use.

I tested every metaphor possible including the eyedropper tool. I brainstormed with other computer artists for weeks to get the widest input for metaphors. Then every image was painstakingly created and recreated if it did not fulfill it’s potential. These images were printed randomly on a test page with numbers and then put in front of test subjects. The test subjects were asked to number their top three choices, and their reasons they liked them. The eyedropper tool was actually at the bottom of the choices in the results. Not one person picked it as one of the top three choices. People tested had an age range between 12 and 70. The people were made up of two groups. Complete beginners to art software, and professional computer based artists.

So Whit Matthews, have you only ever used Photoshop? Have you worked (worked professionally to complete a job) on any other bitmap/raster software? Your short, answer that did not rebuff any of what I said in any intelligent way, suggests that as an artist, you may be almost finished your community college course.

Reply NotSure, 15 February 2008

#1: I never mistakenly identify those icons. Even though I access them by Quicksilver most of the time.

Reply Felix, 15 February 2008

thanks for article! it would be interesting to find mistakes into favicons )

Reply tobto, 15 February 2008

tottaly desagree!!! this article, besides beeing constructive, points twards boring desktops and cuts out the imagination of designers to low level designs.

lets remember, that people who dont sit in front of a computer 8h a day or more (computers are my job so im screwed) dont mind having boring desktops and icons because they dont tired of looking to them.

but the other way around, like in my case, people sometimes get very anoyed by the way theyr desktops and icons look, so this means designers would have a mutch less margin to draw desktops and icons.

totaly agree on the quality thow.

“The only thing necessary for the triumph of evil is for good men to do nothing!” Edmund Burke”

Reply Greyhat, 15 February 2008

I see lots of comments questioning the validity of #7 (not using a hawk on the stamp) – I don’t think the problem is necesseraly with the hawk, but rather that it’s a complex image made up of fine detail (needing lots of pixels to define it). An icon like that can never be resized a lot smaller without loosing important information & definition.
At smaller sizes a stamp with no picture will work better – the scalloped edge of a stamp is a very recognizable pattern. Some brown and blue smudge in the centre will confuse the meaning of something that is already very iconic on its own.

Reply ElmiR, 15 February 2008

#7: why a funnel as a metaphor for a filter ?
filter = limit what you get
funnel = get as much as possible
(I know that the funnel is a ‘standard’ metaphor for a filter. I never understood why)

Reply Francesco, 15 February 2008

@ Andre:
Windows doesn’t display extensions by default, and in OSX they’re not even required.

@ Francesco:
Yeah, I never understood that either. A sieve would be more appropriate, but I understand that it may be dificcult to make it into a 16×16 icon.

Reply Ricardo, 15 February 2008

EVEN WORST!!! WHY DO OSES EVEN NEED ICONS WHEN YOU CAN GET A LIST BY SIMPLY DOUBLE TABBING IN CONSOLE??!!

smartuser@computer~#
Display all 1899 possibilities? (y or n)

Then you already know the name of the program and if not you can get the first letters.

Besides this guys is criticizing every single aspect of the design process and virtually NO icon out there makes his high standards. The reductionist approach boils down to cli. For instan the database PLUS/NEGATIVE sign, why have a damn icon for those when you can hava characters: – + ?

Well that’s what’s GRAPHICS ABOUT and making metaphors, and whatever a company chooses it is for distinguishing from the rest.

Anyways I could tear apart you entire post sentence by sentence but I won’t bother ’cause I don’t even use stinky GUI icons in the first place.

by GUI suckers

Reply asdljhfalsdfalskhdf, 18 February 2008

I’d like to address an incorrect assumption made by Michael regarding the Iconfactory’s involvement with the design of the official Vista icons. While we did in fact design the original core set of objects that were used as the basis of the Vista suite, the team at Microsoft took those metaphors and used them as they saw fit to construct the actual icons you see in the operating system. We had no control over how elements were combined with each other, or even what the final guidelines would be since our portion of the project was completed fairly early in Vista’s development cycle.

None of the icons seen in example #2 here were designed or created by the Iconfactory.

PS – Great work on the article. I happen to agree with pretty much everything. :-)

Reply Gedeon Maheux, 18 February 2008

How about another post about the 10 icons you like and the reasons why?

Reply Chris McKay, 19 February 2008

Good set of guidelines. Some of the usability criteria that explain these guidelines are:

(*) Recognize an icon quickly from a group
(*) Not confuse icons
(*) Have the picture help users understand the feature
(*) Increase the aesthetic value of the UI

You can empirically test these criteria with target users and use the findings in an iterative process to improve the icons. Here’s a case study of this:
http://www.useit.com/papers/sun/pagee.html

Reply Jakob Nielsen, 21 February 2008

Very interesting article. It really may be useful to me as a young designer. I am 15 years old :p.

Reply michael92, 22 February 2008

Jacob: (*) Recognize an icon quickly from a group

Recognize it from a group of what exactly? For example, what if the group is comprised of the most recognizable icons from previous testings of groups? Then do you have the absolute, most recognizable icons, or, do you have a slippery slope?

How about some testing guidelines:

- With usability, test the metaphor independent from the rendering of it. You shouldn’t do both at the same time.
- Don’t ask users if one icon looks prettier than another, give them a task to accomplish. Ideally, do the same task under different toolbars/applications.
- Once you have a successful metaphor, the rendering of it can be tested for further recognizability and appeal with focus groups

Reply Harpoon, 24 February 2008

Harpoon

I would agree in theory with your process, but it has a little too much of the “clinical scientist”. The reality is that artists find that some subjects are incredibly difficult to portray graphically, while other subjects are a natural fit.

Some ideas are best described verbally, other ideas are best described with an image.

Great interface design as I see it, is part science, part art and bucketloads of empathy.

Reply NotSure, 25 February 2008

Thanks for quite interesting article. Although I am not even near GUI designer, it feels quite amazing to understand certain nitty-gritties underneath of «what is convenient to use and what isn’t» Will do subscribe probably :)

Reply Roman Kirillov, 28 February 2008

Good advice. You should use that advice in regards to the electronic bull you have to get more trackbackers. Bulls are not known for their tracking abilities.

Reply Rob, 1 March 2008

1. too many contradictions.
2. you making at least six of the your ten mistakes yourself.

Reply jan, 3 March 2008

@NotSure,

I agree that there are some issues with the Photoshop icon set (healing brush – after several years and five minutes of close scrutiny – is it supposed to be a plaster?!?)

However, I honestly do think that the eyedropper is one of the lowest offenders. Eyedroppers are used to pick up coloured ink from jars, and the tip of the icon itself denotes a specific target point for users to aim with. This is very important for such a precise tool.

What would you have the chameleon do? Would we use its eye? Or would it shoot out its tongue? As for a fish hook, well, no offence meant, but how far do you want to stretch a metaphor?
I understand your qualms, but Photoshop, in my opinion, is an example of a program that is so feature laden that simple icons will never do it justice, users just have to take time out to LEARN the damn thing.

On a more general note, I think the ‘Vistafication’ of icons is creating a general downwards spiral of legibility. It’s got to the stage where we’re ok designing any old rubbish, because we know that we can coat it in a thick glossy sheen and it will ‘look OK’. To be honest I think computer interfaces have become so complex that OS creators need to ditch the icons and start looking at more intuitive systems of classification.

Reply lankdaddy, 14 March 2008

I wonder, why it isn’t possible to see new comments. Democracy.

Reply shaah.myopenid.com, 25 March 2008

Great information! I’m interviewing to get a job designing icons and this is the best info I’ve found. Thanks!

Reply J Buchmann, 26 June 2008

Very interesting article.

I just want to say that if you must talk about the gnome design then you need to be sure to use the gnome default icone set wich is based on the tango icone project. And the Tango project is focus on usability.

So, in a way, you must not mention Gnome 2.20 in your article but only Redhat 9.

And I would add that the Gnome icone set is only for the application brought by the Gnome project. So gFTP, XIrc, Mozilla apps and Pan are not provided by gnome, so is their icone.

Have a nice day.

P.S.: Sorry if my english sounds bad as it is not my native language.

Reply Jean-Christophe Caron, 29 June 2008

Loved the post – any ideas where to get travel icons from?

Reply ski chalets, 6 August 2009

Nice tutorial great help for the webmaster. Many does do mistake in icons.

Reply Nits, 2 September 2009

Thank you for the article! It did help me a lot.

Reply hellelampe.myopenid.com/, 18 December 2009

[...] 10 Mistakes in Icon Design [...]

Reply Icons and the Web – Part 5: Creating and Modifying Icon Sets :: Echo Enduring Blog, 3 September 2010

[...] 3. 10 Mistakes in Icon Design [...]

Reply 30 articles & tutorials to improve your icon design skills, 9 September 2010

I actually much prefer the first set (with the database icon) in #3.

Reply @ajmint, 24 February 2011

Create tips you have! Thank you very much!

Reply Melroy van den Berg, 8 March 2011

Thanks for this. I’d like to use this list in my upcoming (self published) book “Liquid Information”. I see you allow use with attribution, which is what I will do, unless you prefer me not to use this in which case I will sadly not do it. You can reach me at frode@hegland.com

Reply @liquidizer, 14 August 2011

Great article.

We just finished a related article at the Job Crowd Blog entitled “Avatar creation guide: Selling yourself and your services online”. Check it out at http://blog.jobcrowd.com/avatar-creation-guide-selling-yourself-and-your-services-online/.

Hope you enjoy.

Reply @JobCrowd, 3 September 2011

Thanks for the intelligent discussion Denis.

This following bookmark is an invaluable resource and a must for any serious icon designer:

A MONSTER LIST of Style Guides and UI Guidelines
http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides

Reply @glyfx, 21 September 2011

I am working on a UI design for a business intelligence system app now. I have designed certain icons for different department of my company, different functions icons. I would like to share my Ideas for you about how to design a icon.

1. Keep your icon design sample.

By Anna Jing Cai

Life is hard. don’t make your life and others people’s life more complicate. As a designer your job is make life become easier than before. When I finish any icon design, I will give it to my 10 years old students, if they can understand what you designed, you are succeed.

2. Use current logo or icon to design your new icon.

By Anna Jing Cai

Sorry for the indigestibility…. For example, You are going to put Microsoft excel icon in to your app, you can’t change their icon too much. The first reason is copy right. second reason is people have already have a excel icon’s original picture in their mind. It is difficult to relate other icon design in this case. Maybe you still need to keep the shape of the icon, or maybe keep the color of the icon to your new icon design.

Remember that people are liable to judge others from their own first impressions. And they always think the first one is the best design once they have the first image in their mind.

For more information about icon design or UI design, pleast stop by our blog: http://annajingcai.com/

Reply Jing Cai, 8 March 2013