6 Checkout UX Tricks to Boost Ecommerce Conversions

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:

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.

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:

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:

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.

Want to reduce cart abandonment? Check out the 6 Keys to a Perfect Abandoned Cart Email Follow Up!

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:

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:

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

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

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:

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:

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.

If you are interested in this, you may also want to read our article on the biggest challenges in ecommerce right now.