It’s easy to sabotage your own checkout. Here are some tips.

The story

My wife asked me to advise on which desktop computers the small firm she works for should buy. Amongst other sites I looked at was Dell, and I’ve covered some of the problems I had on their site in this post about comparing products. I also experimented with putting items in the cart to see what I could do, but found the process obscure and unhelpful, and gave up.

I did eventually buy a couple of computers from Mesh computers, although I nearly didn’t. Here’s why.

Starting off, I was looking for office machines. Here is the main navigation. Where would you look for office PCs?

Mesh main nav

Yep, that’s right, office PCs are in ‘Gaming PCs’.

Mesh Gaming navigation

Ah well. Maybe some customers think they don’t make business PCs, and go away.

In working through the options, I saved one configuration as a quote. After more work, I wanted to delete the quote. Here’s the error that I got.

Mesh error message

I have no idea what this means, other than it’s not letting me delete a quote. Here is the template that I’ve always used for error messages.

  • Tell the user what’s happened
  • Tell the user why it’s happened
  • Tell them what they can do about it

This message gets a fail.

Eventually I figured out the spec I wanted, and added it to the basket. I wanted to buy two of them. Here’s what you get in the basket.

Mesh basket

That ‘2’ in the ‘Quantity’ box was originally ‘1’. When I changed it to 2, nothing happened. When I then pressed ‘enter’, it took me to the next step in the process, but gave no indication as to whether I was buying 1 or 2, or what the total price was. So I stepped back again to this page. I then tried ‘Edit’, which took me back to the start of the purchase process, as if I wanted to edit the spec. I didn’t want that, so clicked the basket link in the main nav, and instead of taking me back to the page shown above, it took me to that next step that didn’t show what I was buying, and expected me to continue! I wasn’t going to do that.

I thought that surely there must be a way of getting an updated price. Eventually, I spotted the ‘update’ button, in the bottom left of the image below.

Mesh checkout

It’s in the wrong place, amidst a sea of identical blue buttons. It wouldn’t be hard to improve the design of this page to be more effective with better use of positioning and colouring. At the least, the main ‘continue this process’ button should be a different and standout colour, and ‘update’ should be next to the things that you can update. Or just make the page update automagically.

When I clicked the ‘edit’ link,  and went though the process, I noticed conflicting information about the configuration.

Mesh configuration

Although I had specified an Intel Core i5 processor, which is shown in the basket on the right, the Core i3 was selected in the configurator. I have no idea what would happen if I didn’t spot this and just continued. The configurator should be sensitive to context. On the first pass it should have the default values. Having returned from the basket, it should show my chosen values.

Having struggled through all this, I paid with Paypal. Here’s the screen asking me to confirm the purchase.

Mesh Paypal checkout

Firstly, who chose the colour scheme? It’s really hard to read, especially if you’re colour blind, like me.

Secondly, there’s no data. Just the price. There are field labels, but no data. The nervous amongst us would abandon at this point. I took it on trust and continued. Someone hasn’t bothered checking whether this part of the process is working properly.

Takeouts

I know from experience that there can be nooks and crannies of a site that the owners and designers rarely visit. This can happen especially for servicing or post-purchase paths, where a specific set of circumstance needs to be set up to trigger a given display. It can also be that the designers just don’t think of certain paths, or don’t think some paths are very important, and if they are not listening to feedback, they aren’t going to find out there’s an issue.

How could these problems have been identified by Mesh?

The only issue I’ve highlighted here that was an error, that would show up in error logs, is the inability to delete a quote, and the designer might well look at it, and think that the system is working as designed. nevertheless, it pays to check error logs, and address those which are happening frequently, or occur at key points.

An analysis of site metrics and paths might lead someone to think there’s an issue, if they see looping, such as when I was trying to update the price for two machines. Visual session replay can also be useful for this. Session replay is offered by a number of companies.

Many of these type of  problems are best found by talking to users, observing their use, and listening to feedback.

In terms of what you pay attention to, it’s not enough to focus on the ‘green’ path, where the customer finds what they want, and goes straight through checkout. You need to ask, at each stage, ‘what might the customer want to know about, or want to do, here’. That doesn’t mean that you have to cater for each circumstance, but it does mean that you have to think about it, and try to get data as to whether it matters or not. You might decide not to cater for an edge case, but if you have a lot of edge cases that you don’t address, then you still have a lot of annoyed customers.

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?