Over the course of the past few years, I have learned a lot about the importance of icon recognition and design. It is one of the most important things for an application, it is the very first experience for the user: figuring out what the app is, before they open it. It’s the same concept as logos, art, and photographs on product boxes in stores.
I’ve taken some time to compare the differences in icons from different visions. Below you will see comparisons between Mac OS X icons, Windows Vista icons, and some 3rd party applications. I’m going to focus primarily on the metaphors chosen and how they contribute to the recognition of the applications they represent. I won’t go into how I think the Windows Vista icons are in the wrong perspective, or even that they’re facing the wrong way, however.
Let’s start with the the application that the user interfaces with files. In OS X, this is Finder, in Vista, Explorer. The naming convention seems pretty good for both, and the execution for their icons, both of them, are interesting approaches.
Apple uses the logo for Macintosh, which resembles the type of computer you’re currently using, and while it doesn’t convey files and file management, it is a recognizable brand image. It may not be the best visual metaphor, but it works for now, I guess. Windows Explorer has seen some changes in the past few years. In Windows XP, the icon was of a folder with a magnifying glass, but in Windows Vista, it has changed to the same icon as “Computer”. I think this may be a better icon for the idea of file browsing, but I think the fact that the icons for “Computer” and “Explorer” are the same is quite weak.
Both operating systems now have a “heads up” display with widget-gadgets. They both do a similar thing, but Dashboard on Mac OS X is activated and takes over the screen, whereas Windows Sidebar is visible on the side of the screen where gadgets are docked.
Dashboard’s icon resembles an object anyone who has driven a car knows of. The Dashboard icon is a representation of a car’s dashboard, a place where a driver goes for additional information needed for driving the car. Likewise, Dashboard on Mac OS X empowers the user to see additional information available for their personal computer, and information gathered from the Internet. Windows Sidebar is quite literally, a sidebar, and while that sounds pretty straightforward, the icon itself does not even show a sidebar! It shows the gadgets, if you consider gadgets to be sticky notes, and a photo, that is. Three squarish items on a computer display just show a disorganized fool using a computer. (I’ve seen people who actually stick Post It notes on their computer monitor, it’s horrific.) What information does this icon portray to the user that is included in Windows Sidebar? A sticky note that contains a few lines of text, a Windows logo on a sticky note (how informative!) and a photo (which, by the way is used in at least four other icons in Vista).
Next up, mail clients. Windows XP used to rely on Outlook Express for average users, and for people who wanted to and bought Office, they got Outlook. Outlook has become an app that not only manages email, but contacts, and calendars. In Windows Vista, a new application has been used for retrieving and sending email, Windows Mail.
The icon for Windows Mail shows a type of “inbox” for mail letters. While a visual metaphor for “inbox” should be a good one, it falls short and isn’t a strong one in a small form. As a small icon, Windows Mail begins to look like colored paper with a clip around them. Mac OS X uses the Mail application to handle email, and it’s icon, in my opinion, is quite well done. The unique shape of the rippling edges of a stamp clearly identify as “mail” and is a strong visual metaphor, even at small sizes. (I’ve also been told the original Mail icon was supposed to have a pigeon, enhancing the metaphor, but somewhere along the road, a red-tailed hawk was chosen instead.) There’s also a third-party application by Mozilla to handle email, Thunderbird. While the name doesn’t convey mail, the icon does a good job with that by showing a bird carrying an envelope. While using an envelope (like Windows Mail), I think this icon does a much better job conveying mail, because Mozilla chose to use the back side of an envelope, which is immediately more recognizable with the fold on the back forming a downward arrow shape.
In regards to internet navigation and browsing, we have another third-party candidate, Firefox.
Mozilla Firefox uses the icon of a fox, wrapped around the globe, as the Thunderbird icon has a bird wrapped around an envelope. This connects, in the same way, the purpose of the application, with branding. I would say that the Internet has been resembled frequently as a globe, as it’s connecting servers around the globe, but I don’t think it’s the perfect visual metaphor. It does work however in the fact that it has become a standard, if not the best one. Safari for Mac OS X uses the branding together with the purpose of the application by using a compass. This shows that you’re navigating through something, and the subtle image of continents in the blue area of the compass entail navigating through the world, or the Internet. This greatly contrasts the Internet Explorer icon which is basically a blue “e” with a swoosh around it, diagonally. One might argue that the Internet Explorer logo/icon has become a symbol and a visual metaphor for the Internet, but in essence, it is still a logo of a brand, and does not resemble or instruct to the user in any other way that it is used to surf the web.
Instant Messaging applications are an interesting category, seeing as they resemble different types of services, not just the particular client application. AOL has done a good job connecting the “running man” logo to it’s instant messaging service, and iChat has used that in their icon in the past to connect the idea that it works with AOL Instant Messenger. Microsoft, however, since utilizing its own service is using stylized people. Unnatural colors, at that.
iChat, as its present icon, is a speech bubble with a video icon inside it, indicating speech (text or audio) and video (through the use of a symbol within the icon). I think iChat is a home run, in terms of icons, it conveys the idea of chatting immediately. Microsoft presents Windows Live Messenger, and it has the aforementioned blue and green people to resemble chatting, but in no way is it shown the characters are talking, or even interacting. It would seem they’re just right next to each other. This is not only a problem with the icon, but I believe the branding as well.
Apple offers an application for you to organize your life’s events, iCal. Vista introduces Windows Calendar, which I assume, by a somewhat recent presentation that Bertrand gave, is pretty similar.
Apple’s icon is a dynamically-changing one, which provides the current date and month. It resembles a day-to-day desk calendar, and that’s pretty much all to say about it. Windows Calendar is a propped up calendar, seemingly a day-to-day calendar, but clearly not, as it displays a full month, with one date in particular circled. At a small size, I can imagine this looks just like a little place card at a dinner table. Maybe I’m exaggerating.
Of course, computers have brought us to a point where they are a digital center of our lives, and thus, media has played a strong role, especially with music. Both operating systems have a flagship music application, with a built-in store.
Windows Media Player plays audio and video, and is resembled currently by three glass squares with an orange circle in the middle of the forefront one, with a white triangle within that. I’m sure some of you get the analogy early on, that it must be CDs and a play button, but I think the execution is extremely weak. They do not resemble jewel cases, and the play triangle is not the typical proportions of a play button. iTunes for Mac OS X is, in the same way, an application that plays audio and video. It is clear that iTunes primary focus (due to its name, and the nature of its first incarnation as an application) is music. It is also clear to me, that any novice user can pick out, of all the application icons, which one will help them play music. iTunes is resembled with a music note and a CD. Extremely identifiable, both shapes.
While on the topic of media, each operating system has an application that interfaces primarily with a remote control, where users can listen, watch, and interact with their media, while sitting on the couch.
Apple has Front Row, and the icon is currently resembled as a red movie theater chair. Whether you are of the belief that those chairs are comfortable or uncomfortable, its clear that the center of entertainment at the movie theater involves you sitting in that seat for a few hours. On the other hand, Microsoft uses Media Center, and it is resembled by a green glossy sphere wrapping the Windows logo. Basically, same freakin’ thing as the Windows Vista logo, just green. Honestly, I’m quite disappointed with this icon, they could have done much better. Much better. (By the way, I’m quite aware that the physical button on the remote to open Media Center is the same thing, a green button with the Windows logo, but I stand by what I say. It is a weak icon with a weak metaphor.)
Another important aspect of viewing media is first organizing it. With music and video, we have each respective application, but for photos, Windows provides Photo Gallery, and Mac OS X, iPhoto.
I have personally not used Photo Gallery for Windows, but I will assume, and hope, that it would perform similar functions. The icon of a picture frame with a vase next to it conveys displaying photos, but not organizing. I’m not quite sure why there’s a vase next to the frame. There’s no reason or metaphor connecting that to the application. iPhoto’s icon is a point-and-shoot camera in front of a photo of a palm tree, a photo that has become synonymous with “photos” in Mac OS X for quite some time. The camera with photo helps the user understand that the application works with the camera to get their photos, then organize them.
Apple has given users a nice, simple application for video editing for quite some time, included with every Mac, iMovie. Microsoft offered Windows Movie Maker, which in Windows XP isn’t quite up to par with iMovie.
I can’t speak for the Windows Movie Maker that ships with Vista, but I can say that the icon is a decent icon, and probably the only icon here I can’t say much bad about. That brings me to Apple’s new iMovie icon, which is a concrete star, outlined in gold with a movie icon in the center, similar to a star on the Hollywood Walk of Fame. I get it, but I honestly think the other metaphor of the clapboard with the two people passing off a relay stick was way better. That one conveyed motion with the people, and movies with the clapboard. The new icon also doesn’t, in my opinion, use the square canvas of an icon very well.
The hub of all system-wide preferences are kept in an app System Preferences on Mac OS X. Windows uses Control Panel, which acts similarly.
The icon for System Preferences changed with Leopard. In Tiger, and previous versions of OS X, it was a light-switch with an Apple logo beside it. It did make sense, seeing as you’re flipping switches, but I think the new icon, which is adapted from the iPhone icon for Settings, does a better job. It shows some gears, which resemble “how things work.” And I suppose if you want to change how things work… well, you get it. However, on Windows, you’re presented with Control Panel, which looks like, well, I have no idea what it looks like. I guess it’s kind of like a panel, with controls, but the fact that it doesn’t resemble any actual physical object I’ve ever seen, I think this icon fails miserably. I mean, what is that thing?!
Lastly, Trash. Or Recycle Bin. I think these are pretty close in terms of a strong visual metaphor. I’ve had a few short discussions with some people about the “recycling” part, and I think both metaphors, trash and recycling are just fine. You’re recycling the space that was previously taken up, just as you’re trashing it, you’re still gaining back space by removing things, and they need emptying.