Five super-smooth ecommerce checkouts
If your website has done the hard work of taking customers through a landing page to the point where they’ve added items to their shopping baskets, it’s a shame if poor ecommerce checkout design lets the side down.
It happens though. A good checkout will probably go unnoticed by most customers, and they just want to complete their purchase with the minimum of fuss, but a badly designed and confusing checkout can be infuriating for customers and will cost sales.
What makes a good ecommerce checkout?
Well, there is no one size fits all here, and the best retailers will constantly test and refine to identify and fix any barriers to purchase.
However, there are features and characteristics which are shared by the best checkouts. These include:
- Speed. Slow pages are bad anywhere on a site, but in checkout they can reduce customer confidence in the process.
- Easy form filling. Forms can be a pain, and the key is to minimise it through good design and smart use of shortcuts.
- Mobile friendly. More and more people are shopping via mobile but conversion rates are less than half those on desktop. Checkouts are part of the reason. (source: http://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/)
- Guest checkout. Forcing registration is a barrier for customers.
- Clear flow. Users should know what information is needed and why, as well as how many steps in the process.
With this in mind, here are some of my favourite examples out there…
Let’s start with a mobile example. Fashion brands have seen a big shift towards mobile, and have had to make sure they can convert this extra traffic.
Monsoon gets the basics right, such as big enough form fields with plenty of space to minimise the risk of user errors. A postcode lookup option also makes address entry easier.
The menu options are clear, while providing alternative payment options like PayPal can save customers’ time.
Small details matter on mobile checkouts, and can make tasks easier for users.
Here, as the user clicks on the card number field, the numeric smartphone keyboard is shown. Defaulting to the most useful keyboard saves the user time and makes checkout just a little easier.
On the same theme, there’s also the option of scanning the credit card to save customers time spent entering the number and expiry date. Again, Monsoon is using the smartphone features to make the process easier.
For an in-depth, benchmarking study on a couple of retail heavyweights, check out our UX Battle of the Week between Walmart and Target!
This is a great site all round, and checkout doesn’t disappoint.
First of all, users are given the option of guest checkout, logging in with existing password, or signing up.
This means there’s no barrier for those that prefer not to sign up. However, it can also be important to provide the option of signing up, as it has benefits for customers and retailers.
Joseph Joseph does a good of setting out the benefits of registration – easy repeat purchases and returns for example – but doesn’t push it too hard.
Address entry is made easier with predictive address lookup tool which suggests addresses as users type. This can be quicker than entering house number and postcode and should reduce the number of errors made.
This site uses an accordion style checkout, in which each section is unveiled after the previous one is completed.
This has the effect of breaking up the checkout tasks into manageable chunks, while neatly signposting the steps completed and those coming up for users. It also allows easy editing and reviewing of previous sections.
Made.com has a very clean and clear checkout design with the minimum of form fields to complete.
The checkout is enclosed with any unnecessary navigation removed, which removes distractions for users, enabling them to concentrate fully on the process.
Made.com does show information on delivery and returns, but provides this information without sending customers away from the page.
There is also a contact number and live chat option, essential for a site selling big ticket items. These are useful channels for customers with any last minute questions, and will help Made.com to save sales that may have been abandoned.
There’s also a persistent summary of the order contents and total cost, a useful reminder for shoppers.
Like Joseph Joseph, Made.com uses a postcode lookup tool to provide a shortcut for users and reduce address entry errors.
Throughout the process, and thanks to the clean design, the yellow calls to action stand out clearly, meaning customers should have no doubt about where to click to reach the next stage of checkout.
Since AO is selling large electrical devices, there is some added complexity compared to SME checkouts. For example, there are options for installation of new and removal of old appliances, while customers need to book a delivery slot.
First of all, AO does away with a checkout login / guest option page altogether and gets straight down to business, moving customers from the basket page straight to address entry.
There are just two fields here, house number and postcode so the form looks nice and easy to complete.
The checkout looks good, with clear buttons to select slots. The available dates are easy to view, and some nice microcopy explains that they’ll be given a four hour slot and will be contacted when the item is on the way.
Throughout the checkout, the progress indicator shows where people are and how many steps remain, while a contact number and live chat option is shown throughout.
There’s more useful microcopy here, explaining why phone numbers are required, and that information supplied will not be shared with third parties.
There isn’t much to pick fault with in AO.com’s checkout. It works equally well on mobile and desktop, and delivers an excellent experience.
This is a busy site with lots of text and information, but it’s still easy to use, and the booking/checkout process is well designed.
I like the use of inline validation which confirms that fields have been completed correctly or attempts to correct as users go on. This means that error messaging is shown at the point where correction is needed, making it easier for users to fix any typos.
Also, it knows that users sometimes make certain mistakes on email addresses and suggests a quick fix.
There’s a lot of information here, but much of it is useful. Reminders of booking dates, what’s included, and total cost helps to reassure customers, while microcopy is used to guide users through forms and explain why certain fields are required.
Booking.com is big on the use of social proof to persuade and reassure customers, and it continues this into checkout. While the meat of the form is on the right, messaging on the left shows quotes from positive reviews, key selling points such as local landmarks, while the red urgency message warns of limited supply in the area.
The copy around the form fields helps here, and acts to reassure customers. For example, users are told that their card won’t be charged and is just needed to guarantee the booking. Copy like this can be very effective at persuading people to complete checkout.
This isn’t as clean as Made.com and the other examples here, but it’s the result of extensive testing and optimisation and if a feature is on there, there’s a reason for it.
I think these suggested checkouts all work well, and suit the brands in question. In at least three of the examples, they are the results of testing and optimisation work, which is the way to do it.
I’d argue that some common features are necessary for usable checkouts – they should have guest options and be easy to use on mobile for example – but the rest is about finding the best performing variation for your business and customers.
If you’d like to know more about how UserZoom can help test, measure and improve your own site’s UX, please get in touch!
Graham Charlton is Editor in Chief at SaleCycle and former Editor of Econsultancy and ClickZ. When he’s not creating content, he can be found listening to vinyl, spending time with the family and enjoying the odd glass of red wine.