68% of e-commerce site users abandon a purchase after adding items to the cart. According to Baymard, the design and flow of checkout mostly cause this.
In this post, I will walk you through their findings and provide my own view on it.
You will see great examples, that clearly illustrate the contrast between the "right" and the "wrong" way to do checkout UX.
The current state of Checkout UX
Fun fact: Baymard’s 2019 study shows that out of the 59 top-grossing US and European e-commerce sites, 58% have acceptable Checkout UX performance, 36% have average checkouts, 6% have poor checkouts. The average website has 32 usability problems in their checkout flow.
Below are UX performance pitfalls to prevent for 6 subtopics of Checkout UX.
Account Selection & Creation
Under Account Selection & Creation, there are 4 UX issues that sites often have:
72% of Sites Don’t make ‘Guest Checkout’ the leading Option: 14% of users who didn’t find the “Guest Checkout” option, ended up abandoning the site. The option should be the most pronounced on the account-selection step. Yet, 72% of websites don’t adhere to this.
33% of Sites Don’t Have Good Microcopy in the Account-Selection Interface: For good microcopy, the word “Guest” should be included in both the header and primary button in the account selection stage. This will enable your potential customer to quickly notice that your website offers the guest checkout option. Still, 33% of sites don’t have clear microcopy in the account-selection interface.
68% of Sites Have Complicated Password-Creation Requirements: Complex password rules can increase the checkout-abandonment rate by 18.75%. Sites should desist from overly strict password rules. 68% of websites still have too complicated password-creation requirements.
20% of Sites Don’t Show Password-Creation Requirements Upfront: Sites should display password requirements upfront to avoid errors in the first trial, which could be frustrating. Sites should also provide users with real-time inline validation that would show the correctness of the password creation process. 20% of e-commerce stores don’t display password-creation requirements upfront.
Shipping & Store Pickup
There are 4 issues pertaining to Shipping & Store Pickup:
34% of Sites Provide info on ‘Delivery Speed’ and not ‘Delivery Date’: Providing a delivery date, or even a date range (an exact date) instead of delivery speed (3 working days) helps users to quickly understand when they’ll receive their order. 34% of sites still use delivery Speed.
62% of Sites Don’t Include the Cutoff Time in the Delivery Countdown: Excluding cutoff time misleads a user to select a shipping option, missing the non-specified cutoff time. Yet, 62% of sites don’t include cutoff time.
64% of Sites Don’t Display ‘Store Pickup’ in the Shipping Selector Section: Most users view store pickup as a shipping option and so expect to find it alongside the other shipping options. Hence, sites should display ‘store pickup’ among shipping options. 64% of websites don’t show this information.
50% of Sites Make It Difficult to Compare ‘Store Pickup’ to Shipping Options: In-store pickup should be presented with enough information for users to make an informed decision. 50% of sites make it difficult to compare ‘Store Pickup’ to shipping options.
Credit Card Form
There are 4 issues relating to Credit Card Form:
53% of Sites Don’t Use Luhn Validation: Luhn validation checks to see if the card number entered by a user is plausible and can alert for errors. Sites should use this to guide users when putting in their car details. 53% of websites don’t use Luhn validation.
51% of Online Stores Don’t Autoformat Spaces in the ‘Credit Card Number’ Field: Adding auto-formatting to the card number helps to ensure the typed number is accurate. This will guide users while providing their card details and reduce errors. 51% of e-commerce shops don’t do this.
36% of Sites Don’t Display the Credit Card Field Sequence Correctly: Using the correct order for the credit card fields prevents confusion and errors. This means the card number field should come first, followed by the expiry date and the so on. 36% of online stores don’t match the credit card field sequence correctly.
67% of Sites Use Wrong Format for the ‘Expiration Date’ Field: Expiration date field should be formatted as “MM / YY” or “MM-YY.” This makes the process easier for users, as this format is used on credit cards. 67% of sites format the ‘Expiration Date’ field incorrectly.
There are 2 issues sites related to the order review step:
68% of Sites Don’t Let Users Edit the Order Directly at the Review Stage: Online shops should allow users to edit data at the review step. This can be done with page overlays that pop up over the screen or inline form fields. 68% of sites don’t do this despite its importance.
40% of Sites Don’t Provide ‘Edit’ Links for All Distinct Information Groups: There are various information groups at the review stage. Each of them should come with separate “Edit” links, so they don’t confuse users. 40% of sites don’t take advantage of this.
Field Labels & Microcopy
There are 2 common issues that e-commerce shops make on Field Labels & Microcopy:
31% of Sites Use Unclear wording in the Checkout Microcopy: Use precise and clear terms in your microcopy to resonate with users. 31% of sites use jargon in the checkout microcopy.
73% of Sites Don’t Mark Required and Optional Fields: In your forms, it is necessary to mark out fields that are required from those that are optional. This will make the process clear and easy for users. 73% of sites don’t mark required and optional fields.
Field Design & Features
There are 2 issues when it comes to checkouts’ Field Design & Features:
98% of Sites Don’t Show Optional Inputs Clearly: Make the checkout process seamless and quick by clearly showing the optional fields. By doing this, you’re making sure that the process is hitch-free for users. 98% of sites don’t use the right interface for optional inputs.
48% of Web Shops Don’t Restrict Data entry based on Local Formatting standards: Some online shops make use of input character restriction. These sites should also use input masks to guide users. 48% of websites don’t use localized input masks for restricted inputs.
Baymard has revealed that 6% of sites have a completely broken Checkout UX, 36% of sites perform averagely, and none has a state-of-the-art Checkout. According to the 18 pitfalls discussed in this article, the following are solutions:
Prioritize the “Guest Checkout” option.
Use Good Microcopy in the Account-Selection Interface.
Use Simple Password-Creation Requirements.
Display All Password-Creation Requirements Upfront.
Use “Delivery Date” Instead of “Delivery Speed.”
Include Cutoff Time in Countdown.
Display “Store Pickup” in the Shipping Selector Section.
Make It Effortless to Compare “Store Pickup” to Shipping Options.
Use Luhn Validation.
Autoformat the “Credit Card Number” field.
Display the Credit Card Field Sequence Correctly.
Use the Right Format for the “Expiration Date” field.
Let Users Edit Directly at the Review Stage.
Provide ‘Edit’ Links for All Distinct Information Groups.
Use Clear Terms in the Checkout Microcopy.
Mark Required and Optional Fields.
Use the Right Interface for Optional Inputs.
Use Localized Input Masks for Restricted Inputs.
If you found this summary interesting, I think you should head over to the original article and get all the details too.
Are you uncertain if your customer journey could be improved? Please feel free to reach out to us. We might be able to help you in the right direction.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
The cookie is set by CloudFare. The cookie is used to identify individual clients behind a shared IP address and apply security settings on a per-client basis. It does not correspond to any user ID in the web application and does not store any personally identifiable information.
This cookie is set by Hubspot. According to their documentation, whenever HubSpot changes the session cookie, this cookie is also set to determine if the visitor has restarted their browser. If this cookie does not exist when HubSpot manages cookies, it is considered a new session.
The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Advertisement".
This cookies is set by GDPR Cookie Consent WordPress Plugin. The cookie is used to remember the user consent for the cookies under the category "Analytics".
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Non Necessary".
This cookie is used to keep track of which cookies the user have approved for this site.
Used by sites written in JSP. General purpose platform session cookies that are used to maintain users' state across page requests.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
This cookie is set by Facebook to deliver advertisement when they are on Facebook or a digital platform powered by Facebook advertising after visiting this website.
This cookie is a browser ID cookie set by Linked share Buttons and ad tags.
The cookie is set by Facebook to show relevant advertisments to the users and measure and improve the advertisements. The cookie also tracks the behavior of the user across the web on sites that have Facebook pixel or Facebook social plugin.
Used by Google DoubleClick and stores information about how the user uses the website and any other advertisement before visiting the website. This is used to present users with ads that are relevant to them according to the user profile.
This cookie is used to a profile based on user's interest and display personalized ads to the users.
This cookie is set by Youtube. Used to track the information of the embedded YouTube videos on a website.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
This cookie is set by Hubspot and is used for tracking visitors. It contains the domain, utk, initial timestamp (first visit), last timestamp (last visit), current timestamp (this visit), and session number (increments for each subsequent session).
This cookie is installed by Google Analytics. The cookie is used to calculate visitor, session, campaign data and keep track of site usage for the site's analytics report. The cookies store information anonymously and assign a randomly generated number to identify unique visitors.
Google uses this cookie to distinguish users.
This cookie is installed by Google Analytics. The cookie is used to store information of how visitors use a website and helps in creating an analytics report of how the wbsite is doing. The data collected including the number visitors, the source where they have come from, and the pages viisted in an anonymous form.
This cookie is set by Youtube and registers a unique ID for tracking users based on their geographical location
This cookie is used by HubSpot to keep track of the visitors to the website. This cookie is passed to Hubspot on form submission and used when deduplicating contacts.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
This cookie is set by HubSpot. The purpose of the cookie is to keep track of sessions. This is used to determine if HubSpot should increment the session number and timestamps in the __hstc cookie. It contains the domain, viewCount (increments each pageView in a session), and session start timestamp.
This cookie is set by linkedIn. The purpose of the cookie is to enable LinkedIn functionalities on the page.
This cookie is used to store the language preferences of a user to serve up content in that stored language the next time user visit the website.
This cookie is set by LinkedIn and used for routing.
This cookie is set by hubspot. This cookie is used to recognize the user who have chatted using the messages tool. This cookies is stored if the user leaves before they are added as a contact. If the returning user visits again with this cookie on the browser, the chat history with the user will be loaded.