Mental models: when icons go bad

As a web designer, there are numerous ways you can showcase your creativity and talent. Coming up with ‘clever replacements’ for well-known graphical icons is definitely not one of them.

Some symbols are fully ingrained in our collective consciousness, and it’s usually wise to accept and respect this. Witness the near-immortal ‘floppy disk’ Save icon – a symbol derived from a long-dead piece of technology, yet an eight year old child (who has never even seen a floppy disk) will intuitively understand it.  It ‘just is’.

This phenomenon is often called the mental model, and respecting your users’ mental model of visual elements on your site is crucial. While most designers would think twice before messing with the Save icon, crimes against other symbols do happen. Take the ubiquitous Play button, as seen on countless media players, streaming sites, and massive white plastic Walkmans from the eighties:

sony walkman collection

When designing a Play button for a web application, most designers wisely stick to the dominant mental model: a solid equilateral triangle pointing to the right, usually with the appearance of a chunky physical button (it’s that massive Walkman again).

Erm, all except one. It’s our very own BBC iPlayer!


In a triumph of branding over functionality, the Beeb decided to ‘cleverly’ incorporate their iPlayer logo into the Play button itself. Even though the icon still loosely resembles a triangle, it’s different enough for the end result to be thousands of awkward pauses and utterings of “Huh?”, as disoriented users across the globe take 5 painful seconds to hunt for the Play button while attempting to watch the Eastenders Omnibus.

This failure of quality control could have happened for a number of reasons:

  • Maybe they paid their expensive branding agency so much money, they felt compelled to get their money’s worth by spreading the logo across the site.
  • Maybe the designer confused himself with a revered Italian renaissance painter, and his Photoshop screen with the ceiling of the Sistine Chapel.
  • More likely, the whole team were over-exposed to the symbol during the couple of months build time, and so were blind to the problem.

Whatever the cause, thorough and well-executed user testing would have caught it.

To sum up, when you’re designing icons: respect the users’ mental model, don’t be clever-clever for the sake of it, test your site with real users to make sure they intuitively understand it…

…and just say “No” to Michelangelo.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.