October 18, 2010

The strangeness of everyday icon design

I read a blog post recently (sadly, I'm unable to locate it) about the strangeness of icons that we commonly see on digital interfaces. Surprisingly, these icons are also interesting examples of exceptions to some key icon usability rules.

Think of the 'save' icon: a FLOPPY disk! The floppy disk was popular for what, 2 years, but in that short period of time, it cemented itself as the icon for 'saving' for, apparently, the rest of eternity.

Word toolbar

A fascinating example is the use of a magnifying glass icon to represent 'Search', as you'll find on the iPhone, Bing, Facebook, Twitter, WIkipedia, LinkedIn and countless other interfaces. When is the last time you've seen an actual magnifying glass? The main purpose of the magnifying glass isn't even searching, it's magnification!

Bing search bar

Examples abound of strange imagery in common iconography: a 'Link' icon being 2 chain links, a 'Home' icon is a house. A movie is most often represented either by a segment of film, or a boxy video camera ala 1990. These icons are either anachronistic or only vaguely relevant but have somehow become the standard and are now immediately clear to users. Will an email link be represented by an envelope icon in 100 years, when the only place to find an actual envelope is in people's attics?

How these icons break accepted icon usability rules

The accepted best practice for icon usage, in most cases, is to not use icons alone, but have them accompany text links. The benefits of icons are to bring emphasis to a link, make an interface more friendly and interesting, and to possibly provide additional meaning to a link. In theory, they are decorative elements to be adjoined to link text, and are too abstract to be understandable by users. Here's a good article from Smashing Magazine about icon usage.

However, the examples I mentioned are interesting cases where the icons deviate from these traditional rules because:

  • the icons are entirely decoupled from their literal meaning
  • they've become abstract symbols that have come to represent the interface action that they're commonly associated with

And because of these strong associations, they can appear alone, without accompanying text, and be perfectly clear. A floppy disk isn't seen as a picture of a floppy disk, it's seen as an abstract symbol that represents the action of 'Saving'. A picture of a printer means 'Print'. No text needed.

Conventions can be more advantageous than usability "rules"

This demonstates the power of conventions and user expectation.These examples conflict with the best practices of good icon usage, but are perfectly usable regardless. The general best practice is superceded by the convention.

This type of thing happens periodically in interface design, so, as designers, it's important to know both the "rule" and have a practical understanding of the design landscape and what other websites and apps are doing.






About Andrew Turrell
I'm a designer working in sunny LA. I lead the user experience of Trippy.com, and am an adjunct professor of Advanced Interaction Design at the University of Baltimore.
Andrew Turrell on Twitter Follow me on Twitter
Andrew Turrell on LinkedInCheck out my LinkedIn profile





Copyright 2011. All rights reserved.  Please contact me with any questions or comments.