Imagine this: a potential customer clicks your ad, lands on a product page, adds it to their cart, proceeds to the checkout page … and leaves without buying. Cart abandonment leads to lost revenue — and wasted money spent acquiring customers. Let’s take a look at the 5 best practices for checkout design to help reduce your clients’ cart abandonment rates and improve user experience.
Why do people abandon their carts during checkout?
Baymard Institute reports an average cart abandonment rate of 69.89%. But why? The 3 biggest issues are (hidden) costs, artificial friction, and wasted time:
- Cost: When customers don’t see the cost of shipping and taxes until checkout, they underestimate the total cost of their purchase
- Friction: Many people are turned off by having to create an account — no one wants to jump through hoops to complete a purchase
- Time: People are wary of an involved checkout process
Designers can reduce shopping cart abandonment by addressing these 3 problems. Here’s how.
5 ecommerce checkout UX tips
Here are five tips to help you increase ecommerce conversions:
1. Let customers know the total cost as soon as possible
According to award-winning communications agency Walker Sands, consumers have grown to expect fast, free shipping.
So the obvious solution here is to … offer free shipping! It can be unconditional for orders over a certain amount, or within the country of origin. And if the customer doesn’t qualify, display the total cost as early in the process as possible.
Some companies employ dark patterns (interfaces crafted to trick users) and do the opposite — reveal the extra costs after the customer has gone through the entire checkout process. The assumption behind this practice is that customers are more likely to accept the total cost after investing time filling out forms.
I strongly advise against this dark UX pattern — it will annoy your customers and lose their trust.
2. Allow customers to make a purchase without requiring them to sign in or create an account
The more customer data you have, the more effective you can be at selling. And this arguably unsavory fact is why so many companies make the mistake of requiring customers to sign in or create an account before making a purchase.
This practice disrupts the shopping experience and leads to cart abandonment. The better practice is to give customers a guest checkout payment option, making account creation optional.
Stanfords, in the example above, gives you the option to check out as a guest or register. They’re clear about the benefits of creating an account: faster checkout, ability to save multiple delivery addresses, and easy access to order history and status. But for shoppers who aren’t interested, they can make the choice to skip this step and carry on. It’s a great approach.
You could also drop the whole idea of customer accounts and take people go straight to checkout.
3. Reduce the number of form fields in the checkout flow
Optimization of checkout forms is key. According to Baymard, the average checkout flow has 15 form fields. Most sites could cut this by 20 to 60% and still have an effective checkout experience. Which means that the average checkout flow has twice as many fields as they need.
Customers feel overwhelmed and intimidated when they see a lot of form input fields. So what can you do?
- Combine first name and last name fields into one full name field
- Use a single address field with the option to add a line for those who need it
- Remove everything that isn’t necessary (fields like title and middle name, etc.)
- Give the option to set billing address as the shipping address
Ideally, an optimized checkout flow should have 6 to 8 fields, but any reduction in the amount of form fields will reduce frustration.
4. Provide an outline of the checkout process
Don’t ask for all the information you need all at once — instead, break the checkout process into separate steps and guide the customer through each one.
MVMT’s checkout (above) consists of four steps:
- Cart
- Customer info
- Shipping method
- Payment info
Once you click “Proceed to Checkout,” each step is displayed at the top of the page in a progress bar, showing customers where they are in the process.
When customers know exactly what they need to do to complete a purchase, filling out forms becomes much less tedious.
5. Use copy and visual cues to put minds at ease
According to Baymard Institute, people still feel uneasy about sharing payment details with ecommerce sites.
Above is a mockup for increasing perceived security using copy and visual cues:
- The credit card payment area is called “Secure credit card payment”
- The sentence “This is a secure 128-bit SSL encrypted payment” provides additional information about security
- The sensitive credit card payment area is visually contained, setting it apart from other areas
- The padlock and badge icons offer visual cues of security
Use these visual cues for the credit card fields to instill confidence that this sensitive information will be treated seriously and with extra care.
Obviously, this won’t increase the actual security of the site, but it will help ease customers’ minds. This is especially important for new stores still building their reputation.
Delight your clients with tangible results
There are a lot of ways to enhance usability and build strong relationships with your clients. And one of the best ones is to help them make more money. Start by applying these best checkout design practices to help reduce cart abandonment rates.
About Author
