Have you ever considered the history of some of our most common icons?

One of the key rules of UX is familiarity. People can use products more easily when they look or work similarly to things they’ve used before. That’s why, over time, a lot of icons end up looking the same across different platforms — instant recognisability!

For example, we all know that a little envelope means a message or email. A telephone receiver means a phone call. A padlock means security.

Some of our most common icons. Illustration: Sophie Hodge

But have you ever stopped to think about how old-fashioned those representations are? And how far removed the digital actions are from their analogue versions. How alike are sending a text message and posting a letter, really?

These kinds of icons are known as skeuomorphisms. They’re iconographic representations that keep some of the attributes of the real-world object.

Some of the oldest ones have been around for so long that the objects they were based on aren’t in common use anymore. Have a look at the little microphone icon you probably use every day to mute and unmute yourself on video calls — which resembles the kind of mic you’d see crooners singing into in the 1950s. And when did you last (if ever) talk into a curved Bakelite phone receiver of the kind used in the ‘phone’ icon?

Evolution of the Instagram icon. Illustration: Sophie Hodge

Even logos use these tropes — take Instagram for example. The well-known square camera design was first based on a Polaroid camera from the 1970s, and later on a 1940s camera. It’s instantly recognisable as a camera, even though many of the app’s users are unlikely to have ever used a manual camera with film, physical knobs and buttons and a viewfinder. A secondary benefit of this retro icon is its nostalgic appeal.

With User Experience design, you must always strike a balance between innovation and ease of use. Most of the time, you don’t actually want to reinvent the wheel; you could add a bit of oil to the bearings, or re-balance the axles. You might have invented a brand new wheel that’s going to revolutionise how people get around, but if users can’t recognise it for what it is, there’s always going to be a difficult transition period and even the possibility of failure.

With User Experience design, you must always strike a balance between innovation and ease of use. Most of the time, you don’t actually want to reinvent the wheel.

Skeuomorphic icons help users to bridge the gap between something they know and recognise, and a new thing they haven’t used yet. In the early days of technology like mobile phones and the internet, they’d have helped people to understand new concepts by making simple comparisons. ‘Oh, sending an email is like posting a digital letter — once I know someone’s address I can send them a message’’.

Posting an email. Illustration: Sophie Hodge

They persevere too because recognisability is king. Even though children being born today may never use the analogue items these icons represent, they’ll learn that a curved line with a blob at either end means ‘phone call’, and that this icon will be the same across all devices and probably throughout their lives too.

So what about some of the more obscure icons? Take for example the hamburger icon — three horizontal, parallel lines which say, ‘there’s another menu inside here’. They’re often used on apps and websites designed for mobile phones, where there isn’t enough space for a full-on menu.

Believe it or not, this was designed in the eighties for Xerox and the three lines are supposed to resemble a list — the list of items in the menu. It apparently disappeared for many years and came back into use in the 2010s. The use of the hamburger icon has been widely criticised because it breaks the usability rule of discoverability — what’s inside the menu is hidden until the user opens it up.

A hamburger icon in use on the BBC website. Image: BBC Good Food.

But I think one of the key reasons this fails as an icon is because the thing it represents is too abstract. The rest of these skeuomorphisms represent physical objects, drawn in their simplest form, but they’re still recognisable and easy to tell apart from others. The fact that many sites and apps feel the need to put ‘MENU’ next to their hamburger icon shows that it’s failed in its job. Don Norman points out in The Design of Everyday Things that if you have to label a door with PUSH or PULL, your door design has already failed.

Waterstones uses the hamburger icon with a ‘Menu’ label. Image: Waterstones

The icon now is pretty well used, which means that yes, it’s become a convention that’s understood by people who regularly use digital devices. But there are some good alternatives too, which help users navigate more easily.

As useful as it’s been, I think the hamburger icon will disappear in the coming years. The hamburger icon doesn’t have the recognisability of some of our longer-standing skeuomorphisms like the telephone receiver and camera icon. Who knows, perhaps our descendants in decades to come will display our skeuomorphic icons alongside ancient Egyptian hieroglyphs in the British Museum?

The UX Collective donates US$1 for each article published on our platform. This story contributed to Bay Area Black Designers: a professional development community for Black people who are digital designers and researchers in the San Francisco Bay Area. By joining together in community, members share inspiration, connection, peer mentorship, professional development, resources, feedback, support, and resilience. Silence against systemic racism is not an option. Build the design community you believe in.