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.

Don’t default to ‘please select’ in drop-downs. Only use defaults when applicable to most users.

Here’s the name field entry from British Airways’ Executive Club registration form.

Name fields for BA’s Executive Club form

Here’s the equivalent for Virgin Atlantic

Name fields for Virgin Atlantic registration

Note that the drop-down for ‘title’ is blank for BA, but has ‘please select’ for VA. Users don’t need to be told to ‘please select’ if there’s a field that’s empty. There may have been a day when people were not used to drop-downs, and didn’t know what to do with them, but that’s not the case any more, for the vast majority of users.

Even more importantly though, users scan forms looking for empty fields. As people, we don’t methodically work through all the field names, picking them out from all the other clutter on the page. We take the easy lazy route. Which fields are blank? We don’t do this consciously, but we’re surprised when we hit the ‘enter’ button, and get an error. I have observed this often enough in usability testing. Even worse on the VA form, I have no idea why they would duplicate the field names in the input fields.

Further down on the BA page, we find a couple of fields that have been defaulted. The ‘country of residence’ and ‘language’ fields.

Defaulted drop-downs

In this case, it’s reasonable to default, as on entering the site the user has had to accept or change their country and language settings. The vast majority of users won’t change these fields, and so it would just be annoying for them to have to apply a setting that they’ve already done. Moreover, anyone who happens to want to change these entries, is likely to notice the disconnect with what they want. Again, it can be an unconscious thing.

Just by way of another example, here are some fields from the UK organ donor site. Right in the middle of a lengthy form, we find ‘please select’ again. The user just wants to get the thing done, and this sort of thing in the middle of a form increases the risk of errors.

Organ donor form

Check your forms. Are you leaving fields blank when they should be, and thinking intelligently about what to default? You should also be looking at your form analytics, and seeing which fields cause the most errors, so you know what to fix.