E-commerce

8 UX tricks to reduce digital shopping cart abandonment

graphic representation of a desktop and a mobile app
Phoebe Lown
Phoebe Lown

Content Writer

We've all been there; you're browsing a webshop with your eye on particular items, but you never complete the purchase. Either the payment process is too long, or you become distracted, or the webshop doesn't support your desired payment method. Frustrating, to say the least, and it could be happening to your customers!

Why is shopping cart abandonment a problem for retailers?

As of 2020, the average cart abandonment rate stands at nearly 80%, that's over 3/4 of shoppers leaving the site without completing a purchase. While this estimation may not be the case for your business, it's a startling figure and is losing big and small eCommerce retailers millions in revenue every year.

How to calculate your cart abandonment rate:

Tracking your cart abandonment rate is an important metric to pay attention to, as it will help you understand if your sales funnel is broken or if shoppers have a poor user experience.

Calculating your cart abandonment rate is simple. All you need to do is divide the total number of completed transactions by the number of started transactions.

The percentage will indicate the users who had purchase intent but did not move down the funnel. Of course, 100% of the people visiting your site won't convert. Some may be window shopping, others may have landed by accident, but those who've added a product to their cart have an intent to buy.

But here's the good news: there are a ton of ways you can recapture those abandoned carts and regain control of your conversion. It's merely a matter of designing your checkout process around improving trust and convenience for your buyers. Keep these two principles in mind, and you can't go wrong.

With that said, here are some tried-and-true methods you should use to help your buyers complete their payment successfully.

1. Have a mobile-first strategy

According to Google, over 40% of all e-commerce transactions are now done on mobile devices. And if people have a negative experience on your mobile site, they’re 62% less likely to purchase from you in the future.

When the stakes are this high, there’s no other way to go: your checkout shouldn’t just be mobile-friendly, it should prioritize mobile traffic.

Your entire website should work perfectly on mobile devices – that’s a no-brainer. But speed matters too: just one second of delay in mobile load times can impact mobile conversions by up to 20%.

Best practice:

Use Think with Google’s free tool to test your mobile site speed. Not only will it tell you how long your page takes to load on mobile, it’ll also benchmark your site speed against your competitors’ and give you recommendations on how you can improve it.

2. Make it super straightforward

More than any other page on your website, your checkout should be so easy to navigate that your grandma can figure it out. Design the flow in such a way that the shopper’s attention is directed as efficiently as possible towards completing payment.

Best practice:

  • 1. Keep the page uncluttered and free from distracting, irrelevant details.
  • 2. Put the most important info at the top of the screen so your customers can choose exactly what they want. This could include their preferred payment methods or saved cards.
  • 3. For text-heavy blocks, such as your customer’s prefilled billing information, you can use a dropdown link, like this:
7 ux tweaks illustation

This allows the shopper to double-check their details while keeping your checkout looking clean and sharp.

3. Stay familiar

When it comes to handing over sensitive info, experiencing something new and unexpected throws people off and makes them suspicious. Which makes perfect sense, right? You probably wouldn’t be comfortable giving out your address to a stranger on the street.

Familiarity, on the other hand, is reassuring. So aim for that as much as you can.

Best practice:

  • 1. Customize your checkout so that your visual branding is prominently displayed. That lets your customers know that they’re still in your neck of the woods and that you’re (somewhat) responsible for their payment. For example, Payvision’s Checkout solution lets you customize and embed your checkout on your own domain to keep your conversion rates high.
  • 2. Speak your customer’s language. If your website is displayed in different languages, that experience should continue in the checkout process too.
  • 3. Localize your payment mix. Offering the payment methods most trusted and used by your customers, whichever country they’re browsing from, will get them to finish checking out with less hesitation.
7 ux tweaks illustation
4. Registration should be optional, not mandatory

Give your shoppers the choice to sign up for an account. Don’t force them to create one. The more necessary steps you introduce, the more likely your customer gets frustrated and abandons the process.

Best practice:

Let shoppers create an account after the checkout so that their information can be stored for future use.

5. Do the math for your shoppers

Don’t wait until the very last step in the checkout process to let your customer know what they actually need to pay. Besides the fact that it’s never cool to spring an unpleasant surprise on someone, many shoppers have a spending limit in mind. Finding out at the end that they’ve got to add extra costs means they’re going over budget and abandoning their cart.

Best practice:

Be transparent. Display shipping fees, duties and taxes, and other necessary costs upfront, so you can manage expectations early.

6. Show customers how they're progressing through the checkout

Checking out usually consists of multiple steps. Tell customers what else they have to do to finish checking out. Giving customers an indicator of where they’re at in the process gives them a sense of control.

It’s also a relief to be able to see at a glance that they can still review their order one last time before confirming payment.

Best practice:

Implement a progress indicator at the top of the page, with a simple description of each step in the process. Use a different color to clearly show which step the shopper is currently in.

7. Use site seals

18% of shoppers abandon their carts because they don’t trust the e-commerce site with their credit card information. So how can you increase the trustworthiness of your site? One way that’s proven to work is displaying visual icons that symbolize security.

There’s a variety of site seals you can use, such as the Secure Socket Layer (SSL) seal from Norton, or Google’s Trusted Store badge, or the PayPal Verified one. Generally, the more familiar the brand, the more they’re trusted by consumers.

7 ux tweaks illustation

Best practice:

Placing one or two icons close to the credit card field works well to reinforce payment security perception. It doesn’t matter too much which icons you choose, as long as you display some visual seals there.

Hopefully these tips help your customers (and their carts!) to complete their buying journey.

8. Saving the shopping cart

Online and real-life distractions happen all the time, making it easy for users to return to carts-in-progress at a time that suits them.

We've learned that forcing your customers to register isn't ideal practice. So, what's the easiest way to save a customer's cart? Using cookies to remember customers' carts without forcing them to log in is the easiest route. By doing so, you can then retarget them with ads of the products they had placed in the cart and push them to purchase. However, keep in mind that this will be subject to each user as they will permit your site to use cookies (they may either think it's helpful or an invasion of their privacy).

Best practice:

Always ask users for their cookie preferences, and be transparent on how you'll use them.

The next step? Making sure that your checkout connects seamlessly to a payment gateway that boosts e-commerce conversion.

An all-in-one solution

Our platform offers all the good stuff: one-click checkout, a variety of popular payment methods, automatic language detection and more features to drive conversion. Go ahead and take a look.

Explore our Checkout
Illustration of a world globe