Tuesday, August 18, 2015

The save icon needs an update

I was planning to write a blog post on the usability of LibreOffice, specifically Writer, when I noticed that the screenshots I had taken from 4.3.5.2.0 and 4.4.4.3 both used the "floppy disk" icon for the "Save" action.

Icons carry meaning, the same as words. In fact, we use icons to replace words. In user interface design, icons convey the meaning behind an action, but doing so without words. This saves space on the screen, but also makes it easier for the same program to address multiple languages. Whether you have your system set to English or French or German, you see the same icons.

So it baffles me that the floppy disk continues to represent the "Save" action in so many user interfaces. You can see from these LibreOffice Writer screenshots, the "Save" action in both versions uses a floppy disk icon. I'll note that 4.4.4.3 is the latest version of LibreOffice Writer.

LibreOffice 4.3.5.2.0 on Fedora Linux (screenshot by me)

LibreOffice 4.4.4.3 on Fedora Linux (screenshot by me)

And it's not just LibreOffice that uses a floppy disk icon to communicate "Save." Microsoft uses the venerable floppy disk icon in the latest version of Microsoft Office:

"Microsoft Word on Windows 8" by Source (WP:NFCC#4). Licensed under Fair use via Wikipedia.
Do an image search for "save icon" or "save button" and you'll quickly be presented with floppy disk images. There's even a floppy disk icon on Entypo called "Save." The floppy disk has become that ubiquitous.

But what is my problem with the floppy disk icon? No one under 30 recognizes it as a floppy disk. It is just some funny-looking square that means "Save." Users have been forced to learn the meaning of an icon. But the icon is supposed to be obvious in its meaning.

The "Save" icon needs an update. We need to change the "Save" icon to be meaningful to a variety of users, not just those that grew up with the older technology.
image: Free Icons Download

29 comments:

  1. Hi, Jim. There's a interesting discussion on the subject you might be interested in http://web.archive.org/web/20130924041044/http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

    ReplyDelete
    Replies
    1. Interesting reading. PJ (the thread author) makes this comment at the start of the discussion: "The radiation symbol had a concept behind it (an atom radiating energy) but the design behind the biohazard symbol was intended to be "...memorable but meaningless, so [they] could educate people as to what it means." While I don't think a Save symbol should be meaningless, I think keeping it highly abstract makes a lot of sense."

      The phrase "memorable but meaningless" stands out to me. I'd guess the original intent is that the representation (the icon or picture) should not shift as associations to particular models or images change. They mean for it to be more abstract, so meaning can be assigned and learned. PJ has the same conclusion in saying "While I don't think a Save symbol should be meaningless, I think keeping it highly abstract makes a lot of sense."

      I think the "Save" icon should be somewhat abstract, so it doesn't become too complex and difficult to understand. But I also think the representation (the icon or picture) can change. We need a compromise between abstract and representative.

      Delete
  2. "No one under 30 recognizes it as a floppy disk" I might change that metric to 20-25. Source - I'm under 30.

    Does it need a superior replacement? Yeah - Brainstorm in 3....2.....1....

    ReplyDelete
  3. > No one under 30 recognizes it as a floppy disk

    A bit of an exaggeration... floppy disks are dead technology now, but were still in widespread use up to at least 2002 or so, before USB sticks really caught on. So most people in their 20s have probably had to use them at some point in the past.

    Now, granted, it *is* a bit funny that we still use them as an icon - but what do you propose as an alternative? The floppy-disk icon might be outdated, but it's still instantly recognisable to most computer users as being the "Save" icon, even if some of those users have never used an actual floppy disk. What's the replacement - a USB stick? A hard disk? A picture of a cloud?

    ReplyDelete
    Replies
    1. > A bit of an exaggeration... floppy disks are dead technology now, but were still in widespread use up to at least 2002 or so, before USB sticks really caught on. So most people in their 20s have probably had to use them at some point in the past.

      This reminds me of an article by Koutsourelakis and Chorianopoulos (The Design Journal, vol 13 iss. 3, pp. 313-328) in studying "Unaided Icon Recognition in Mobile Phones: A Comparative Study with Young Users." In the article, they studied icon recognition on the then-not-uncommon "flip phones" (2010). In their study, they found four of the top five best-recognized icons were "Settings" that used a "tool" representation (such as a wrench).

      Koutsourelakis and Chorianopoulos conducted a similar study "Icons in Mobile Phones" (Information Design Journal, 18(1), 22-35) to compare icon performance between age groups. As before, four of the five best-recognized icons for young users were the "Settings" icon that used a wrench or some other tool. Only one "Settings" icon was in the best-recognized group for older users, one of the same icons for younger users.

      In this study, Koutsourelakis and Chorianopoulos also found a "Phonebook" icon represented by a "phone handset" image imprinted on a spiral notebook was a best-recognized icon for both user groups—even though younger users didn't have strong physical association (i.e. use) of a "phone handset" and were unlikely to write down phone numbers in a notebook or journal (they rely on the phone's memory instead). This was a learned meaning for the icon.

      I found this a very interesting read, as it shows some of the differences and similarities between age groups. It also demonstrates how the meaning of some icons is learned just as my comment about the "floppy disk" for younger users. But just because those icons performed well in Koutsourelakis and Chorianopoulos's study, doesn't mean they should never change. I doubt many users in 2015 will recognize a "wrench" icon to represent "Settings." The modern learned representation for this activity is the gear icon.

      Delete
  4. There was recently a public competition in Germany to design a new "Save as…" icon.
    Although many of the submissions (and winners) are of questionable quality, there are also a few interesting ones to be found among the submissions and at least some inspiration could be taken from them.

    See also: http://speichern-unter.net/alle-einreichungen.html

    ReplyDelete
    Replies
    1. Thanks for the link! There are some interesting submissions there.

      Delete
  5. @Eliasp - very few of those designs clearly say "save document" to me... and those that do are typically just updated variants of the floppy disk (e.g a picture of a USB stick).

    ReplyDelete
    Replies
    1. Designing icons is a challenging process. How do you create an icon that embodies the same meaning for different groups of people? What reads as "save document" to one person may mean "download file" to another.

      This icon is a close fit, in my opinion. (There are some others as well, but this one stood out to me.) I would make a few recommendations for that icon, however:

      1. I would put the "arrow" element at the top of the "file" icon. Possibly in the upper-left, at an angle - although that assumes a Western audience. In most (Western) languages, we read left-to-right, and top-to-bottom. In a top-left position, the arrow element would stand out first in the icon, suggesting "putting data into the file," or "save."

      2. The "file" icon should change depending on the type of file. For example, if you are in a word processor, the icon should be the word processor file-icon. If you are a spreadsheet, the icon should be the spreadsheet file-icon. And so on.

      Delete
  6. I remember that in older Fedora versions, in OpenOffice/LibreOffice, the save icon was something with an arrow pointing down. The fact that the latest versions have switched back to the floppy icon means that although folppies are a dead technology, the floppy icon is what is most people expect for a save icon.
    Let me put it in another way, why use the magnifying glass as a zoom icon when you zoom with a 2-finger pinch, or with a scroll of the mouse wheel? Because people expect the zoom icon to be a magnifying glass, simple as that

    ReplyDelete
  7. If we're going down that path, how many people have actually come across a real folder? Better redesign all file managers.

    ReplyDelete
    Replies
    1. Except the icons look like folders. Terribly confusing for anyone younger than ~60. :-)

      Delete
  8. There's been some previous work in this area, FYI:

    http://user-prompt.com/de/about-antiquated-metaphors-in-icons/
    http://user-prompt.com/de/find-the-best-icon-for-save-as/
    http://user-prompt.com/de/how-designers-think-about-save-as/

    ReplyDelete
    Replies
    1. Interesting links! Quoting from the first link:

      As the Oxygen icon used for saving is a floppy disc, while the Tango icon is a filing cabinet with an inwards pointing arrow, we were especially curious for the performance of these two icons. Would younger users prefer the cabinet as they might not know what a floppy disc is? The results are stunning. There was not the slightest problem with using the floppy disc, while the filing cabinet metaphor more or less failed. (2012)

      As Anonymous mentions above, "…in older Fedora versions, in OpenOffice/LibreOffice, the save icon was something with an arrow pointing down. The fact that the latest versions have switched back to the floppy icon means that … the floppy icon is what is most people expect for a save icon." There's something to this. We put meaning into symbols. And where we don't have an implicit understanding of a symbol, we learn the meaning of the symbol. So even after the original symbol (floppy disk) has become antiquated, users still associate their learned association with the "floppy disk" to mean "save."

      I find this fascinating.

      Delete
  9. It is just some funny-looking square that means "Save."

    And that's it, it means "save" to everyone! It doesn't matter who old are you. What you want to do is breaking a convention.

    Women and girls are not required to wear a skirt, but still a sign of a human with a skirt means "women bathroom/washroom/restroom/powerroom". Without a skirt means "men bathroom/washroom/restroom".

    ReplyDelete
  10. Since we changed the save icon in gnome long time ago, here's the rationale about why we picked the file cabinet metaphor we're currently using:

    - no obsolete tech (like a floppy)
    - no internal hardware (we used to have an hd+down arrow, but most people doesn't know how a harddisk look like)
    - no folders (open icon uses a folder generally, and save is frequently placed nearby so it would be dangerously confusing)

    ReplyDelete
    Replies
    1. Hi Lapo. I notice there is no "Save" icon in GNOME today—for example, in gedit (which I use all the time) the "Save" action is literally a button with the word "Save" on it.

      When I tested the usability of GNOME 3.12 (2014) I observed this about icons:

      Icons were another challenge for testers. Icons represent concepts and ideas, but meaning is fluid and variable according to the viewer (McCloud, 1993, p. 28). When icons are more abstract, they may be more difficult for users to understand. Therefore, designers must balance appearance with perception, or risk confusing the user. For example, testers experienced difficulty saving a file in gedit and creating multiple reminders in Notes. In both of these instances, testers did not recognize the icon to effect the action (see images) on the program’s header bar. In gedit, the “Save” icon is embodied by an arrow pointing down into a shape that suggests a cardboard box. In Notes, the “Back” button uses a “<” icon, a simple representation that carried little meaning for the testers. (PDF, pp. 26-27)

      If I recall correctly, several testers commented that they thought the "arrow pointing into a box" looked like a "Download" icon. And when you're running everything on a local system, that's probably close enough to "Save." But for these testers (university students) who more frequently use web-based "Cloud" applications, "Download" is a different action than "Save."

      Delete
    2. To add: I agree with Lapo that the icon needs to present a metaphor that's free of specific tech (no floppy, no hard disk, etc). I think the "Save" icon should be somewhat abstract, so it doesn't become too complex and difficult to understand. The Save icon needs to be a compromise between abstract and representative.

      It would be interesting to focus on icons in a future usability test. This would be a good internship project in Outreachy. (I'm teaching a class starting in a few weeks, so I can't mentor the next Outreachy cycle, but possibly the one after that.)

      Delete
    3. We still have save icons (look for document-save, document-save-as), we just don't use those much latelly, since whatever you do text is always clearer in that case, so with more streamlined uis where we can fit a label in a button.
      Regarding the icon, doing something clear is pretty tricky, probably since the concept itself is a bit abstract and artificial, you don't save what you're writing in a notebook with a pencil when you're done, you just stop doing it :-)
      I think saving something is one of those things you had to do for technological limitation in the pleistocene (I was there unfortunatelly :-)), then became a common thing which in an ideal world shouldn't really be done manually at all, infact in the vast majority of android or ios app you don't have to do it.
      Probably the long term goal shouldn't be to replace the icon, but obsolete the action itself (together with all file management possibly, but, yeah I'm a dreamer :-)).

      Delete
  11. I think I did the libreoffice save icon also (or better it was taken from tango), I was asked to relicense a bunch of icon for libreoffice usage ages ago, save icon (proper) included, so they considered ditching the floppy, but probably gone the conservative way in the end.

    ReplyDelete
  12. Please don't replace the save symbol, it's universally recognized unlike any alternatives. Think of it this way, at any given time there is only a tiny number of people who have a problem with it - e.g. those who are currently using a word processor for the first time. They learn it once and they're fine. If you change the symbol, it becomes unfamiliar for almost everybody (depending on how intuitive it is, but I doubt there is a completely obvious symbol that needs no learning, that we all missed somehow). And once you re-tought everybody how to save, you still have the small amount of new people every day who see this for the first time and have to learn what it means. (Again assuming that there is no magic obvious replacement that is easier to learn than the floppy symbol).

    Also, not only is the symbol "antiquated", but also the very word "to save". I'm not "saving" the "file" from - say - an accident, or an attacker, or something. What I'm doing is committing data in some temporary memory to a more permanent storage, and giving it a name in the filesystem. And here even "memory" is a metaphor. But just as we use words like "save", "file", "application" in a way that goes beyond their original meaning, there is no problem to use a floppy symbol to mean something else than floppy.

    I'd argue that it is even safer to use it now, than twenty years ago. I remember being occasionally confused as a beginner whether a floppy symbol meant "save this data to the hard disk" or "open the floppy (A:) in a file manager".

    (Of course, the "real" solution would be to move to auto-saving applications, but that is a really hard problem.)

    ReplyDelete
    Replies
    1. > Of course, the "real" solution would be to move to auto-saving applications, but that is a really hard problem.

      I agree that the "Save" action is probably unnecessary for most applications in most scenarios. When we started to use computers to edit files and manage data, storage was slow. Especially in home systems in the 1980s where the floppy disk was common, it was a slow process to hit the disk to save data. So applications gave users the option to save data at a moment of their choosing. Windows and Mac applications continued this, leading to an almost unconscious tapping of the Ctrl-S (or Command-S) key combo when we paused to think.

      But today, storage is faster. And most files aren't that large, so the "Save" action takes only a moment. I think users would welcome an "auto-save" feature, where the text editor (such as gedit) or word processor or spreadsheet (think LibreOffice) just saves the file when you stop typing, and/or at regular intervals if you've changed the document. Other more specialized application software that edit possibly-large files (probably including graphics programs, video editors, etc) would need to consider performance in balancing an "auto-save" feature.

      Delete
    2. The catch with that is that people sometimes *want* control over what gets written to disk. For example, I'm making changes to the config file of some system - as soon as the file-on-disk changes, the system will see that and try to read it in, possibly in a corrupt state if something has saved it at the wrong time. Or likewise, development tools - I've got a compile going (maybe triggered by save), and I'm started making some more changes that I don't want to save because they'll interfere with the current build. Stuff like that...

      Delete
    3. > The catch with that is that people sometimes *want* control over what gets written to disk.

      Agreed, sometimes people want control over when/what gets written, and sometimes it is inefficient (aka 'expensive') to save to disk.

      In the latter case, consider writing to network storage—for example, a remote storage over WebDAV/s. This might be slow, even for some "moderate-sized" files. So the user might prefer to have control over when the data is saved; rather than saving "as you go," the user might decide only to commit changes at the end.

      Similarly, the user might be making an edit to a document where they only want to save the final copy. I sometimes edit my website "live" using gedit. I don't want my "work in progress" to get saved; I only want the finished file to get saved.

      So yes, there are definitely times when an "auto-save" is not desired. But I believe these are edge cases, and for most applications in most scenarios I think some kind of "auto-save" would be a good idea. It needs an implementation where the user can choose to turn that off and on at will. This is all very cool, but kind of a tangent to the blog post topic, so I'll leave it for now.

      Delete
    4. Auto-saving works in systems that save histories and allow you to recall prior versions. I'd hate to have Word autosave when my intent was to make a few changes and Save As under a different name.

      Delete
  13. I strongly disagree that it needs a redesign! Keep similarities between several Office suites, for the better of FLOSS. Don't change things just to make it different. It is a common and well-known icon and works. Please also don't underestimate your users, not all people younger than 30 are morons! Plus there are more urgent usability issues than the Save icon. Anyway, thanks for your work!

    ReplyDelete
  14. I used to think that the icon warranted a redesign, but I no longer do.

    The thing is, saving something is an abstract action, and icons representing abstract actions generally always have to be learned. Look at a "search" icon, for example. I doubt anyone uses a magnifying glass for searching for misplaced objects, yet the symbol is ubiquitous. The same goes for "Paste". "Play", "Pause", "Stop", "Share", "Shut down", and others go further and use generic shapes. They're not obvious, but they're ubiquitous, and that's why people know them.

    ReplyDelete
  15. The letter 'a' is actually an ox head. There's a phonetic connection, and it seems to have been originally derived from / inspired by an Egyptian hieroglyph for "ox". Crazy, right? An ox head is the symbol for the letter 'a', and originally it was a glottal stop in the Phoenician alphabet, not even a proper vowel. The (now) abstract 'a' is simply information passed on from generation to generation. Perhaps there is a better visual form to represent the sounds that 'a' stands in for .. but why would you change it?

    This is just how human beings create visual languages. It makes no sense in a purely logical fashion, but it works fantastically well.

    Embrace the floppy disk.

    ReplyDelete