I work on interfaces used by college students to search for academic articles. Librarians buy these databases. Librarians happen to be wonderful clients to build products for because they always let you know what they don’t like.
A few years ago, my department started hearing complaints about the “save” icon on our interface. The librarians were concerned that, since college students had never seen floppy disks, they wouldn’t know what the icon meant. In the next round of user testing, we dutifully asked college students if they understood the “save” icon–they did–and if they’d prefer a different icon–they didn’t. So we left it at that.
But librarians are a naturally curious and skeptical people and one round of qualitative research would not satisfy them. I needed 100 people to say I was right. So I conducted a survey to find out if people understood the meaning of the icon, and whether they could identify the symbol represented in the icon–the icon’s origin. I got 224 respondents, ranging from elementary school children to art professors. But I was only concerned with the college students, so I narrowed my results to the 131 people who selected the 18-25 age range. And I figured if I was going to ask them about one icon, I might as well ask them about 11 icons.
The save icon
96% of respondents knew that the square icon with the notch cut out of the top right represented a floppy disk (one person guessed that it was an SD card, which was wonderful because that also represents file storage). If I’d asked only about the icon’s meaning, I would have declared this an unequivocal win. However, I also asked people to tell me what the icon meant on a computer or phone. Around 80% said it represented save. The rest of the answers were in the ballpark of save functionality (storage, memory, files, dark matter) but I had expected every single person to respond with “save.” Apparently one exasperated survey taker had the same assumption because they wrote, “Seriously, I’m only 20, but young people aren’t THAT blind to old tech.”
“Seriously, I’m only 20…” (pdf)
Clear origins, cloudy meanings
Two icons represented objects that were common enough to be identified, but their meanings were not clear. The magnifying glass and pencil illustrations were obvious, but both have been used for many different functions on interfaces. The magnifying glass went roughly 80/20 for search/zoom. The pencil was split among many good answers, such as compose, write, draw, highlight, note and edit. Their high recognition shows that they’re still good to use and likely identifiable in context.
More confusing icons
When I constructed the survey, I threw in some easy icons that were recognized by everyone (envelope, telephone handset, trash can), but I also put in a couple just to stump people. These were icons for voicemail and contacts as represented by an abstracted reel-to-reel and a Rolodex card, respectively. In both cases, the guesses for what object the icon represented were across the board (some guesses for the voicemail icon included “opera glasses,” “googly eyes,” “two circles connected by a line,” and “I have no fucking clue.”) The surprising result was that, despite not being able to pick a Rolodex card out of a lineup, 80% knew that the icon meant contacts.
It was not such a clear win for the Voicemail icon (52% got it correct), but it may be that a less frequently encountered icon is harder to recognize out of context. When I showed the survey to a 40-year-old coworker, he couldn’t figure out what the icon represented either. Then I had him take out his phone. And right there in the status bar was the icon showing that he had unheard voicemails.
The chain link icon, used to represent links, fared the worst of all. Around 60% knew that it was a picture of a chain, but only 45% said it was used for linking. Many thought it was a paperclip, for attaching, and 25% didn’t even attempt to guess what it represented on a computer.
Now what?
My research shows that there’s definitely some confusion around the meaning of most of these icons. But I’m advocating their continued use because basing them in real-life objects makes them familiar to some users, if not all. Ultimately, the most important thing is to have icons that make it clear to as many people as possible what they do in the interface. It’s better to have 80% of users see the floppy disk, dig back into their memories of childhood technology and connect to this image as representing the act of saving, than have 100% of users see a downward facing arrow and wonder what it means.
We’ve already chosen to stick with familiar imagery in our written language. We talk about “stock tickers” and “diplomatic cables” even though tickers don’t actually tick anymore and none of the diplomatic cables published on WikiLeaks were sent using a telegraph. Our vocabulary has evolved past the objects the words represent and our visual language should do the same. If you disagree, then I challenge you to first stop using the phrase “hang up the phone,” because phones haven’t actually hung in decades.
Thanks for sharing your results — it’s great to have some rigor added to a problem most of us had to confront. I agree with your conclusion that the floppy disk is the best icon to use for save, but I think it’s worth pointing out that there are two, possibly preferable, options:
> autosave so no button is required
> don’t use an icon — use “save” instead. This seems to be the emerging pattern now.
Also, I’d love to see the data you collected on under 18 year olds, as I work on products for kids. If there is anyway you could share that, that would be great.
Some icons just beg for a title tag or something like it. This was a year or more ago, but on the iPad, right after one of the Gmail redesigns, my husband couldn’t figure out some of the icons. I had no idea what they were. So, I went to my laptop, where a little tag pops up, as we all know, and there was the word saying exactly what the icon meant. Then we went back to his iPad and all was clear.
That’s INSANE that we needed to do that. (If you’re in a certain age range, always hanging out with your friends at school, for example, your situation is different. Someone you know has figured it out.) Perhaps there was a way to find tags for those icons on the iPad. But where and how? We users shouldn’t have to figure these things out or use other equipment to find the answers. You know how people feel after simple little experiences like that? Frustrated, a little angry, and then, forevermore, distrustful of the software/hardware.
Better hieroglyphs aren’t the way to improve a user interface. Words work much better. Not all people read the same language, but localization of words is much easier than localization of pictures.
My personally favorite is the word “chipset” from PC hardware.
Loved reading this. Affirming some assumptions a lot of us designers share.
To add 2 cents, though it might as well get rounded down for the high “duh” factor; the pencil and magnifying glass might have multiple meanings (slightly more ambiguous than the disk) but they are more influenced by context. Stick the magnifying glass in an input field, and the numbers might shift to 95/5. Stick the pencil in a message board post next to “quote” and “delete” and again you’ll get a 95% success rate on identification of its purpose.
Again, that might be rather obvious, but I thought it was worth stating out loud 🙂
Cheers again.
Icons are mnemonics, not signposts.
Icons alone are never sufficient when someone encounters an interface for the first time, you should always include a text label.
New users to an interface will read the text labels, and after time, the icons become a quick mnemonic for them to locate functions they’ve accessed before.
Even more important than visuals or text is location. Our spatial memory has a higher priority than either. In repeated user tests, I’ve observed that once people become used to a button resting in, say, the top left corner of a UI, they will click there again for the same function, even if the button itself has changed.
Don’t worry too much about the exact semiotics of your icons. Just keep them reasonably meaningful, clearly distinct from one another, include text labels, and be consistent with where you put them.
Why are there no social sharing icons on here? Blasphemy!
Thanks for sharing your findings! Very interesting.
I could not disagree more about continued use of the floppy disk icon for save. It’s ambiguous. You use a disk to open a file also.
Worse, I have not owned a computer with a floppy in at least 5 years. Why not use a 5.25″ floppy icon…or better yet an 8″ one. By your logic we should use a horse icon for a car’s Check Engine light.
Arrow pointing downwards usually means download (putting the content on the local device), while floppy disk (saving) stands for something like ‘setting the modified content in the constant state’, and basicly it seems that there could be no case when a single action could be described with both..
The use of metaphors is pretty useful for computer interfaces, and this is a great research question to pose. I believe that over time, we will lose a lot of the ability to share “old” icons such as the floppy disk, as we’re moving into a weird sort of web 3.0 era of ubiquitous computing, software as a service, and “cloud” (i.e., servers that we don’t own) computing. For example, when typing a Google document in the google drive, the auto-save feature makes it unnecessary to even really click the save button. I do because I can remember AOL Chatrooms as being “the internet,” but younger people simply type away without thinking about it.
The generation of gurus before me remember having to do an Initial Program Load (IPL) before doing anything with a computer…something I’ve only had to do when using antiquated military systems in my USAF days.
The generation before THAT generation went even further. During a visit by WWII veterans, a 90 year old communications specialist who served in the Pacific theater during the war, remarked at how he could tell who was on the other end of a morse code line by listening to the pattern, speed, and strength of the keys being punched. He was much closer to the source of the technology than those who did IPL’s in the 60’s and 70’s, and they were much closer than I am today.
One wonders what we may have lost in the true experience, while we gained ease of use, processing power, vast amounts of memory, and other technological advances.
At last someone who did user research instead of speculating that icons don’t make sense anymore. When Scott Hanselman wrote about this last year [1], he probably hadn’t done any research and got lots of comments from young people who said that they knew what those dated things stood for.
The people developing LibreOffice also discussed the Save icon [2] without user research and replaced the icon. Afterwards users asked why the icon had been replaced; they had gotten used to it [3].
[1] http://www.hanselman.com/blog/TheFloppyDiskMeansSaveAnd14OtherOldPeopleIconsThatDontMakeSenseAnymore.aspx
[2] http://listarchives.libreoffice.org/global/users/msg19507.html : just one message from a long thread.
[3] http://ask.libreoffice.org/en/question/272/why-did-you-change-save-button/
You had to ask about those icons in interface, not as detached symbol. Environment of an icon is important for determining the meaning.
Great article about icons.
Amusing to read that most people identify it whereas other icons make less sense.
The fact that SD-cards have a similar look probably helps.
I also think that what matters with icons is the context in which you see it. In which program and where in that program the icon is seen matters.
Lovely article.
I’m working on a similar topic as part of my colloquium paper this semester.
Icons alone are never sufficient when someone encounters an interface for the first time, you should always include a text label.