Basic usability issues still plague users

Photo by jcomp – www.freepik.com

Call me an old romantic if you want but I would have hoped after all this time of interaction design that some of the more basic usability issues wouldn’t crop up so often – and wouldn’t appear in places where designers really ought to know better. I’ve picked on a few examples here that I just happen to have encountered recently.

I’m asked from time to time who I think is doing really good design and usability and to be honest I struggle a bit. That’s because when things work well you don’t notice. But when there’s an issue, that’s what snags your attention.

Random stuff

Here’s a screen grab from a PR agency called Amendola Communications.

It’s a bit ironic I think that an agency that prides itself on good communications should be putting up paragraphs of centred text. Paragraphs should be left- (or right- depending on language) justified as when we’re reading it’s easier to locate the start of the next line. When text is centred we have to hunt around for the next line and it’s harder to read.

Also, the white arrow in the image above the text is moving up and down all the time. It’s distracting and interferes with reading. Best practice is not to use an animation like that or at least have a control to make it stop.


For my sins I am an Arsenal supporter. I recently renewed my season ticket. Whilst I’m a fan of the team I’m not a fan of the site and always expect usability problems. After I had entered and submitted my credit card details I received the following screen.

Here I’m being prompted to check that I’ve entered my card details correctly but there’s no way for me to do that. The card details are not displayed on-screen and there’s no link to them. I had to crash out of the process and start again. By the nature of the site it has a captive audience with no alternative online purchase method. If this were a commercial site with competitors they’d be losing money. It goes without saying that the relevant fields should be re-displayed to allow me to check them.


Here is a fairly typical presentation of a list of credit cards to choose from when paying. The last thing you want is for a customer to experience a problem when they are trying to give you money so every little detail counts.

Choose your payment card…

The problem with this list is that I feel like I have to hunt and peck to find my card. If I have a Mastercard Credit I’ll naturally pause at the first entry of Mastercard Debit, decide that’s not it, and scan the rest of the list. There are three ‘Visa’ entries separated out. Note also the inconsistent capitalisation of ‘Mastercard’ v ‘MasterCard’.

Similar items should be placed next to each other to allow the customer to check between them. ‘Visa’ should be ‘Visa credit’ unless there really are multiple options (which would be better being split out explicitly if so). So the list should be more like this

  • Mastercard debit
  • Mastercard credit
  • Visa debit
  • Visa Electron
  • Visa credit
  • Maestro UK
  • Maestro International
  • Solo

‘Debit’ and ‘credit’ are not proper nouns and so are not capitalised.

This approach makes it easier to chunk my task into 1) finding the right category of card 2) finding the right specific card within the category.

If you are going to be vague and specify ‘debit’ but not ‘credit’ as in

  • Visa
  • Visa debit

…then the Visa debit should be listed first. People with a Visa debit card will be looking for ‘Visa’ and choose the first item – many won’t see the next entry especially if it’s part of a longer list.

Volkswagen

Sigh. I think car sites in general have a way to go in terms of usability. The emphasis appears to be on making it all look nice but you can’t find what you want. I went to the VW site to look at Polos. In trying to get to some detail I’m offered a choice between ‘Read more’ (button) or ‘Explore the features’ (text link). There is no guidance on what is behind either of these and I’ve not got a clue.

What’s the difference?

Most unhelpfully it turns out that ‘Read more’ is just a short list of awards which would have been better served with an ‘Awards’ link. Going to ‘Explore the features’ takes me to a page with a list of random articles but not a way to explore the features. I genuinely don’t understand why a site like this can be so user-hostile.

Giving up on that path I go to ‘Configure’ in the main navigation and get the following…

Choose your Polo to choose your Polo

In order to configure my Polo I have to choose which Polo I want first! How do I know? I can’t explore the features and I want a Polo with a certain size of engine. How do I know which of these models has the engine I want?

Persevering I choose a model and get to a configurator of a type that I’d expected to get to much sooner. Here’s part of it.

Confusion abounds

An exclamation mark apparently indicates some sort of conflict of choices. The ‘i’ provides more information – or it’s supposed to. There are many items in this list that don’t have an ‘i’ but I really would like to know what ‘Driving Profile Select’ means. And the ‘i’ against the Black Style Pack (why does it all have to be capitalised?) just gives me exactly the same list that’s on the page already.

At this point I give up. I simply can’t use this site for anything other than some surface information about the models available.

British Airways

I was looking at flights to Shannon in Ireland. When I start at ba.com I see this.

I don’t have an issue with the popup – but look at the page behind. It’s an old version of the homepage. When I click continue I get a completely different presentation.

It’s not a big deal (I think) but it can lead to a momentary pause because of the disconnect.

On searching for flights from London to Shannon I get the following popup.

The implication is that if you don’t want to go from or to terminal 2 then you can choose different flights – except you can’t. The only flights you can book here from London to Shannon are on Aer Lingus (now part of the same airline group as BA) and they fly from T2. There are no other choices. I suspect some customers may spend a while hunting around for other choices that they won’t find.

Typically when you’ve chosen your flights the first thing you want to see is the total price. Most travel searches don’t result in an immediate booking as people compare sites, airlines, routes, dates etc. A travel site needs to accommodate both the search and the booking functions. Here’s what I get as a quote page.

There is a replay of my choices at the top which I immediately see which is good as I can check I haven’t made a mistake but the total price is a scroll way down the page. I missed it altogether to start with as it didn’t stand out. I’m also asked near the top if I want to use some Avios (points) to cut the cost but I don’t know what the cost is yet. It seems odd positioning and means I have to scroll the page up and down to compare my options.

Given that I was researching I then wanted to see the cost of flights to Dublin. At the top right of the page there’s a link to ‘change flights’ but this only allows you to select different flights for your chosen route. There doesn’t appear to be a simple way of just changing the route. In fact to get out of the whole process the only thing you can do if you happen to know it is to click on the BA logo on the top left of the page, to which there are no cues. I suspect many people will be opening a new browser tab – or just giving up.

And finally, in confusion…

Qual and quant research are the underpinnings of effective digital design. Things have to look good but a good looking site that customers can’t use to do what they want is merely a sink hole for cash. The research must be done to ensure that what’s going to go live stands the best chance of success and once it’s live the whole thing needs to be monitored to find out what can still be improved.

Having said that there are some things that we know that we don’t need to waste time and money researching. These could be generic things based on human psychology like the fact that movement distracts or it could be something fundamental to an industry like most travel searches are to make comparisons and to get prices.

So why do we still see so many of the same mistakes being made? There are a number of reasons including but not limited to

  • the need to persuade stakeholders
  • the designers working on a project are new and themselves need persuading
  • no good record or access to previous research
  • loss of expertise within organisations (= loss of organisational memory)
  • lack of time or money to refine designs

Jared Spool has written about genius design. It’s when the team becomes so expert in a field that they can quickly knock out effective design with less (not none) emphasis on research because they already know many of the answers. That takes a strong commitment to the longer term, building up that expertise, and embedding that process in the organisation. Here’s hoping.

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.