In Defense of Floppy Disks: The Vocabulary of the Interface

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

Save icon

Save designed by Cris Dobbins, from The Noun Project

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

Magnifying glass icon

Magnifying Glass designed by Hafizh from The Noun Project

Pencil icon

Pencil designed by Blake Thompson from The Noun Project

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

Contact icon

Contact designed by Johan H. W. Basberg from The Noun Project

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.

Voicemail icon

Voicemail from The Noun Project

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.

Link icon

Link designed by David Waschbüsch from The Noun Project

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.

Posted in Design Principles, Visual and Visible | 25 Comments »

25 Comments

  • Brian Donohue

    June 18, 2013 at 9:20 am

    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.

  • Engrenage | Création de logiciels sur mesure

    June 18, 2013 at 12:43 pm

    [...] Lis Pardi, de Boxes and Arrows, présente une étude qui démontre que le sens de l’icône de la disquette n’est pas perdu. À lire! In Defense of Floppy Disks: The Vocabulary of the Interface « Boxes and Arrows. [...]

  • Carolyn

    June 19, 2013 at 12:08 am

    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.

  • The Truth about Skeuomorphism vs. Flat Design · Blog · intuio

    June 19, 2013 at 8:19 am

    [...] read Lis Pardi’s enlightening article on how well icons work on interfaces, “In Defense of Floppy Disks”, complete with a PDF overview of the survey [...]

  • Gary McGath

    June 20, 2013 at 10:06 am

    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.

  • Yuhong Bao

    June 20, 2013 at 10:32 pm

    My personally favorite is the word “chipset” from PC hardware.

  • AboutaDirk

    June 21, 2013 at 12:14 am

    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.

  • Jayson Elliot

    June 21, 2013 at 6:40 am

    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.

  • We Need a Better Symbol for the Concept of Saving Stuff | TIME.com

    June 21, 2013 at 5:46 pm

    [...] of the floppy on Twitter. And Twitter user frama_c remembered my tweet and just alerted me to an interesting piece by Lis Pardi, at design blog Boxes and Arrows, about floppy disks and other common icons, such as [...]

  • Exolds.com We Need a Better Symbol for the Concept of Saving Stuff - Exolds.com

    June 22, 2013 at 3:31 am

    [...] of the floppy on Twitter. And Twitter user frama_c remembered my tweet and just alerted me to an interesting piece by Lis Pardi, at design blog Boxes and Arrows, about floppy disks and other common icons, such as [...]

  • Brian

    June 24, 2013 at 1:34 am

    Why are there no social sharing icons on here? Blasphemy!

  • We Need a Better Symbol for the Concept of Saving Stuff | ACROSS THE FADER – US

    June 24, 2013 at 12:40 pm

    [...] of the floppy on Twitter. And Twitter user frama_c remembered my tweet and just alerted me to an interesting piece by Lis Pardi, at design blog Boxes and Arrows, about floppy disks and other common icons, such as [...]

  • Felipe Heredia

    June 25, 2013 at 8:54 pm

    Thanks for sharing your findings! Very interesting.

  • A trip down Memorex lane – GHL Blog

    June 27, 2013 at 4:12 am

    [...] the Boxes and Arrows blog, I read a post earlier this month that described a survey assessing whether college students could identify not only what a floppy [...]

  • KillerDuck

    July 2, 2013 at 7:29 pm

    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.

  • Dmitry

    July 2, 2013 at 11:03 pm

    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..

  • Dallas

    July 5, 2013 at 1:57 pm

    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.

  • Christophe

    July 5, 2013 at 2:21 pm

    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/

  • Is the Save Disk Icon Dead? | Lauren Martin

    July 15, 2013 at 5:17 pm

    [...] just ran across another great article,  In Defense of Floppy Disks on Boxes and Arrows about the disk icon. This one clearly on the side of keeping the save icon and [...]

  • Sasha Tikhonov

    July 15, 2013 at 5:52 pm

    You had to ask about those icons in interface, not as detached symbol. Environment of an icon is important for determining the meaning.

  • The User Experience Three. Handpicked 07/17/2013 | UXPin

    July 17, 2013 at 1:15 pm

    [...] 2. In Defense of Floppy Disks: The Vocabulary of the Interface [...]

  • HarryBauer247

    August 1, 2013 at 8:43 am

    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.

  • Kenneth Dsouza

    September 5, 2013 at 5:39 pm

    Lovely article.
    I’m working on a similar topic as part of my colloquium paper this semester.

  • In Defense of Floppy Disks: The Vocabulary of the Interface | UX.MWEPRIN.COM

    September 30, 2013 at 4:12 pm

    […] Boxes and Arrows […]

  • Jati

    October 7, 2013 at 4:38 pm

    Icons alone are never sufficient when someone encounters an interface for the first time, you should always include a text label.

Sorry, comments are closed.