The End of an Icon

UI Design Fundamentals

Finding the right graphic for an icon is hard — and even if you do find a decently descriptive graphic, it might not be descriptive for long.

For the majority of cases, trying to represent an abstract idea like “bibliography” in a 32-by-32 pixel array is futile, even if you do have millions of colors and an alpha channel. Sure, you might choose a book with a magnifying glass as your icon, but that graphic could mean many things: “library”, “help”, “research”, “index”, “vision impaired”, etc. Any interface that uses the icon would still have to add a tooltip to explain what it means. There is a reason why we have words — it’s so that we can specify one thing in particular no matter how complex or abstract the thought.

Why make the user go spelunking for the information they need? Just give it to them.

It came to my attention recently just how fragile the connections are between the iconal representation of a concept and the actual concept. Here is the Microsoft Word icon for “to save”.

It’s a floppy disk. There is only a tenuous connection between saving and a floppy disk even for those of us who know what a floppy is (and at the moment most of us remember them), but floppy disks are on their way to becoming as unknown as Charles Yerkes. Don’t know who I’m talking about? That’s my point.

Floppy disks were a stepping-stone medium — once ubiquitous, they have given way to larger, faster, and more convenient forms of storage. Soon, nobody is going to remember floppies, except for those of us re-living the good old days when we used to replace their magnetic sheets with sandpaper as a practical joke. When the new generation of users takes over, they’ll have no idea of what a floppy is, and the icon will have lost all meaning.

It’s dangerous to base a visual analogy on a moving target. Technology will change. What’s clear and obvious today won’t be in 10 years; so what’s nebulous today will be totally obscure in 10 years. The problem with the floppy icon (beyond the iffy analogy) is the generation gap. For icons, there are many other gaps — like the culture gap — to contend with.

For example, does the above image connote anything to you? Can you even tell what it is? In northern Japan, the persimmon is the symbol of autumn.

The next time you are struggling with an icon, try using words. Otherwise, your icon might just be going the way of the floppy.

Thanks for mentioning this. It seems so obvious while reading but I can imagine it is easy to slip in to old habits without these friendly reminders..

What about those of us who like playing Pictionary(tm) while using various applications, huh? Where will we go if everyone starts labeling their icons all willy-nilly?

Perhaps we’ll just end up with a new pictographic vocabulary. Everyone knows that floppy disks mean save and a blank piece of paper means “new document”. Arrows in a circle mean refresh, and arrows to the left and right navigate your history. Surely we can come up with a unique symbol for everything (it seems to work for the Chinese).

Probably not, but it’s a fun idea. I’m looking at it more like a linguist than UI wonk, of course.

An excellent point from one perspective for sure!

If RSS was on RSS icons instead of those curves, it’s quite possible people would make the connection!

What about the sentimental icon users?

Or the people old enough to be alive pre-floppy disk and they are still getting used to that icon? I mean my Dad still has boxes of 5.25″ disks and even tapes! Along with the equipment much to my Mother’s dismay. He says he needs them for backup.

Maybe icons should have generational options?

The End of a Word.

Finding the right word for an sentence is hard ? and even if you do find a decently descriptive word, it might not be descriptive for long.

For the majority of cases, trying to represent an abstract idea like “love” in a 6-10 word is futile, even if you do know many languages. Sure, you might choose ‘love’ or ‘lust’, but that word could mean many things: “love like the love for your car”, “love like the love for your mom”, “love like the love for your girlfriend”, etc. Any interface that uses words would still have to add some imagery, or more words to explain what it means. There is a reason why we have images ? it’s so that we can more efficiently absorb a large amount of information. As the old adage goes, a picture is worth a thousand words.

I don’t know if my previous comment said anything… but i wouldn’t underestimate icons. Sure they may not be clearly understood by some, and there are cultural things that might make them hard to read for some. The icon only needs to work for the person who is using the interface, unless your designing an interface, or icons for every human being should you worry about such things as cultural differences, or icons not being understood by age gaps. If you try to do that your just going to limit yourself to the LCD, lowest common denominator. The solution is rather to let the user choose their icons, and offer enough variations that it will work for everyone, words included.

On further reflection, I’m a little more serious about the idea of icons as a pictographic language. While I don’t expect to be telling people about how I “floppy disk, x, windows logo, fox wrapped around the earth”ed the other day, floppy disks have come to mean “save.” While they may not make much sense today (or ever again), that’s how it is. I do recognize the floppy disk icon as a cautionary tale in icon design, but I see its caption as “be careful what you choose as an icon, since you never know when it will become… well, iconic”, rather than that words are always best. This is as much a story about the power of icons as it is about how they can go wrong. With great power comes great responsibility, right?

Realistically, “best” is probably icons with captions by default rather than tiny icons with no labels. It’s the usefulness and easy recognizability of an icon with a hopefully familiar word as a translation. Eventually, when screen space is more important than yet another reminder, the captions can go off. And tooltips are always there, of course.

But we are not dealing with such abstract concepts as love. We are dealing with more concrete ideas such as “Save”, “Bibliography” and “Post”.

If you need to represent love as a button in your application you have gone seriously wrong somewhere. Almost every button in an interface can easily be summed up in one or two words, usually verbs. If it can’t it’s usually a sign that the behaviour is too complex and could perhaps be broken down into smaller tasks (though not always).

As the post explains, a concept such as “Save” is much harder to create an icon for than to just use the verb because, like most pictorial representations of verbs, the best you can do is come up with an example and, in this ever developing fields, examples quickly become redundant.

And to design something completely ignorant of possible expansion is silly. Yes, you should be realistic and not design for every eventuality, but designing an interface by at least combining words with icons (be it next to the icon or in a tooltip) is very easy to do and allows the application to be expanded to other cultures a lot easier than if you were to use just icons.

ICR is on the right track. Icons do okay when used to represent an object or attribute, at least if it?s graphical (e.g., a color) or there?s a good physical analog (e.g., a document). But too often we?re using a tiny picture to represent an _action_, like Save. That borders on ludicrous. We all know that toolbar icons should always have words as a backup, either as tooltips or on the control itself. We also know that menus and buttons generally work perfectly well without icons. That?s a pretty clear sign that words are superior if you have to choose between the two.

Why make work for the user? Why make them pick their own icons (as if they can do a better job than a professional designer)? Rather than forcing users to arduously match words to desired icons, just use those words in the UI. Why make them memorize a bunch of icons to make a primitive pictographic language? Your users already have a sophisticated language.

How about completely blank buttons which, when clicked, emit a particular scent from an attached “scent-dispencing” USB device, thereby triggering memories deep within the subconscious to help indicate the meaning of the button.

Really though, I think symbols/icons can help when combined with other UI elements (like labels), by providing branding, button affordance, and even additional meaning. I think an icon or symbol can also help “wrap up” the text around it, presenting it as more of a unit, as well as separating it from neighboring info. As a quick example of what I think icons can do as an augmentative element, let’s look at the Enso Launcher button at the bottom of this page.

Branding is established with the painted Japanese character. Affordance is given with the three-demensional look, indicating that this is an interactive element. The green slingshot provides additional meaning and branding.

Does anyone else agree or disagree with this? I’m interested in hearing your thoughts.

Michael, I think that while in terms of information content words are usually superior to icons, icons can be more compact while remaining intelligible, are easier to scan, and are just plain pretty.

In Firefox, switching the toolbar to “text only” from “icons only” mode roughly doubles its horizontal size, wasting screen space that I don’t have. My usual setting can fit my address box and search box on the same line.

Icons can incorporate simple shapes and recognizable colors, which text cannot. “Refresh” tells me more than a circular blue arrow, but the arrow is easier to spot in a crowd. Plus, words can blur together (is that a “Copy Paste” button or “Copy” and a “Paste” button?).

Icons do have some merit, although they cannot replace all text. Icons accompanied by optional text (enabled by default!) provide the best of both worlds. A person shouldn’t need to guess at an icon’s meaning (or “scrub” them to see their tooltips), but neither should a person who has learned the icons be stuck with text that wastes valuable screen space.

“That?s a pretty clear sign that words are superior if you have to choose between the two,” you write, but the important part is that you don’t have to choose. Every button can get an icon as well as a caption. Given the choice, I’d take icons in my menus too. Any time I need to pick out a command in space (rather than typing it in Enso/Command Line/Emacs/etc. style) I appreciate the help icons provide.

While I agree that words are often better than icons, I think icons do add value to people who use a particular piece of software all the time. This is especially true for software of any type of complexity.

Imagine, for instance, what MS Word would look like if it used text instead of icons in the toolbar. How would you ever find anything? Since so many people use Word on a regular basis, the icons are a time saver. I don’t think many people pause to think about why a floppy disk represents the “Save” function. They just know that it does and the click it when they need to save. If my toolbar instead said “Save” surrounded by “New Document”, “Open”, “Print”, “Spellcheck”, etc., it would take me a lot more time to find that button.

Not only would it be hard to find options, but you also have to consider the context. In the case of Word, people are using it to edit text files. Text buttons combined with text documents would make for a very text-filled screen. The buttons would not stand out enough.

I think the use of words is appropriate in some situations, but you cannot generalize it. Icons do have their place and people who use software all the time learn their meaning in the context of the software. The metaphor to the real world helps people learn an icon’s meaning, but it’s the context in which icons are used that makes them meaningful to users.

From my previous comment, love is a bad example.

Delete is an example of a word in an interface that is ambiguous. Delete, as in kind-of delete. Delete like, destroyed. Delete, like sent to the trash.

The word delete in combination with an icon could communicate these different meanings.

Designing icons for a specific group seems more interesting than designing icons for a huge wide group of people. In that situation, designing for every human, using words would be better.

Slightly off-topic, but I’d be thrilled to not have to see or use this particular icon (and its function) again. My computer should have my latest work saved.

But, what about international scenarios, when a fax, copy, or soft drink is available to different language speaking people?

The same can happen even with words. Why “Save”, if after “saving” a file it doesn’t necessarily get “safe”. Why not “Store”?

But even, with time, remember Archy does not need to “save” files.

Even with words, as Paul said about Chinese, the evolve. *Maybe* the letter “A” is an evolution of an early, ancient, icon meaning something.

Even with the language, everything changes. See Old English examples: http://en.wikipedia.org/wiki/Old_English_language

— Please add a “follow-up” link that sends a mail when some one add a comment on some post —

Thanks,

Sp

Trackback:
http://richarddcrowley.org/2007/06/26/on-permanance/

Humanized yesterday published a eulogy for the ?Save as?? icon that has for so long depicted a floppy disk. With our 20/20 hindsight it would be quite easy to shame ourselves for standardizing an icon that would be as foreign to our children as Esperanto, but how could we have known?

I agree that icons and text together is hard to beat, but what if space does not allow for both? Which should you choose? There is a lot of appeal to the idea that a known icon is easier to spot than a known word, but when this hypothesis is tested, it doesn?t appear to be supported, at least not consistently. See for example: Wiedenbeck S. (1999), The use of icons and labels in an end user application program: An empirical study of learning and retention, Behaviour and Information Technology, 18(2), 68-82.

Icons will have more visual variability than words, so you might think each one stands out better, but that same variability creates more visual clutter when large numbers of icons are collected on toolbars. This clutter tends to cancel out the saliency effect. One bright neon sign in a sea of bright neon signs is not going to be easy to find.

Also, I believe experts locate commands primarily by location not by label (I think there was a study supporting that too, but I have to check). We know Save is third from the left, for example, so the visual uniqueness of its label doesn?t make much difference.

As for words consuming more space, that may be true in aggregate (but not for words like New, Open, Save, and Print). However, I suspect you?d be better off abbreviating long text labels than using icons alone for your minimum space display mode. Spell Check becomes Spell or even Sp. ?Spell? is 21×11 pixels in menu-size font ?quite favorable compared to a 24×24 or even a 16×16 icon.

Surely, words are more precise in description ? although poorly chosen labels can be less useful than a good icon.

In places where the display area is limited (low resolution or small scale interfaces), when your audience encompasses multiple spoken languages or if it includes the not-yet literate or illiterate, I think there’s room for icons to complement or replace words.

Getting them right is tough, but that shouldn’t be reason to give up. (how about those Adobe CS3 “Icons”?)

What will be the next save icon? Or is save/export as a command/function becoming archaic as extensive histories of the documents we work with will be periodically saved for us?

I said earlier it might be silly to try to design an icon that all humans understand. In afterthought, that sounds like a pretty amazing challenge?

Josef Muller-Brockman’s subway icons due an amazing job communicating to people across languages.

Not 100% sure Josef designed these, but they are great! http://www.flickr.com/photos/joekral/231669020/in/set-72157594264686838/

Those are all good reasons why well chosen icons are useful in computer UIs as they are today: they can convey information compactly, across languages and to illiterate people. I suppose they also convey it quickly, while reading may take time. These are also reasons road signs are icons in most of the world.

Would the taskbar be easier to use without application icons? Tabs in a web browser without favicons? If Humanized thought so, they would not use a favicon on their web site. I wonder how to reconcile that with empirical evidence to the contrary.

But much of the appeal of icons probably disappears if the user can manipulate content without worrying about file type, if there are no applications, only commands, and if the user does not have to search for them visually, just invoke them by name.

They are probably still a benefit in giving the user feedback about the command he is about to execute, and in selecting commands from a short list of completions of what the user has typed.

As an example as to why icons only are bad, I was using Safari 3 recently and noticed a button which I couldn’t work out the function of. Being a Windows user I promptly hovered over it. And waited. Nothing. (Apparently Apple rarely use tool tips, but other Mac developers do). So I closed my eyes, clicked, and hoped for the best. Turns out it was the bug report feature and the icon was a bug. Bug - bug report - obvious, right? Evidently not. But “Bug Report” - bug report - *that’s* obvious.

I would say that icons and text together is the best, but then that’s only because most usable UI’s use it. In face, I can’t think of any that use text only buttons.

I have never though about it, but it seams like everyone uses floppy disks to indicate “saving something”. That has got to change.

I don’t think it’s so much what the icon’s graphic depicts so much as it should be consistent over time and across many if not all applications.

New users will accept the new things better than existing users and this is where having a more modern or correct graphic would likely help the most.

Experienced users just want to know if a common function is pictorially represented identically across a great many software programs or applications.

As Humans I think we generally like to have habits to save time and not re-learn how to do the same thing a different way each time we do it (figure out what the icon does).

Habits bring ease. Change brings work.

I agree that text is superior to icons. I nuked the icons in a pie menu implementation and it’s much less cluttered. I dislike screen-wasting toolbars with hard-to-clik-on icons.

As to the appeal across languages issue, that’s what internationalization/localization is for. Better to have the option in French, where you can look up the meaning with a French-English dictionary than to have it in Iconese, which has no dictionary whatsoever.

I wonder when Apple stopped using the flopping icon to indicate “save” in thier software? Did they ever use it?

Gordon: no, the Mac didn’t have standard toolbar UI until OS X, by which time the floppy was an anachronism (for Mac users). Apple also discourages the use of toolbar icons for well-known standard items like Save and Open: if you have a toolbar, put a interesting, useful things in it, don’t duplicate your menu bar.

I noticed it a few years ago and just Googled this article ( http://awarmgun.net/archives/newsaveicon/ ) on the matter; in Microsoft Office 2004 for the Mac, an icon of a ZIP disk is used to save a document rather than that of a floppy.

It always vaguely amused me and I assume that whoever designed the icon decided that the floppy was out of date, so why not use a ZIP disk instead, as long as we’re being symbolic rather than representative about things.

Thanks for the link, Simon!

I think now that the direction everything is going is towards automatic saving, which would seem to eliminate the need for a “save” icon altogether. (Especially once Leopard comes out, with Time Machine’s ability to easily go back through various states of the file.) Although I still suspect that we will need a “save” icon for many years to come.

What about that saying I heard - “A picture is worth a thousand words!”?? And isn’t an icon a picture??

Well, what can I say…
good ideas you got here, I liked the no icon thing, and I liked the songza design , simple and clear. I think I need to redesign the GUI and graphics of my site: http://www.BookTrade.co.il

The only problem is that some ideas like “no more pages” are bad for websites that want to be ranked high in search engines.

Thanks, keep up the good work.

Looks perfectly straight to me. Of course, I’m also the type of person who allegedly [ahem! allegedly] agree with everything.

It would be fun to design our own icons for applications, anyway. There are cultural differences that make some US-based icons unintelligible to other nationalities. I would try a pile of coins for “SAVE”, or maybe a picture of a safe with centre dial.