Defining a computer icon
Now that we have had a short crash-course on the history of the computer icon, we can dive a little bit deeper into what a computer icon actually is. The classic example of a computer icon is the row of pictogrammes on the desktop. They launch applications, link to locations and documents, and also represent documents themselves. However, these are not the only icons in a modern GUI.
Applications themselves are also chock-full of icons. Word 2003, for instance, has so many icons it is almost dazzling.
Apart from applications, widgets also commonly have icons. Window titlebar buttons, for instance, have icons that convey their actions when clicked (a cross for closing the window, for instance). Some graphical user interfaces also put icons on their ok/cancel/apply buttons on dialog windows.
These are just a few random examples of where icons are used in today’s graphical user interfaces. Consequently, we can create the following definition of the computer icon: a computer icon is a pictorial representation of an action a computer can perform, an object (file, device, etc.), or an application. The object and application parts of the definition are fairly straightforward, but the action part may need a little clarification: the action part deals with things like the icon on a copy button, the little x on a close window button, or even the little triangle on a scrollbar button. Heck, even a resize handle is a very schematic representation of an action.
Various human interface guidelines have also dived into the computer icon. Apple’s human interface guidelines for Aqua icons have a lot of interesting things to say on designing icons; for instance, “the icons for user applications are colourful and inviting, while utilities have a more serious appearance.” Additionally, Apple’s HIG also defines icon families; for instance, the green musical note on the iTunes application icon is recreated on playlist icons, iTunes plug-in icons, and so on.
To indicate how much thought you can put into icons, consider the element of perspective. You may not realise it, but icons have a perspective. For instance, the Tango icon guidelines state that there are three possible icon perspectives: flat/’on the shelf’, ‘on the table’, and ’tilted table’. The last one deals with “cases where the object’s appearance is more evident from an angle”; however, “this is the least common perspective of the three and should be used only in cases where the other two do not provide a clearly distinctive silhouette of the object.” The Aero icon guidelines for Windows Vista state that “three-dimensional objects are represented in perspective as solid objects, seen from a low birds-eye view with two vanishing points.”
But it gets even better. Not only do HIGs put great thought into perspective, also light sources are pre-defined. Those same Aero icon guidelines explain: “The light source for objects within the perspective grid is above, slightly in front of, and slightly to the left of the object. The light source casts shadows that are slightly to the rear and right of the object’s base. All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same length and density, providing further unity across multiple icons.”
As you can see, you can put a lot of thought into how icons should look, and for good reason: if there is one sure way to completely destroy an interface, it is by mingling inconsistent icon sets with one another, with different colour palates, light sources, and shadows. Windows XP, and to a lesser extent, Windows Vista are examples of this: open up your /windows directory and see how the Windows 3.x icons stand out like an eyesore. This destroys consistency, and simply looks ugly.
Conclusion
So, how important are good icons for a graphical user interface? In today’s graphical user interfaces, the main means of conveying information about the possible actions a computer can perform happens by the means of icons. Because of this, sensible icon design, where icons are clear and non-cultural specific pictorial representations of actions a computer can perform, objects, or applications, is a definite must for a modern, usable graphical user interface.
If you would like to see your thoughts or experiences with technology published, please consider writing an article for OSNews.
Hey,
Just wanted to say I enjoyed this post. Nice job.
The whole consistency thing is a double edged sword:
Make your icons too inconsistent and the whole thing looks like a mess, make them too consistent (similar in perspective, color, brightness, shape) and they become basically indistinguishable, especially if they are rather small.
Friends think my icons look like one big mess but if they were more similar I would struggle to actually see the differences between them. So I guess it’s different strokes for different folks again.
At least I would choose messy and inconsistent icons over icons that all look the same any day.
But that may result from my eyes which are not all that good 😉
Nice article, anyway. I didn’t know how much thought people put into icons. Although I must say I liked the first part of this series better. But that may be just me and let’s not start to interpolate using just two values 😉
make them too consistent (similar in perspective, color, brightness, shape) and they become basically indistinguishable
That’s what I said about the new Krita icons:
http://www.koffice.org/krita/pics/bala_krita1.6.png
The response was that they look classier or more consistent or something. Never mind that there are no color hints for distinguishing between the icons anymore.
Previous setr:
http://www.koffice.org/krita/pics/july06.png
Separation between icons doesn’t have to be about Color. The actual geometry alone can make all the difference in the world. The new icons for Krita are more pleasing on the eyes and you can distinguish quickly. Now if they can add some color/contrast on them to indicate what one is to expect when using them [where necessary] then all the better.
Application specific task/action icons are more susceptible to geometry needing to be unique than application startup icon needing to be both color and geometry needing to be unique but consistent in balance wrt to the rest of the desktop.
Old NeXTSTEP addressed this with the consistent gray border around their icons. Borderless icons opened up a world of distraction forcing one to really pick steady color themes in the background and letting the foreground standout wrt to the unique geometry of the icon.
Photorealistic icons have been overdone and used to compensate for an inconsistent look n’ feel.
more pleasing? dont know about that. to me they look washed out and boring vs the older ones…
Separation between icons doesn’t have to be about Color
Obviously. Color was method I highlighted (out of many listed) since that was the one they had, but IMHO unnecessarily got rid of. And I don’t think the result was worth it, though that’s an opinion call. I don’t see why they couldn’t do a better job differentiating geometrically without retaining the ability to use color to differentiate as well.
What about Sprites? Icons also had history in sprites on early home computers, because for these machine there were such a limited number of characters per line and text could not easily be positioned anywhere that icons were often an important part of the interface.
GEOS on the Commodore 64 for example used a combination of raster display and sprites for the icons and mouse pointer.
Yeah, but GEOS came years and years after the Xerox Alto and Star machines (GEOS made its debut in 1986). So, GEOS “just” introduced a new method of drawing icons; they did not contribute to the “invention” of computer icons itself.
For the exact same reason, I do not mention the Lisa in the “invention” of the computer icon. The Lisa just copied the idea from Xerox (no pun intended); it did not invent it.
Edited 2007-10-28 19:28 UTC
haha very punny
Did Woz used a Xerox to copy that idea?
In general i don’t understand why common desktop environments default to menu/task/whatnotbars horizontally aligned at the top and/or bottom of the screen. This is wasting space because they try to emulate paper which is even less fitting when your screen is not vertically oriented/pivoted into portrait mode. So I did put my small taskbar vertically on the left side. Why not to the right? Could be a matter of taste, on the other hand most menus in applications are on the left side, so i have to travel less with the pointer to get there. As iconset i’m using this:
http://kde-look.org/content/show.php/Primary?content=39469
In combination with this style:
http://kde-look.org/content/show.php/dotNet2+?content=42131
Because this stopped working for me with recent versions of KDE:
http://kde-look.org/content/show.php/The+Reinhardt+Style+(formely+S…)?content=5962
The overall coloring is important also, i’m using this as a base :
http://kde-look.org/content/show.php/Reinhardt+Dampened?content=236…
If it would be a little bit smaller i’d use this as windowdecoration
http://kde-look.org/content/show.php/Powder?content=29935
instead of the built in “Web”.
Oh, did i mention that this combination scales down well (goes like hell) to even something as lowly as a PIII@1GHz with 512 MB Ram? 😉
I think the best commercially UI so far has been MacOS 8.x something. Really unobstrusive from the general colors and icons. I can’t stand all that glitz, bling and glitter. I want to have something which is mostly static and doesn’t spring into my eyes. Which means that (auto)hiding menus are no option for me. Towards the recent additions of 3D-Effects i’m ambivalent. It’s useful when i can switch visually between different windows and virtual desktops. But, to be honest, a flat overview from above is enough. Spinning some cube may look great at first, until it gets disturbing. The same for minimised applications which EXPLODE into the foreground from some stylish dock.
I need to sit hours in front of that cybershit, be it work, be it digesting information, be it creating some.
Anything which distracts from the actual task is a toy at best or plain simply annoying.
Edited 2007-10-28 19:51
This sentence has a few problems. For instance, many find the wobbly windows in Compiz annoying and a toy – but to me, they contribute to a feeling that I sorely miss in GUIs: making objects behave like physical objects. I love how a window in Compiz wobbles when I move it, it gives me additional feedback, just as if I was manipulating a real world object.
I have been thinking a lot the past years about how to make user interfaces more physical. If I’m manipulating multiple objects on a screen, I want those objects to interfere with one another, as if they are real-world objects.
As an example, imagine you have a wallpaper with leaves on it. Moving a window over those leaves could ruffle those leaves – that would give the window a physical dimension. Of course having leaves flying around your desktop wallpaper is a bit over the top, but you get the idea.
Edited 2007-10-28 19:50 UTC
I can perfectly understand because i tended to think like that also. But this is all information which is lastly organized in sheets of emulated paper, be it dynamic, self calculating, hyperlinked, animated, or not. As long as we don’t have nice and thin, preferrably flexible or even foldable tablets like f.e. that in Neal Stephensons Diamond Age i don’t see that much use of it. Does the surface of your real desk change when you put some letter somewhere? Maybe you have whole stacks of paper on it, would you enjoy them falling over? Does it matter when the grass bends when you put some book on it when you’re outside and enjoying the sun? Do you actually like the sand between the pages? 😉
With all that pseudorealism i always have to think about the jokes i make to my postman that i could write three Xses onto that touchscreen when i have to sign for some reception, because the parallax between the surface of that gadget and the LC-Display just isn’t right.
Edited 2007-10-28 20:27
Nice article Thom,
<rant>
I’ve been banging on about how a consistent and well thought out icon set is really essential for our suite of apps, but my calls are falling on deaf ears.
Our icons basically look like were done by a pre-schooler with his eyes closed, as our parent company insists that we have text (our 3 letter acronym) within the icons.
At 16 pixels, this just looks like a smudge, and gives an overall impression to our users that we just can’t be stuffed.
</rant>
Have to disagree by the way about the wobbly windows in XGL. That has to be the most unholy of 3D effects.
Just makes you feel like you’re on drugs, only without the fun part.
Edited 2007-10-29 04:15
This looks to me like a discussion which is not really resolvable. Simply because obviously the brain structure of different human beings can differ much.
Having Desktop objects to be more “physical” is a disturbance to some, and to others it is a help. Some like “overiconized” GUIs like MSOffice 2007 better than reduced one (KDE vs. GNOME anyone?). Some people can find their way through 20 icons thrown at them immediately, others are completele at a loss there but don’t have problems remembering 100 console commands including most of their options.
And that is the truth about user interfaces: One size does not fit all. With a graphical interface you can try to reach most, but you will never be able to be good for everybody.
That is the reason why I think that each of the numerous desktops (KDE, Gnome, Aero, XFCE, …) are best for someone, and each of them should be developed further without converging too much onto a “unified desktop”.
Regarding the article: Very interesting, I had a good read.
Regarding your post:
“In general i don’t understand why common desktop environments default to menu/task/whatnotbars horizontally aligned at the top and/or bottom of the screen. This is wasting space because they try to emulate paper which is even less fitting when your screen is not vertically oriented/pivoted into portrait mode.”
As you can see from a screenshot in the article, the tradidional screen of the Xerox Alto was of Letter size, with “more height than width”.
Today’s screens have “more width than height”, so I agree with you that many icon bars, stacked on top of each other, waste this ressource. Of course, the same is true for actual wide screen displays.
The available height decreases when big title bars, menu bars, many icon bars, status bars etc. are displayed. Remember: Height is the thing we have less of, compared to width. 🙂
“So I did put my small taskbar vertically on the left side. Why not to the right?”
Just as a sidenote, I have set the dock in WindowMaker to be on the right side, 32×32 px each icon. This setting is the most comfortable I found since I started using WindowMaker as my primary WM in approx. 1997.
Furthermore, you can align icon bars vertically in some applications, which is very good when you do word processing and DTP – you see more of the content you’re working on at one (without needing to use resize zoom functions). These icon bars can then be placed on the left side of the screen.
“Could be a matter of taste, on the other hand most menus in applications are on the left side, so i have to travel less with the pointer to get there.”
This is a valid point: traveling distance to access GUI elements. Fortunaltely, I prefer using the keyboard for menu access so this doesn’t matter to me; furthermore, I don’t have to launch applications from the dock all the time. 🙂
“I can’t stand all that glitz, bling and glitter.”
But in fact, that’s what customers / users seem to be expecting, judging from the development of major desktop environments’ design-
“I need to sit hours in front of that cybershit, be it work, be it digesting information, be it creating some.”
As you surely will agree, that’s not what most home users do: For them, it’s entertainment at all, I assume. I’m belonging to the poor beings that are forced to use computers at work. 🙂
And now for something completely different:
Tech Support: “All right…now double-click on the File Manager icon.”
Customer: “That’s why I hate this Windows — because of the icons — I’m a Protestant, and I don’t believe in icons.”
Tech Support: “Well, that’s just an industry term sir. I don’t believe it was meant to –”
Customer: “I don’t care about any ‘Industry Terms’. I don’t believe in icons.”
Tech Support: “Well…why don’t you click on the ‘little picture’ of a file cabinet…is ‘little picture’ ok?”
Customer: [click]
🙂
http://www.rinkworks.com/stupid/cs_icons.shtml
Interesting to see the distribution of Myers-Briggs personality types on that sort of site. Maybe that should be part of Usability/UI-Design too.
this?
http://en.wikipedia.org/wiki/Myers-Briggs_Type_Indicator
<blockquote>As you can see from a screenshot in the article, the traditional screen of the Xerox Alto was of Letter size, with “more height than width”. </blockquote>
Very true. Modern screens are not really designed for writing – if they were, they would indeed be like the old Radius ones, pivotable to have the long dimension vertical. Or, if 24 inch or so, they would have an option to split into two panes showing continuous text.
Yes, you can do it with some text editors using tabs, kate is particularly nice in this respect. But its a struggle.
Its an interesting series this. Thom, I’m hoping you are going to do one of the next ones on the whole issue of the desktop metaphor and alternatives to it? Why the iconized desktop seems to be almost universal, though arguably it is less efficient than a good file manager in a separate desktop.
MacOS 8.x and BeOS would be my picks for spartan, yet very usable and easy to look at.
Is that axe getting any sharper?
I would tend to agree about horizontal vs. vertical space.
I’ve been using a bar along the right hand side of the screen (64px wide) as my launcher/status location for about seven years now and I find I really can’t stand anything else. It would be better on the left, or better yet if I could tell most applications to put their scrollbar on the left. Usability ‘experts’ strike again and deny me this… sigh.
With regards to 3D effects and such it seems to me that no one seriously uses them. They are toys for the nontechnical designed to make the computer seem interesting. I’m all for visual cues, but at some point it stops being useful. When it stops being a cue and starts being something to look at you’ve crossed the line.
That said, I *do* like to turn on animated backgrounds and snow and such from time to time. It’s fun. And then I turn it off and go back to work.
LoseThos, my operating system, has a novel implementation of icons. The command line and start menu, help, etc. are documents with text and graphics. The graphics are SVG more or less and have no boundary box. An icon can consist of coordinates of lines relative to a location in the document with an optional text tag located at the origin. You specify any command line text to shell-to and run when you click the icon and since command line commands can be combined by separating with a semicolon, you can do multiple things. On an icon in a menu you can put the following
Cd(“HOME”);Dir;\\r
The lack of a boundary box and nonuniform icon size does create asthetic problems, but you can edit them until you are happy.
Yeah, they can include color and a host of various graphic entities.
http://www.losethos.com
see the intro video
Edited 2007-10-28 20:59
“The lack of a boundary box and nonuniform icon size does create asthetic problems, but you can edit them until you are happy.”
This reminds me to IRIX… let’s check… http://toastytech.com/guis/irix.html – Yes! 🙂
If I remember correctly, icons on the Amiga Workbench didn’t have a restricted size, too…
Yeah, it’s an obvious thing to do… don’t know why the bone heads on other operating systems didn’t do them.
heh, had forgotten about that
i recall starting up street rod, where the main icon was 2-3 times the size of the other ones
hmm, that reminds me of a “insane” ui i had in the back of my mind at one time.
some kind of combo between cli and gui where the gui objects would sit on top of a cli background.
an article about icons should mention susan kare, designer of the icons used in mac os, windows, nextstep and os/2.
http://www.kare.com
Actually, the icons used in NeXTSTEP were designed (quite famously) by Keith Ohlfs. His site’s at http://www.ohlfs.com, but it appears to be down at the moment.
Susan Kare has done an awful lot, though
And I’m not sure whether Keith has taken a job at Google or not. You view the source from his site and you’ll see some interesting references and the fact the site doesn’t work currently.
kinda interesting how they incorporated the name of the item with the icon itself. hell, its very much like in real life where you slap a sticker or write on the box.
i wonder if the detachment between icon and filename some people seems to have, is that the filename is under the icon, not on the icon itself.
this also leads to silly things like in windows where filenames beyond x length is cut so that the icons are uniformly stacked. but when you then click on the icon, the full text show up, often obscuring the icon directly below it.
Why do you claim that this is silly?
Filename can be very long, so if you have an icon to file with a very long name, you have to do something..
i would much prefer that the whole name got fitted in there.
hell, with the xerox star icons one could in theory, if they where vector based, do some vector math to refit the size of the icon around the size of the filename.
but i guess microsoft “fixed” it with putting the filename to the side of the icon instead of under it with vista…
Fitted how?
If you keep the icon the same size and downscale big name, the result will be unreadable.
If you keep the text the same size and upscale the icon, the icon will be huge.
Truncating the name as Windows does is not worse than those two solutions..
that depends on the font of the icon and how the icon is designed.
look at how the labels are placed on the icons on the photo of the xerox star. i would hazard a guess that with the right font, the icon could scale up for a bit and fit all the text with ease.
hell, bigger icons are ok in my book. to small and you cant tell what the hell they represent, no matter how simple they are.