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, are 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.
It was designed by Norm Cox for the Xerox Star, the world’s first graphical user interface. Norm Cox is the co-founder of Cox&Hall and has been an interaction/experience design consultant since 1982. He also happened to design the document icon for the same interface. Geoff Alday is the amazing software designer who went searching for the creator of the hamburger icon and managed to find this video.
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.
With the new, much smaller, interface that smart phones 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 smart phone and the need for a compact display. They were already fans of Xerox’s ideas and they began using it 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 uses the icon to get to your subscription lists.
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 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.
“Can’t mention this enough: For web/UI designers, Placeit is a great online tool”
Six Revisions 5/5
Making a Killer App Is Not the End of the Road
Now that you are done with the technicalities and final design of your app, it's time for all your hard work to see the light. The app industry is one of the most competitive businesses out there and to be able to make your app stand out from the crowd you must learn to promote it like the pros.
Learn how to make the most of your iOS or Android app on our App Marketing category in the blog, from making mockups to promoting on Facebook and uploading the right iOS screenshots to iTunes Connect, we've got you covered.