Smiling computers and smoking bombs
July 23, 2010 8:31 AM Subscribe
Learn a little about the history of computer icons, and the theory behind what makes a good icon. The original computer icons were rather crude, but the art of icons has evolved. Even the once-ugly Windows computer icons have become pretty over the years (a slightly abbreviated one-page version). Among the memorable icons of icons is the once ubiquitous Mac icons of Susan Kare, the "Betsy Ross of the personal computer."
If you can't get enough, this dissertation tells the detailed history of icons. If you can get enough, you may just want to watch icons fight [prev.]
If you can't get enough, this dissertation tells the detailed history of icons. If you can get enough, you may just want to watch icons fight [prev.]
Are there any functional (i.e. non-concept) GUIs that completely eschew the desktop metaphor while remaining non-specialized for general use?
posted by griphus at 8:36 AM on July 23, 2010
posted by griphus at 8:36 AM on July 23, 2010
That's Kare, btw, not Kerr, but a great post!
And Betsy Ross, not Betsey.
posted by kcds at 8:37 AM on July 23, 2010
And Betsy Ross, not Betsey.
posted by kcds at 8:37 AM on July 23, 2010
Are there any functional (i.e. non-concept) GUIs that completely eschew the desktop metaphor while remaining non-specialized for general use?
Tiling window managers like Ion and Xmonad don't really have any kind of desktop.
posted by enn at 8:37 AM on July 23, 2010 [1 favorite]
Tiling window managers like Ion and Xmonad don't really have any kind of desktop.
posted by enn at 8:37 AM on July 23, 2010 [1 favorite]
Kcds, thanks, somehow the not-quite right text ended up being posted. Maybe one of the mods can fix it?
posted by blahblahblah at 8:40 AM on July 23, 2010
posted by blahblahblah at 8:40 AM on July 23, 2010
And now icons can contain entire programs that execute when they are displayed!
posted by miyabo at 8:45 AM on July 23, 2010 [3 favorites]
posted by miyabo at 8:45 AM on July 23, 2010 [3 favorites]
Learn a little about the history of computer icons...
Truly American icons.
posted by DU at 8:45 AM on July 23, 2010 [2 favorites]
Truly American icons.
posted by DU at 8:45 AM on July 23, 2010 [2 favorites]
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
posted by mhoye at 8:53 AM on July 23, 2010 [3 favorites]
posted by mhoye at 8:53 AM on July 23, 2010 [3 favorites]
Maybe it's just me and my incipient presbyopia, but I miss the simpler, easier to instantly recognize icons of yesteryear. This has been made worse by keeping them at a relatively constant pixel size even as monitor resolution increases. I know I can adjust the resolution of the monitor, but then other graphics suffer. I wish designers would show off less and concentrate on usability more.
posted by TedW at 8:57 AM on July 23, 2010
posted by TedW at 8:57 AM on July 23, 2010
This has been made worse by keeping them at a relatively constant pixel size even as monitor resolution increases. I know I can adjust the resolution of the monitor, but then other graphics suffer. I wish designers would show off less and concentrate on usability more.
On Windows Vista/7 hold down control while moving the mousewheel - you can make the icons as large or as small as you like.
On OSX, I think its in finder preferences - but you can also adjust icon size.
posted by Pogo_Fuzzybutt at 9:01 AM on July 23, 2010
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
It just kills me that the term for persisting a digital copy in nonvolatile memory is represented by the verb "save".
posted by blue_beetle at 9:01 AM on July 23, 2010 [2 favorites]
It just kills me that the term for persisting a digital copy in nonvolatile memory is represented by the verb "save".
posted by blue_beetle at 9:01 AM on July 23, 2010 [2 favorites]
I've often felt that creating a convincing 32x32 icon in 16 colours took a good deal more skill than a lot of the beautifully-rendered Illustrator/Inkscape creations you see today.
And there's a lot more to it than just creating beautiful little images that look good together; you need to take on board a whole set of cultural cues to produce an icon that will immediately say 'security settings' to someone from any background whatsoever.
posted by le morte de bea arthur at 9:04 AM on July 23, 2010 [1 favorite]
And there's a lot more to it than just creating beautiful little images that look good together; you need to take on board a whole set of cultural cues to produce an icon that will immediately say 'security settings' to someone from any background whatsoever.
posted by le morte de bea arthur at 9:04 AM on July 23, 2010 [1 favorite]
TedW, the problem is that right now icons are still pixel-based; that is to say they have a limit on how big they can appear without becoming distorted. It wouldn't surprise me if we eventually see operating systems that support vector-based icons that can be as big or as small a user wants them to be without any quality loss.
As for ease of recognition.. I agree designers need to stop hopping on trend-bandwagons (god damned plastic shine!) and concentrate more on function.
Hm. All this talk of icons makes me want to go look at my old collection.
posted by pyrex at 9:12 AM on July 23, 2010
As for ease of recognition.. I agree designers need to stop hopping on trend-bandwagons (god damned plastic shine!) and concentrate more on function.
Hm. All this talk of icons makes me want to go look at my old collection.
posted by pyrex at 9:12 AM on July 23, 2010
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
Icons often represent older generation technology since they're usually easy to understand. Gmail's icon has a paper envelope in it and phone icons usually reference old land-line phones from thirty years ago. I can't think of a better image for "save" than a floppy.
posted by octothorpe at 9:13 AM on July 23, 2010 [2 favorites]
Icons often represent older generation technology since they're usually easy to understand. Gmail's icon has a paper envelope in it and phone icons usually reference old land-line phones from thirty years ago. I can't think of a better image for "save" than a floppy.
posted by octothorpe at 9:13 AM on July 23, 2010 [2 favorites]
To be fair, "copy" does rhyme with "floppy."
posted by four panels at 9:15 AM on July 23, 2010 [1 favorite]
posted by four panels at 9:15 AM on July 23, 2010 [1 favorite]
TedW and pyrex - while vector based icons are indeed the future, all of todays mainstream OS's support icon formats that store multiple resolution icon versions.
A well made Win7 app should have an icon defined for 16x16, 32x32, 64x64 and 128x128.
posted by PissOnYourParade at 9:26 AM on July 23, 2010
A well made Win7 app should have an icon defined for 16x16, 32x32, 64x64 and 128x128.
posted by PissOnYourParade at 9:26 AM on July 23, 2010
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
Not sure if it's still the case, but it wasn't even an accurate representation of a floppy disk - the icon was a mirror-image of a real floppy.
posted by kcds at 9:32 AM on July 23, 2010
Not sure if it's still the case, but it wasn't even an accurate representation of a floppy disk - the icon was a mirror-image of a real floppy.
posted by kcds at 9:32 AM on July 23, 2010
The term icon, as applied to computing today, was coined by a friend of mine, David Canfield Smith.
posted by CheeseDigestsAll at 9:59 AM on July 23, 2010
posted by CheeseDigestsAll at 9:59 AM on July 23, 2010
Save Icons for the 21st Century
Guy in suit staring at screen and intermittently tapping his fingers/checking his watch.
Dozens of files being "found" by search; eventually: giant question mark.
External hard drive rumbling to a halt, smoking.
posted by griphus at 10:07 AM on July 23, 2010
Guy in suit staring at screen and intermittently tapping his fingers/checking his watch.
Dozens of files being "found" by search; eventually: giant question mark.
External hard drive rumbling to a halt, smoking.
posted by griphus at 10:07 AM on July 23, 2010
Whenever I create a new shortcut I usually go to Moricons.dll even though most don't relate to what I'm doing.
posted by wcfields at 10:57 AM on July 23, 2010
posted by wcfields at 10:57 AM on July 23, 2010
Guys, that's what floppy means now-- it used to be that people associated the word save with floppy discs; now people see pictures of floppy discs and know they mean "save", just like how we know that a "bug" is an error and flaw in programming, not a literal moth trapped in a supercomputer. Iconography is re-purposed just as words are.
posted by NoraReed at 11:04 AM on July 23, 2010
posted by NoraReed at 11:04 AM on July 23, 2010
Are there any functional (i.e. non-concept) GUIs that completely eschew the desktop metaphor while remaining non-specialized for general use?
Magic Cap had the desktop, but went even further into rooms, roads and buildings in their metaphors. It's neat, but annoying in its linearity, where you have to backtrack constantly for different tasks. (IE: going back into the hall to get to the word processor from the file manager or back out onto the road to get off the network and return to applications.) A quick search sadly reveals no current emulators (but intriguingly there's this one for the Apple Newton MessagePad!), but it's a neat time capsule of what we thought the future of handheld computing would be back in the middle 90's.
posted by 1f2frfbf at 11:15 AM on July 23, 2010
Magic Cap had the desktop, but went even further into rooms, roads and buildings in their metaphors. It's neat, but annoying in its linearity, where you have to backtrack constantly for different tasks. (IE: going back into the hall to get to the word processor from the file manager or back out onto the road to get off the network and return to applications.) A quick search sadly reveals no current emulators (but intriguingly there's this one for the Apple Newton MessagePad!), but it's a neat time capsule of what we thought the future of handheld computing would be back in the middle 90's.
posted by 1f2frfbf at 11:15 AM on July 23, 2010
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
Icons often represent older generation technology
Not just icons. The terminology the icons represent.
Citing in reverse chronological order, we still speak of video footage, dial telephone numbers, and drive cars.
The metaphors we live by. . .
posted by Herodios at 11:17 AM on July 23, 2010 [3 favorites]
Icons often represent older generation technology
Not just icons. The terminology the icons represent.
Citing in reverse chronological order, we still speak of video footage, dial telephone numbers, and drive cars.
The metaphors we live by. . .
posted by Herodios at 11:17 AM on July 23, 2010 [3 favorites]
I was just thinking about that today, Herodios, while wondering whether the term playlist was coined for mp3 players or was used for decades at radio stations or the like.
posted by moonmilk at 11:21 AM on July 23, 2010
posted by moonmilk at 11:21 AM on July 23, 2010
>> I miss the simpler, easier to instantly recognize icons of yesteryear.
Same here.
> On Windows Vista/7 hold down control while moving the mousewheel - you can make the icons as large or as small as you like. . .
> TedW, the problem is that right now icons are still pixel-based. . .
If TedW is like me, he doesn't want them bigger or even resizeable -- he wants them clearer.
posted by Herodios at 11:26 AM on July 23, 2010 [1 favorite]
Same here.
> On Windows Vista/7 hold down control while moving the mousewheel - you can make the icons as large or as small as you like. . .
> TedW, the problem is that right now icons are still pixel-based. . .
If TedW is like me, he doesn't want them bigger or even resizeable -- he wants them clearer.
posted by Herodios at 11:26 AM on July 23, 2010 [1 favorite]
Right the first time, moonmilk. The term has been used both by radio stations and performers for many moons.
posted by Herodios at 11:28 AM on July 23, 2010
posted by Herodios at 11:28 AM on July 23, 2010
Maybe there's a theory that can explain why I hate the XP-and-later Windows icons so much, but - gosh! I really do. Can an icon be considered smarmy? I think those might be, but even if they are, the smarm is not the sole dimension of their badness; they have other axes less clearly labeled. (This is quite a nice post, my personal irrational hangup aside.)
posted by Wolfdog at 11:30 AM on July 23, 2010
posted by Wolfdog at 11:30 AM on July 23, 2010
I've often felt that creating a convincing 32x32 icon in 16 colours took a good deal more skill than a lot of the beautifully-rendered Illustrator/Inkscape creations you see today.
How about at 256x256?
posted by JaredSeth at 11:35 AM on July 23, 2010
How about at 256x256?
posted by JaredSeth at 11:35 AM on July 23, 2010
Imagine an Office toolbar filled with animated icons.
Frightening, right?
posted by grubi at 11:48 AM on July 23, 2010
Frightening, right?
posted by grubi at 11:48 AM on July 23, 2010
Sometimes visual and linguistic metaphors crash into each other.
Two icon horror stories:
1) A system with a menu command called "Drill-downcrudely rendered little man in shorts and a singlet pumping his arms and legs in empty space". When you select it, the pointer changes into a magnifying glass with the word "dig" floating next to it.
2) A system that shows that "running scripts into the database" is in progress by displaying an animated icon. Progress bars and clockfaces weren't groovy enough for these guys, though. They had a crudely rendered little man in shorts and a singlet pumping his arms and legs in empty space -- presumably he was meant to be seen as "running".
Ugly in any context, but a disaster from a localization point of view. Tip for UI designers everywhere: a) The words for running a script and running a race aren't the same in all languages. b) Some people -- some cultures -- are not neutral about the prospect of watching a little twitchy guy in his underwear on-screen for minutes at a time.
posted by Herodios at 11:49 AM on July 23, 2010
Two icon horror stories:
1) A system with a menu command called "Drill-downcrudely rendered little man in shorts and a singlet pumping his arms and legs in empty space". When you select it, the pointer changes into a magnifying glass with the word "dig" floating next to it.
2) A system that shows that "running scripts into the database" is in progress by displaying an animated icon. Progress bars and clockfaces weren't groovy enough for these guys, though. They had a crudely rendered little man in shorts and a singlet pumping his arms and legs in empty space -- presumably he was meant to be seen as "running".
Ugly in any context, but a disaster from a localization point of view. Tip for UI designers everywhere: a) The words for running a script and running a race aren't the same in all languages. b) Some people -- some cultures -- are not neutral about the prospect of watching a little twitchy guy in his underwear on-screen for minutes at a time.
posted by Herodios at 11:49 AM on July 23, 2010
I'll come in again. . .
Sometimes visual and linguistic metaphors crash into each other.
Two icon horror stories:
1) A system with a menu command called "Drill-down". When you select it, the pointer changes into a magnifying glass with the word "dig" floating next to it.
2) A system that shows that "running scripts into the database" is in progress by displaying an animated icon. Progress bars and clockfaces weren't groovy enough for these guys, though. They had a crudely rendered little man in shorts and a singlet pumping his arms and legs in empty space -- presumably he was meant to be seen as "running".
Ugly in any context, but a disaster from a localization point of view. Tip for UI designers everywhere: a) The words for running a script and running a race aren't the same in all languages. b) Some people -- some cultures -- are not neutral about the prospect of watching a little twitchy guy in his underwear on-screen for minutes at a time.
posted by Herodios at 11:52 AM on July 23, 2010
Sometimes visual and linguistic metaphors crash into each other.
Two icon horror stories:
1) A system with a menu command called "Drill-down". When you select it, the pointer changes into a magnifying glass with the word "dig" floating next to it.
2) A system that shows that "running scripts into the database" is in progress by displaying an animated icon. Progress bars and clockfaces weren't groovy enough for these guys, though. They had a crudely rendered little man in shorts and a singlet pumping his arms and legs in empty space -- presumably he was meant to be seen as "running".
Ugly in any context, but a disaster from a localization point of view. Tip for UI designers everywhere: a) The words for running a script and running a race aren't the same in all languages. b) Some people -- some cultures -- are not neutral about the prospect of watching a little twitchy guy in his underwear on-screen for minutes at a time.
posted by Herodios at 11:52 AM on July 23, 2010
They had a crudely rendered little man in shorts and a singlet pumping his arms and legs in empty space -- presumably he was meant to be seen as "running".
Sound like the AIX SMIT running man.
posted by octothorpe at 12:05 PM on July 23, 2010
Sound like the AIX SMIT running man.
posted by octothorpe at 12:05 PM on July 23, 2010
Sound like the AIX SMIT running man.
I'm sure that was an 'inspiration'. This was inside an application, inescapable, and MUCH more annoying. Larger. Color. Not an outline. Much further into uncanny valley. He didn't fall down or exult, though.
posted by Herodios at 12:38 PM on July 23, 2010
I'm sure that was an 'inspiration'. This was inside an application, inescapable, and MUCH more annoying. Larger. Color. Not an outline. Much further into uncanny valley. He didn't fall down or exult, though.
posted by Herodios at 12:38 PM on July 23, 2010
How about at 256x256?
See, that's the problem. Because none of those will scale down to 16x16 or 32x32, so as icons in, for example, Windows Explorer, they're worse than useless.
There seem to be an awful number of designers churning out what they call 'icons', but which would better be called 'quite big pictures of things'. I mean, take any piece of art from any period in history, scale it to 256x256 and by some designers' standards, you've got an 'icon'.
You're not going to fit many of those suckers on a desktop though. Icon design is the old days was a kind of visual haiku - expressing something important within very tight constraints.
posted by le morte de bea arthur at 12:53 PM on July 23, 2010
See, that's the problem. Because none of those will scale down to 16x16 or 32x32, so as icons in, for example, Windows Explorer, they're worse than useless.
There seem to be an awful number of designers churning out what they call 'icons', but which would better be called 'quite big pictures of things'. I mean, take any piece of art from any period in history, scale it to 256x256 and by some designers' standards, you've got an 'icon'.
You're not going to fit many of those suckers on a desktop though. Icon design is the old days was a kind of visual haiku - expressing something important within very tight constraints.
posted by le morte de bea arthur at 12:53 PM on July 23, 2010
mhoye: "It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk."
My girlfriend's son was playing "Cave Story" recently and he asked me why the save game checkpoints look like "spinning diamond thingies." I had to dig out an old floppy to show him.
posted by brundlefly at 1:31 PM on July 23, 2010 [2 favorites]
My girlfriend's son was playing "Cave Story" recently and he asked me why the save game checkpoints look like "spinning diamond thingies." I had to dig out an old floppy to show him.
posted by brundlefly at 1:31 PM on July 23, 2010 [2 favorites]
> TedW, the problem is that right now icons are still pixel-based; that is to say they have a limit on how big they can appear without becoming distorted.
KDE and Gnome have had support for SVG based vector icon themes since the fall of 2001.
posted by alikins at 2:21 PM on July 23, 2010 [2 favorites]
KDE and Gnome have had support for SVG based vector icon themes since the fall of 2001.
posted by alikins at 2:21 PM on July 23, 2010 [2 favorites]
It just kills me that the "save" icon in Office 2010 is a representation of a floppy disk.
And in a world that is all metric except the U.S., Myanmar, and Liberia I still constantly here things like, "This cake is miles better than that cake." I don't think in miles, I think in KM when it comes to distance but get this, I still get the reference.
A floppy disc is still at least a disc. Lots of people will understand it (and see "Save" if they're mouse users and don't use keyboard shortcuts). How many "common" people have seen what a hard drive looks like or a SSD? What do you suggest as a replacement icon? A disc? I'd have no problem with that but I don't think it's a stretch for people to understand a floppy icon.
I can't think of a better image for "save" than a floppy.
Jesus?
posted by juiceCake at 6:22 PM on July 23, 2010 [4 favorites]
And in a world that is all metric except the U.S., Myanmar, and Liberia I still constantly here things like, "This cake is miles better than that cake." I don't think in miles, I think in KM when it comes to distance but get this, I still get the reference.
A floppy disc is still at least a disc. Lots of people will understand it (and see "Save" if they're mouse users and don't use keyboard shortcuts). How many "common" people have seen what a hard drive looks like or a SSD? What do you suggest as a replacement icon? A disc? I'd have no problem with that but I don't think it's a stretch for people to understand a floppy icon.
I can't think of a better image for "save" than a floppy.
Jesus?
posted by juiceCake at 6:22 PM on July 23, 2010 [4 favorites]
« Older Just be real | Ex Libris Metafilteris Newer »
This thread has been archived and is closed to new comments
posted by blahblahblah at 8:32 AM on July 23, 2010