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.
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.
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
‘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 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.
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.
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…
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.
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.
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.