The Save Metaphor
I’ve designed and pixel-pushed more “Save” icons than I can remember, and they were all floppy disks. I haven’t held a floppy disk since the first time I drew one, but I will always remember what they look like thanks to all the icons signifying “save this document”. Apple ditched the format in 1998 when they launched the first generation of iMacs. No computer I’ve seen in the past five years contained a floppy drive. Few documents I create these days fit on a floppy disk, actually. Only the documents I write (plain text files) stay below the 1.44 MB limit, but file size, well, it hasn’t been an issue for years now. For “carrying around data”, I use Dropbox, which automatically syncs my most important files to my two computers and my iPhone, and includes, for free, a web interface to these files. And “Save” is still a floppy disk.
This is different from, say, “Print”, “Settings” or “Phone number”. These are three wholly different categories, but they, all three, still carry roughly the same set of three visual clichés, maximum. I’ve collected a few examples of Print, Settings and Save icons to illustrate.
Print metaphors
From left to right, here, we see an icon from the Tango Icon Library, the printer icon in Windows XP, an older Windows icon, a random Google hit which amuses me to no end, and the icon for the Print function in Floorplanner, as drawn by myself. No matter what the perspective, as long as it’s not too colourful and seems to be a big grey box that outputs a sheet of something, it’s a printer. Comforting, to be honest. Maybe you’ve never seen a printer like that fourth one, but you know it’s a printer and not a box of tissues.
Printers are a generic product anyway. They’re not a product you want to show off with, so it has to be toned down. The grey box is a printer. Straightforward.
Settings metaphors
Left to right: the same Tango Icon Library, the settings in Mac OS 10.5 and upwards, the Windows XP settings icon, the settings icon in an open-source project Webmail (it’s hard to tell which branch or distro) and, again, the icon I drew for Floorplanner. Windows is the odd one out by not being about tools and gears. The guys at the Iconfactory may have a point here: the tick mark looks much more friendly and actually resembles the controls most settings apps use anyway. The switch is a nice variation, but suffers from fidelity problems. Scale it down a bit more and it becomes mushy. The only association at that point is “hey, that white-ish thing with the stuff in it”.
Tools as the metaphor seem to be understandable for a lot of people: you change the thing you’re using. Here too, however, colour is dangerous. Tools and gears are always grey and blue in the eyes of the icon designer.
Save metaphors
Left to right, once more. The Tango Icon Library goes out on a limb. The second one has been in at least three different Windows versions. The third is my approach for Floorplanner. And… that’s it. There might be more variations on the theme, but they’re all floppies or arrows-to-disks (and those are really only common in Linux distributions, and do not make any more sense than a floppy in web applications). Fascinating.
A good way to learn about new ideas in interface design is by checking out the vanguard of the field. Let’s take a look at the way the iPhone and iPad solve this.
They have none! Whereas the iPhone at least has the convention to label the Save function with just the word, the iPad has nothing of the sort. Nothing at all. None of the applications seem to do.
An entire generation already knows “Save” only as the square thing with the stuff in it. Click the square to save it. It’s not a floppy disk, it’s Save. Now Apple is slowly moving away from that metaphor. They’re removing the clunky idea of saving — who ever “saved” a document he was writing on (by hand, that is)? — and making it the foundation of the products. There’s no save. As an icon designer, a burden might slowly lift from my shoulders.