Checkout UX 2024: 11 Pitfalls and Best Practices

Baymard’s Premium research findings reveal that 70% of e-commerce users abandon their purchase after adding items to their cart.

During Baymard’s 15 years of large-scale checkout usability testing (including our recently completed 2-year project retesting all of our findings), we have found that checkout design and flow is frequently the sole cause for users abandoning their cart during the checkout flow.

With users so close to completing their purchase, it is almost unbearable to think about them leaving their cart because of an unnecessary barrier to checkout.

Our testing further reveals that the average large-sized e-commerce site can gain as much as a 35% increase in conversion rate just by making design changes to their checkout process.

Our 2024 Checkout UX e-commerce ux benchmark now includes:

• 30,000+ checkout implementation examples that have been manually reviewed and scored by Baymard’s team of UX researchers
• 26,000+ worst and best practice examples from leading e-commerce sites in US and Europe (categorized and performance verified)

In this article, we’ll analyze this dataset to provide you with the current state of e-commerce Checkout UX and outline 11 common design pitfalls to avoid.

The Current State of E-Commerce Checkout UX

For this analysis, we’ve summarized the entirety of this year’s 30,000+ checkout usability scores (including 26,000+ worst and best practice implementation examples) across the Cart & Checkout theme’s topics and plotted the benchmarked checkout flows in the scatterplot above.

Each dot represents the summarized UX score of one site across the guidelines within that respective topic. The top row is the total checkout UX performance.

The benchmark reveals that 65% of the leading US and European e-commerce sites have a “mediocre” or worse Checkout UX performance, with only 2% rating “good”.

Moreover, none were rated “perfect”, and 11% of the sites have checkouts that are downright “poor”.

Below we’ll dig further into this dataset and discuss the UX performance and 11 general pitfalls to be aware of for 7 of the 9 subtopics of Checkout UX.

These subtopics were chosen as they are the most interesting or the most suitable for discussion in an article.

Account Selection & Creation: 2 Pitfalls in Particular to Avoid

Baymard’s benchmarking of the Account Selection & Creation topic shows 53% of sites score “mediocre” or worse and a surprisingly high percentage score “poor” or worse (38%).

It stands out that while the majority of sites offered a “guest checkout”, half of these sites made it needlessly difficult for users to locate that guest option — something during usability testing we frequently observe to cause users to overlook the guest path entirely.

1) 50% of Sites Don’t Make “Guest Checkout” the Most Prominent Option

Allowing users to check out as a “guest” is key to avoiding unnecessary abandonments, as many users will refuse to create an account simply to check out.

Yet providing a “Guest Checkout” is much less useful to users if it’s difficult to spot on the account-selection step of checkout.

Indeed, if a user fails to see the “Guest Checkout” option, it’s as bad as if it wasn’t offered at all.

Our e-commerce UX benchmark reveals that 50% of sites fail to make “Guest Checkout” the most prominent option.

As a result, many users will come to a stop at the account-selection step of checkout as they hunt for the “Guest Checkout” option — while a subgroup, moving quickly, will never find it, increasing the risk of abandonment.

To fix this issue, make the “Guest” option the most prominent option on the account-selection step to ensure users can easily find it.

2) 65% of Sites Have Overly Complex Password-Creation Requirements

During testing, we observed that extensive and strict password rules can cause up to an 18% checkout-abandonment rate among existing account users when they have trouble signing in.

In particular, the password-reset email is a very weak link in the “forgot password” chain, as any issue with the password-reset process locks a user out of their account, at which point abandonments are very likely.

Sites should impose the fewest number of password requirements allowable given the severe usability implications of too-strict password rules and subsequent abandonments from account owners as they try to reset their password.

Indeed, if sites want to minimize account sign in and password-reset friction as much as possible, we recommend making the only password requirement to be a 6-8 characters minimum.

(Note: Lowering password requirements below what’s typically recommended for, e.g., a device password is generally possible for e-commerce sites because there are two essential security measures available, as discussed here.)

For inspiration on “perfect” Account Selection & Creation implementations, see Thomann, Grainger, and Everlane among others.

Shipping & Fulfillment: 2 Pitfalls in Particular to Avoid

21% of sites achieved “good” or better implementations of Shipping & Fulfillment.

This is offset, however, by the 39% of sites that perform very poorly.

In testing, sites’ incomprehensibly cumbersome shipping-selection processes anger users and are often the direct cause for checkout abandonments.

In particular, here are 2 issues that sites get wrong when it comes to Shipping & Store Pickup.

3) 44% of Sites Use “Delivery Speed” Instead of “Delivery Date”

Users have one main concern for delivery speed: “When will I receive my order?”

The solution historically used within e-commerce is to clearly state the shipping speed for each of the shipping options; for example, “Standard: 2 Business Days – $4.95”.

However, this is a very business-centric way of conveying the information.

Displaying “Shipping Speed: 2 Business Days” forces users to research, calculate, and sometimes even guess when they will actually receive their order.

This not only makes it less transparent when the order will be received, but it also introduces a lot of choice complexity into the checkout process during the user’s delivery selection.

Instead, providing a delivery date, or a date range, allows users to immediately understand when they’ll receive their order (e.g., “Delivery on April 4th” or “Delivery April 4th–8th”).

4) 77% of Sites Don’t Show the Cutoff Time as a Countdown

In addition to the delivery date, many users want to know when they have to place their order to have their package delivered by that date.

This is especially important for those who’ve selected an expedited shipping option — and have paid more to have their order arrive quicker.

When sites do not provide a cutoff time for ordering, they risk users selecting a shipping option but missing the nonspecified cutoff time — and getting their order later than they expected.

But the problem is not entirely solved with just a cutoff time.

Participants in a different time zone than the one presented had to manually account for the time zone difference (e.g., translate “1PM ET” to Central Standard Time), bringing them to a complete halt and introducing an opportunity for errors as they attempted to convert the time in their head.

Another group of participants misinterpreted the static cutoff time as the “estimated delivery date” when quickly scanning the page.

Thus, the cutoff time should be displayed as a countdown rather than a static time. For example, “Order in the next 43 minutes to receive your order by Tuesday April 4” instead of “Order by 9AM ET to receive your order by Tuesday April 4”.

For inspiration on “perfect” Shipping and Fulfillment implementations, see Crutchfield and Walmart among others.

Shopping Cart: 1 Pitfall in Particular to Avoid

Baymard’s benchmarking has found that sites often struggle to build clean, intuitive Shopping Cart interfaces.

The average Shopping Cart UX performance was “mediocre”, with 52% of sites obtaining “mediocre” or worse performances, and a notable 27% of sites with “poor” or worse performance scores.

Important cart information such as the order’s overall cost summary must compete with overly prominent advertisements (in 25% of sites) and cross-sells within their “Added to Cart” overlays (in 53% of sites).

And yet the “simple” mechanism of selecting item quantity is a common stumbling block to high-performing Shopping Cart UX.

5) Use Buttons or Buttons Plus an Open Text Field for Updating Cart Quantity (95% Don’t)

Increasing or decreasing the quantity for items in the cart is seemingly a simple and straightforward task.

However, during our large-scale testing, a subgroup of participants had significant issues with this seemingly straightforward task.

In fact, some quantity changes made to orders went unregistered by participants — which led to orders being placed with incorrect product quantities.

Moreover, mobile users are likely to be more frequently and severely challenged by unoptimized quantity selectors due to the smaller viewport and general increased risk of input errors.

Tweaking the quantity field UI to be buttons or buttons with a text field generally resolves issues users have with the quantity selector in the cart.

For inspiration on Shopping Cart UX, see Wayfair, Target, TAG Heuer, and Home Depot for their “perfect” performance on this topic.

Payment Flow & Methods: 1 Pitfall to Avoid

Payment Flow & Methods is a checkout subarea that has seen a slow but steady improvement over time, from 51% of sites achieving “decent” or better performances in 2020 to 63% in 2021, and now 69% of sites.

Despite the improvements seen over time, many sites still have issues validating credit card information (among other issues not discussed here).

This issue quickly leads to frustration and abandonment, especially when validation errors lead to needless data loss or excessive time spent renavigating through checkout steps.

While the credit card form doesn’t require a lot of typing during the checkout, the 3–5 credit card fields can be the most complex inputs in the average checkout.

6) 43% of Sites Don’t Use Luhn Validation

Users can find it difficult to type the typically 15–16-digit credit card number string without errors.

During testing, typos were common, and thus validation errors were as well — which can result in abandonments.

Thus any help users can be given to type their credit card number correctly should be provided.

Luhn validation checks to see if the card number entered by a user is plausible.

The Luhn validation can’t say if the card is valid or has sufficient funds — it can only check if the card number sequence has been incorrectly typed.

Simply alerting the user up front that the card number is not a valid credit card number, and thus contains a typo, will allow users to correct it before the entire card payment form is submitted.

For inspiration, see American Eagle, Vitamin World, and Marks & Spencer for their “state-of-the-art” performances on Payment Flow.

Form Field Usability and Design: 4 Pitfalls in Particular to Avoid

When it comes to the topic of Form Field Usability and Design, the average site had a “mediocre” performance, with 59% of sites obtaining “mediocre” or worse performance scores and 33% of sites with “poor” or worse performances.

The average site here typically has a wide spectrum of usability issues, ranging from poorly designed form fields to little to no input support.

7) 74% of Sites Don’t Mark Both Required and Optional Fields Explicitly

32% of tested participants did not complete a required field when encountering a form where only the optional fields were marked.

Performance did not improve on forms where the required fields were marked and the optional fields were not.

And when no fields are marked, often because all are required, users often fail to notice text at the beginning of the form stating “All fields are required” — and thus leave some blank, assuming they’re optional.

In short, it’s best to be explicit and mark both required and optional fields in forms to ensure there’s no confusion.

8) 75% of Sites Don’t Choose the Right Interface Type for Optional Inputs

It might seem that having optional fields and selections in the checkout comes relatively “risk free”, as users will simply skip such optional fields if not relevant to them.

But during testing it became very clear that optional fields and values were often the sole cause for disrupting some participants’ checkout flows.

In particular, these fields were guilty of causing anything from participants needlessly interacting with completely irrelevant fields to causing participants to take 5–30% longer to complete checkout steps, doubting the correctness of order data, getting validation error messages, or submitting orders with incorrect information.

The most common cause of issues in these fields was the incorrect interface types used.

The right interface type for optional inputs depends on several factors, but uncommon inputs (e.g., “Address Line 2”) should generally be hidden behind a link.

Additionally, using radio buttons and drop-downs for entirely optional inputs should be avoided.

9) 56% of Sites Don’t Use Localized Input Masks for Restricted Inputs

When sites recommended participants enter a their phone number in a certain format, 89% of desktop participants in our tests entered their phone number in a different format from what the site had recommended.

Generally, sites should be extremely cautious about restricting users’ inputs — particularly when they’re only used for input formatting.

However, for sites that either have inputs for which there’s no way around character restrictions, or for sites that are willing to spend technical resources on perfecting the form-filling experience, input masks were observed to perform very well — if considerable technical due diligence is first performed.

Input masks can show users, before they even start typing, what format the characters are expected to be in and then auto-apply that formatting to the user’s typed input. For example, phone number fields often include input masks.

Applying localized input masks for restricted inputs can prevent the errors that often occur when a user’s entry format does not match up with the preferred format of the website.

For inspiration, see REI, Gilt, and Macy’s for their “perfect” performances on Form Field Usability and Design.

General Form Design and Checkout Layout: 1 Pitfall in Particular to Avoid

For the topic of General Form Design and Checkout Layout, the average site had a “mediocre” performance, with 50% of sites obtaining “mediocre” or worse performance scores.

UX violations within this subtopic can be particularly detrimental given how impactful the layout and design of the checkout are on users’ ability to navigate the checkout process easily.

A sizable portion of sites had an excessive number of form fields, many of which were nonessential and unwarranted.

To make matters worse, these form fields are sometimes presented in a multicolumn layout, adding to the form’s already “intimidating” and “overwhelming” impression.

And almost all sites failed to help users with their validation errors.

10) 99% of Sites Don’t Improve Validation Errors with Adaptive Messages

Errors are unavoidable, but we’ve repeatedly observed that the content of the error message itself is vital to the user’s ability to quickly recover from the error rather than abandon the purchase.

But overly general error messages force users to hunt for the problem themselves, and determine how the issue can be resolved — turning what may have been merely a small speed bump into a major roadblock.

Rather than providing the same generic message for all validation errors, “Adaptive Error Messages” change depending on the exact subrule that invoked the validation error, using this detail to provide the user with instructions on how they can correct their input.

Letting the user know why an error occurred makes it easier for them to fix it.

During testing, errors that gave specific details improved the error-recovery time for all users — but most importantly it dramatically reduced the number of participants who got completely stuck and had to give up on completing their purchase.

To prioritize resources, consider first tracking all validation errors that occur within the checkout flow.

With better error tracking, sites can then implement “Adaptive Error Messages” for the validation errors that a) occur most frequently and b) have the highest checkout abandonment rate after receiving an error.

For inspiration, see Build.com and John Lewis for their “perfect” performances on General Form Design and Checkout Layout.

Gifting Flow and Features: 1 Pitfall in Particular to Avoid

For the topic of Gifting Flow & Features, the average site had a “mediocre” performance with 56% of sites obtaining “mediocre” or worse performance scores and, notably, 44% of sites with “poor” or worse performances.

Gifting Flow & Features are largely neglected aspects of the checkout flow.

In fact, 35% of sites don’t offer gifting functionality at all.

During testing, it was clear that the combination of users infrequently purchasing items “as a gift” and the lack of web conventions for how gifting should be implemented caused severe user doubts and many gift orders with incorrect order data.

11) Always Explain All Gifting Features in Detail (61% don’t)

Users vary in how they want to gift products.

For some users, a gift receipt, personalized gift message, gift wrapping, sending the recipient postorder email notifications, or any combination may be critical.

Additionally, many users will be unsure what is included with gifting, or even what the gifting terminology actually means, as gifting features and terminology vary from site to site.

This makes it complicated to introduce gifting to users.

During testing, participants often drew false conclusions about how to use gifting features, and experienced a worse gifting and checkout experience as a consequence.​‌‌‍‌‌‌‌‌‌‌‍‌‌‌‌‌‌‌‌‍‍‌‌‌‌‌‌‌‎

The solution is to clearly explain all gifting features, including gift receipts (specifying that prices will not be shown), personalized gift messaging, gift wrapping (including price and thumbnail image or description), and optional recipient email notifications.

For inspiration, see Our Place and Newegg for their “perfect” performances on Gifting Flow & Features.

Checkout UX Has a Long Way to Go

Our benchmark has revealed there’s much room for improvement in Checkout UX, given that the performance of 65% of sites is “mediocre” or worse.

Furthermore, no site has a “perfect” Checkout.

Avoiding the pitfalls described in this article by adhering to these 11 best practices is the first step toward improving users’ checkout experience:

1. Make “Guest Checkout” the Most Prominent Option (50% Don’t)
2. Avoid Overly Complex Password-Creation Requirements (65% Don’t)
3. Use “Delivery Date” Instead of “Delivery Speed” (44% Don’t)
4. Show the Cutoff Time as a Countdown (77% Don’t)
5. Use Buttons or Buttons Plus an Open Text Field for Updating Cart Quantity (95% Don’t)
6. Luhn Validate the Credit Card Number Field (43% Don’t)
7. Mark Both Required and Optional Fields in the Checkout Information Flow (74% Don’t)
8. Choose the Right Interface Type for Optional Inputs (75% Don’t)
9. Use Localized Input Masks for Restricted Inputs (56% Don’t)
10. Use ‘Adaptive Error Messages’ that Match the User’s Specific Subissue (99% Don’t)
11. Always Explain All Gifting Features in Detail (61% Don’t)

Additionally, this high-level analysis of the current state of Checkout UX focuses on only 7 of the 9 Checkout subtopics included in our e-commerce UX benchmark.

The 2 other subtopics should be reviewed as well to gain a comprehensive understanding of the current state of Checkout UX, and to identify additional site-specific issues not covered here.

For inspiration on other sites’ implementations and to see how they perform UX-wise, head to the publicly available part of the e-commerce UX benchmark.

There you can browse the Checkout implementations of all 130+ benchmarked sites.

For additional inspiration consider clicking through the Cart & Checkout Page Designs, as these showcase Checkout implementations from 130+ leading US and European e-commerce sites and can be a good resource when considering redesigning a Checkout flow — not only of what to emulate, but also of what to avoid.

Finally, Premium subscribers may want to view Checkout performance by their preferred industry to get a more scoped view of how their direct competitors are performing when it comes to e-commerce Checkout UX (available on the Guidelines Collection page).

This article presents the research findings from just a few of the 650+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” e-commerce user experience.

If you want to know how your desktop site, mobile site, or app performs and compares, then learn more about getting Baymard to conduct a UX Audit of your site or app.