A question raised at a recent Staffs Web Meetup was:
"Is the hamburger menu a lazy solution?"
On the face of it, the answer to this loaded question is yes, of course, but that’s not the end of it.
Although the answer is yes, who says lazy is a bad thing?
It was eye opening as to how little people actually knew about this important piece of UI, how far it had come and how quickly people were to dismiss it.
When it comes to interface design, people seem to be quite quick to quiz whether it’s lazy to just copy design trends rather than think up their own.
In the case of the hamburger menu, the answer seems obvious to me.
The reason why so many people use it is that Facebook spent thousands of pounds teaching us what it is and it is baked into Bootstrap making it easy for web developers to consume.
Google has baked it into the Chrome menu, and Xerox invented it in 1981, originally intended to represent the look of a menu list.
You might think then, that it’s a bad thing to just lazily use a tried and tested design pattern. It’s not, it’s often exactly the right thing to do.
So what’s lazier than lazily using the hamburger menu?
"I then decided to test the hamburger icon against the word MENU"http://t.co/80iJTN34jS— Luke Wroblewski (@lukew) February 18, 2014
Lazier is what we used to do before the hamburger icon. Just a menu button that says “menu”, but in A/B testing you may find that it actually performs better!
The key with the user experience is to make it obvious. When your users can’t figure out how to navigate your application, that’s when being lazy is a problem.
"Remember, the three key things about an intuitive navigation system is that they tell you where you are, and they show you where else you can go. Hamburger menus are terrible at both of those things, because the menu is not on the screen. It's not visible."
So yes, the hamburger menu a lazy solution, as is a “menu” button.
Don’t fall into the trap of premature optimisation.
It’s a good idea to “lazily” implement a tried and tested solution, then A/B test against another solution once you’re confident it’ll bring value to your application.
Or maybe just don’t have hidden content at all…
My biggest gripe w/ the "hamburger" menu isn't the icon, it's that it has become a way to get all our old desktop menus on mobile.— Luke Wroblewski (@lukew) March 12, 2014
For most of us, the simplest and laziest approach is going to be absolutely fine, but then if you’re working on a cutting edge project, you probably want to spend a bit more time working out a more creative way for users to get to what they want.
Hint: It’s less about the icon itself and more about the application on a whole.
Since originally writing this, you’ll find that you only need to take a look at the latest Pinterest iOS app to fully appreciate what I mean.
This new application appears to be completely devoid of the hamburger menu and instead has easy to navigate on screen icons.
As for the rest of us, I don’t think we’re truly ready to bin the hamburger menu just yet, but we can certainly begin to consider it.