A new save icon… and more.
The idea to replace floppy icon with a more appropriate design is not new. Designers already voiced that floppy icon representing save function is obsolete. I agree and while I practice and advocate familiarity patterns for better UX, great UX is always context-wise.
Floppy is out of context
How did floppy disk became an icon in the first place? In the past, we were saving our work on storage mediums such as floppies, ZIP drives, CD’s, DVD’s etc… Back then these mediums were all around us, so it was only natural to pick one from our physical world to represent save function. Floppy was among the oldest and instantly recognizable and that’s why it was used by most, if not all apps. Icons are visual cues, and they are only as successfull as we’re able to understand them. And we can understand them better if they relate to something from our physical world. But our world is constantly evolving and changing, as one famous Greek philospher said:
“Everything changes and nothing stands still.” — Heraclitus
We still need to save our work, but today we’re saving it on SSD’s, USB’s and more and more in the Cloud and automatically. There are fewer and fewer (visible) mediums around us, so our connection to them on a physical level is fading. Floppy icon in particular cannot be related to anything in our physical world anymore, so it’s definitely out of context for quite some time. Floppy is a lonely dinosaur trying to survive in a world of modern UI.
It was always about the work
So why is it so hard to let it go? The save icon debate has been going on for years with no conclusion in sight. Maybe it’s because we generally don’t like changes and indeed, some are questionable and/or unnecessary. Change can be scary because it pulls us out of our comfort zone, it takes us from the charted territory and throws us into the unknown, where we need to adapt and re-learn anew. Generally speaking, change demands effort and emotional involvement - that’s why we resist for as long as we can.
So, over time we have gotten used to this save icon, and some go as far to say we should keep the old floppy and just redesigned it to appear more modern. But I think we should instead bring to our consciousness the fact that it was never about the medium and completely redesign the save icon. It was only and always about the work. The fact that it was always about the work (and not the medium) led to the invention of Cloud - to store and access our work from anywhere, to free ourselves from any medium!
The new save icon idea
I came up with this idea by using one of my favorite apps: Twitter native app - that’s why all my examples are related to it. I was actually working on improving Twitter’s draft workflow and in the process, I came up with the idea for a new save icon. Allow me to divert for a moment and explain the idea process that led me to it:
I noticed that Twitter drafts feature was, intentionally or not, left out of user’s focus, although it’s an important feature because it allows users to save their thoughts and gives them flexibility to re-evaluate their tweets and/or schedule them for later. Currently, you access drafts by tapping new tweet icon on the timeline screen, which takes you to a compose screen (image 1) and then you tap drafts icon, left of your avatar.
Looking at draft and close (X) icons, it feels like they’re coming from different icon sets, which is similar of using two different typefaces in a single sentence (not recommended, except when there’s a strong reason, though I can’t think of any). For the sake of visual consistency, these two icons should have been made in the same visual style. Replacing the drafts icon with an simpler one, like the one you can see below (image 2) would do the trick. Added value would be to know how many drafts you have even before you enter drafts, so I’d add a number which would tell you exactly that. This was the first step towards the new save icon idea.
Entering drafts screen, there is a list of saved items, separated by a horizontal line (image 3, left). Your only option here is to edit a draft and if you wish to delete it, you must go to edit mode (image 3, right), then tap close icon (X).
This triggers a dialog with a question: Save draft? with two options: delete and save (image 4, left). Upon tapping either option you’re ejected 2 steps back - to timeline (image 4, right), instead of staying on the drafts screen. Not very user-friendly, don’t you think?
But there’s an easy fix to that: adding a trash icon alongside drafts, would make it possible to delete more than one draft at a time by simply taping trash icon. A dialog would pop for you to confirm deletion and you’re done, staying on the same screen (image 5, left). This could be taken even further by moving the trash icon onto header next to settings icon, and replacing trash icons with check boxes (image 5, right).
Now let’s get back to the save icon idea. A lot of apps use two-state icon of various designs, so I’d stick with that because it’s kind of a standard. While you’re editing your document, icon shows document with a pen - its first state (image 6, left). When you save or autosave, the icon reflects that by showing document with a check mark - its second state (image 6, right).
Like I mentioned, I got this idea using Twitter and I even made a protoype on InVision which you’re welcome to check out to see the icon “in action”:
But this icon can be applied anywhere, not only on Twitter. A number next to the icon is a matter of context and it can be completely left out when there’s no justification for it. When you activate a draft and start writing, the icon shows its first or edit mode, but when you save a draft, it changes to a second or save mode, showing a check mark and changing a number to confirm your action. It doesn’t matter whether you save your document manually or if it’s been autosaved - the icon will always change to save mode and let the user know that their work has been saved. With a little animation (image 7), this new save icon could be a worthy replacement for a long overdue floppy icon.
If you like it, you can help by spreading the word. You can let me know what you think in the comments and also connect with me on Twitter, Dribbble or my website. Thank you for reading and happy saving!
