, , ,

A look at the save button icon (3.24 floppy disk).

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.

Screen Shot 2013-11-05 at 10.14.32 AM 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.

 

Save Icons by Máximo Gavete
Save Icons by Máximo Gavete

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.

 

Save Icons by Justin Nurse
Save Icons by Justin Nurse

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

 

Save Icon Redesign Concept by Joni Marttinen
Save Icon Redesign Concept by Joni Marttinen

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.

 

Save Piggy Bank by Jordan Jung
Save Piggy Bank by Jordan Jung

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

 

A new Save icon by Idan Arbesman
A new Save icon by Idan Arbesman

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

 

Rebound - Floppy Disk Boycott by Jesse Wallace
Rebound – Floppy Disk Boycott by Jesse Wallace

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.

 

Keep button by Jas Jassal
Keep button by Jas Jassal

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.

 

Energizer by Artission
Energizer by Artission

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.

 

Save Icon Concept by Adam Hunter Peck
Save Icon Concept by Adam Hunter Peck

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.

 

Save Changes by Chris Armstrong
Save Changes by Chris Armstrong

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

 

Save Icon by Maximilian Larsson
Save Icon by Maximilian Larsson

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.

 

Rethinking the save symbol  by Sanid Jusić
Rethinking the save symbol by Sanid Jusić

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

 

CodePen Icons by Josh Puckett
CodePen Icons by Josh Puckett

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

 

Save Icon Set by Tyler Murphy
Save Icon Set by Tyler Murphy

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.

 

Save icon by Ramotion
Save icon by Ramotion

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.

 

Save icon by Máximo Gavete
Save icon by Máximo Gavete

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