It goes by many names: the hamburger, the side navigation, pull-out menu, the air vent.
It's the little menu that lives all over the web now – the small, three-lined icon promising a world of wonder and riches at just the tap of a finger.
But the hamburger is plagued by controversy throughout the web design community.
So where did the little three-lined wonder come from, why all the kerfuffle, and is it a good thing for your website?
History of the Hamburger
The hamburger's first recorded siting was in the 1980s with
Xerox Star. A tremendously successful and talented man named Norm Cox designed all of the iconography, and earlier this year
Geoff Alday tracked him down.
This is what Norm had to say about the hamburger:
Its graphic design was meant to be very "road sign" simple, functionally memorable, and mimic the look of the resulting displayed menu list
In about 2009, the icon resurged with its inclusion in
Apple iOS on the iPhone 3GS, and then it really hit its stride. Now, it's on pretty much everything.
If you’re in Chrome, you can see it in the top right corner. It’s also used in WordPress, Starbucks’ app, Twitter Bootstrap, Uber, and thousands of other websites and apps.
Hamburger Hysterics
Okay, "hysterics" might be going a little far, the but the hamburger certainly raises passions web designers.
There are three core challenges with the hamburger:
- Reduced engagement
- Increased amount of work that users have to do
- Treats the symptoms of a larger problem
The problem with the hamburger is that it had a negative effect on engagement –
and this is supported by at least some A/B testing and user testing.
It really boils down to: people are not going to look for what they don’t know is there.
It’s the flipside to the hamburger – yes, everything is smaller and you use less valuable screen real estate, but if something awesome is hidden in your menu, most users aren't going to look if they don’t already know it's there.
The second issue is that the hamburger makes your navigation harder by adding a click to it. More clicks = less engagement.
And finally, the hamburger is a way to avoid treating a larger problem – poor Information Architecture (IA). Hamburger-haters argue that if a site needs one, then its IA is too complicated and it should be streamlined or broken into unique apps (à la Facebook Messenger).
What it’s good at
But the hamburger’s surge to power isn’t a brainwashing conspiracy plot. It’s actually really useful for a lot of stuff,
especially responsive websites.
If a site is responsive, then the mobile and desktop content and experience is going to be similar. This is great – except on a desktop, you can (and often need) IA that is far more complex.
And that's okay. But when you take that experience and reduce it to a 4-inch screen, it gets a little cramped.
The hamburger squares away complex navigation of a bigger site onto a smaller screen.
Plus, most people, especially in younger demographics, recognize the hamburger.
So the icon is increasingly synonymous with expanding menus, which means that even if users’ engagement is affected, they probably still know that the little lines might lead to bigger and better treasures.
Should I use it?
Yes and no. Like everything else in the world, it depends on the situation.
For complex sites, especially responsive web design sites, the hamburger is a useful tool in a web designer’s toolbox, and one that can solve many problems quickly without compromising content.
But the anti-hamburger party has some valid points, particular that a hamburger might be symptomatic of deeper IA problems.
The best option is to rework the IA at least a little and streamline it as much as possible.
On an app with multiple core functions, consider breaking those functions into two separate apps (also known as “unbundling”) to provide a more focused experience.
For a responsive site, a hamburger menu might just be the best option.
Winston Churchill is quoted as saying democracy is the worst form of government except for the rest. The hamburger is like that – it's not really good per se but it is definitely better than the rest.
