If you open up a dictionary (yes, the same Concise English Dictionary as last time), the term icon reveals four possible meanings; we can obviously discard the first and third option – it is option two and four we care about:
“icon n 1 (also ikon) a religious image, e.g. of Christ, the Virgin Mary, or a saint, typically painted on a small wooden panel and used as an aid to devotion in the Eastern Orthodox churches. 2 a pictorial representation; an image or symbol. 3 somebody who is an object of uncritical devotion; an idol. 4 in computing, a picture or symbol displayed on a screen to show a program option or a facility available to the user.”
History
The history of the computer icon dates back to Ivan Sutherland’s revolutionary computer program “Sketchpad”. Sketchpad was a sketching program with some extremely remarkable features, especially considering it was a Ph.D. project in 1963, running on a Lincoln TX-2 (every dot on the screen was created by “brute force” as Alan Kay describes it [part I | part II]). For instance, you could draw a “messy” shape, and make it “clean” by “tapping” the shape’s edges with a laser pen, and telling Sketchpad to make them mutually perpendicular and parallel (see the below image and this YouTube video). Sketchpad also introduced the concept of a master image and instances; you could work on one “master” image, switch to an “instance” (today, we would call it a different window), draw a new shape there, and import it into the master image.
Even though Sketchpad itself did not include any icons in its interface, it is still important to mention it because it was the first computer program that actually had a need for icons in the first place; in those days, computers were mostly still massive mainframes that were run in batch mode, using punch cards and the like. That type of computing did not require abstractions like icons because this type of computing was done by highly educated scientists; Sketchpad was the first program that tried to lower the barrier-to-entry for using computers, allowing non-programmers and non-scientists to use a computer in a meaningful way. Consequently, it created the need to abstract computer operations so that normal people could use them.
To stick with my examples, Sketchpad had a need for icons describing the action “make these lines mutually perpendicular” and “import the shape in an instance”. Previous computer programs did not have such needs at all.
The next important milestone in the history of computer icons is the actual coining of the term “icon” by David Canfield Smith, in his Ph.D. work in 1973 at Stanford University. Smith was part of the Xerox Palo Alto Research Center’s team.
Which brings us to the Xerox Alto computer developed at Xerox PARC in 1973. Commonly seen as the father of the graphical user interface, this is one of the first graphical user interfaces which included actual icons, the best example being Draw, the paint program. It includes several icons on the screen that symbolise the actions the icons would start; exactly what Sketchpad lacked, but created a need for.
Image courtesy of ToastyTech
The Alto, however, was never commercialised; several thousands were made, but none were ever sold. Consequently, the honour of the first commercialised graphical user interface goes to the Xerox 8010 Information System (better known as the Xerox Star), a personal computer inspired to a great degree by the Xerox Alto computer, brought to market in 1981. The Star’s GUI is scaringly similar to what all of us are staring at today, for a relatively simple reason: it was the graphical user interface that introduced the desktop metaphor, used today by basically all popular desktop graphical user interfaces.
Image courtesy of ToastyTech
This metaphor also dictates how icons look today, and how they looked 25 years ago: they represent items found in an office (simply put). Even though icons of course got a lot more colourful and realistic over the past 25 years, they are still essentially the same as the icons in the Xerox Star, or, as seen below, the Apple Lisa.
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.