Top Tips for Improving Your Checkout

Did you know that the average shopping cart abandonment is 72% across all devices? This rate is amplified on mobile. According to SeeWhy, a leading website conversion specialist, mobile devices (excluding digital downloads) have a 97% abandon rate.

Online checkout and delivery is a constant retail battleground. Most problems with online delivery originate from a poorly optimised checkout.

This blog looks at good practice tips for ensuring your checkout provides an excellent user experience, helping you to reduce your abandonment rates.

1. Enclose your checkout and minimise number of pages

Enclosing your checkout reduces background noise, removing unnecessary navigational elements.

The examples below show two contrasting approaches. Which design do you think would encourage a higher click through?

j1

j2

A one-page checkout is not essential – the most important challenge is to minimise the number of pages customers need to complete. Base your checkout flow on usability and user experience considerations instead of trying to shoehorn it into a pre-conceived number of steps. You could even consider using tools like OneStepCheckout to simplify your checkout.

For further reading, we recommend Graham Charlton’s Econsultancy blog “Why you should enclose the checkout process” – an old post but still relevant today.

2. Use intelligent form validation

There are three common errors with online form validation:

  1. It’s not clear which elements are mandatory
  2. There are no instructions for how to complete boxes like password (e.g. minimum number of characters, numbers & letters only etc)
  3. Errors aren’t displayed until all fields are completed and the form is submitted.

In a test conducted with Usability experts Etre, Luke Wroblewski found that real-time validation caused a 22% increase in success rates and 31% increase in satisfaction rating.

Our recommendation is to use in-line, or real-time, validation. This validates what the customer enters in each field as they progress. An error is flagged immediately with instructions for correcting it, helping them to complete the form accurately.

Below is an example of in-line form validation from Office Max.

j3

We recently launched Capture+ for online checkouts. This uses rapid searching to increase accuracy – matching addresses appear as soon as your customer starts typing, so no more need to enter data then click “find address”. One less click, one less opportunity for exit.

j4

3. Avoid a one-way system

This is one of our pet hates! Some checkouts have a nasty habit of not allowing you to go back without losing everything you have already done.

Make sure you enable shoppers to move seamlessly between different stages of the checkout and save the information they have entered – making them re-enter gives them a reason to leave.

An often over-looked requirement is to ensure that if a customer uses their browser back or forward buttons, it doesn’t break the checkout. Ensure you code the checkout to preserve information, or at least display a warning message that navigating away from the page risks losing data.

4. Provide multiple ways to checkout

A 2012 study by Econsultancy/Toluna found that 25% online consumers would abandon a purchase if they were forced to register:

“After adding items to your basket, what would make you abandon your purchase?”

j5

A famous case study from 2009 called “The $300m button” showed that replacing the word “Register” with “Continue” and a simple message increased purchases by 45%.

In reality, the difference between account registration and guest checkout is a password. That’s it. But it’s the psychology of word association that leads to exits at this stage. So phrase your checkout carefully.

Key recommendations:

  1. Provide guest checkout.
  2. Make it easy for existing customers to log-in.
  3. Enable easy account registration for those who want it.
  4. Consider adding social log-in such as Facebook.

The two examples below from ASOS and New Look don’t mention account registration:

j6

The example below shows how Mydeco also enables log-in via Facebook.

j7

5. Make it easy for people to remember what they are ordering

 To achieve this, make sure you include an order summary throughout the checkout. This helps customers remember what they are ordering and how much they are spending – transparency is important.

Accessories Online does this nicely with a simplified two-stage process.

j8

6. Make delivery information clear and concise

Don’t throw in curveballs at the last minute! You should ensure that delivery timings & costs are made clear before the checkout is started – this can be done on product and basket pages.

If there are so many delivery options it’s not possible to accurately quote the cost upfront, then show a “Delivery from” message with the cost for standard delivery with a link to your detailed delivery information page (opening in a light box, of course). This at least sets expectations.

When providing premium services like next day delivery, make it clear when the cut-off is and what day the parcel will arrive. The example below from Accessories Online show a live ticker counting down the daily order cut-off time.

j9

7. Provide multiple options for payment & delivery

Offering a one-size fits all delivery doesn’t give customers choice. Delivery is now a major competitive differentiator. Beyond the standard delivery promise, consider adding the following, which are proven to increase order completion:

  1. Next day / Preferred day
  2. Time slots e.g. 1hr time slot during the day – Maximuscle does this
  3. Evenings
  4. Saturdays
  5. Collect+ – delivery to a local outlet for collection – Wiggle provides this.

For large catalogue retailers, it’s common for delivery variation at product level. Use your product database to specify which delivery options are available for each product, so that realistic expectations are set. This information can be emphasised at checkout for clarity.

Online shoppers are also used to seeing alternative payment options in checkouts. These include:

  1. PayPal
  2. Google Wallet
  3. Payment on account
  4. Finance

Buy.com is a good example of multiple payment options at checkout:

j10

The Watch Gallery is an example of a store that provides finance payment options:

j11

8. Make your checkout mobile friendly

People want to use their mobiles to transact, so provide an optimised mobile checkout that makes it easy to use on smartphone. For larger tablets, you’ll probably find that the desktop checkout works fine.

If you force mobile visitors onto other devices to make a purchase, you risk losing their business – they could purchase from a mobile friendly competitor.

The example below is from Amazon, who unsurprisingly have an excellent mobile checkout (this from their mobile app):

j12

9. Protect and assure your customers

Make sure trust and security signals are clear throughout the checkout. This includes the following:

  1. Security seals – for SSL Certificates link to the online certificate.
  2. PCI Compliant logo if relevant.
  3. Independent 3rd Party accreditations like Trusted Shops (merged with IMRG’s Internet Shopping Is Safe scheme).
  4. Payment options supported.

See the example below from Boohoo – they position the content zone as “Shop safe with Boohoo” and use relevant accreditation logos.

j13

Done poorly, this is proven to be one of the key reasons people abandon checkouts.

This ties-in with providing multiple payment options – it’s about convincing shoppers you are trustworthy and providing them with the best possible service.

10. Use testing to fine-tune the process

Last but by no means least – commit to using a continuous testing process to fine tune and optimise your checkout. It’s impossible to know instinctively what the optimal combination of process, content & technology is to maximise your checkout conversion rate. Testing is absolutely essential – it helps remove subjectivity from decision-making and show you in real-time what page designs/flows are delivering the best results.

We like to include online user testing in the mix. Take a peek at Usertesting.com and Whatusersdo.com for great options for video testing.

Comments and questions

So there’s our Top 10 starter kit for checkout optimisation. What do you think? Please drop by and share your comments, questions and experience. Please also share any relevant links you think readers would be interested in.

For more information about Postcode Anywhere’s range of ecommerce services, please visit the website.


  • Abel

    I like it,good e-commerce tips

  • Albie Attias

    NIce comprehensive post James. I’d add that as well as reminding customers what they’re ordering, if you’re using a multi-stage checkout process, remind them of checkout details previously entered. This has the added bonus of chopping down the number of checkout steps required by removing the need for a final ‘review & confirm’ step.

  • Pingback: Top Tips for Improving Your Checkout | Ecommerc...()

  • Dmitry Perlovich

    I really like the article..Couple of things that I would mention are

    1) Display steps so that people know where they are and how far until the payment

    2) Display credit card icons by credit card field – gives more credibility

    3) Make sure to fill in all the information already provided. For example if user selected shipping option in the shopping cart, this option should be selected at checkout. Also if e-mail address has been provided during the guest login, this e-mail address should be populated during checkout.

    4) When displaying shipping options, actually let people know approximate arrival “Get it by May 1st”

    5) Use colors carefully, the only emphasis should be on trust, security, and next step.

    just my 2 cents

  • @ Dmitry Perlovich

    Interesting points – improving checkout experience is proving hard for retailers to get perfect from the start.

    How would you suggest using colour more effectively within the process?

  • Afternoon all,

    Thanks for taking the time to comment and share your thoughts.

    @Albie – yes reminders can work well but there’s a balance to be had between reminding people of previously entered info and distracting them from completing the stage in the process they’re currently add. A saw an AB test on Whichtestwon recently that showed a version with reminder info performed worse. Of course, there are examples that show the opposite, so important to continuously test and refine (+ also look to segment visitors as one size fits all rarely works).

    @Dmitry – thanks for the additions, you make some good observations. Approximate arrival date is definitely useful, provided it’s accurate.

    Thanks
    james