hamburger icon button

When viewing a website on a mobile device I often see the site menu hidden behind a hamburger icon. I am not so sure that it is actually a hamburger icon, but it is called that because it consists of three lines that look like a bun with a patty in the middle.


The problem from a design perspective is that is assumes that the visitor to the site knows exactly what it represents. Sometimes as in the case on the CNN website above they feel the need to add the word menu next to the icon just so you know what it is (which seems to miss the point of having the icon in the first place?).

But on other sites like use it so prominently that it makes me think that designers just assume that every knows that clicking the hamburger icon will show the site menu:


it actually represents a list

According to Wikipedia it was created by Norman Cox as part of the interface for Xerox Star, and reading further it seems that the icon actually represent a list. That is a list of three items, and clicking the list icon expands the list. Seeing it as a list (rather than a hamburger) makes better sense from design perspective.

Some sites have taken this into account and the LA Times website use four lines rather than three and they include the word Sections. They also actually have a horizontal menu of important sections rather than just use a icon:


smaller screens require icons

As more and more people use smaller screen it is necessary to maximize the limited screen space by making use of icons and only time will tell if the trend to use the hamburger icon button as a menu link will continue. There is a good chance that it soon will join other icons like to magnifying glass and the shopping trolley to represent website features without having to use text. My concern is that it does assume that your site visitor knows exactly what it means and what will happen if the click or touch the icon.

Microsoft menu with hamburger icon