Let's schedule your demo…

Join hundreds of brands using Veeqo to sell and ship everywhere

Join the hundreds of retail brands using Veeqo to sell and ship everywhere

Veeqo
Veeqo
Ecommerce Growth

6 Checkout UX Tricks to Boost Ecommerce Conversions

SHARE

Even the smallest hiccup in your checkout process could be costing you major ecommerce sales.

Just take a look at the data on the most common reasons for shopping cart abandonment, collected by Invesp:

Abandoned Cart Reasons

Notice any patterns? Of these fourteen reasons, six of them occur during the checkout process:

  1. Lack of guest checkout.
  2. Too much form-filling.
  3. Insufficient payment options.
  4. Extra taxes.
  5. Hidden shipping costs.
  6. A generally complex checkout process.

The good news is that store owners can combat the pitfalls of checkout with prudent, intelligent user-experience (UX) design.

How? That’s exactly what we dive into in this post. Covering six ecommerce checkout UX tips you can action today to up conversions.

1) Break up your checkout process

Looking for a sure-fire way to lose an online sale? You can’t do much better than to display the entire checkout on a single page or screen.

Checking out is an inherently complex process. There’s:

  • Cart adjustments.
  • Shipping.
  • Billing.
  • Coupon codes.
  • Order review.

And those are just some of the basic steps that all ecommerce sites have.

Your customer has decided to make a purchase – you don’t want to reward them with endless walls of input fields and forms. Seeing it all in one is overwhelming.

Instead, break up the checkout process into digestible chunks, bucketing the flow into steps – like shipping, billing, and order confirmation.

At the same time:

It’s also important not to simplify the process to an extreme. You don’t want a checkout that’s 56 discrete steps, each one a simple input field.

So make sure to find the right balance.

Let’s compare the checkouts between two enterprise retailers: Bed Bath & Beyond and Nike.

BB&B’s checkout is five phases:

  1. Shipping address.
  2. Shipping method.
  3. Contact & offers.
  4. Payment.
  5. Order review.

Nike on the other hand, slims it down to just two: shipping and payment.

Nike Ecommerce Checkout UX

Note that the two checkouts offer the same functionality.

Just like Bed Bath & Beyond, Nike also allows users to select their shipping method and apply a coupon or promo code. It even obtains their customer’s email and phone number as well.

The difference is that Nike’s checkout is better designed.

BB&B’s obviously works to some degree. But Nike’s looks (and feels!) like a much quicker and easier process.

2) Include a progress bar

Simplifying your checkout should be the first plan of attack for a more user-friendly shopping experience. But for some retailers, those complexities are unavoidable.

To bake more usability into a checkout that can’t be easily streamlined, you should prominently display the user’s progress through the checkout journey.

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.

Let’s examine the process of purchasing an airline ticket, a perfect example of an industry with an inherently complex checkout. We’ll use two major industry players as a case study: American Airlines and Southwest.

This is the initial screen the user sees when entering American Airlines checkout flow:

American Airlines Ecommerce Checkout UX

It’s the first out of… well, we don’t how many. That’s because AA hasn’t provided a progress indicator to show where we are in checkout, and how long we have to go before our flight is actually booked.

Compare that form field overload to Southwest’s checkout:

Southwest Airlines Ecommerce Checkout UX

There’s a conspicuous progress bar in the upper right-hand corner of the page. And they’ve also bucketed their forms in a clearer, more visually appealing way than American Airlines.

3) Utilise visual feedback

Visual feedback is a crucial element of ecommerce checkout UX – and something that follows on nicely from the progress bar concept.

The whole idea is to make sure the user is never confused about whether their data was successfully entered or order received.

The Southwest Airlines progress bar is again a great example of this:

Southwest Ecommerce Checkout UX Visual Feedback

The green tick/check mark is simple. Yet it gives that undoubted clarity that the first step of checkout has been successfully completed.

Every path-to-purchase should provide visual cues and confirmations as users progress through checkout. At the minimum, you should be validating the shopper’s:

  • Card information.
  • Shipping & billing address.
  • Any promo codes entered.

And finally, it should be absolutely, unambiguously clear that their order has been received on the final screen.

4) Cultivate credibility

There seems to be a new newsworthy cyberattack, scam or data breach every other week. Meaning the most valuable asset we have may be our privacy and security.

As online retailers, we handle often massive amounts of sensitive and highly personal information.

And while implementing security measures to protect that data goes without saying, it’s also not enough. Quality ecommerce checkout UX means showing the customer you’ve taken those measures and instil a sense of trust between both parties.

Military Hippie do this brilliantly.

To start, they remind you of the product’s five-star rating in the top-right of their checkout page:

Military Hippie Ecommerce Checkout UX 1

You’re then hit with plenty of reminders about security and reliability further down the page:

Military Hippie Ecommerce Checkout UX 2

Finally, you’re hit with another dose of strong social proof with a reviews carousel at the bottom-right:

Military Hippie Ecommerce Checkout UX 3

All this goes to say that you need to be placing strong emphasis on your commitment to protecting customer data during checkout.

Explain to the shopper why you need certain information, and link to your privacy policy if necessary. Offer several different payment methods, including secure options like PayPal, and prominently display their logos.

5) Add a guest checkout option

We know what account creation means in 2019. Entering your email address, setting a password, re-confirming that password, confirming 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.

This seems like a no-brainer, but you’d be surprised how many major ecommerce sites still don’t support guest checkout. Target, for example, forces its users to create an account at the onset of checkout:

Target Checkout Account Creation

The severity of this design mistake is only compounded when you click ‘create an account’, and see the form fields Target requests for account creation:

Target New Account Form

Nearly all of these input fields are for information the user would have to enter during a guest checkout anyway!

Yes, account creation helps to further marketing initiatives and fosters brand loyalty. But you don’t have to sacrifice this for guest checkout.

All that’s needed is an account creation prompt at the end of the checkout with two input fields:

  1. Password.
  2. Confirm password.

The user should have already provided all other necessary information during checkout.

6) Trim the form-filling

Form-filling is a fundamental user task and inherent to quality ecommerce checkout UX.

Unfortunately:

The information required by ecommerce sites typically means these forms have a high interaction cost. (The mental and physical effort a user must undergo to complete a task or process.)

There are two primary reasons most checkout forms have such a significant interaction cost:

  1. A high number of forms to fill out (e.g. both shipping and billing addresses, payment info, etc.)
  2. Those forms asking the user for information that might not be readily available (e.g. credit card number and security code).

There are ways to combat the tedium of form-filling – autocomplete being the most popular method. But it’s not infallible, and can even cause more user frustration if they have to go back and fix an autocomplete’s errors.

That’s why it’s advisable to take other measures in trimming down your forms.

This can include:

  • Basic usability features – like a ‘billing address same as shipping address’ checkbox or radio button.
  • Investing in a more accurate, robust address auto-complete that can pre-fill the form based on zip/post code and other information.
  • Simply reconsidering whether you actually need all the forms currently in your checkout.

Tying it all together

Checkout is the final obstacle between you and a sale, and yet it’s one of the most difficult stretches of the path-to-purchase. It’s the last chance for a shopper to abandon their cart – and the statistics show that they usually do.

To prevent this, it’s imperative to perfect your ecommerce checkout UX. Ensuring it’s as streamlined, seamless and user-friendly as possible.

The six ways to do this we’ve talked about here include:

  • Breaking down the checkout process into digestible chunks.
  • Including a prominent progress indicator.
  • Placing a strong emphasis on visual feedback.
  • Cultivating credibility by reassuring customers their data is secure.
  • Including a guest checkout option.
  • Trimming form-filling with basic auto-complete functionalities.

Depending on the ecommerce platform you’re on, it’s possible you could implement some of these changes right now.

If not, consider enlisting an ecommerce design agency to help implement all of these solutions and more.

SHARE THIS ON:
The following two tabs change content below.

Written by Sean McGowan

Content Writer at Codal
Sean is a technical researcher & writer at Codal, authoring blog posts on topics ranging from UX design to the Internet of Things. When not writing about the latest innovations in app design, Sean can be found cooking, watching old movies, or complaining about the shortcomings of his favourite Philadelphia sports teams.

Latest posts by Sean McGowan see all

Want more insights like this?

Join thousands of other subscribers and get the best content on ecommerce growth, marketplace trends and warehouse operations delivered directly to your inbox.