That little three-lined button is a fairly well used trend, in a lot of today's websites. Whether you call it a navigation drawer, or a hamburger, it hides certain features effectively, yet freeing up a lot of real estate space in tight constraints, like a mobile application.
It's not food, yet its consumed just as much!
Sorry we are not referring to the kind of hamburgers that you eat, in fact I am talking about that three lined menu that is usually placed on the top right hand corner of most screens. We at the Unmarketing Agency, use it on our website too, so what is it about this menu that has got pretty much all the new and old kids on the block using it so extensively?
From Facebook, Spotify, Zomato, a lot of the Google Apps, and well so on and so forth, you get the idea, the hamburger menu is very, very popular. But what is it that makes this simple menu system so addictive, and since it's so widely used, are there any cons to it?
Let's start with the pros ...
The hamburger menu started 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.
Our 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, minimal and oh so elegant.
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.
And my final pro? It's cool. Making things move and animate on a website is playful and engaging, right? Which then brings us to the cons ...
Let's get down to the negatives, the 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.
Our Conclusion
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 navigation isn’t of considerable size.