Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Icon Madness

08 Feb 2005 by Matthew Linderman

When you’re trying to squeeze a lot of information in a tight space, icons become a very tempting solution. The problem is they sure can be confusing to outsiders. Look at this example at eBay.

Is it realistic to expect people to decipher the lengthy legend that explains the icons? And what exactly does it mean when my shaded box is levitating on an arrow above my unshaded box? Sure, eBay saved some space but there’s little point to it if people don’t understand what they’re seeing or the action to take next.

17 comments so far (Post a Comment)

08 Feb 2005 | ghani said...

Thank you, those icons have been driving me crazy for quite a while now. The entire auction-management system in eBay takes quite a bit of getting used to, because there are so many hidden little functions buried under icons and arrows.

08 Feb 2005 | Derek said...

The canonical examples: Word's and Excel's proliferation of icon-heavy toolbars. Do they make things easier?

08 Feb 2005 | One of several Steves said...

I'm glad to know I'm not the only one getting tired of seeing an over-reliance on iconography to make things "simpler." Icons are useful, but in very specific circumstances:

1. When virtually universal icons are used, such a picture of a floppy disk for "save" or many of the icons used at international airports. (There is no such thing as a truly universal icon, as someone who's never used a computer before would have no idea what the floppy icon was, let alone meant, or as the different meaning of a slash through something in Europe and North America attests.)

2. Applications with captive audiences where usage will be frequent and habituated, and the icons become very useful after a brief period of acclimation.

I suppose in eBay's case, there are some auctioners who do fit into the second camp. But most general-audience internet sites and applications fail that test of heavy usage where habituation can become possible.

Unless you are confident that your icons and audience can meet either of those two tests, it's better to opt for labels in almost all circumstances.

08 Feb 2005 | Michael Moncur said...

The canonical examples: Word's and Excel's proliferation of icon-heavy toolbars. Do they make things easier?

Yes.

The difference is that Word and Excel's toolbar buttons are always optional. You can do anything without using them, and you can make them completely invisible if you wish. Ebay's are different because you have to understand the icons to know the status of your auction.

08 Feb 2005 | Blake said...

'One of several Steves' has a good point.

What is the world going to replace the typical floppy icon for save since the whole idea of a floppy disk drive has gone out of favor? I'm sure there's a lot of younger people out there that have never used or seen a floppy. That will only grow as time goes on since I don't think really any companies offer a floppy drive by default these days. Are they going to replace it with an external hard drive icon, a usb drive icon? There really is nothing universal for Save.

And back to the point of the post; I think icons can work, but in a specialized environment (administrative tools, control panels, etc.). When you're putting something out for mass consumption, if you have to decipher a key to use it, you might want to rethink things.

08 Feb 2005 | Dan said...

It's the neverending struggle for horizontal space, plain and simple. That's the #1 obstacle whenever it comes to displaying information in a web browser, particularly when you're pulling a row straight out of a database that has about a hundred fields in it. None of the options are that great, so as a developer, you have to go with the lesser of two evils, which is to come up with a bunch of icons to save space.

Personally, I hate icons. Not only do they involve a learning curve that simple English doesn't require, but they also give your browser a bunch of images to load. And let's face it, we've all sat there and watched our browsers choke on some dopey 2k .gif file at one time or another.

The solution to horiztonal space restrictions is a more versatile :hover pseudo-class.

08 Feb 2005 | Rob H said...

I couldn't agree more with all the comments so far. Icons have there purpose if used properly. In the case of ebay, they are trying to squeeze alot of info in such a small space. At times I get very confused about what means what. I'm of the school of thought of "less is more".

08 Feb 2005 | c3o said...

I'm sure there's a lot of younger people out there that have never used or seen a floppy.

Possibly, but they have used and seen the floppy icon that saves things and made that association -- even if it might not have been intuitive to them at first.

08 Feb 2005 | sloan said...

The saying, "a picture is worth a thousand words but a word is worth a thousand icons" illustrates the problem with icons. They are just shapes with color. Assignment of meaning to them is somewhat arbitrary based on common experience or culture or whatever. The floppy icon made me always wonder if it would eject the floppy. Apple unfortunately thinks the solution is to have more picture-like icons that can be larger, hence the dock without labels for items in it.

Application/Document icons worked decently with a few applications and a few document types because there was a small learning curve and a lot of contrast between them. The length of icons as variables in such tiny spaces is incredibly limited, so they really are not a good way of shortening words. Hell, it might make more sense to just remove the vowels!
pd, shppd, fdbck, rlstd

The problem in all of these situations is context. The B, I and U buttons in most applications would be confusing if they weren't right next to a drop down for type face and size. Then they make more sense, or at least, with more consistent icons creating a language, it is easier to decipher.

08 Feb 2005 | runtime said...

btw, the ubiquitous Save icon of a 3.5" floppy disk is backwards. If you look at an actual floppy disk, the metal shutter is on the wrong side!

08 Feb 2005 | Don Schenck said...

runtime, that's an Australian diskette. :)

08 Feb 2005 | brian b said...

i have a suggestion. why don't we organize a little makeover contest. By this i mean every week, or 2 weeks, someone will pick a confusing interface/website, or something that needs an accessibility/usability overhaul, then the submissions are voted on by everyone, and the winner gets something. (i.e. a year of basecamp, or a book, or something). We can even just make there be no prize, but the contributions can be built up towards a publication (book,ebook, white paper, etc.) of some sort and the winners all get credits...

anyone interested, email me breslin[at]infinimedia.com

08 Feb 2005 | Bruce DeBoer said...

Does anyone feel the same way about Acronyms? I do.

08 Feb 2005 | seth said...

Being a heavy eBayer I have to admit I really don't like their new management page as much as the last iteration.

That being said I don't think the design of that particular feature is too horrible. I know I've seen worse designs to solve similar problems.

I'm assuming the icons are purely informational and aren't required to perform an action, right? If this is the case (providing only status information) I think the impact of poor icon design in this case is minimized. You can see their attempt to clarify the icons with a legend below the table. A hover on each icon could help to further clarity. Perhaps they could have used the space that's reserved for the legend to get rid of the icons all together?

I agree that the "levitating box" with the arrow is extremely cryptic to the average person at first glance, and a better representation of sort order could be made - BUT - it looks like you've interacted with it before taking the screen shot so it's not far-fetched to think you might have been taught what that feature does after you see the results (the table sorted). This argument goes out the window with a one-item-table as shown, but I'm guessing thats what the UX people were thinking over at eBay when they designed it.

As mentioned previously it's all a trade off. Space vs functionality. There's an argument to be made that perhaps all of that information and functionality isn't needed in one place or at all. (Less is more right :) ?)

I have a couple of ideas how to solve this problem, as I'm sure most of you do. Having that design challenge would be an interesting exercise.

09 Feb 2005 | Choon Keat said...

Icons (and arcane accelerator keys) are not always evil. They are important if your system is expecting to have expert/frequent users (e.g. intranet app, cash register, .. ) and having lots of them is often doing such users a BIG favour - try doing a task using purely menus.. good? try repeating a hundred times. most (web) app suck because their actions are not repeatable conveniently.

Just be consistent and help users to learn them. Tooltips is good for learning icons / accelerator keys.

In the case of ebay example, I haven't used it so I can only guess what its for. The details are cluttered yes, go argue should-we-show-this.. i don't care - just make sure the most important info are obvious at a glance.

10 Feb 2005 | pb said...

Would you guys take that on as a 37express project (for the fee)?

14 Feb 2005 | 27Ray said...

"Personally, I hate icons. Not only do they involve a learning curve that simple English doesn't require"

like the years of schooling most of us need to learn to read english...

Icons can work just fine as long as they are used consitanly. Road signs for example. That said the key is not words or icons are used but understanding waht the user wants to do, and then designing the best way to allow a user to do that, icons or words, or better yet less of both, i.e. controling the presentation of informatino so that only relevent options are presented at any one time.

-ray

Comments on this post are closed

 
Back to Top ^