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.

Get attention! Popups aren’t the answer. Red, and relevance are.

When I was working at British Airways, every so often someone from the operation would get in touch, and ask that we put a popup in the selling flow to inform customers of what to do with pushchairs at the airport, or some other issue that people needed to know about. I always said no. It wouldn’t be effective.

Popups are actually not a good way of getting people’s attention. When users are on a site, unless they are bored and just clicking around, they have a goal. A popup is automatically assumed to be a distraction to that, especially in an environment where a popup is most likely to be an ad, or an invitation to a survey. I’ve seen this repeatedly in research.

One time, we had designed a flow where people could change their flights. We tried a popup as part of the flow to warn customers that if they had also booked a hotel, they would need to change that booking separately. I clearly recall one respondent who was working through the process. He saw the popup, clicked to close it, and carried on.

The researcher asked ‘What was that about’?

Respondent ‘What was what about’?

Researcher ‘The popup, what did it say’?

The respondent had a brief frowning moment of thought and his eyes flickered (interesting body language which you don’t get from phone interviews). Then he said ‘I don’t know, I didn’t read it’.

The style of popup doesn’t matter. Whether it’s old-style floating window, or a modal, it’s all the same.

I think that Daniel Kahneman’s ‘Thinking, Fast and Slow’ whilst a bit of a slog as a read, should nevertheless be essential reading for any UX designer. Our system 1 brains are lazy, and don’t do much thinking. They go click, click, click. System 2, that does the thinking, doesn’t want to get involved, and will only do so if system 1 calls for help. In the case of this popup, there was nothing that snagged system 1 to pause, so it went click in pursuit of an easy goal.

If you book a flight today on ba.com, you’ll see a form like this.

BA flight booking details

Then, once you’ve chosen a flight, you’ll probably be asked if you want a hotel too. If you follow the link, there’s another form.

BA hotel details

Leaving aside the fact that there’s too much whitespace, at first glance, this could look like something you’d already done. An earlier version of this process presented this form in a popup, and the heading was ‘Please specify your trip details’. Most people skipped past it. We eventually changed the heading to ‘You and your room’ which is now ‘How many rooms do you need?’ in the form above. This heading snags the system 1 brain, and forces to system 2 to come in and think about it. I think in the latest form the heading still needs to be more prominent, as otherwise some people will still miss the relevance.

There’s that word ‘relevance’. In order to snag system 1, and get people to pay attention, they have to see something that, consciously or unconsciously, is relevant to them. If you’re on a site looking for ‘books’, you can scan a page, and snag the word. It’s a bit like the cocktail effect, where you hear your name mentioned in another conversation, even though you weren’t paying attention. That’s why you shouldn’t have bland placeholder headings. Headings should contain sufficient semantic information to allow the user to determine whether the content below is relevant to them.

And then there’s red. The colour red has physiological arousal effects on us. It gets attention. It’s the colour of blood. That’s why error messages are so often presented in red. I’ve seen sites with icons (which do help), boxes, borders, great swathes of block colour asking to be looked at, and I’ve missed all of them. Red catches your attention. If there’s something you really need people to see, use red. I’ve used this method over and over, and it works. Sometimes I have trouble persuading people that their icon and block design won’t be as effective as it needs to be, and they should use red, and we have to resort to a test just to find out that I was right (I’m not always, you may be surprised to hear).

It doesn’t have to be a lot of red. Of course, there’s a problem if your entire site is based on red – or even orange or green, for colour blind users. I’m red/green blind, as about 10% of males are. Yet whilst I can’t distinguish shades, I still see red, and it snags me. And, again of course, the design needs to work in context, but I’m talking about principles here.

On a final, and quite important note, the use of red does not apply to text. I often find red text hard to read, especially when it’s on a coloured background. The red is just there to get attention. Then you apply design skills to the communication itself.

Hopefully, you get the logic of this, and won’t see red.

Product comparison sucks and loses companies money

What’s the issue?

How many times have you been looking for a product, and seen a couple of options on a website, and thought, ‘what’s the difference?’. I’d guess many of you have. I’d also guess that many of you haven’t been able, or haven’t easily been able to find out. Often, you need to go to other websites, such as product forums, to find out. I’m almost in despair at the appalling design and thought put in to sites that want you to buy their product, but do so with the equivalent of the salesperson turning their back on you. Sometimes there’s a product A and a product B with slightly different model numbers, and it turns out they are for the blue and the black version, but they don’t tell you that.

Dell

My wife asked me to source some desktop computers for the company she works for. One of the obvious places to look is dell.com. The main navigation starts off well with clear signposting to desktops for business, but it all rather goes downhill from there.

Range of Dell desktops for business

Here’s we see the range of desktops for business, with a couple of words for some, but not for the Alienware on the right. The words that are there, are useless, and mean nothing. There’s no attempt at this point to help the user figure out which range is best for them.

Now, it may be that everyone going to the Dell site knows what they want, or uses the filters above, but doing so requires a good level of technical understanding. I have very good technical understanding of PCs – I’ve built my own – and I struggle to understand what’s going on here.

If you scroll down the Dell page, there is a section on each range, but no easy comparison. It’s hard work.

I scrolled down a little and decided to look at the OptiPlex desktops.

OptiPlex jumping off point

Clicking on the ‘learn more’ button, told me almost nothing more. It’s just a load of useless pictures, and useless text. Maybe it’s there for SEO, but it’s just clutter. I clicked the back button.

The 3000 series seems to comprise of just two variants of the 3050 (oh no, there’s an all-in-one below in a separate section). There’s a standard and a ‘Micro’. What’s the difference? I can guess Micro is smaller, although confusingly if I just click through to the non-Micro, it’s described as ‘small form factor’, so I immediately wondered if I’d made a mistake. No. But there’s no help at this point about whether there’s anything else that’s different, and if there are any other implications. After a lot of digging, it seems that the Micro is slightly cheaper, and has fewer expansion options. That wouldn’t be hard to say, would it?

I click the link to the Micro, and come to a page that offers comparisons between the models. At last, a comparison. Note that ‘View all configurations’ jumps the page down an inch or so. They would do better to design the page with less white space, and get rid of the button.

3000 Series landing page

The comparison table (I haven’t shown all of it below) is ok, but the differences aren’t highlighted. You have to pick them out.

Maybe I want one of these with 8GB of memory, so it’s good there’s a ‘customise’ button.

Product comparison

I go to the customisation page, and immediately don’t know what I’m looking at. I was expecting a list of options to add to or replace the standard features.

Customisations page

What I get here is a load of useless stuff at the top, again. I’ve been offered the video before. I don’t need the marketing blurb – I’ve clicked a button to customise and buy. Don’t make this hard for me now if you want my money. There is no link on the page to ‘customise’ my PC. There is a link to ‘Build My Dell’ that opens a closed section, that should be already open. It’s a key rule to maintain consistency of language. Don’t change ‘customise’ to ‘Build My Dell’.

Ultimately I found the whole experience too confusing and draining, and took my wife’s business elsewhere.

Sony

I love consumer electronics, and gadgets, and have owned many Sony products. I am therefore also in a position to tell you that the manufacturers of electronic products have no better idea as to how to help their customers find the product that best suits them. Even if they are flogging £3000 mp3 players, as Sony are.

It’s easy to get to the mp3 player page on the Sony site. It’s not bad, clearly laid out, nice picture of each product, with a few useful details, sorted on price. It’s when you tick the boxes to add to the detailed comparison that the problem appears.

Sony mp3 player comparison table

The first point of comparison is ‘storage capacity options’. Does that mean it’s just the storage capacity, or does it mean expansion options, or what? It’s not clear. Even worse is that two of the players here have no data. There is actually nothing in the table to tell you what the storage capacity is of each player. That’s one of the first things that customers will want to know. There’s also no weight provided for two of the players. Why not? This is just shoddy work.

Further down the table, we can find out about battery life, and display ‘features’. Or not.

More mp3 comparison

How can you not list the battery life of your own product? And when you look at the display features, whilst the information is there, it’s in a different order, and not displayed in a way that allows for easy comparison. I want to bang my head against a wall (so do other people, but that’s a different matter) – this is a comparison table that has been built into the site, but Sony haven’t taken care to ensure that it’s populated with useful information.

In principle, it really quite easy to produce something like this. You have standards, and process, and a structured data set. The standards dictate that, for example, every mp3 player must have an attribute of ‘capacity’ or ‘memory size’ (whatever is decided, but they must be the same, and coded into the content management system), and that this must use GB as the measure (rather than GB for some, and number of songs for others, as I’ve seen elsewhere). Don’t allow free text as in ‘display features’ above. Create separate required input fields for the type of screen, whether it’s touchscreen or not, etc. It should be impossible to publish a product onto the site if the relevant details are not filled in, using correct units and format. That ought to be the very least requirement.

I happen to have picked on Dell and Sony here. The same problems abound across commercial sites that want your money, but don’t want to put in the effort to make it easy for you.

If you can’t describe your own products, and make comparison easy, why should anyone have any trust in you?

 

 

When do you stop referencing old research?

The issue

When I started out in UX there were some designs that I was convinced would work, some I wasn’t sure about, and some that I was convinced wouldn’t work. Simplistically, I think of it like this.

Old range of certainty

Then, as I learned more, and in particular did more research, I found that I wasn’t always right. Odd that. This had the effect of increasing my range of ‘might work’, as there are so often surprises. So the model changed to this.

New range of uncertainty

There were fewer designs that I thought definitively would or wouldn’t work (or would be better than an alternative), but I was more confident of those judgements.

As time went by (maybe there’s a song there…), people started to say things like ‘look, just because you did some research five years ago, doesn’t mean this design will fail now’. I don’t think it was my communication style that earned this response (but reference Discussing Design). So I tried to explain that there were some things that you discover through research that don’t change, or don’t change much, and that there were some things that were a result of context and time, and would be more likely to change over time. I tried to explain that if I was citing older research, it was only to illustrate a principle. Sometimes if I thought a design wouldn’t work it was on the basis that it broke a principle, and people assumed it was because of some old research.

I’ll give you some examples.

What gets old

Some years ago when we did usability testing on ba.com, it was common to find people who were surprised that you could book a hotel on the site. These days, it tends to be the other way round. People are used to the cross-sell. The fact of being able or not able to book a hotel on an airline website isn’t related to human psychology. It’s cultural and can be learned, so you can’t rely on old research.

Another more current and general example is the hamburger menu. It’s commonly used in mobile designs, although any research that I’ve seen says it’s most effective when used in conjunction with the word ‘menu’. Some designers maintain the style for desktop users. This makes no sense for a number of reasons. One is that since you have more space, you should expose the main navigation elements, rather than make users search, but also because you get many older users of desktop sites who have not learned the hamburger style. This is something that is likely to change over generations.

Another example that I found interesting was when we were doing some research in the US. In the checkout process the customer was offered the opportunity to get a credit card on which they would earn miles, and they could use it to pay for this flight. In our mockups we used the words ‘instant credit’. This was just after the sub-prime crash around 2008. Users reacted strongly against this phrase. When we changed the words to something more like, ‘get a card, earn miles, pay now’, the reaction was quite different. It was the same offer, just different positioning influenced by what was going on in the world at the time. It’s quite possible that at another time ‘instant credit’ would be more appealing.

What doesn’t get old

One example of what’s not going to change is the impact of grouping and separation, a fundamental principle of human cognition.

Here’s a snip from a search for ‘wheels’ on Cycle Surgery

Search for ‘Wheels’ on Cycle Surgery

Depending on screen size and resolution, a user could quite possibly scroll to a position like this. At a glance (which is all it should take), it looks like the upper price relates to the wheel below. They are spatially closer, and there is a lot of white space above the price. There are faint separating lines, which a user may or may not notice depending on the quality of their screen and eyesight. It’s confusing.

By contrast, here’s the same search result on Chain Reaction Cycles

Search for ‘Wheels’ on Chain Reaction Cycles

There is much clearer grouping of associated information, and separation from others.

Even better is Argos, using a card style.

Argos search result

So, to bring it back to old research. If I were to look at the page of results from Cycle Surgery, I’d say that at the very least it could be improved, not because of any research, but because it breaks the rules of how people look at things. I don’t need to do any research to figure that out. Items close together are related (we assume). Items with a strong separator are not related. Sometimes a poor design can cause conflict between these principles. Argos overcomes these issues.

To get more on those fundamental principles, have a look at some of the books I recommend on design, and behavioural economics.

Some things are in between

When people look at a list of flight choices, the vast majority start by trading off price and time. The cheap flight looks good, but you don’t want to get up a 4 am to catch it. 11 am is really convenient, but too expensive, so the 9 am is a reasonable compromise.

That’s the first calculation. After that, people will look at seat availability (can we all sit together), or is it the aircraft type that I want to fly on. Sometimes there’s a choice of airports, and so on. These things aren’t to do with the basics of human psychology, but they are deeply rooted, and are unlikely to change anytime soon, unless other factors become a lot more important for reasons I can’t currently think of. But it could happen.

I lost track of the number of times we had to reinvent the wheel to discover the same things because someone new was working on the design. From the point of view of the business, it’s not the most efficient use of corporate memory, but from the point of view of the designer, it does mean that they get validation from users rather than some bloke in the office who says he’s seen it all before. There’s a balance to be struck there.

In summary…

When you do research, some findings will be dependent on context, and can change over time, or with different personas. Others are constant, based on how our brains work. The third category is in between, where the design pattern might change in the future, but it would take something significant for that to happen.

When you review old research, ask yourself which category those findings fall into. Take it back to principles of psychology and design. The answer doesn’t dictate that you follow exactly the same design as was tested previously, but the fundamental approach will be directed by it.

Sometimes, you need to design something really odd

I’m usually a little cautious when critiquing sites where I’m not familiar with the design rationale. I’ve often read a critique of a site that I’ve worked on, where the issues raised make sense from the point of view of that individual, but wouldn’t result in us changing anything as there was actually a good reason for the design they didn’t like. Usually, it related to the needs or behaviours of other personas that they hadn’t thought about, or an overriding commercial imperative.

Here’s an example.

In the checkout process on British Airways’ ba.com, the customer is asked for a phone number. Here’s the relevant bit.

Provide phone number on ba.com

It was often pointed out to us that we should have put the radio buttons above the number input field. An alternative would have been to allow the customer to put in a number, and then let them tell us whether it was a landline or mobile number.

In this case, if you hit ‘No’, then you see this.

Result of saying ‘I don’t have a mobile’

The reason the fields are in this order is that it was quite likely that no use at all would be made of a landline number. In a real emergency, or if you were high value, then maybe.

Even if we’d suggested strongly that it was in the customer’s own best interest to provide  mobile number, some people still wouldn’t, for their own reasons. By doing it this way, people would see the request for the mobile number, see it was mandatory (so far), and maybe be a little pissed off, but would give a number. Many wouldn’t notice the ‘No’ option. Even if they saw the ‘No’ after typing in a mobile number, people being lazy, they’d just leave it.

If there were customers who really didn’t have a mobile, they had put so much effort into getting to this point that they would hunt around for a way round this problem, and spot the next bit.

Whilst we never A/B tested this one, I’m sure that the end result was that we collected many more mobile numbers than we would otherwise have done, and that we didn’t lose significant revenue.