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.

The Current State of Checkout UX

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Cart & Checkout 134 Guidelines Checkout Types 3 Guidelines Shopping Cart & “Added to Cart” Behavior 10 Guidelines Account Selection & Creation 9 Guidelines Customer & Address Information 12 Guidelines Gifting Flow & Features 5 Guidelines Shipping & Store Pickup 11 Guidelines Payment Flow & Methods (Incl. Third-Party) 8 Guidelines Credit Card Form 10 Guidelines Order Review 5 Guidelines Order Confirmation & E-Mail 4 Guidelines Form & Page Design 10 Guidelines User Interactions & Distractions 10 Guidelines Cross-Sells 4 Guidelines Validation Errors & Data Persistence 10 Guidelines Field Labels & Microcopy 7 Guidelines Field Design & Features 8 Guidelines Default Values & Autocompletion 8 Guidelines 60 Major E-Commerce Sites What’s This?

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 “good” or “acceptable” 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 “good” or “acceptable” 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.

Account Selection & Creation

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Account Selection & Creation 9 Guidelines 60 Major E-Commerce Sites What’s This?

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:

At Marks & Spencer, the “Guest” option is not nearly as prominent as the “Sign In” option, which is placed first, has two open form fields, and a prominent “Sign In” button. At Staples’s mobile site the “Guest” option isn’t visible in the interface when the page first loads.

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).

At Argos the microcopy must be read carefully by users to determine which option is the one they want — the all-important keyword “Guest” is missing. “Returning User” is an imprecise heading for users at Newegg.

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).

At Grainger the long list of password requirements will force many users into using a password they won’t remember later — which will result in some later abandoning the checkout when they can’t sign in. Newegg also has overly strict password requirements.

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)

At Ann Taylor users are only informed of the password requirements in an error message, after they’ve tried using a password that didn’t meet the site’s requirements. Users are informed at Staples what the password requirements are when they begin typing in the password field.

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).

For inspiration on good Account Selection & Creation implementations, see Foot Locker, Debenhams, and Home Depot.

Shipping & Store Pickup

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Shipping & Store Pickup 11 Guidelines 60 Major E-Commerce Sites What’s This?

Shipping & Store Pickup is a topic with very scattered performances. The decent average performance is mainly due to a high number of sites that perform well and an almost equal group of sites that perform very poorly. That said, the group of well-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:

B&H provides business-centric shipping speed info — for example, “FedEX Ground Delivery, 1-5 Business Days”, which makes it needlessly difficult for users to know when they’ll actually get their package. Macy’s also provides only the shipping speeds.

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).

Build.com doesn’t provide any cutoff time for even the most expensive shipping option. Foot Locker only provides a time zone–specific cutoff time.

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).

Although “store pickup” is available in the cart as a coequal option with shipping (first image), when reaching the shipping method section at the delivery and shipping methods step at Macy’s it’s completely hidden from the user that there’s also the option to pick up the order in a store (second image). Users finding shipping too expensive or too slow aren’t shown the free and faster alternative, and are thus needlessly provoked into abandoning their purchase.

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).

At Microsoft there’s no estimate for shipping cost and speed. Home Depot provides the shipping cost and speed in the cart.

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).

For inspiration on good Shipping & Store Pickup implementations, see Best Buy, Sephora, and Hayneedle.

Credit Card Form

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Credit Card Form 10 Guidelines 60 Major E-Commerce Sites What’s This?

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 decent performance in 2016, we find that 30% of sites are now performing from decent to well, 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:

The credit card number at AEO has been incorrectly typed — but the end user isn’t alerted to this fact. At Tesco, a user is alerted that the card number entered is incorrect.

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).

At Kohl’s the credit card number isn’t autoformatted. At Adidas, spaces are entered after every 4th digit for a VISA card.

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).

Just over 1/3 of the users during testing who encountered this layout inputted their credit card number in the “Name on Card” field (seen here at Wayfair). Nordstrom has the perfect sequence for the credit card fields.

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).

At Wayfair, month names are difficult to translate from the numeric representation on the physical card, and the year should be 2 digits. Cabela’s expiration date fields look exactly the same as the vast majority of physical credit cards.

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).

For inspiration on good Credit Card Form implementations, see L.L. Bean and John Lewis.

Order Review

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Order Review 5 Guidelines 60 Major E-Commerce Sites What’s This?

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. While a substantial number of sites (45%) provide a good, or even perfect, 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:

When wanting to edit the shipping address at Grainger, users at the review step are forced back to the shipping address step, and then must proceed back to the review step in a linear fashion. Victoria’s Secret allows users to easily edit order information.

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).

At Walgreens, some users who need to edit their billing address will be tripped up when they only see the link to “Edit payment method”. Zalando provides “Edit” links for all the distinct information groups: 1 for “Delivery Address”, 1 for “Billing Address”, and 1 for “Payment Method”. Users will find it much easier to quickly find the right “Edit” link for the information they need to change.

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).

For inspiration on good Order Review implementations, see Office Depot, Wayfair, Macy’s, and Microsoft.

Field Labels & Microcopy

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Field Labels & Microcopy 7 Guidelines 60 Major E-Commerce Sites What’s This?

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:

Foot Locker uses “CSC” as the label for the credit card “Security Code” field. During testing many users came to a stop when presented with such jargon. AEO uses the much more widely understood label “Security Code”.

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).

Macy’s only marks optional fields, making it harder to discern what is required. Walmart makes it easy to quickly determine which fields are required (denoted with asterisks) and which are optional (denoted with text in parentheses).

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).

For inspiration on good Field Labels & Microcopy implementations, see Build.com, Debenhams, HP, REI, and Crate & Barrel.

Field Design & Features

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Field Design & Features 8 Guidelines 60 Major E-Commerce Sites What’s This?

The average checkout’s Field Design & Features perform decently 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:

At Lowe’s, two optional fields — “Company Name” and “Address Line 2” — are open text fields, which will attract a lot of attention from users, despite the fact that only a minority of users actually need to input data in these fields. At Target, “Address Line 2” is hidden behind a link, allowing the majority of users who don’t need to interact this field to skip it quickly.

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).

At Gilt there’s no input masking for the “Phone Number” field. Home Depot provides an input mask for the “Phone Number” field.

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 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).

For inspiration on good Field Design & Features implementations, see HP and B&H Photo.

Checkout UX Is Getting Better but Still Has a Long Way to Go

Benchmark UX Performances Poor Mediocre Acceptable Decent Good Cart & Checkout 134 Guidelines Checkout Types 3 Guidelines Shopping Cart & “Added to Cart” Behavior 10 Guidelines Account Selection & Creation 9 Guidelines Customer & Address Information 12 Guidelines Gifting Flow & Features 5 Guidelines Shipping & Store Pickup 11 Guidelines Payment Flow & Methods (Incl. Third-Party) 8 Guidelines Credit Card Form 10 Guidelines Order Review 5 Guidelines Order Confirmation & E-Mail 4 Guidelines Form & Page Design 10 Guidelines User Interactions & Distractions 10 Guidelines Cross-Sells 4 Guidelines Validation Errors & Data Persistence 10 Guidelines Field Labels & Microcopy 7 Guidelines Field Design & Features 8 Guidelines Default Values & Autocompletion 8 Guidelines 60 Major E-Commerce Sites What’s This?

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:

Make “Guest Checkout” the Most Prominent Option (72% Don’t) Have the Right Microcopy in the Account-Selection Interface (33% Don’t) Avoid Overly Complex Password-Creation Requirements (68% Don’t) Display All Password-Creation Requirements Upfront (20% Don’t) Use “Delivery Date” Instead of “Delivery Speed” (34% Don’t) Show the Cutoff Time as a Countdown (62% Don’t) Present “Store Pickup” Within the Shipping Selector Interface (64% Don’t) Make It Easy to Compare “Store Pickup” to Shipping Options (50% Don’t) Use Luhn Validation (53% Don’t) Autoformat Spaces in the “Credit Card Number” Field (51% Don’t) Match the Credit Card Field Sequence to the Physical Card Sequence (36% Don’t) Correctly Format the “Expiration Date” Field (67% Don’t) Allow Users to Edit Data Directly at the Review Step (68% Don’t) Provide Separate ‘Edit’ Links for All Distinct Information Groups (40% Don’t) Avoid Jargon and Brand Names in the Checkout Microcopy (31% Don’t) Mark Both Required and Optional Fields Explicitly (73% Don’t) Choose the Right Interface Type for Optional Inputs (98% Don’t) Use Localized Input Masks for Restricted Inputs (48% Don’t)

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 710+ UX guidelines in Baymard Premium – get full access to learn how to create a “State of the Art” cart and checkout user experience.