The Hamburger & Mobile Navigation Practices
The Hamburger Navigation (or drawer, side menu, slide menu, basement…it goes by many names) has become the ‘go to’ solution for navigation on mobile web & applications, but has recently come under fire from UX (shorthand for ‘User Experience’) experts for its inefficiency as a design pattern. It has often been a crutch to hide poor or badly organised content when a site is viewed on anything but a desktop – a potentially easy way to avoid organising a site flow for mobile users. Even Apple, who have wholesale led the mobile UI (User Interface) world since the launch of the iPhone have begun to turn their back on the practice, dropping the controller for the icon in Xcode.
On top of this backlash, reports have stated that using the icon on websites could well be costing you up to half of your potential customers.
There are of course two sides to the story and there are reports that claim the hamburger is now a well known shorthand for ‘navigation’ and its widespread use in the last few years has lead to it becoming the accepted way the mobile web works – and it’s actually the way the industry is approaching mobile-first design that we should be paying attention to.
Also: Google have taken the opposite view to Apple and have made ‘side’ navigation a central part of it’s Material Design guidelines: https://www.google.com/design/spec/patterns/navigation.html
Taking a path down the middle, I’ve broke down the debate into pros and cons:
- Clean layout
- Takes up little real estate on the page.
- Large site maps can be hidden inside it so as not to deter visitors.
- The icon is ubiquitous on the web – according to some reports, it’s starting to become ‘the norm’.
- It’s poor UX practice to hide navigation items.
- Takes extra clicks to get to your chosen page (1 to open menu, 1 to click nav item).
- Hides user’s position in the website.
- Not ‘scan-able (users to able to see where they are in seconds)’
‘The hamburger icon has, like it or not, acquired its meaning now, but users understanding what the button is for doesn’t solve the biggest issue, which is that hiding our navigation, hiding our users’ options, is a terrible act of self-sabotage.’ – Paddi MacDonnell – of webdesignerdepot.com
“In short, the hamburger icon is a symptom of our collective failure to wholeheartedly embrace all aspects of the mobile-first approach.” – Andreas Lerch
Working with the Hamburger Navigation to drive more conversions on Mobile
The 'Menu' Method
Studies show that replacing the icon with the word ‘Menu’ can increase your engagement by 20% (source: http://exisweb.net/menu-eats-hamburger) – so a really simple solution to the hamburger ‘problem’ would be to follow this data. Adding the word ‘Menu’ avoids all the ambiguity of the icon – no leaps in visual logic or previous knowledge of the web are needed, if you came across this you would know exactly what it was. (fig.1)
This is something we have utilised on many of our top converting sites, such as The Cocktail Trading Co, Texture Restaurant and Galet. A simple and elegant solution.
So we’ve solved the potential usability of the hamburger icon, but this doesn’t solve the problems of hiding your position in the site, your navigation not being scan-able and the biggest problem: demanding your users interact with your site in order to see the navigation.
Facebook recently took focus away from the side menu and implemented a simple tabbed navigation based on the functions its users clicked on the most. The burger icon is used as a simple ‘more’ or ‘all’ link, so you still have the useful part of the icon in that it keeps the page tidy, but you have the benefit of not hiding they key areas of your site. This change saw a significant engagement increase. (the actual numbers of this have not been released byFacebook, but the claims are widely reported: https://techcrunch.com/2013/09/18/facebooks-new-mobile-test-framework-births-bottom-tab-bar-navigation-redesign-for-ios-5-6-7/. Other websites and apps have been more open with their numbers when doing similar things: https://redbooth.com/blog/hamburger-menu-iphone-app)
It is the main goal of an eCommerce site to engage the customer and allow them to buy something as quickly and easily as possible within as little clicks as possible. So taking Facebook’s example, we could pull out ‘key categories’ (fig.2) This would involve using analytics to determine the most viewed a pages of the website.
The ‘All’ button would then act as a typical navigation, sliding in from the side/full screen takeover.
This would give the customer easy and instant access to the areas they would statistically visit more of them than not and a simple, easy user journey could potentially lead to more sales in the same way Facebook saw more engagements. We utilised this method in an early build of our Galet.com site
Below (fig.3) is an alternative layout for this, with the navigation items sized at 100% width and stacked on top of each other. This does take up more real estate on screen, but also draws the eye more.
A little information before we move onto the next solution. Reports show that the ideal position for the navigation icon would actually be at the bottom of the screen, based on the ease of reach of of a mobile screen when held with one hand (75% of mobile use is one hand according to UXmatters – http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php?)
Of course – ideal isn’t always a realistic solution, many eCommerce sites – including industry leaders such as www.backcountry.com, www.underarmour.co.uk and fab.com (source http://www.conversioniq.com/our-best-in-class-ecommerce-list-for-conversion-rate-optimization-purposes/) place the icon in the top left to keep the basket in the top right – as is standard best practice guidelines – the place where most users would expect it.
But for non-eCommerce sites, this method could be worth experimenting with. Below is a heat map for ease of reach of a right handed person using their thumb. With this heat map, we can see the easiest point of reach would be the bottom left corner.
And so we arrive here: (fig.5)
The website is now more inline with the UI of a native app, such as Facebook, Instagram or Twitter.
So in moving our UI to the bottom of the screen, we have brought the mobile view of the site in line with how a user would use a native app of the mobile. Buttons are now all easy to reach and you still get a large screen area to display the website – great.
It does of course come with a potential downside – we’ve now moved the website away from the desktop version. People expect the navigation to be at the top of the page, (oddly against the ease of use heat map) so in moving against this design pattern that has been set by almost every website in the world, we would run the risk of adding the unexpected to our sites, possibly confusing customers and having a negative impact on conversions.
Whilst the above are by no means the only solutions, it shows that we can work with the hamburger icon to help our customers navigate websites easier, faster and help our clients turn those page views into bookings, sales and sign ups. The hamburger icon seems to be here to stay, many websites use it on mobile views, some even adopting it for desktop navigation. It would seem that it may be something we need to embrace and work with rather than fully turn our backs on.
- http://thenextweb.com/dd/2014/04/08/ux-designers-side-drawer-navigation-costing-half-user-engagement
- http://www.theatlantic.com/product/archive/2014/08/the-hamburger-menu-debate/379145