The Save icon and what it means.

I have mixed feelings about whether to use an icon or a button with the word “save” on it. I didn’t think about touching this issue in a meaning full way until I read this article from PJ Onori on Branch.com. On one hand you have the word “save” and you can change it for different nuances. Like “archive”, “done”, “save draft”, “post” and more. The words are nice and clear. I only down side is having to translate them for international use. The 3.5 floppy disk has been the standard icon for a long time.

 To be obtuse… “Save to a 3.5 floppy disk I don’t think this computer even has one?”.

Now the icon a shinning champion of group think. When you see the 3.5 floppy icon in the menu bar you know that you will be saving. That is the intent and has remained the default for decades, the latest “MS word” still shows a 3.5 floppy disk as “save”. The big question is does the 3.5 disk become an abstract icon that transcends it original meaning and become a symbol for “save”, or does this icon need an update. I think that I have found a few examples. Here are some designers who are thinking about this and are reacting to recent changes in the “Save/store” paradigm and I would like to share them with you, they are in no particular order, enjoy.

Màximo is using a minimalistic skeuomorph design to represent an inbox. The inbox is so removed (from the world of bytes and data) that it becomes abstract container for the arrow. But it is the arrows that are driving the meaning. The theme of in/out/ok are a common in these designs.

Justin has updated his storage device from the 3.5 to a hard drive. This updates the 3.5 floppy, but it doesn’t create a lasting metaphor. It will or may already becomes a victim of out dating. The arrow drive the action, they say, “To Here”.

I really like what Joni is trying to do here, almost there. The first two icons provide some nice feedback to the user. The last two are fine but the whole set gets dragged down when we get to “Open file”. It feels like Joni got tired at the end.

This was added tongue and cheek but it could have legs. It is a safe and says, “your files are safe”.

Unfortunately without the word “SAVE” the icon fails. With the word “SAVE” the icon is just a graphic.

Ha! This will show that 3.5 floppy disk what a real floppy disk is. This skeuomorph disk is again so far removed from present day saving techniques that we can considerate  it an abstraction of the save idea. Some would say, “No one will know what it means”. I can’t disagree with that, but the historical significance does lend it an air of authority.

This is where words win over icons, the subtlety of the meaning can be expressed. A second win for colors. Although I’m not feeling the archive icon.

This one one stood out because it’s using a lock instead of and arrow to show “your changes are secured”, kinda like the safe it makes a strong statment. Albeit this was not Artission’s intent,  I submit it to you as a counter to the arrow.

More Arrows, Adam is using the arrow most successfully to show where your data goes, “It goes somewhere (map/directional arrow), and it’s safe (three walls/container)”. Artfully done.

Very similar to Jas (above), but Chris is talking to the feedback loop users enjoy.

I have seen this icon a lot and I think it’s good try, but does take the user into account. Please compare this one to Adam’s continuous arrow ( 2 up). Maximilian is showing two lines converging into a single point, or maybe the thought was a deposit into a persistent timeline. This icon might be better suited to version control where merging is often done or FB’s add to timeline.

This is a very nice take on the feedback idea, The icon is a bit vague but one could learn to like it.

4. The double fork for forking and or branching easy to understand,
5. The floppy for save is the classic we are talking about in this post and in context works well
6. The export also easy to understand.
It is the context that matters here. If i just had a save button I wouldn’t be sure how it was going to act with the other icons I can make the leap and understand what to expect.
PS I love CODEPEN

Tyler is using the arrow to show “where to”. It’s the “where to” that we are addressing, with the 3.5 floppy, if the technology changes does the icon change.

Now we are talking skeuomorphism! Ramotion is cramming an entire story into his icon. If this is the route you take, An entire icon language could be created to solve the subtleties of the “Save” event. I think this also opens the question, “What is save?” and “How do we want to depict it”. I am sure Ramotion would have a lot to say about it.

I would like to put Josh Puckett and Ramotion in a room and have them work something out.

Màximo is visiting the area of user feed back, the Icon is still a bit vague, but i like the direction.

closing thoughts…

• Should the icon be reflexive and give feedback to the user?
• What is the expectation of the feedback (savable, saving, save complete or error statement)?
  
• Should the icon be a universal, and the context dictated it’s meaning?
• Should an icon set be created to address the language of save (save it, version it, archive it, cloud upload, local storage, shared file editing, fork, branch, merge, done for now…).
• What is the intent  (local-document: create/open, local-document: edit/write, and then local-document: save).