Hamburger humbug. Expose key navigation links.

It shouldn’t cause anyone too much of a headache to realise that making an interface easy to use will help the business and the user. It’s not a great leap from that to think that identifying what it is that most users want to do, and then providing obvious links, is a good idea. However, these principles are not followed through surprisingly often.

There are two patterns I’m looking at here. The bad pattern is using a hamburger menu on the desktop. The good pattern is exposing key links on mobile.

On a phone screen, of course, you’re constrained for space. You want to expose some content, but you also want to make the navigation easy. The hamburger menu (which pre-dates the widespread web) was adopted as a menu indicator, and in a responsive world, some designers get lazy, or intentionally, carry over the hamburger to the desktop.

Here’s BAs mobile web interface.

British Airways mobile interface

You can see the hamburger at the top right.

As the viewport expands, as soon as there’s room, the full desktop menu is exposed, immediately making it easier for customers to find what they want.

British Airways tablet interface

By way of contrast, here’s Fitch’s desktop.

Fitch interface

If you click the hamburger, you get this.

Fitch open hamburger

Fitch describe themselves as ‘the world’s leading retail and brand consultancy.’ My view is that many design/retail consultancies focus more on visual impact on their sites than they do on informing and helping the customer. If I visit the Fitch site because I want to get their number quickly to give them some work, I’ve got to do some work first. I would expect them to know their target market, and what works for them, given that they are the world’s leading retail and brand consultancy, so it’s quite possible they know better in this case.

I would also note in passing, that I’m not sure at all what ‘Think’ would lead me to, or how it’s different from ‘Work’ and ‘Studios’.

Whilst a hamburger may be a necessary evil on mobile, any research that I’ve read says that in general using an icon and text is more effective than either on its own, and that applies to the hamburger as well. If anyone is shouting at me ‘but everyone knows what the hamburger menu is’, then sorry, it’s not so. Maybe your target audience does, but if you’re going for a general audience that’s not just comprised of interface designers, then no, not everyone does. It’s too easy to fall into the trap of ‘I know, all my mates know, so everyone does’.

A better compromise is to expose the key actions, and then the hamburger contains the rest of the menu items.

Facebook does this in their app.

Facebook app navigation

The obvious drawback here is that not everyone will know what the icons mean – even after repeated use!

An improvement is the Mapway tube map app.

Mapway tube map app navigation

Here the key toggles are exposed, and there are more choices in the hamburger top left, and other settings, top right.

Just to underline the principle, I’ll go back to the BA homepage for a moment.

British Airways homepage

The content starts with the global navigation, which is consistent across pages. Then there’s what most people are here for – the ability to book travel. There’s the latest offer, and then there’s a brief navigation section exposing three of other main things that people visit for, even though those links are in the main nav.

Bottom line, make sure you know what the top tasks are for your users, and expose as many as possible within constraints of space, and not overwhelming people.