Ecommerce checkout design: 5 tips to increase conversions

Ecommerce checkout design: 5 tips to increase conversions

Find out how to use design to increase conversions and reduce cart abandonment in your ecommerce store checkout process.

Imagine this: a potential customer clicks your ad, lands on a product page, adds it to their cart, proceeds to checkout … 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.

Why do people abandon their carts during checkout?

Bar graph from Baymard titled, "Reasons for abandonments during checkout."
Image credit: Baymard Institute

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:

  1. Cost: When customers don’t see the cost of shipping and taxes until checkout, they underestimate the total cost of their purchase
  2. Friction: Many people are turned off by having to create an account — no one wants to jump through hoops to complete a purchase
  3. Time: People are wary of an involved checkout process

Designers can reduce cart abandonment by addressing these 3 problems. Here’s how.

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 let customers shop as guests, making account creation optional.

Stanfords checkout page.

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

According to Baymard, the average checkout flow has 15 form fields. Most sites could cut this by 20 to 60% and still be effective. 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 fields. So what can you do?

  1. Combine first name and last name fields into one full name field
  2. Use a single address field with the option to add a line for those who need it
  3. Remove everything that isn’t necessary (fields like title and middle name, etc.)

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

MVMT checkout page.

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:

  1. Cart
  2. Customer info
  3. Shipping method
  4. 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.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

5. Use copy and visual cues to put minds at ease

Checkout page mockup showing how a payment form can emphasize its security with visual cues such like microcopy, the use and position of site seals, a padlock icon, and a visual encapsulation of credit card fields using a grey background color.
Image credit: Baymard Institute

According to Baymard Institute, people still feel uneasy about sharing payment details with ecommerce companies.

Above is a mockup for increasing perceived security using copy and visual cues:

  1. The credit card payment area is called “Secure credit card payment”
  2. The sentence “This is a secure 128-bit SSL encrypted payment” provides additional information about security
  3. The sensitive credit card payment area is visually contained, setting it apart from other areas
  4. 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 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.


Comments

  1. Теперь буду знать

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!