SwordsweeperDesign The Hamburger Icon

The Hamburger Icon

The History

In the early 1980’s Xerox introduced the concept of the desktop as a graphical user interface (GUI) to the world. Part of that design was the inclusion of icons to represent common items or tasks, this included an icon for a contextual menu. Today most designers will lovingly call it the “Hamburger” icon and it is used on buttons which reveal hidden menus. Gizmodo set to track down the history of this icon and discovered Norm Cox was the original designer. In a response to Gizmodo he writes,

“I designed that symbol many years ago as a “container” for contextual menu choices. It would be somewhat equivalent to the context menu we use today when clicking over objects with the right mouse button.

“Its graphic design was meant to be very “road sign” simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16×16 pixels to render the image. (or possibly 13×13… can’t remember exactly).

“Interesting inside joke… we used to tell potential users that the image was an “air vent” to keep the window cool. It usually got a chuckle, and made the mark much more memorable.

“It’s been nice to see that so many of our designs from those early pioneering years have stood the test of time and become ubiquitous symbols in our UI’s.”

The Design Pattern

With an understanding of the intentions of the designer and how this icon has been used it the past it is only natural that designers would use it as a pattern to represent a contextual menu on a website or an app. But recently there has been a backlash in the design community and a push to remove this design pattern from apps and websites.

Some designers state that users don’t understand what the icon represents and don’t know to click the menu to find more options. But it is more complicated that that. The drive to remove the pattern is not about the misuse of the icon but hiding functionality and content from your users.

We shouldn’t assume that our users will be as intimate with our designs are we are, or that they ever will be. What is hidden out of site may never come to light. Your users will not spend the time to click on every button in the UI.

TechCrunch thoroughly details the pitfalls of this design pattern and how it is detrimental to your applications. The article offers up several solutions that others have implemented to combat the challenges of screen space.

The message

What all designers should understand is that icons are designed to solve communication problems in a limited amount of space. And while the purposes for each icon may vary and evolve over time, it is important to remember that they convey a message. In this case the “hamburger” icon’s message is exactly what it was designed to convey, “If you click me you’ll get to see a hidden menu.”

Just remember, don’t shoot the messenger for doing exactly what he’s supposed to do.