The Hamburger Icon has become and increasingly frequent visitor to our shores, spotted regularly on our smartphones, tablets and computer screens – but what is it, who designed it and what exactly does it do?

Who invented the hamburger icon?

The hamburger icon was actually created by a man called Norm Cox, who designed it along with the first graphic interface, whilst working for Xerox Star, way back in the 1970s and 80s. It spent more than 30 years in the doldrums until it reappeared in the Twitter app Tweetie in 2008. It is now used in app design by some of the world’s most famous brands including Facebook, Gmail and Starbucks. You may also have encountered it on browser interfaces, as both Google Chrome and Mozilla Firefox use it.

What does it look like and where can it be found?

The hamburger icon is made up of three horizontal lines stacked on top of one another, often positioned in the top left or top right of your phone, tablet or computer screen. It is called a hamburger symbol because at its most basic level it looks a little like a hamburger – a beefburger and the top and bottom of a burger bun!

What does it do?

Since 2008 the popularity of the hamburger icon has been steadily increasing, but how many people outside of the design industry actually know what it is and what it does?

The hamburger icon is actually a menu symbol. Tapping or clicking on the icon opens up a menu giving the user access to a whole raft of additional pages and features not immediately visible on the screen. The icon is often used because it takes up a minimal amount of screen “real estate” allowing users to see important website content when they first access a website instead of having to scroll through swathes of cumbersome page and navigation elements. This gives the app or website a clean, minimal look. Sometimes the symbol is put in a button or the words menu are added next to or beneath it to increase usability.

The hamburger symbol is more often than not found on smaller devices, particularly in app design. It is increasing in prominence on websites viewed on smartphones as a result of the surge in popularity of responsive web design. Here, page content that is normally displayed in the navigation bar of your website on desktops, is hidden behind the hamburger symbol when your website is displayed on your smartphone.

So now you know what it looks like, where it can be found and what it actually does, make sure you come back and visit us next month when we will be discussing the relative pros and cons of the hamburger symbol in our article “The Hamburger Icon – Love it or Hate it“.