Hamburger Hate & The Problem With Mobile Navigation

I’ve seen a lot articles lately criticising the hamburger icon as a symbol for mobile navigation. The debate is whether the icon is recognised widely enough for it to be used as a navigation button for mobile apps and occasionally websites (see below). The quick answer is no, it isn’t – at least not yet anyway. But the more hamburger articles I see, the more I think we’re missing the wider issue with mobile UX and navigation.

HAMBURGER MENU WEBSITE

Paddi MacDonnell touched on it in his own hamburger article for Web Designer Depot Рaddressing the UX impact of a hidden menu that users have to click. However the design principle deserves an article in itself as we move deeper into a mobile web that we still have a lot to learn about. The fact is that mobile navigation as we know it still lacks usability in many ways and the hamburger is just one small part of it.

What The Hamburger Icon Really Means

Let me start by making it clear that the hamburger still has a place in web design. If you happen to be reading this on a mobile device you will notice one to the in the header – and that’s fine. This website targets web designers who understand its meaning and undoubtedly use it in their own projects.

rmm-en-intro-img-sapphire

I took a different approach with my own website because my target audience are business owners and I can’t assume they understand what those three lines imply. Designers need to take the responsibility and decide when it’s okay to use the hamburger icon – and that depends on the audience. An icon fails the moment a user doesn’t know what it means and it’s our job to communicate functionality with our use of symbols.

I opted for the word “menu” with a border around it for my own site – which happened to get the best results in this exisweb test. But, at the same time, I’m still not happy with it and this brings us on to the wider issue of mobile navigation.

menu design

Time for a Different Approach

Instead of using our valuable time debating the effectiveness of a hamburger icon, I suggest we pay more attention to the crux of the issue – that mobile navigation so far simply hasn’t been up to scratch. The vast majority of websites are still developed for larger screens and even responsive designs settle for graceful degradation, which results in a full navigation squeezed onto a tiny screen somehow. Which is where the hamburger comes back into play, with a hidden menu replaced by those three lines for access to the main navigation.

However, it is worth asking the question when has hidden navigation ever been good for user experience? Not only do you add another click to page navigation, but you end up hiding the menu so that users have to click a button just to see what options are available. The list of UX gaffs goes on too and we’re talking about a pretty lazy design here – no matter what icon you choose. The hard truth is we need to take a good look at our approach to design for mobile in general if we are going to deliver a genuine user experience across multiple devices.

Finding A Solution

As things stand the best single-site solution we have is Mobile First. Many designers will grumble about this, but the fact is we have to drop the concept of designing primarily for larger screens. I’m not saying mobile first is perfect, but the sooner we drop graceful degradation for progressive enhancement, the sooner we will start to make progress with mobile UX. There are already some beautiful examples of large screen designs using vertical navigation that look like they have employed a mobile first philosophy.

responsive-vs-mobile-first-webdesign-022-1024x689

The same thing applies to navigation and if we start new projects with a blank canvas – a much smaller one at that – we have to come up with a new solution to the navigation conundrum. Which means going back to the very structure of a website, creating a more streamlined architecture and designing a navigation works within your mobile design, instead of shoving it off the screen.

The Challenge

It’s easy to sit here and talk about how much mobile navigation sucks, but we need solutions if we are going to turn this around. So I suggest we ditch the off canvas approach and force ourselves to come up with on-page menus that address the UX issues of responsive navigation.

If menus are too big, you need to find a way to make them smaller. If there are too many pages, you need to rethink your structure or create a layered navigation that doesn’t impede user experience. Some websites are ¬†Mobile apps have got it nailed when it comes to creating a focused application with intuitive navigation. We have a tougher challenge with the mobile web, because we normally have more content to deliver and SEO to think about as well.

These are the kind of challenges we should thrive on though. We just need to stop being lazy and chucking in another hamburger when we could cook something up ourselves – especially when it comes to something as important as navigation.

New Ideas

I have a few ideas myself that I want to test out before I’m brave enough to share them. In the meantime, I would love to hear people’s opinion on the mobile first approach and navigation so please drop me a comment below.

1 Comment

  • Adam Lein says:

    Another major problem with the hamburger button on mobile phone UI designs is the fact that it’s usually at the top of the screen where your thumb can’t reach it while holding the phone. It’s a crutch to one-handed usability. Yes, most phones have an awful “reachability” mode hack that’s supposed to compensate for awful user interface design, but it just makes the awful design more obvious and tedious. Designing an app or website for mobile phones with navigation at the top of the screen is like designing a car with the gas pedal at the front and the steering wheel in the back. Not user friendly at all.

Leave a Reply

Your email address will not be published. Required fields are marked *