Check out this project to see this research put into a prototype.
The checkout process is essential when making a business profitable when moving to a digitally platform. Any small design flaw in the checkout process can make or break the entire business.
According to The Fogg Behavior Model, Behavior = Motivation x Ability x Trigger
You want to aim for the top right of the graph—high motivation, easy to do, a trigger in place. If you have high motivation and low ability (difficult to do), what you’ll get is frustration. If it’s low motivation but easy to do (e.g. take out the trash), you get annoyance.
According to a study by Baymard Institute, 37% of users would abandon a checkout if they thought the site required account creation. This is further evidenced by Commerce Cloud customer data, which shows that 85% of checkouts are made by guests.
37% isn’t a very high number but it’s important to have these numbers as low as possible to ensure that customers come back to your store and it’s important that stores do not require account creation for checkout. Once you overcome the hurdle of getting customers to start a checkout, converting the sale becomes more important than collecting data. Customers prefer guest checkout, so make it easy for them to find, and place it first on the page.
What should "Add to Cart" look like?
When I think about some of my favorite shopping experiences, I think of Amazon, Nordstrom, iHerb and Zillow (shopping for homes still counts).
For Amazon and Nordstrom, they specifically tell you how many items are in your cart. Amazon will have your cart always visibly seen where you can see what kind of items you’re holding whereas Nordstrom will hide this list making it visible when you click on the bag icon.
Item quick view show these elements from most important to least important:
1. Price
2. Picture of the item
3. Item Name
4. Quantity
5. A remove button or icon
6. Save for later (opt)
7. In stock? (Opt)
1. Price
2. Picture of the item
3. Item Name
4. Quantity
5. A remove button or icon
6. Save for later (opt)
7. In stock? (Opt)
See my Tabio project to see more examples of this
Simplicity is Key
Break up the checkout process into digestible chunks, bucketing the flow into steps – like shipping, billing, and order confirmation. Many e-commerce sites breakup the checkout process into 4 steps:
1. Shipping address and method.
2. Contact & offers.
3. Payment.
4. Order review.
Show the user's progress
Some companies opt for a crisp, clean progress bar, while others simply number each step. Either way, it must be absolutely clear to the customer:
1. What step they’re on; and
2. how many steps are left in the process.
Without it, you risk your customer growing fatigued and abandoning their cart. No one likes buying things without seeing the end of the tunnel. It's the equivalent of waiting in a line checkout line. Nobody wants or likes that.
Make sure that there is also visual feedback that a certain step is satisfied or not. Include icons like checkmarks or stop signs and colors like red and green. It should be absolutely, unambiguously clear that their order has been received on the final screen.
See my project for an example of progress bars.
Guarantee Data Privacy
Privacy doesn't score high on the average shopper's list but I predict that it will in the coming years. Quality e-commerce checkout UX means showing the customer you’ve taken those measures and imbuing a sense of trust between both parties. All this goes to say that you need to be placing a strong emphasis on your commitment to protecting customer data during checkout.
Display lock icons in the Payment button itself to reassure the customer
Legally, this should be a no-brainer.
Be our Guest!
Entering your email address, setting a password, re-confirming that password, confirm your email, and then receiving marketing emails that you’re not interested in every week for the rest of your life (or until you finally unsubscribe).
That’s why it’s absolutely imperative for your online store to offer a guest checkout option.
Without one, you significantly increase the likelihood of your shopper abandoning their cart for greener pastures.
I, personally, have used the guest checkout option plenty of times for shops I know I wouldn't frequent. It saves tons of time and headaches for the user.
Expand your Digital Wallet Options
Provide several ways for a customer to pay for their items. Invest in relationships with Paypal, Amazon Pay, Cashapp, Zelle etc. More people are teaming up with fintech apps to pay for goods. If users have no way of paying you, they have no way of buying anything from you, and so it’s clear that accepting a wide range of payment methods is a good idea to ensure that all users can send money your way.
According to a qualitative study done by Baymard, "our 2021 quantitative study of the reasons for cart abandonments found that 7% of users had abandoned a checkout during the past three months because the site didn’t offer their desired payment option."
The Form Field Debate
In the latest checkout usability study, it was found that the average checkout contains 11.8 form fields.
A checkout flow can achieve a 20–60% reduction by being optimized to just 8 form fields.
User's reasons for checkout abandonment. "Complicated checkout process" tracked at 18%.
According to Baymard's benchmark, the average checkout flow for a new user is 5.2 steps long — counting from the shopping cart step to the order review step (both included).
The ultra-long checkouts with 8 and 9 steps remain almost gone completely, while there’s been a decrease in the number of 6-step checkouts and an increase in the number of 7-step checkouts. The shift is mainly towards checkouts that are 3-to-5 steps in length, with a 5-step checkout flow being the most common.
Research shows that, in general, the number of form fields in checkout is much more important when it comes to the overall usability, rather than the number of steps.
1. Users generally think of their name as a single entity. During testing, 42% of test users typed their full name in the first name field at least once. A single “Full Name” field results in roughly a 6% reduction in the total number of form fields.
2. Hide “Address Line 2” (81% Don’t), “Company”, and “Coupon Code” Fields (48% Don’t)
3. Use Zip/Postal Code Autodetection (30% Don’t)
4. Hide “Billing Address” Fields (14% Don’t)
5. Have Delayed Account Creation (18% Don’t) or have "continue as guest" option
Baymard UX Research (2021)
1. Third-party payment methods need to be provided and can help reduce checkout abandonment.
2. Testing revealed that some payment selector UIs can cause user confusion and choice paralysis.
3. Off-site third-party payment flows can be misunderstood and so need to be explained clearly. Another downside is users forgetting their passwords to these third-party sites. This is can create a mental load that will deter a user from completing the checkout process.
4. Sites should provide payment methods commonly used in each territory they sell in. For example, goods with hefty price tags should have payment plan options or wire transfer options.
For users who don’t know or fully understand the third-party options presented, it will add significant friction to the payment method selection process to ask users to perform an active choice; for example, to have to actively find and select the credit card option.
Beyond having the most popular choice as the default selection, the interface needs to account for the fact that each of the payment methods will have different fields, descriptions, and even flows associated, which are only relevant to users who select that one payment option.
Qualitative Study conducted by Baymard
The best-performing payment methods interfaces observed in desktop testing were tabbed designs — either horizontally or vertically tabbed.
Tabbed interfaces have two benefits that make them well suited for payment method selections:
1. Regardless of how much content each option contains, the options themselves will always stay in close proximity, clarifying to users that this is an interface where one selection has to be made among a list of two or more mutually exclusive options.
2. A default choice — typically credit card — with expanded fields provides a clear path for users who may be slightly in doubt, while still keeping the alternative payment methods clear to users who know which alternative they are looking for.
Tabs caused almost no friction at all for the uninitiated users who preferred just proceeding with the default credit card method.
Vertically tabbed designs can hold a large number of options (e.g., 6 or more), whereas the horizontal approach is less suitable for a very large number of payment methods.
The best-performing payment methods interfaces observed in mobile testing are visible in one viewport, and the designs convey clearly that users need only to choose one.
The horizontally tabbed payment selector on Gucci makes it easy for credit card users to complete payment and offers two other options that are easy to find and that don’t clutter the interface.
What would splitting payments look like?
Williams-Sonoma provides radio buttons — that include logos — as payment selectors. Credit card payment is a clear default, but third-party payment methods are easy to find and select.