We have all seen the hamburger icon. As a matter of fact, most of us probably use it on a daily basis. It has become a staple in website and app design. I’m even looking at it now on the top right corner of Google Chrome.
Lately, there has been much debate about whether the use of the hamburger icon and side menus, in general, is really a good idea. Especially when it comes to UX design for a website. But more people have been wondering where it came from and how it got to be so widely used.
The Creator
From there he e-mailed mister Norm Cox, who was delighted to share the origin story for the hamburger icon. Here’s what he said:
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)
After the Xerox Star, however, the hamburger icon disappeared for some time.
The Resurrection
With the new, much smaller, interface that smartphones had, designers had to look for a way to make everything fit onto a 4-inch screen. It is unclear what app used it first but some of the first apps that people remember using the hamburger icon are:
Voice Memos from iOS
This seems like it is the oldest occurrence (excluding Xerox) of the hamburger icon as a menu button. It came out June 17, 2009, and was available for the iPhone 3Gs. Clicking on it would bring up the list of recordings and options. Apple had already borrowed the mouse and the desktop from Xerox when it created the Macintosh, a small icon would not matter much.
Tweetie for iPad
Tweetie was the first app available for Twitter, created by Loren Brichter, who happened to be working at Apple at the time. This came out in 2008 and used the hamburger icon for lists. It seems like it is no coincidence that an Apple designer used this icon.
Facebook Makes It a Trend
Facebook seems to have also been a huge contributor in spreading the use of the hamburger icon for menus. It started out with this grid icon in 2008. It later added a row to the grid in 2009.
And lastly, in 2010 that grid became bars.
Facebook was already using the side menu and all they did was connect that grid. This seems to be one of the most remembered first sightings of the hamburger icon.
It looks like Apple was the biggest reason for the resurgence of the hamburger icon. They brought up the smartphone and the need for a compact display. They were already fans of Xerox’s ideas and they began using them on their interface. From there, huge social media apps took it over and everyone else followed along.
Currently, it is being used to represent side menus on websites and apps as well as lists. A few of the largest apps that use it are:
Reeder
Reeder uses the icon to get to your subscription lists.
Path
Path was also one of the first adopters of the hamburger icon and still uses it now to show navigation.
You can also find it on Twitters Bootstrap and Starbucks for navigation.
It has been popping up in the majority of apps and has become the industry standard to show additional options.
Websites recently began adopting it as well. The hidden menu works well for minimalist designs and has because extremely popular among designer websites.
And here is one from a construction companies website.
The Future
The hamburger icon has become a staple in both web and app design and it doesn’t seem like it will be going anywhere anytime soon. It has made its comeback and it seems to be here to stay. The hamburger icon has gotten quite a bit of heat from the UX/UI design community. Some people say it is a terrible thing that must be stopped now and be replaced simply with a menu or with a handy tab bar. Some hate and some love it.
Others have compiled lists of websites that use the hamburger icon for wonderful simple designs. So, is it really more of a matter of how and when it is used?
Where Did You First See the ☰ ?
Let us know in the comments below.