In defense of the hamburger menu
Do a quick Google search for the “best examples of mobile navigation” or any similar alternative and you will be met by recommendations for just about every type of navigation conceivable that isn’t the “hamburger menu”, “navigation draw” or “triple bar”, as if every web designer just so happens to also be a militant vegan that can’t keep their dietary preferences in the kitchen.
Josh Constine outlines several reasons for seeking an alternative, including that navigation that is hidden away is often forgotten about. Having users interact with a button before they can even complete simple tasks is surely going to have an impact on the user experience, decreasing efficiency and throwing up hurdles for them to jump over in order to achieve their goal.
Page Laubheimer also argues that a lot of people simply don’t know what the icon is supposed to stand for, and admittedly it is not as clear of a call to action as the classic “gear” settings icon we’re use to seeing on mobile user interfaces these days.
James Archer points out that often, users just don’t know where they want to go when they go on a website — this is especially the case on first arrival. Having a navigation system that is not hidden away is a great way of prompting the user to visiting certain areas of the site, and ultimately sticking around.
But what are the advantages?
Jakob Nielsen outlined 5 principles of usability to bear in mind when designing interfaces in 2012. They are:
- Learnability: How easy is it for users to accomplish a task?
- Efficiency: Once users have learnt how a design works, how quickly can they perform tasks?
- Memorability: If the user stops using the design for a while, how easily can they re-establish proficiency?
- Errors: How many errors do users make? What is the severity of these errors? How can the user recover from this error?
- Satisfaction: Is the design aesthetically pleasing?
Learnability
The argument that many people simply don’t understand what the hamburger menu icon is may have been true 4–5 years ago, but now it is so common that you would be hard pressed to find someone who hasn’t at least used one. Understandably, the icon itself is not that clear, but there aren’t many alternatives to convey a “menu”, and just like when touch gestures such as swiping and pinching became the norm, once one design is adopted by most, it quickly becomes second nature to the user. Changing the hamburger menu icon at this point would probably do more harm than good.
Efficiency
Having users overcome obstacles to complete tasks is never a good thing, but when designing for mobile devices, compromises have to be made. The bible of all things mobile first, aptly named “Mobile First” by Luke Wroblewski stated that major organisations such as Google, Adobe and Facebook were planning to adopt mobile first design methods going forward, and that was in 2009. Mobile first is the prime example of embracing constraints in web design and designing a navigation system with many links on such small devices is never going to be perfect. Having the users touch one icon is about as efficient as it can get when there is such little screen estate to work with. Hiding the navigation also improves efficiency elsewhere in the site, instead of having a large clunky menu that the user has to scroll past every time they land on a new page, they can tuck the menu away for later use.
Memorability
Again, the ubiquity of the hamburger menu can only be seen as a positive for memorability.
Errors
Error handling is, in my opinion, the major downside of a hamburger menu. If the user selects the wrong page, they then have to scroll up to the top (if the menu isn’t fixed) and select the icon again. If this is done several times, it could get tiresome. However, we’ve already established that when designing for mobiles, compromises have to be made and there aren’t many other solutions that improve this situation. Navigation thumbnails mean the user doesn’t have to reopen the navigation, thus improving efficiency however they increase the overall size of the page which can tip the scales the other way if the website contains a large number of them. Dropdown menus carry the same problems too, only horizontal scroll bar navigation systems handle errors fairly well, but again, with the size of the navigation comes more scrolling in the event of an error.
Satisfaction
The satisfaction of an interaction is mostly subjective, however hamburger menus don’t have to just be the standard triple bar. There are many creative solutions for both the icon and the menu itself.
As for satisfaction, @eva_trostlos’ smooth icon transitions provide the user with feedback and slick interaction
@MergimUjkani has a fantastic example of an “outside the box” navigation system using the hamburger icon
Or how about this literal “Burger” menu from @nilbog?
And what about the alternatives?
Dropdown Menus
The dropdown menu does avoid any confusion as to what the call to action actually is, and it may help the user find out what they want, however it does not solve the problem of hiding navigation away, instead it merely replaces the icon with some text.
Navigation Thumbnails
These work great for products or other pages which could be displayed with some sort of image or icon, however what about “FAQs”, “Contact Us” or “Legal” pages? Creating arbitrary icons for these won’t even be as recognisable as the hamburger menu icon. Too manyof these will also overwhelm the user, overflow the screen, and will be below the fold so the user has to swipe down anyway.
Horizontally Scrolling Toolbar
Possibly the most popular alternative to the hamburger menu, this consists of a typical navigation bar spanning the whole width of the screen, that is scrollable horizontally. Below is a great example and tutorial from Steve McKinney:
So, to conclude, The hamburger menu isn’t perfect. We all know that, but there are far worse navigation solutions for mobiles out there, and there are ways to make it better. The cop out (yet true) answer to what navigation system to use for a website is that it depends on the size of the website, how many links will be in the main navigation, and whether or not images/icons are suitable for those links. Whichever method you go for in the end, don’t be so quick to ban the burger.
