After e-commerce sites have invested vast resources in “first in mind” strategies, Pay Per Click campaigns, beautifully crafted homepage imagery, perfect category taxonomies, faceted search logic, etc., it seems almost unbearable that 68% of users — after having added items to their cart — then choose to abandon their purchase.
During Baymard’s 9 years of large-scale checkout usability testing we have also consistently found the checkout design and flow to frequently be the sole cause for users abandoning their cart during the checkout flow.
Our Checkout benchmark database contains 15,900+ checkout site elements that have been manually reviewed and scored by Baymard’s team of UX researchers (embedded below), with an additional 11,000 best- and worst-practice examples from the top-grossing e-commerce sites in the US and Europe (performance verified).
In this article we’ll analyze this dataset to provide you with the current state of e-commerce Checkout UX, and outline 18 common design pitfalls and strategic oversights applicable to most e-commerce sites.
For this analysis we’ve summarized the 15,900+ checkout usability scores across the 17 topics and plotted the 59 benchmarked checkout flows across these in the scatterplot above. Each dot, therefore, represents the summarized UX score of one site across the 4–12 guidelines within that respective topic. The top row is the total checkout UX performance.
Our latest Checkout study and benchmark database from late 2019 reveals that 58% of the 59 top-grossing US and European e-commerce sites have a “perfect” or “decent” Checkout UX performance. This represents a significant improvement compared to our 2016 dataset, when only 37% of sites performed as well.
Despite this improvement, not even the best-performing sites benchmarked have an all around state-of-the-art checkout. And 36% of sites have checkouts that are “mediocre”, while 6% of sites have checkouts that are downright “poor”.
Despite 58% of sites having a “perfect” or “decent” checkout experience, our benchmark also reveals that the average site has 32 preventable usability issues in their checkout flow.
Below we’ll discuss the UX performance and 18 general pitfalls to be aware of for 6 of the 17 subtopics of Checkout UX:
These subtopics were chosen as they are the most interesting or the most suitable for discussion in an article.
(If you’re brand-new to UX, read What Is UX? before diving into the research.)
Our benchmark reveals that the overall Account Selection & Creation UX performance is generally “mediocre” to “poor”, with a surprisingly high number of implementations that, from an end user’s perspective, will be considered “broken” (18%).
On a positive note, the number of sites that force all users into creating an account has decreased slowly since our very first checkout usability benchmark back in 2012. In 2012, 24% of sites forced all users to create an account (i.e., had no “Guest Checkout” option); in 2016 the number decreased to 20%; in 2020 this is now down to 18%.
Yet despite the positive trend on the increase in “Guest Checkout” capabilities, the majority of sites have an account-selection step design that makes it needlessly difficult for users to actually locate that guest option — something during usability testing we frequently observe to cause users to overlook the guest path entirely.
In particular, there are 4 UX issues sites often suffer from when it comes to Account Selection & Creation during checkout:
1) 72% of Sites Don’t Make ‘Guest Checkout’ the Most Prominent Option. During desktop testing, our eye-tracking test data reveal that users expected the “Guest Checkout” option to be located in the upper-left hand portion of the screen — yet on sites where “Guest Checkout” wasn’t placed there, we observe that 14% of users were unable to figure out the checkout step and ended up abandoning the site.
During mobile testing issues were just as severe, with 60% of users having severe issues identifying, seeing, and selecting the “Guest Checkout” option at the account-selection step during checkout. This was often due to the “Guest” option being pushed down in the interface, where it frequently went unseen.
For both desktop and mobile, it’s key that the “Guest” option is the most prominent option on the account-selection step — the upper-left option on desktop, and the top option on mobile — to ensure users can easily find it. (On mobile “Guest” checkout can also just be made equally prominent to other account options.)
Despite the importance of this issue, 72% of sites don’t make “Guest Checkout” the most prominent option (up from 49% of sites in 2016).
2) 33% of Sites Don’t Have the Right Microcopy in the Account-Selection Interface. During our testing, imprecise and generic microcopy for headers, option descriptions, and the primary buttons caused some users to misinterpret their options at the account-selection step. In particular, for guest users, generic headings such as “Check Out Now” or simply “Proceed” or “Continue” for the guest checkout option will slow users down as they initially scan the page, unable to find the keyword “guest”. When it comes to the microcopy at the account-selection step, clarity is king: the guest checkout option should have the keyword “Guest” in both the header and primary button, generic microcopy like “Returning User” should be avoided, and if offering account creation at the end of checkout guest users should be informed that they’ll have an option to create an account at the end of the checkout process.
Despite the importance of this issue, 33% of sites don’t have the right microcopy in the account-selection interface (down from 52% of sites in 2016).
3) 68% of Sites Have Overly Complex Password-Creation Requirements. During our testing, we observe that extensive and strict password rules can cause up to an 18.75% 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 issues with the password-reset process technically locks a user out of their account, at which point abandonments are very likely. Given the severe usability implications of too-strict password rules, and subsequent abandonments from account owners as they try to reset their password, sites should impose the fewest number of password requirements allowable. If sites want to minimize account sign in and password-reset friction as much as possible, we recommend making the only password requirement 6 lowercase letters.
Despite the importance of this issue, 68% of sites have overly complex password-creation requirements (down from 74% of sites in 2016).
(PS: Lowering password requirements below what’s typically recommended for, e.g. a device password, is generally possible for e-com sites because there are two essential security measures available, as discussed here)
4) 20% of Sites Don’t Display All Password-Creation Requirements Upfront. As there are no consistent password requirements across sites, users consequently either have no password expectations or inconsistent password expectations. Hence, it’s necessary to display the password requirements upfront to users to avoid a frustrating trial and error process — a process that’s often more frustrating on mobile, due to the general issues users have with typing on mobile keyboards (compared to desktop). If the password requirements are complex — which isn’t recommended, as discussed in the third pitfall above — consider providing users with positive live inline validation. We observe during testing of sites with positive live inline validation of passwords that, while users are still forced into entering a password they won’t recall later on, it does eliminate the frustrating trial and error experience of setting the password the first time around.
Despite the importance of this issue, 20% of sites don’t display all password-creation requirements upfront (down from 37% of sites in 2016).
Shipping & Store Pickup is a topic with very scattered performances. The “good” average performance is mainly due to a high number of sites that perform perfectly and an almost equal group of sites that perform very poorly. That said, the group of perfectly-performing sites have increased since 2016, with a significant 30% improvement in the 2019 Shipping & Store Pickup UX performance compared to our past Checkout benchmark from 2016. This makes this the Checkout topic with the largest group of state-of-the-art implementations (17%).
In particular, there are 4 issues sites get wrong when it comes to Shipping & Store Pickup:
5) 34% of Sites Use ‘Delivery Speed’ Instead of ‘Delivery Date’. When it comes to delivery speed, users have one main concern: “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”).
Despite the importance of this issue, 34% of sites still use ‘Delivery Speed’ instead of ‘Delivery Date’ (largely unchanged from 35% of sites in 2016).
6) 62% 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. While true for all users, this is especially important for users who’ve selected an expedited shipping option — and have paid more to have their order arrive quicker. Users will interpret a displayed delivery date as a promise for when they’ll receive their items; therefore, not providing a cutoff time runs the risk of a user selecting a shipping option but missing the nonspecified cutoff time — and getting their order later than they expected. To address the issue caused by showing the cutoff time — if one is even provided — as a static time zone–specific time and date, the cutoff time should instead be displayed as a countdown. 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”.
Despite the importance of this issue, 62% of sites don’t show the cutoff time as a countdown (down from 92% of sites in 2016).
7) 64% of Sites Don’t Present ‘Store Pickup’ Within the Shipping Selector Interface. Store pickup is becoming a widespread feature among omnichannel sites. A common implementation found on many e-commerce sites is to provide the option for store pickup either before the checkout (e.g., at product pages or in the cart) or as the very first option mentioned during checkout. While it’s okay to have store pickup there, however, it isn’t enough, as most users view store pickup as just another “shipping” option — and thus expect to find it alongside the other shipping options in the shipping selector interface.
Despite the importance of this issue, 64% of sites don’t present ‘Store Pickup’ within the shipping selector interface (up from 54% of sites in 2016).
8) 50% of Sites Make It Too Difficult to Compare ‘Store Pickup’ to Shipping Options. In-store pickup, when presented as an option _ before_ the shipping method selector interface (e.g., on the product page or in the cart), should be presented to the user with enough information for them to make an informed decision. For example, in order for a cost-conscious user to evaluate if the extra hassle of going to a store is worthwhile, they will need to know exactly how much they are saving — that is, what the cheapest shipping options would otherwise cost and how far they will have to drive. Similarly, for urgent purchases, deciding between pickup and shipping will depend on the available expedited shipping options and their speed and cost, compared against how far away the nearest store is that currently has the item in stock.
Despite the importance of this issue, 50% of sites make it too difficult to compare ‘Store Pickup’ to shipping options (down from 57% of sites in 2016).
While the Credit Card Form is still among the weakest aspects in the checkout flow of many sites, the 2019 benchmark data show a dramatic improvement since 2016. In particular, while no more than a few sites had a “good” performance in 2016, we find that 30% of sites are now performing from “good” to “perfect”, and 7% have implemented a state-of-the-art Credit Card Form. While the Credit Card Form doesn’t require the most amount of typing during the checkout, the 3–5 credit card fields are by far the most complex inputs in the average checkout.
In particular, there are 4 issues sites get wrong when it comes to the Credit Card Form:
9) 53% of Sites Don’t Use Luhn Validation. Typing the typically 15–16-digit credit card number string without errors can be difficult for users. 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 works to check to see if the card number entered by a user is plausible. All credit card numbers follow a pattern that will allow a simple Luhn/Modulus 10 checksum validation. Note that the check doesn’t submit and verify the card data with the payment processor. In other words, the Luhn validation can’t say if the card is valid, has sufficient funds, etc., it can only tell if the typed card number sequence has been incorrectly typed. However, simply alerting the user upfront that the card number entered contains a typo — and can therefore never be a valid card number — will allow users to correct it before the entire card payment form is submitted.
Despite the importance of this issue, 53% of sites don’t use Luhn validation (down from 67% of sites in 2016).
10) 51% of Sites Don’t Autoformat Spaces in the ‘Credit Card Number’ Field. During testing, some “Card Number” fields didn’t apply any formatting to the card number either as it was being typed or after a subject had completed typing the entire string. If users end up with a 16-digit long, uninterrupted credit card number in the “Card Number” field it’s very difficult to check to make sure the typed number is accurate. A single typo when transferring the 15–16 digit string printed on the credit card to the “Card Number” form field will cause a validation error, which by itself can lead to abandonments. Even worse, many sites will, when payment validation errors occur, also clear out all the typed card data — forcing users to reenter all of their card data. Therefore, to make entering the credit card number as easy as possible, use an input mask for the appropriate card type after it’s been autodetected.
Despite the importance of this issue, 51% of sites don’t autoformat spaces in the ‘Credit Card Number’ field (down from 77% of sites in 2016).
11) 36% of Sites Don’t Match the Credit Card Field Sequence to the Physical Card Sequence. Users are likely to enter information in fields in the same order in which they appear printed on the physical card. When the form fields that are to contain this information are presented to users “out of order”, errors are bound to occur, where users enter the information seen on the card in the wrong form fields. In fact, when we tested sites where “Cardholder Name” was the first field, as many as 33% of users typed their full credit card number in the cardholder field. At a minimum, this causes needless form-filling friction, but it may also lead to security issues as some users then copy and paste sensitive card information (as observed during testing), not to mention needless card validation errors for those users who end up submitting the form. It’s therefore key to match the credit card field sequence to the physical card’s sequence, which for most cards would be: “Card number” > “Expiration date” > “Cardholder name” (if includede at all), and then always “Security code” as the last field.
Despite the importance of this issue, 36% of sites don’t match the credit card field sequence to the physical card sequence (up from 28% of sites in 2016).
12) 67% of Sites Incorrectly Format the ‘Expiration Date’ Field. The ISO 7813 standard specifies the characteristics of “Financial Transaction Cards”. It specifies that all financial transaction cards should show the card’s expiration date in one of the following two formats — “MM / YY” or “MM-YY” — with the first being by far the most common for credit cards. This represents two digits for the month and two for the year — for example, “02 / 18”. However, many sites still employ nonstandard formatting, which interrupts the input flow for users who use the keyboard to input the expiration date information.
Despite the importance of this issue, 67% of sites incorrectly format the ‘Expiration Date’ field (down from 90% of sites in 2016).
The order review step shouldn’t be overlooked, as we consistently observe that it can easily cause users to abandon their purchase — even this late in the checkout flow. Furthermore, the abandonments observed at this point in the flow are very often solely due to design and flow — as in, they are entirely preventable with a UX design process. While a substantial number of sites (45%) provide a “perfect”, or even state-of-the-art, experience, a majority of sites have plenty of opportunities to improve this area.
In particular, there are 2 issues sites get wrong when it comes to the order review step:
13) 68% of Sites Don’t Allow Users to Edit Data Directly at the Review Step. During testing, the task of editing data at the review step was often observed to be a cumbersome process, as “Edit” links would send users backwards in the checkout flow, causing a great deal of confusion and frustration both when moving backwards in the checkout flow and when moving forward again after corrections had been made. The combination of having both a somewhat unclear landing page when going backwards, and having to complete the same checkout flow once more when moving forward again, makes editing even simple typos a highly complex and discouraging experience. Instead, users should be allowed to edit data at the review step via inline form fields or page overlays.
Despite the importance of this issue, 68% of sites don’t allow users to edit data directly at the review step (largely unchanged from 71% of sites in 2016).
14) 40% of Sites Don’t Provide Separate ‘Edit’ Links for All Distinct Information Groups. Grouping information at the review step, and using only a single “Edit” link for the separate information groups (e.g., one “Edit” link for both the “Billing Address” information and the “Payment Method” information), may seem like a good way to present a simpler interface for users to review. However, it’s an example of false simplicity, as many users instead are confused to find that, seemingly, the piece of information they need to edit doesn’t have a corresponding link — for example, “I need to edit my ‘Shipping Address’, but there’s only (seemingly) an ‘Edit’ link for ‘Shipping Method’“. Therefore, it’s important to provide separate “Edit” links for each information group presented to users, and to make sure the links are proximate to their information groups.
Despite the importance of this issue, 40% of sites don’t provide separate ‘Edit’ links for all distinct information groups (down from 55% of sites in 2016).
Despite Field Labels & Microcopy being technically one of the easiest areas to improve within the checkout flow, it’s surprising to see that a majority of sites still have issues (unchanged form 2016), and that 35% of sites perform downright poorly.
Form field labelling issues often stem from the practical fact that form field labels are being written by web professionals, such as developers, designers, UXers, Product Managers, or others working in the web industry. This “insider knowledge” can often be a problem, as it is difficult for any web professional to then truly empathize with normal end users.
In particular, there are 2 issues sites get wrong when it comes to Field Labels & Microcopy:
15) 31% of Sites Use Jargon and Brand Names in the Checkout Microcopy. For most sites, a large proportion of the user base may only visit the site once or twice a month, or even less frequently. This make users sensitive to site-specific naming. While site employees who spend their every workday caring about the company and brand may find any site-specific terminology, industry terms, or “brand play” obvious, such terminology will often be confusing or misleading for most repeat users and all new users. In practice, it’s often very difficult for industry insiders to “unlearn” this everyday work jargon, and it often takes an industry outsider to even spot where it is on a given site. Sites should therefore carefully consider microcopy and determine whether the text in question is really something a general user would understand. If in doubt, opting for more widely used language, or at the very least providing additional descriptive text, will help avoid unnecessary confusion for end users.
Despite the importance of this issue, 31% of sites use jargon and brand names in the checkout microcopy (largely unchanged from 32% of sites in 2016).
16) 73% of Sites Don’t Mark Both Required and Optional Fields Explicitly. When encountering a form where only the optional fields were marked — required fields were unmarked — 32% of users during testing encountered a validation error because they did not complete a required field. Forms where the required fields were marked and the optional fields were not did fare better in testing when it came to decreasing the rate of needless validation errors. However, failing to mark fields as “Optional” adds unnecessarily to users’ general confusion when filling out checkout forms. 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.
Despite the importance of this issue, 73% of sites don’t mark both required and optional fields explicitly (down from 85% of sites in 2016).
The average checkout’s Field Design & Features perform well or even perfectly for 48% of sites. This is an improvement compared to 2016, where 55% of sites performed “mediocrely”. Although there is still a group of sites whose performance is “mediocre”, these are now the minority.
Yet there are in particular 2 missed opportunities when it comes to checkouts’ Field Design & Features:
17) 98% of Sites Don’t Choose the Right Interface Type for Optional Inputs. At first, one may think that having optional fields and selections in the checkout comes relatively “risk free” — as users will simply skip such optional fields entirely if not relevant to them. However, during testing, it became very clear that optional fields and values were the sole cause for disrupting users’ checkout flows, causing anything from users needlessly interacting with completely irrelevant fields, taking 5–30% longer to complete checkout steps, doubting the correctness of order data, getting validation error messages, or submitting orders with incorrect information. The right interface type for optional inputs depends on several factors, but in general uncommon inputs (e.g., “Address Line 2”) should be hidden behind a link and checkboxes should be used mainly when the input is a true opt-in/out question. Additionally, one should be cautious of using radio buttons and drop-downs for entirely optional inputs.
Despite the importance of this issue, 98% of sites don’t choose the right interface type for optional inputs (up from 70% of sites in 2016).
18) 48% of Sites Don’t Use Localized Input Masks for Restricted Inputs. During testing, when provided with a formatting example for a field in the checkout, 89% of desktop users entered, for example, their phone number in a different format from what the site had exemplified. Now, first and foremost, sites should be extremely cautious about restricting users’ inputs — particularly when they’re only vanity restrictions used for input formatting. However, for sites that either have inputs where there’s no way around an input character restriction, or for sites that are willing to spend technical resources on perfecting the form-filling experience, input masks were during testing observed to perform very well — if considerable technical due diligence is first performed.
Despite the importance of this issue, 48% of sites don’t use localized input masks for restricted inputs (largely unchanged from 53% of sites in 2016).
This high-level analysis of the current state of Checkout UX focuses on only 6 of the 17 Checkout subtopics included in our Benchmark Analysis. The 11 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.
Although our benchmark has revealed that only 6% of sites have a completely broken Checkout UX, it’s clear that there’s much room for improvement, as 36% of sites perform “mediocrely”, while no sites have a state of the art Checkout. Avoiding the 18 pitfalls described in this article is the first step toward improving users’ Checkout experience:
For inspiration on other sites’ implementations and to see how they perform UX-wise, head to the publicly available part of the Checkout benchmark. Here you can browse the Checkout implementations of all 60 benchmarked sites. For additional inspiration consider clicking through the Cart & Checkout Page Designs, as these showcase Checkout implementations at the top 59 US and European e-commerce sites and can be a good resource when considering redesigning a Checkout flow — of what to emulate, but also of what to avoid.
This article presents the research findings from just 1 of the 580+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.
Join 25,000+ readers and get Baymard’s research articles by RSS feed or
Topics include user experience, web design, and e-commerce
Articles are always delivered ad-free and in their full length
1-click unsubscribe at any time
Thank you for such thorough analysis. I will certainly be taking some of what I learned back to my e-commerce sites.
I have a couple thoughts regarding account creation details …
I would be interested to know if you’ve tested a checkout flow where the first field is the customer’s email address. If the address is recognized, then a prompt appears asking if they would like to log in. That gives the convenience of pre-filled fields for customers with an account.
Otherwise, it’s treated as a guest checkout with no options to create an account getting in the way. Only after checkout is completed, and there is no longer cart abandonment risk, the customer is then asked about creating an account. At that point more effort can be given to explain the benefits of doing so.
I’m also a little concerned that the benchmarks for creating an account password lean so heavily toward customer convenience that security concerns aren’t even in the picture.
We certainly don’t want cart abandonment or customer frustration over choosing a password, but we also have to keep in mind that customers tend blame the company if their account gets broken into, even if it’s their own fault for using the same lousy password on every website they visit. In the customer’s eyes, the company got hacked, which erodes their trust.
I don’t know where the ideal balance point is, but with today’s level of technology, the suggested six-character password is insufficient to secure an account.
Hi Doug, thanks for the comment.
Yes that specific pattern is also in our test findings.. The second half of the flow you describe we call “delayed accounts creation” is actually the best performing account creation pattern:
The first part of that flow is something we’ve observed, but it’s not for all sites. Hayneedle have this feature on their live site. (baymard premium customers see : https://baymard.com/premium/guidelines/652 for more on this )
Security is very much in the picture, but we didn’t cover it that much here I see, go see this full article on this specific suggestion for loosening the password requirements, where we cover the security aspect more in detail: https://baymard.com/blog/password-requirements-and-password-reset
I want to express my concerns about the recommendation to make password 6-characters length.
I agree that complex password rules cause friction for users, but length is important for security.
Your other article (the one you linked in response to Doug’s comment: https://baymard.com/blog/password-requirements-and-password-reset explained that complementary measures were to be taken to balance the weakening of security caused by the reduction of password length. I regret this does not appears in the current article.
To recommend the password to be 6 characters long without more warning is dangerous. Cracking such a password is a matter of milliseconds with the processing power available in today average computers.
So, here is what can be done:
– use multiple factor authentication (send a link plus a token via email or text message and require to follow the link or type the token to proceed)
– limit the number of login retries, and if too much retries occur in a limited time period, require the use of an other factor to log in.
I also would like to add some usability recommendations on authentication :
– allow copy/paste of email and password
– do not require fixed length password (e.g. exactly 8 characters)
– more generally, do not force the user to reduce the length of her password (allow 64 characters long ones or even more).
I am nitpicking because I think this is a subject of importance, but this article on UX is great nonetheless. It is a good synthesis and has a lot of valid points.
Thanks for point this out, I’ve updated the article so it now more clearly mention there are two additional security measures needed, so it’s less likely to be misread.
Great article, I agree 100% with every comment apart from 17) 98% of Sites Don’t Choose the Right Interface Type for Optional Inputs. I think for sites which have minimal optional inputs, it’s cleaner and less clutter on the form to show (optional) in brackets.
Hi Christian, I agree that we should have the “Guest checkout” option, but with this one, usually have a higher rate of return as well as a fraud credit card in the payment processing.
Do you think they’re related?
In my opinion, with tacit understanding, registered checkout shows that people have the strong desire in purchasing, so they will do whatever to complete the purchase step.
great info, thanks you
This is great, and I’ve been consuming pretty all of your free content. Your insights are incredibly valuable, and I am grateful that you guys exist!
That said, I’m curious, how much of these UX insights have you tested out on client projects with split tests or multivariate tests, to confirm that those insights actually translate in increased sales and improved metrics?
© 2021 Baymard Institute US: +1 (315) 216-7151 EU: +45 3696 9567 email@example.com