Does your webshop have these 18 issues causing cart abandonment?

Baymard Institute recently published "The Current State of Checkout UX (18 Common Pitfalls)". For this article, they analyzed their dataset of 15,900+ manually reviewed checkout site elements and identified 18 common design pitfalls in e-commerce Checkout UX.

68% of e-commerce site users abandon a purchase after adding items to the cart. According to Baymard, the design and flow of checkout mostly cause this.

In this post, I will walk you through their findings and provide my own view on it.

You will see great examples, that clearly illustrate the contrast between the "right" and the "wrong" way to do checkout UX.

The current state of Checkout UX

Fun fact: Baymard’s 2019 study shows that out of the 59 top-grossing US and European e-commerce sites, 58% have acceptable Checkout UX performance, 36% have average checkouts, 6% have poor checkouts. The average website has 32 usability problems in their checkout flow.

Below are UX performance pitfalls to prevent for 6 subtopics of Checkout UX.

Account Selection & Creation

Under Account Selection & Creation, there are 4 UX issues that sites often have:

2. 33% of Sites Don’t Have Good Microcopy in the Account-Selection Interface:
   For good microcopy, the word “Guest” should be included in both the header and primary button in the account selection stage. This will enable your potential customer to quickly notice that your website offers the guest checkout option. Still, 33% of sites don’t have clear microcopy in the account-selection interface.

3. 68% of Sites Have Complicated Password-Creation Requirements:
   Complex password rules can increase the checkout-abandonment rate by 18.75%. Sites should desist from overly strict password rules. 68% of websites still have too complicated password-creation requirements.

4. 20% of Sites Don’t Show Password-Creation Requirements Upfront:
   Sites should display password requirements upfront to avoid errors in the first trial, which could be frustrating. Sites should also provide users with real-time inline validation that would show the correctness of the password creation process. 20% of e-commerce stores don’t display password-creation requirements upfront.

Shipping & Store Pickup

There are 4 issues pertaining to Shipping & Store Pickup:

5. 34% of Sites Provide info on ‘Delivery Speed’ and not ‘Delivery Date’:
   Providing a delivery date, or even a date range (an exact date) instead of delivery speed (3 working days) helps users to quickly understand when they’ll receive their order. 34% of sites still use delivery Speed.

6. 62% of Sites Don’t Include the Cutoff Time in the Delivery Countdown:
   Excluding cutoff time misleads a user to select a shipping option, missing the non-specified cutoff time. Yet, 62% of sites don’t include cutoff time.

7. 64% of Sites Don’t Display ‘Store Pickup’ in the Shipping Selector Section:
   Most users view store pickup as a shipping option and so expect to find it alongside the other shipping options. Hence, sites should display ‘store pickup’ among shipping options. 64% of websites don’t show this information.

8. 50% of Sites Make It Difficult to Compare ‘Store Pickup’ to Shipping Options:
   In-store pickup should be presented with enough information for users to make an informed decision. 50% of sites make it difficult to compare ‘Store Pickup’ to shipping options.

Credit Card Form

There are 4 issues relating to Credit Card Form:

9. 53% of Sites Don’t Use Luhn Validation:
   Luhn validation checks to see if the card number entered by a user is plausible and can alert for errors. Sites should use this to guide users when putting in their car details. 53% of websites don’t use Luhn validation.

10. 51% of Online Stores Don’t Autoformat Spaces in the ‘Credit Card Number’ Field:
    Adding auto-formatting to the card number helps to ensure the typed number is accurate. This will guide users while providing their card details and reduce errors. 51% of e-commerce shops don’t do this.

11. 36% of Sites Don’t Display the Credit Card Field Sequence Correctly:
    Using the correct order for the credit card fields prevents confusion and errors. This means the card number field should come first, followed by the expiry date and the so on. 36% of online stores don’t match the credit card field sequence correctly.

12. 67% of Sites Use Wrong Format for the ‘Expiration Date’ Field:
    Expiration date field should be formatted as “MM / YY” or “MM-YY.” This makes the process easier for users, as this format is used on credit cards. 67% of sites format the ‘Expiration Date’ field incorrectly.

Order Review

There are 2 issues sites related to the order review step:

13. 68% of Sites Don’t Let Users Edit the Order Directly at the Review Stage:
    Online shops should allow users to edit data at the review step. This can be done with page overlays that pop up over the screen or inline form fields. 68% of sites don’t do this despite its importance.

14. 40% of Sites Don’t Provide ‘Edit’ Links for All Distinct Information Groups:
    There are various information groups at the review stage. Each of them should come with separate “Edit” links, so they don’t confuse users. 40% of sites don’t take advantage of this.

Field Labels & Microcopy

There are 2 common issues that e-commerce shops make on Field Labels & Microcopy:

15. 31% of Sites Use Unclear wording in the Checkout Microcopy:
    Use precise and clear terms in your microcopy to resonate with users. 31% of sites use jargon in the checkout microcopy.

16. 73% of Sites Don’t Mark Required and Optional Fields:
    In your forms, it is necessary to mark out fields that are required from those that are optional. This will make the process clear and easy for users. 73% of sites don’t mark required and optional fields.

Field Design & Features

There are 2 issues when it comes to checkouts’ Field Design & Features:

17. 98% of Sites Don’t Show Optional Inputs Clearly:
    Make the checkout process seamless and quick by clearly showing the optional fields. By doing this, you’re making sure that the process is hitch-free for users. 98% of sites don’t use the right interface for optional inputs.

18. 48% of Web Shops Don’t Restrict Data entry based on Local Formatting standards:
    Some online shops make use of input character restriction. These sites should also use input masks to guide users. 48% of websites don’t use localized input masks for restricted inputs.

Summary

Baymard has revealed that 6% of sites have a completely broken Checkout UX, 36% of sites perform averagely, and none has a state-of-the-art Checkout. According to the 18 pitfalls discussed in this article, the following are solutions:

1. Prioritize the “Guest Checkout” option.
2. Use Good Microcopy in the Account-Selection Interface.
3. Use Simple Password-Creation Requirements.
4. Display All Password-Creation Requirements Upfront.
5. Use “Delivery Date” Instead of “Delivery Speed.”
6. Include Cutoff Time in Countdown.
7. Display “Store Pickup” in the Shipping Selector Section.
8. Make It Effortless to Compare “Store Pickup” to Shipping Options.
9. Use Luhn Validation.
10. Autoformat the “Credit Card Number” field.
11. Display the Credit Card Field Sequence Correctly.
12. Use the Right Format for the “Expiration Date” field.
13. Let Users Edit Directly at the Review Stage.
14. Provide ‘Edit’ Links for All Distinct Information Groups.
15. Use Clear Terms in the Checkout Microcopy.
16. Mark Required and Optional Fields.
17. Use the Right Interface for Optional Inputs.
18. Use Localized Input Masks for Restricted Inputs.

If you found this summary interesting, I think you should head over to the original article and get all the details too.

Are you uncertain if your customer journey could be improved? Please feel free to reach out to us. We might be able to help you in the right direction.