5 ‘Credit Card Form’ Implementations That Make ‘L.L. Bean’ Best-in-Class
69% of all e-commerce visitors abandon their shopping cart. Why?
At Baymard we’ve tracked the global average cart abandonment rate for 11 years, and it currently sits at 69.2%
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 69% of users – after having added items to their cart – then choose to abandon their purchase.
Why is it that this many orders are abandoned? And what exactly can online retailers do to improve this sad state of affairs? That’s exactly what we wanted to find out.
At Baymard Institute, we started researching checkout usability more than 11 years ago when we founded the institute and did our first round of large-scale usability testing. Ever since, we’ve tested and re-tested checkout usability, running large-scale qualitative research studies testing the checkout flows of the world’s leading e-commerce sites, as well as conducting checkout UX audits for more than 100 leading e-commerce sites.
This page provides you an overview of the results from those years of testing checkout flows with real end-users. All of this research is available as part of Baymard Premium.
During all 11 years of usability testing we have consistently found the design and flow of the checkout to frequently be the sole cause for users abandoning their purchase during the checkout flow. Either because users become so infuriated that they leave in anger, or because they don’t know how to complete one or more fields, and thus have no other option but to leave.
Cart & Checkout
Shopping Cart & “Added to Cart” Behavior
Account Selection & Creation
Customer & Address Information
Gifting Flow & Features
Shipping & Store Pickup
Payment Flow & Methods (Incl. Third-Party)
Credit Card Form
Order Review & Confirmation
Order Confirmation & E-Mail
Layout & Flow
Form & Page Design
User Interactions & Distractions
Validation Errors & Data Persistence
Field Labels & Microcopy
Field Design & Features
Default Values & Autocompletion
To accompany the usability test sessions we’ve also benchmarked the checkout flows of 60 top grossing US and EU e-commerce sites across all 134 guidelines, each on a 7 point weighted scale. This has resulted in a benchmark database with 7,800 checkout elements manually reviewed and scored, across 440 different checkout steps.
When looking at the general state of checkout usability, the average performance is “mediocre”. The average site has 39 unique improvements to perform in their checkout flow, to gain the 35.26% increase in conversion rate our combined usability test sessions show that the average large-scale e-commerce site can potentially improve through better checkout UX. However, the nuances and diversities behind the overall mediocre performance are manyfold.
Explore the current checkout UX performance:
Explore design patterns across 525 examples of checkout step designs and features, all annotated and organized into 12 different page types. This is a great way to get inspiration for your own checkout flow, and to get a feel for emerging trends in checkout design.
We’ve released a small subset of the Premium research finding on Checkout UX and form field usability for free in these articles:
Beyond the extensive set or articles, benchmark database, and Premium research we have on checkout UX, we’ve also gathered three resources that are related to checkout UX that you may want to explore:
A free auto-complete plugin for country selection.
A reference list of 41 cart abandonment statistics along with a reasons for checkout abandonments survey (lower on the page).
Card number patterns
A reference table of numerous different credit card patterns, outlining the IIN-range and spacing-schema.
All 134 checkout research findings are available as part of Baymard Premium, and are divided into the following 17 topics (611 pages of research findings in total):
Get full access to all our Cart & Checkout UX research reports, benchmarks, and page designs previewed here, along with our complete 700+ guidelines for Homepage & Category Navigation, Search, Product Listing, Product Details Page, Accounts & Self-Service, and Mobile E-Commerce. Utilize our 54,000+ hours of UX research to improve your Cart & Checkout user experience and to document your UX decisions.
This research on Checkout UX is part of Baymard Institute’s full 54,000+ hours of large scale research catalog, which is based on:
Baymard’s research methodology is described in detail here.
What are the 20 most important changes you can make to your checkout process?
We will put together a 40-page report of the 20 most important usability improvements you can make to your checkout process.