10 May, 2015

The hamburger icon explained

the hamburger icon explained
Most people are by now familiar with the three little stacked lines visible, usually in a top corner, on websites. What they may not know is that this little symbol is referred to as the hamburger icon. Why? Because it sort of looks like a hamburger—bun, burger, bun—without all the fixin's of course.

Invented by Norm Cox, a graphic designer at Xerox in the 1980s, the intention was to replicate the look of a menu, e.g. lines of items, and to indicate that there was more information available behind that icon [1].

In common usage now the hamburger icon is simply a cut down menu for small screens. After all, trying to select miniaturised menu items on a website using a smartphone is an exercise in fingertip precision, and one designed to have site users going elsewhere in frustration.

Our website is what's known as a responsive site. That means that it automatically adjusts itself depending on the screen size used to view it. When the screen size reaches a certain point the hamburger icon takes over from the standard menu. Clicking on the hamburger icon opens up a stacked menu ideal for easy menu selection or less nimble fingers.

the hamburger icon explained

As you can see on the screenshots from our website we've enclosed our hamburger icon in a blue box. This is to make it more visible—often the three black lines version can be missed. By making it look like a button it increases user visibility, and cuts down on those teeth-grinding moments trying to find a menu.

Of course, when a mobile device is being used then the hamburger icon should be right in the users face as it should be the only menu option, and your site users will love you for it. The great thing about the hamburger icon is that its meaning is universal; it visually translates as a menu in all languages and countries conversant with website and mobile device use.

I've blogged about responsive/mobile-friendly sites before, and their benefit to website users—your potential customers, as well as getting priority in Google mobile search results. If you haven't gone mobile-friendly, and don't have a hamburger icon, then perhaps it's time to review your internet strategy.

1. http://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787