Chances are, if you’re reading this article, you already know what a hamburger menu is. In fact, according to statcounter.com, it’s likely that 50% of you are reading this on a mobile device, and there may even be a hamburger menu staring back at you right this second.
For anyone who’s not clued in, a hamburger menu is an icon consisting of three lines that, when selected, will expand a website or app’s navigation to the user. The primary objective is to condense secondary pages and information into the smallest space possible, as to leave more room for the primary information to be accessed easier. Seems like a foolproof solution right? So why do some designers have “beef” with the burger?
1981, the year the DMC Delorean, Britney Spears, and the Xerox Star were born (2 of which are fantastic, but I won’t say which ones). The Xerox Star was the world’s first commercial graphical user interface and is essentially the “original gangsta” of personal computing. Two of the biggest design innovations from the Star were the “Desktop Metaphor” and the invention of computer iconography, both credited to David Canfield Smith. However, before the Star’s release, Smith and the other principal designers agreed that Smith’s original icon designs needed a more professional look. They enlisted the help of Norm Cox for the redesign and thus, the hamburger menu was conceived.
Then it died.
For almost 30 years, the icon seemed to vanish, but with the development of smartphones, designers needed a better way to compact lots of information into a small package. In 2009 the iPhone 3Gs had what seems to be the first mobile usage of a hamburger menu for the Voice Recordings feature (Tweetie’s 2008 app technically came first but used three horizontal dots and “more” on their button instead of the three rows). Now, hamburger menus are everywhere — but as Norm Cox will tell you, they can be a “two-edged sword”.
Pros and Cons:
There are enough “hamburger pro/con” lists on the internet to fit into its own hamburger menu, so I’ll be brief.
- They’re ubiquitous and recognizable. Everyone and their cat knows what they are.
- They’re clean and clutter-free. Nobody needs option overload anxiety.
- Click rates are low. People assume the information is less important and are less likely to explore the options unless necessary.
- Real-estate. Navigation bars are small, but they still cover up a percentage of the screen that could be used otherwise. This goes especially for smaller phones.
There’s really no perfect method that will work for every application, which is why designers need to be smart and test at every stage of development. That being said, here are a few menu alternatives that may one day overtake the burger popularity.
Tabbed menus are fantastic because it takes one less step from the user’s journey to “Point B”. However, if you have more tabs than what can fit on the home screen, you may need to think about slider interaction.
To be fair, this style doesn’t help with the real-estate problem, but it allows the user to stay on the home screen while they search for the next option rather than having a menu pop out and then having to exit the menu if they still can’t find their destination.
Ok before anyone gets too angry, I know! This is just a triangular hamburger menu. It doesn’t actually solve many of the problems that the regular hamburger menu has, but there’s one key property that makes this little guy useful. It’s at the bottom of the screen.
Phones are getting larger, but our thumbs aren’t (yet.). So if you’re going to use the burger, you may as well place it at the bottom where it’s easily reachable with one hand. Concurrently, if there’s no necessity for anything else to live at the bottom, you may as well make it triangular and tuck it into the corner for those extra 50 pixels of room.
Minimalism is still a hot topic in design, and many designers may want to remove any and all clutter from the home page entirely. So how will we access our beloved menus? Finger gestures are coming up in a big way and apps are already using swiping for slide out menus. However, since swiping is already used for so many interactions, maybe implementing a three-finger pinch could be the next big thing? Tinder is a fantastic example of how easy it is for users to adapt to interactive behaviors. So much so, that “Swipe Right” has become part of our lexicon.
The drawback? Once again, this doesn’t solve all the problems with the hamburger menu. If anything, it would likely reduce click rates. Also, the app onboarding process would have to teach users how to access the menu, which would likely end up with a lot of headaches and deleted accounts. Nonetheless, all it would take would be for one large app such as Facebook to adopt this feature and the rest will likely follow suit making it as ubiquitous as the burger.
Like the pinch, the shake is another method that completely removes all traces of menus from the home screen, which creates the exact same benefits and drawbacks as the pinch. Once again, this would take a lot of cultural re-programming, but like Tinder, the game “Heads Up” is a great example of how easy we learned how to use device motion triggers to interact with our phones.
So what’s next?
As the saying goes, “if it ain’t broke, don’t fix it”. I don’t see any of these styles overtaking the popularity of the burger anytime soon, but who knows if they may be the link to something greater? Hamburger menus work just fine in the majority of applications and it’s really up to the test results to know if its the best fit for your app. That being said, designers don’t win awards by following the rules. They make new ones.