Play PackRat on Facebook: our feverishly addictive new game

mik

Icons and Metaphors

I was tempted to take the Definition Icon, Ideas? discussion off topic so I decided to start a new one instead.

What metaphors make for good icons?

Cut, copy, paste, find, help, trash .. these are petty universally recognized now (right?). What have you found to be intuitively effective even if not commonly used?

What symbols are serving multiple roles and is context enough for them to be clear?
e.g. copy = 2 overlapped note paper, generally appears with cut and paste as well .. but same symbol also used for opening a link in a new tab/window?

What symbols have you used for less universal things, maybe industry or niche-specific topics?
What do you think has been over- or mis-used?

One I'd like to discuss in particular -
Does a lightbulb represent 'idea' to most people ...or was I overly influenced by Wile E. Coyote et al?

Posted by mik on Apr 05, 2007 in Blab | 16 comments

sfritz313 on Apr 05, 2007

no, I think that's a fairly universal visual cue, at least in the West. Especially if you grew up reading comics or watching Warner Bros. cartoons... it's definitely part of the visual language of cartooning.

debbye on Apr 05, 2007

both … i think cartoons only defined the "idea" more clearly & repeatedly, but the "definition" of lightbulb is pretty obvious. i feel that it is an "icon" of icons!

hilarylang on Apr 05, 2007

Hi! Cool topic! I usually associate light bulbs with ideas, like you mentioned above. It's usually the first thing that pops into people's heads when they see it, probably because of the Wile E. Coyote factor. I used it all the time myself (probably over-used it) but won't now with the app I'm developing, which is VERY industry-specific for theater and the performing arts, including a BIG piece that goes into lighting design and technical theater (including stage electrics). Boxes and crates are another one that are used all the time and getting more confusing by the day - so much so that I've mostly stopped using the generic varieties, and have either replaced them entirely or have added elements to make them more specific. I've seen them used for products, inventory, shipping, receiving, recycle bins, compressed/zipped files, and record/database archives & backups. My replacements have included a delivery truck coming and going for shipping/receiving, and if I'm using a box to indicate a database (I don't most of the time - usually use a cylinder like Microsoft's), I age the box for archives and add a second (almost like the copy icon you mentioned) for a backup or replication function. I'll still use it for products, but have added either a barcode or a product of some sort to the icon to make it clearer.
If you want to get a real idea of just how far some of these things have gone, check out deviantart.com (if you haven't already), go into the icons category, and run a search on something to see all of the interpretations - it's crazy! Thanks!
~Hilary~

justG on Apr 05, 2007

I wish I had something worthwhile to add here, but I just want to bump the thread. This is an awesome discussion, and quite educational for the clueless-about-design like me. I really dig human factors, cognitive science, neuroscience and psych, and as such, HIG-related stuff and UI design are right up my alley. (I know just enough to say "no, that doesn't work" without being able to say what *would* work. Nice, hunh?) =]

In answer to your question, mik, lightbulb does indeed say "idea" to me, but then again, I'm a child of the 80s, a cartoon-watching, comic book-reading ACME addict, born and raised in the English-speaking west.

tamashii on Apr 05, 2007

What a fantastic perspective on this topic, Hilary.

As the Art Director for a software company, I have had to come up with several icons to represent just about anything. However, there are a few mainstays that seem to be the same, industry-wide, to represent specific items. These include, but are not limited to: databases, firewalls, files, folders, search, servers, engines, data warehouses, audio, video, www, email, CRM, this list could go on forever, really.

I'll pick one to expand upon. The common, and most accepted, imagery/icon for a database is some form of cylinder. Database cylinders come in a plethora of styles, but a cylinder is immediately recognized as a database. You can check out IB’s own solutions to show a database (which may only be available in Manhatten 2). Just doing a Google Image search on the term database icon yields a mountain of cylinders. So – why a cylinder? Well, I was told by several engineers and sales reps that it is actually called a "silo"; due to it holding an incredible amount of data – the metaphor, then, is that your database holds a large amount of bits that could be seen as a silo full of grain. Cataloged grain.

If a cylinder is immediately recognized in the software/hardware industry as a database, what happens if you need to make an icon to represent glass tumblers for the glassware section of your dinnerware online store? Simplicity would say some form of cylindrical shape, and I think you would be fine to do so because the context of the site is anything but software. Ultimately, you’d likely use the typical wine glass shape because a tumbler just isn't descriptive enough.

Tackling your specific questions:
What symbols are serving multiple roles and is context enough for them to be clear?
The question mark is used for everything from Search, Help, and “Did You Know”s. I've seen that little bit of punctuation juggling several rolls even on the same site. I actually think that context serves a lot for an icon/symbol.

What symbols have you used for less universal things, maybe industry or niche-specific topics?
I have used a monitor image (alone and in conjunction with other imagery) to represent a form of input/output. The monitor is often times used to represent a user’s desktop computer, but it's not actually the processor of the data. It simply displays data. Also, by adding things layered on top of it, an impression is given that a particular type of data is being handled by the machine.

What do you think has been over- or mis-used?
For me, it is the brick wall to represent a firewall as over- and misused. How, exactly, does anything get through a solid brick wall? The only solution I have come up with to combat this common misuse of imagery is to add a keyhole to the wall (and not necessarily a brick wall, at that). This shows that not just any data can get through, but that it also isn't some impenetrable object that magically acts like a sieve for the correct data without some form of secure acceptance to do so.

Does a light bulb represent ‘idea’ to most people?
Yes. It can also mean: Tip, Advice, Point of Notice. The light bulb, to me, is this bright binary notifier of Yay/Boo. Idea On. Idea Off. This is likely one of those symbols that works a little too well on its own, context be damned.

mik on Apr 05, 2007

Those interested in this thread might also want to read Questions for icon designers? at SvsN. I'm not sure yet where to find the chat they're talking about (maybe IB chefs will advise, since they're participating?), but just reading the questions in the comments is interesting!

justG on Apr 05, 2007

@ mik: If you Google 37signals fireside chat, you'll notice that the posted transcripts are just blog entries on their site. So I'm guessing that when the chat takes place, the transcript will be posted to the site and the SvN blog will be updated. I hope. =)

iconmaster on Apr 05, 2007

This may be as good a place as any to pimp my old essay about communicating through icons. It wrestles with a number of these questions at length.

There's a substantial amount of ideographic capital that's accumulated just since the 1980s, thanks to Susan Kare (<3>different. It's something like the difference between driving a car and driving a boat. Driving a boat is more like "persuading" the vehicle to get you where you want to go than following a defined path. It's perhaps less direct; but then, you can't take your car into the water.

I would say one of the more overused icons is ye olde file folder. It's a holdover from the early days of the desktop when users were more familiar with their filing cabinets than their filing systems. These days, almost everyone grows up knowing how to navigate a computer. I don't think we need these real-world metaphors any more. But they're not going to disappear overnight, either.

iconmaster on Apr 05, 2007

I broke that 2nd paragraph. I was trying to say that visual communication was more open to interpretation than the verbal/written word; this isn't a bad thing, it's just different.

daveamun on Apr 05, 2007

iconmaster - I jumped to your essay and, after reading it, it leads me to make a request:

Can you guys do a Rune set????

etherbrian on Apr 05, 2007

The iconmaster is miles away more articulate on this subject than me! But I will say that it's just a crying shame that I've yet to encounter a client that would accept a bottle of glue (a la Elmer's) in lieu of a clipboard to represent "paste". Sigh.

justG on Apr 05, 2007

@etherbrian: It's so funny that you mention that specifically, because as I read mik's original post, one of my first thoughts in response to "What do you think has been misused?" was "Paste." Every time I see that icon, I think that a bottle of glue would be better.

mik on Apr 06, 2007

If IB provides a cut/copy/paste set that uses glue-paste instead of clipboard-paste I will find a place to use it!

hilarylang on Apr 06, 2007

Agree with etherbrian above - too many clipboards! Only time I got away without using it was for a client dealing in office supplies, and I ended up creating one of those spikey message-holder things for him because he didn't carry those. Another couple I see FAR too often are the magnifying glass, question mark (I prefer a life-ring), and house. Can't usually get people away from those, either.

kilrae on Apr 06, 2007

Lightbulbs: definitely says "Idea", although I can see arguments for something like "Point of Information" or "Tip".

Clipboard/Paste: You are "pasting from the clipboard" when you paste. People are used to it I guess. I wouldn't risk the bottle of glue in any professional work.

Magnifying Glass/Search: I prefer a spyglass (like a telescope). But magnifying glasses are more square and scale better.

Question Mark/Help: I think it depends. I generally write my help sections in question format: "How do I reset my password?" So the question mark makes sense, and people are used to it. Life rings are cool, but they look like candy.

House/Home: Is there a better one? It's overused because it's so obvious. Maybe you could get away with a Welcome mat...

How about exclamation points? "Important Information" Or the pencil for "Edit".

If you check out KDE-Look.org, there a lot of brilliant desktop icons. There's a trend toward realism in device icons especially, for example:

http://www.kde-look.org/content/show.php/KReal?content=44609

Where the hard drive icon is a hard drive with the disk platters exposed.

But the realism doesn't carry over so well into web and program toolbar design. You simply can't see the detail in a 16x16 image (although with higher resolution displays, you can get away with bigger images a lot of the time now).

gswd on Jun 26, 2007

If you want to talk about confusing, at work, when I have to create a search on the SQL server, the "!" is the run icon. This took a lot of getting used to, since it was not intuitive to me.

I prefer a life ring for help, and a "?" for FAQ.

Want to talk about a mis-use? In one version of the Dymo Label Software, they used what looked like an envelope for "paste from clipboard". Every once in a while that one still gets me, but more because I usually try to right click in the space to paste, but they do not allow that.

I do agree that when you see an icon, it can have different meaning based on it's context. The Magnifying Glass is a perfect example. If I saw it in a toolbar, or next to an input field, I would assume "Search". However, if I saw it under/over/around a picture, I would assume "Zoom".

My 2 cents worth.