Pros and cons of a hamburger menu
Sadly I'm not referring to the kind you eat, sorry for teasing you with that image. I'm talking about those three little lines found in the top corner of so many sites. I’m sure everyone is familiar with what it does by now thanks to Facebook, BBC, Spotify and a host of other popular sites and apps, but if you’re still unsure — and we find many people who are — then let me tell you. It’s what was previously all those links spread across the top of a website; the global navigation for a website that now hides behind a subtle and magical button that someone decided to draw a burger on.
Okay, I might be coming across a little cynical here, but you have to wonder; why are hamburger menus so popular? What are the pros and cons of this tasty piece of functionality?
Hamburger menu pros
The hamburger menu initially appeared on mobile devices, where space was at a premium and a large menu was required for a website with a lot of pages. Since then we have seen the emergence of responsive design, with a single website catering for all browsers and devices. Because of this, many user interface designers have adopted a ‘mobile first’ approach to keep the interface clean and simple, working across all devices. The idea was that if a site worked well on mobile then it would work even better on desktop where space and control is improved. Some designers, therefore, view maintaining a sense of consistency across browsers as a pro.
My second pro is around how clean and uncluttered a hamburger can make your global menu and header. Displaying a lot of links can sometimes create an untidy header; hiding all this behind a piece of functionality will keep your site looking slick and minimal.
All the kids are using them! This approach is obviously very common and heavily used, meaning users are associating the icon more and more with menus. This is particularly evident with users that have grown up with social media; it’s as if they’ve been wired into automatically looking for a burger menu. We're finding more and more in user testing that it's a 'learnt' interaction that users are gravitating towards naturally.
Spotify has embraced the hidden menu and they are well known for user testing so must have the data to back this approach up. However, the hamburger is just one of many ways of searching their vast range of music as they embrace a number of navigational elements.
And my final pro? It's cool. Making things move and animate on a website is playful and engaging, right? Which leads me onto…
Hamburger menu cons
They may be playful, but is there anything more frustrating on a website than looking for content without a visible and clear means of navigation? The kids might be down with the hamburger, but for those users who haven’t grown up with technology, they require a little more guidance and handholding.
So the big con clearly is its poor discoverability, hiding the menu behind a small button means it’s less likely to be found and can be the cause of frustration.
A hamburger requires an action or additional click before a user can use it. This involves added time and effort that a user might not be committed to, especially if it’s just one of many sites they’re visiting in a session. The fewer clicks you make to a piece of functionality, usually the more usable and intuitive. This theory has also been tested, which indicated that hamburgers were likely to be clicked 20 percent less than a traditional open nav.
The positioning of hamburgers in the top left-hand area on mobile screens can lead to poor usability as it's often the furthest away spot for anyone right-handed and forces users to reach across the screen to access the menu.
For sites that have only a small number of global categories, hiding them in a drop-down menu doesn’t make sense. One example that is guilty of this is T-Mobile. They have placed all their services and offerings within a drop-down menu labelled 'Shop', which actually only contains 5 links. These links could easily be visible and displayed horizontally across the top.
My final con is based around a particular type of hamburger menu, referred to as a multi-push menu. These menus are built of multiple steps or levels, allowing a user to click down through the site structure from within the navigation. While this might be a good way of quickly finding content, it can also encourage users to skip sections of a user journey through the site, meaning they may not get what they expected.
In summary and without sitting on the fence - this time, I feel the use of hamburgers can present some notable usability issues but ones that will only fade with time. They’re most effective on mobile and smaller devices for which they were designed and have a place on image-led sites for desktop. Use on desktop ought to be limited to those sites where the aesthetic dictates a hidden menu and the audience can be expected to use the hamburger intuitively. Users that need a little more guidance are likely to prefer an open menu on bigger screens, particularly if the global nav isn’t of considerable size.