Reduce UX Friction: Friends Don’t Let Friends Use Hamburger Menus

top header image

I want to start by saying, if you have a website with a ton of categories and sub-categories stop reading. Sites like Walmart, and Nordstrom, you’re cool. We’ve designed many sites that need the hamburger menu, but the majority of websites don’t. They see the big guys do it and think, well I guess that’s best practice!

facepalm

The biggest problem I have with the Hamburger Menu is that it adds friction to navigation. The rule of thumb that any UX Designer strives for is to get anywhere on a website in 2-3 clicks/taps and having a hamburger menu uses up at least 33% of those clicks.

Related: 5 Ways to Reduce UX Friction for Better UX

So why does anyone even use it?


Well if your website is geared towards a younger demographic, it’s a very recognizable icon, more so than the link or share icons, and neither has been universally agreed upon. share-iconIf you’re geared towards an older demographic, and i’m talking about you BMO Mobile, at least add the word “menu” underneath. However, I want to be clear i’m not saying stop using the Hamburger and start using the word Menu, that’s not my point and makes little difference. Many baby boomers and those less web savvy (both my parents had never seen a hamburger icon before and have iPhone 5’s) simply get lost and frustrated.

But to answer the question, “Why people use it?”: The icon serves its purpose, it save space on a small screen, and allows for a clean design many clients are happy with. It’s much like smoking, where it’s not good and now many of us know this, but it’s really hard to stop, so many just take the easy way out instead of solving the problem.

Related: Magento Mobile Off-canvas Navigation Menu – [Tutorial]

High Level Problems:

Minimal Discoverability

From a UX point of view you should never force a user to make an action before they can even figure out what their options are. Expecting a visitor to go hunting for the page they want is bold, although on this page (http://editions.ayr.com/), I did a lot of hunting, and enjoyed it, but that’s not normal. It’s easy to blow past the menu, start scrolling, not find what you’re looking for, and bounce. Many come to a website with an intention, usually looking for something and if they don’t see it within a few swipes and don’t tap the hamburger, you’ve lost them.

Hides Information Architecture

Having a side menu although often difficult to layout on mobile makes it clear where the user is with menu option down states and sub categories. Without this it’s much easier for the user to get lost and miss how pages flow and relate to each.

Many Apps Like Facebook Have Moved Away

The new Facebook and Twitter apps allow you to see your options at all times and if you came to browse your timeline, check messages, or notifications, it’s all there right in front of you, un-missable.

iOS7update

The Change Blindness Phenomenon on Mobile Devices

First, a Wikipedia definition, they’re really quite good:

Change blindness is a surprising perceptual phenomenon that occurs when a change in a visual stimulus is introduced and the observer does not notice it. For example, observers often fail to notice major differences introduced into an image while it flickers off and on again. People’s poor ability to detect changes has been argued to reflect fundamental limitations of human attention.

A study performed by the University College London on Change Blindess during mobile device usage, suggested newly inserted objects were correctly identified more often than changes applied to existing on-screen objects. This is especially the case when the object is not the focus of attention. For example, going from one mobile site to another where both use a Hamburger Menu. This study indicates the importance of Change Blindness on standard Hamburger Menu’s, and UX/UI designers cannot afford to ignore this for the sake of style or simplicity.  One may argue that with such a small screen on standard mobile devices, it’s not possible to lose attention as items change, or miss an entire navigation. However, this study tested changing various aspects of a mobile interface and found as much as 67% of users did not notice the top navigation when presented with centre screen visual display environments.

Hamburger Vs. Top Nav – A Real World Test

Anthony Rose, the co-founder and CTO of Zeebox (a social network for TV), ran an A/B test which he documented on thenextweb.com. Before this test, they just switched from a top nav to Hamburger Menu assuming it was better and got rave reviews on the new clean design. After reviewing their engagement numbers it was a disaster, engagement time halved.

Months later they decided it was time for an A/B test since there could have been external factors when they just switched the first time. During the 48 hour test, 15% received the Hamburger menu and 85% received their current, not as pretty full nav.

tv-socil-web-graph

As expected, weekly frequency went down, daily frequency went down, time spent went down. It’s clear the Hamburger Menu looks better but severely impacts engagement.

So What is The Solution?

Well times are changing, mobile and tablet traffic is slowly overtaking desktop traffic and with this must come a fundamental shift in how companies look at mobile. For the overwhelming majority of businesses, they think desktop first. After they’ve finished a smoking desktop design, they then think, how can we get these 9 menu buttons with drop downs onto a responsive mobile site? Well the easy answer is throw everything in a Hamburger Menu, but as the tides turn we, must lead the way and the simple answer is, simple.

Facebook had a great mobile app, as did Twitter and both had Hamburger Menu’s. Why then did they move away from that, to be different? No, in fact, Facebook launched a separate Messenger App that did exactly the same messaging as the main Facebook app, so what was the point?

By launching a second stand alone messenger app it allowed the the app to be easier to use, intuitive, and most importantly, simple. Whatever you want to do, it’s just two taps away. Send a message to Em? Tap people -> Em -> and you’re in the chat. Not only did this allow a beautiful design, but it paves the road to make messages a secondary feature on the main Facebook App and help them clean up the very busy Information Architecture.

We should also note that Facebook saw increased conversions when switching from the Hamburger to a menu bar. The hamburger is still there with the word “more” under it, and I dig it Facebook. They’ve brought back the discoverability and 9 times out of 10 (Made up stat) a user opens the app and their intent is on the screen, be it, creating a status,  reading notifications, or finding their newsfeed after navigating somewhere else. If a complex feature rich app like Facebook can do it so can you.

SO, if you have a Hamburger Icon, you need to be more focused and simple. A clean, minimal toolbar can be enough, just as long as the navigation is not hidden. If there are 9 functions in the menu on your website, I guarantee you can remove at least one if not more. The user is on a mobile device, not everything applies or is absolutely needed. Build a mobile first design, pick what’s important, throw it in a navigation bar and keep it to 5 menu items/icons making one of them “more” if you have to. With a less complex set of options users will easily navigate around and your engagement/conversions will increase, I guarantee it, or your money back.

Want to keep up on all
things ecommerce?

Subscribe to the Demac blog!