Submitted by “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.”
How about an ugly icon contest? Anyone?
I’m all for articles that point out bad UI designs. But how about some articles on good UIs and explanations on what makes them good? There aren’t enough articles like that around.
This article does point out what makes a good UI (albeit icons specifically).
Did you read it?
Yes, I did read the article, but the title is “Ten Mistakes.” Its emphasis is on what a bad icon is. It does spend a little bit of time describing good icons. However, I stated that I desired articles emphasizing good UI design.
Ahh some of those icons bring back happy memories 🙂
Concise and to the point. Great article.
Edited 2008-02-13 21:59 UTC
people have a strange habit of changing icons for new releases of thesame software (office is the best example). i recognize programs by their icons, so changing them should only happen if it’s really really needed.
if some apple people are reading this : i hate you changed the icon of the system preferences for no good reason.
Edited 2008-02-13 22:38 UTC
True, but when the update to Xp/OS X and Vista came, the whole GUI got a more bubbly, colorful look, OS9/Win98 icons would really look like crap in Xp/OS X.
As Apple further develops its brand, an effort is being made to promote the Apple logo as a product badge (case exteriors, packaging, storefronts) and downplay it as an interface element (Apple menu turned black).
When designing a fresh UI for OSX on the iPhone (a Win/Mac friendly appliance) they removed the Apple-logo on the light switch icon for System Preferences and came up with the gears icon.
That set a precedence for continuity to have the subsequent Leopard version match, banking on the halo effect and seeking to make a familiar environment for iPhone users-come-switchers.
I’ve designed a couple of icon sets and it’s easy to fall into those traps, you get caught up in the moment of how good your icons look.
I’ve design my own icon sets and thought they dont look to good small after, it’s a easy trap to fall into. Really professional designers should know better since it’s part of what they learn, I get some comfort from this article.
Here’s my GNOME icon sets.
http://gnome-look.org/content/show.php/Glossy-Glass?content=27166
http://gnome-look.org/content/show.php/AquiGNOME?content=25865
I’ve made many of those mistakes (#1, #3, #5, #7, and #10) myself with the icons I’ve created in the past. I started a fairly popular icon set awhile ago ineptly called the “New Icon Set” which was an attempt to modernize Amibug’s “Slick” icon set. I’ve often considered redoing that icon set as SVGs, with the intention of correcting those very problems. But those intentions along with about two bucks will get me a cup of coffee at Starbuck’s.
Give me a solid application under those icons, and I don’t care what the freaking icons look like. Nor the icon perspective, Nor the color balance. Nor the anything else which any phone sanitizer^W^Wusaility expert might try to say is important to me as a user.
I thought all the icon critics got sent off in the ‘B’ Ark?
Hey… you must use Linux ;^)
Man, if you really use those GNOME icon sets, your desktop must be something hideous to look at! No offense meant, but those icons are disgusting…
Good Icons should offer the same strengths as good Logos.
-Less is more, Reduce it to the max
-Scalable but excellent recognizable even at small size
Thank you for mentioning we’re still looking at pixels. Some people seem to forget this while designing their 512×512 mudfests.
And some note on how display resolutions have increased. Yes, they did. And? We also have larger screens, so the dot-pitch has increased only a little. Besides that many people don’t like their screen-space wasted with gigantic icons & UI, they want to use the screen space for the documents they’re working on.
Thankfully, most modern Software (partly) allows scalable UI-Elements.
Edited 2008-02-13 23:36 UTC
Simple solution, but very good in fact. Don’t need to comment further. 🙂
How about vector based icon formats that can be scaled to any size? Of course, reading result at small size should be good (in terms of differentiation, recognition), too.
Example: IRIX: “One of the most unique features about the IRIX desktop is that its icons are vector images instead of bit-mapped images. This means they can scale to any size in real-time without losing any quality.”
See http://toastytech.com/guis/irix.html for example.
This is true. Icons should help to access functions of an application that you’re using very often (and you don’t know the keyboard shortcuts or don’t want to travel the menus), they should not limit you in your primary task, e. g. editing a document where “document” is to be emphasized, so you usually want to see your document, not tons of icons for functions you never use.
The ability do edit the icon set, along with scaling mechanisms, are good ideas here. But please remember: Most users don’t care for these options, they take the icons “as is” and don’t tend to change something. So the default settings should be acceptable in terms of accessibility and layout.
Another thing to be aware of is to make sure your icons have a distinct shape. Avoid to do like Microsoft did in Office 2003 where they put a square around the otherwise easily distinguishable icons for word, excel,..
Use shapes consistantly to communicate the function of the object. E.g. In old mac OS executable things was rombic, documents looked like dog eared papers and so on.
I think Office is quite consistant to that respect. In fact, all the executables have the same shape but different colors, and I find it preaty easy to look for the color of the application I need in an otherwise homogeneous group of icons.
What if you are color blind or look at it on a monochrome/greyscale screen? By using the shape you get one more very visible way of identifying the app.
True, the rectangle identifies it as an MS-Office application, but is that really necessary? Most people probably think of their work as e.g. wordprocessing, calculation, drawing,… not “officeing”.
Sometimes a different icon for a similar concept is appropriate. For example, OS/2 didn’t actually keep a copy of a deleted file. It just deleted it on the spot. So the shredder was appropriate. As for shredder icons looking like printer icons, well, that can be said of the real thing too!
As an ex-computer tech who has seen way too many people trying to use the trashcan for short term storage. Only to lose key files because either they filled it up too much and it automatically empties itself or about someone else tries to clean things up.
I think the OS/4 icon is the best. No-one but a total fool would see that icon and think they will get their files back.
Edited 2008-02-14 02:54 UTC
I read an interesting Jef Raskin interview awhile back where he was talking about the trash icon. The idea was to make it obvious there was something in there, but what the “full” trash icon ended up portraying was a distended trash can, full to the bursting. With testing, they found users tended to empty the trash immediately after sticking something in it, because the icon suggested it was something that needed to be done urgently. This was one of the few things win 95 fixed when they copied the mac UI, and is a non issue in OSX.
Oh my! So if an icon suggested killing one’s spouse or children? You’ve suggested a whole new class of security vulnerabilities! 😉
I can’t imagine how such an icon would have to look like, but… hehe… 🙂
Well, I figure that one might start out with something like this:
http://tinyurl.com/37aak9
And then resize and do something with this:
http://tinyurl.com/2xojom
I’m no good with the Gimp. All those layers and stuff confuse me. And you should understand that I’m not really an icon terrorist or anything. But *if* I were going to try to do such a thing, that is probably where I would start.
Edited 2008-02-14 20:38 UTC
“The icon appears very much like a printer with an octopus hidden inside”
Its funny cuz its true
Maybe it should be present in an kitchen recipe application. You click on it to get some of a paella’s ingredients. 🙂
I often find myself becoming blinded by icons these days, unable to work out for several seconds what I’m looking for.
I’m toying with the idea with creating my own set, essentially just oblong buttons with text, as I find it faster to read words than to try and decipher what the icon designer intended.
My real bugbear at the moment is Vista’s control panel. When you open it in classic mode it’s quite overwhelming. (I’m otherwise ambivalent about Vista)
The person that created the icons for gnucash got it right. The 32×32 and 48×48 icons look the same which has a financial chart with two stacks of bills and two stacks of coins in front of it. The 16×16 icon still has the financial chart in the back but only has a small stack of coins in front. Getting rid of the bills and one stack of coins allows the financial chart to be easily seen.
Have a look at this great page:
http://www.guidebookgallery.org/icons/components
There you’ll see the emerging Windows icons… and in my opinion, all the XP icons got worse – especially the “keyboard icon”. How can THIS ugly blurry mess be identified as a keyboard?
I know that many people like the blurry stuff because they think it’s more smoooooooth and so on, but the truth is that black outlines and clear colors actually give you the idea of what it might be. As soon as it’s blurry, you can forget it, at least in 32×32 or even 16×16 size.
Another great example is the “My Computer” icon. Look how pretty the 95 and 98 versions looked like. Clear and distinguishable. The XP version looks like crap.
The only icon that really got better is the “shut down” icon. Everyone knows what it means. I don’t agree on the rubbery overall looks, but that’s a matter of taste. At least they got the meaning right.
As for icon sets, I think the Gnome set is clearly one of the best. I’m not a Linux maniac, but I think they actually do a good compromise on outline vs. blur (though I personall still prefer Win 95/98 style).
In all icon sets by Microsoft, i prefer Windows 2000 icons.
They looked up to date and not too much blurry.