Menu IconI fell into the trap I always warn others about. I always say that usability is key to a good website, yet recently I created a website that was less user friendly than it could have been.

The culprit was the Hamburger icon that appeared on the mobile version. If you’re saying, ‘What is the Hamburger icon,?’ I’ve probably already made my point. This particular icon is three lines (which frankly only by a long stretch of the imagination looks like a burger in a bap) that are meant to symbolize a menu.

Because it’s used on loads of major mobile sites including Google, Facebook and BBC, I assumed everybody knew what the icon meant. I soon found out how wrong I was.

Icons Are Essential

Let me say upfront, icons are essential in website design. Even more so in mobile website design. For a start, they take up less space than text. And, on the matter of usability, once people know what an icon means, they have to think less, so they get where they want to be faster.

‘Know what they mean’ is the point. When icons first gained currency, many were literal. If you wanted to print, you saw a pictogram of a printer. You could probably work out what it meant.

However many functions take place in a digital space which we cannot perceive visually. So other icons were metaphors. If you wanted to delete a file, you saw an image from the physical world such as a waste paper basket or a trashcan. The Home Page was represented by a little house.

Microsoft and Apple used a desktop for metaphorical icons

Both Microsoft and Apple favoured representing the digital world with a metaphorical desktop. Hence the proliferation of stationery images for icons- an eraser for delete, a paper clip for attach, an envelope for email and so on.

It seems we humans are desperate to make connections with things we understand. Remember how desperate people were to find a way of describing the three lines icon that they came up with a most unlikely Hamburger analogy?

This is probably why the purely abstract icons, like the curved arrow for ‘Reply’, were much more unusual.

The use of a pictogram of a floppy disk as the Save icon is interesting because it started as a literal icon: you saved items onto a floppy disk. Then, as the use of floppy disks died out, it became a metaphor. Now there’s a generation of users who have no idea what a floppy disk is, so they regard the icon as abstract.

It Take 13 Milliseconds to Identify an Image

That is the point about icons. It helps if they are representational, but ultimately you have to learn them. Even the printer icon may not be obvious to the first time computer user. Fortunately pictures are much easier to learn than words. A picture is famously worth a thousand words. It turns out that was just a guess. I’ve often seen quoted research says that the brain processes visuals 60,000 times faster than words. I’ve never actually seen the research so it may not be true but I have seen research that proves the human brain can take in an image in 13 milliseconds.

Many of today’s designers want to create modern abstract icons rather than use skeuomorphic images from a bygone age. Hence the Hamburger. Even the Hamburger icon will soon be known and understood by all.

In the meantime, I’m using adding a box that says ‘Search’ on the mobile websites I create.

Article Name
Icon Is Essential But What Does It Mean?
Many of today's designers want to create modern abstract icons rather than use picture images from a bygone age.