How to combat cart abandonment with UX: Detecting common checkout mistakes of eCommerce brands

Online checkout stats shows that more than 80% of online customers abandon their shopping carts. Out of them, about 87% are going to finish their order later. We are not sure if businesses are ready to sacrifice and lose time waiting for those 87% to return and complete the checkout, that’s why in this article we are going to look at common checkout mistakes eCommerce brands continue making and give our view on how to combat digital cart abandonment with UX.

Cart abandonment: Is it ok?

One of the most common reasons for digital shopping cart abandonment is indeed the fact that customers are occasionally browsing the website, having no intention of buying the items they add to the cart. In other words, the shopping cart is used as temporary storage of links to potentially interesting products that are further used at the decision stage. This is a habitual pattern you may also observe in brick-and-mortar stores – customers come to explore new arrivals, test and touch the items or hear what a sales assistant in a physical store thinks of them. Again, their primary intent is not to buy, that’s why only a few customers bring their shopping cart to the cashier. In other words, digital cart abandonment is not always a problem marketers have to deal with. But how to differentiate when it is a problem and deal with it?

How to deal with digital cart abandonment?

First, try providing users with the toolset that will help to get their tasks covered with the catalogue on your website. And the first one is definitely getting acquainted with the range of items and selecting the product(s) that matches the users’ expectations. Ask yourself: “Do my customers have enough information for making the decision at this stage?”. Don’t chase the “Add to cart” or “Buy now” CTAs. Instead, you can offer customers to “Add to compare” or “See more” on the product card.

We’ve taken walmart.com and Agros.co.uk as examples.

The first one (Walmart) abandoned the “Buy now” option for their tables and refrigerators categories, and this is quite reasonable – the layout itself imposes restrictions on the information displayed and required to make the decision to add to the cart. Here we can see that the “Add to cart” button was replaced by the useful information that is aimed to engage the customer into exploring the product (colour options, best seller, free delivery, free pickup).

Another retailer, Argos.co.uk offer their customers three tools of each tile of the product page layout:

• Read more;
• Add to wishlist;
• Сhoose options.

Highlighting the item that was added to the cart

At the selection stage customers tend to look through many product cards and may even add several items to the cart in order to make their decision later. They also tend to return to the previously viewed items for re-comparison. This often happens among a whole range of items that look alike distinguishing the ones a user has already interacted with becomes an issue.

Baymard UX Research Institute conducted a test, where participants had to order more than one product on the website. The results proved that users often returned to the product listings after adding the product to the cart. We have highlighted three main problems that users encounter when they return to the catalogue after adding an item to the cart:

• users opened pages with the products that they previously viewed and found unnecessary;
• being uncertain whether the item was added to the cart, users clicked “Add to cart” again, thereby increasing the number of items in the order without realising it;
• to find out if a certain item was added to the cart, users deliberately visit the cart (sometimes opening a new tab for this action).

Each of the problems listed affects both the time spent on product selection and the convenience of the user’s journey. The go-to solution would be to mark previously viewed products in lists using the CSS “: visited” selector and replace the text on the button for items that have already been added to the cart.

Premium Sound website is an example of how a product card look differs when the user views it for the first time (“Add to cart option” is displayed) and already has it in the cart

We recommend to start working on the checkout interface and cart improvement only when you are able to correctly “guide” the user through all the stages of the customer journey. In this case, you will receive correct data on abandoned carts and will know for sure at what stage the user leaves the site.

Authentication and Guest Checkout

37% of users abandon digital сarts because of the requirement to create an account, and. 18% of those who already have an account often forget their password and face the problem of resetting it to the email address. As a rule, some emails do not arrive immediately, do not arrive at all, or end up in appearing in your customers spam folder.

What are our suggestion on this matter:

• Provide  your user with an obvious opportunity to place an order without the necessity to log in.
• Report if a logged-in user indicated the data of an already existed account. Perhaps authorization will allow them to use the previously accumulated bonuses.
• Reduce the requirements for password complexity (if your customers accounts do not store credit card data or other important information) to 6 characters, impose no requirements for special characters.
• Do not mention account registration at the checkout, offer to do this on the “Thanks for your order” page.

Ebay is a good example of an easy checkout form. The website provides the options: you may choose to sign in to complete the checkout or check out as a guest.

If you choose to sign in, the system suggests signing in with social networks as well as  from the traditional sign in via email.

Guest checkout also looks user-friendly and contains only the essential data grouped into just a few fields. Basically, at the checkout users only see the summary of their order, shipping info and payment options – no request for anything extra.

Contact forms that affect cart abandonment

Long forms at the checkout stage are the reason for an abandoned cart in 21% of cases. In particular, the number of website fields correlates with the overall conversion. This means the fewer fields in the forms, the more likely the website is to have good overall performance.

Use one “Full Name” field. When filling in the checkout fields, 42% of users enter their full name in the “First name” field, and then go back to correct the information once they proceed to the “Last name” field. Obviously, using one field for the full name can speed up the checkout process.

Choose the fields to display based on your task. A demonstrative example could be websites that offer flower delivery. Lots of these businesses make the same mistake –  they force users to fill in the information both for the sender and recipient. The logic is obvious: people often send a bouquet to surprise someone, while at the same time, the online store has to know whom to contact in case anything goes wrong. In this case, adding a checkbox indicating that “I am both the customer and recipient” helps to save users time spent at the checkout.

But what to do if you need to get as many details as possible, but at the same time try to be user-friendly at the checkout?

In the niches where details are essential, you can figure them out from scratch and not to bother the customer with additional questions when they are completing the checkout process. The Appleyard website does this like.

Here the customer can even select where to leave the flowers when the courier arrives. And additional information is optional.

This way, when the user is at the checkout, they basically need only to select the payment options and they are done.

Accordion-style checkouts used to combat cart abandonment

Dividing checkout forms into steps is another essential point of UX aimed at preventing cart abandonment. Accordion style checkouts are a popular solution.

Accordion-style checkouts allow to collapse the users personal data, shipping and payment fields as the user moves from one step of the checkout to the other. This approach minimizes checkout movements in the opposite direction as users immediately spot any mistakes made on the previous steps.

Walmart has the accordion-style checkout on their website

However, the implementation of the accordion-style checkouts have several pitfalls:

• once completed by the user, the step immediately collapses. Sometimes after filling in their personal data, the user doesn’t have the clue that they are able to get back to the previous step, even if they have already tapped the “Next” button;
• once the step collapses, the information from this is not displayed to the user any longer;
• tapping “Back” on the website or in the app often brings the user to the previous page, but not to the previous step, which would be more logical and user-friendly (in case we refer to AJAX Control Toolkit).  

How to combat that?

• Animate your “accordion” as the user precedes to the next step.

• Display generalised information and the options to edit it.

• Customise the behavior of the “Back” button in the browser or smartphone according to the user’s expectations: the button should return them to the previous step (even if, technically, it is the same page). This can be done using the HTML5 History API. The history.pushState () function allows a website to trigger a URL change without reloading the page.
  

Easy interaction with the checkout fields

Perform validation. Filling in the checkout fields from the smartphone keyboard, many users can often make mistakes and typos. And no intelligent input comes as a remedy. Displaying an example to ensure that users enter information in the correct format is not enough either. In addition to using an input mask, perform field validation on each step and suggest using a numeric keypad, especially when it comes to adding a phone number and credit card information. Configure the mask so that the user does not need to enter any special symbols using the smartphone keyboard like dashes, brackets etc.

Mark required fields. The user tends not to understand which fields are optional and which are mandatory. Tests run on the checkout forms have shown that 32% of users skip fields that are not marked as required, which makes the system return an error. At the same time, it was proved that marking the required fields with an asterisk is usually enough provided the other fields are marked as optional.

When you mean to return customers to the blank fields in the form, use auto-scroll to highlight them to the customer. This is especially useful for smartphone users, as those may find themselves confused about being unable to complete the checkout without knowing the reason or have to scroll back and check what’s wrong with the information they added. From our experience, this is one of the most common show-stoppers at the checkout, and obviously a reason for cart abandonment on eCommerce websites.

Antropologie not only marks the required fields with asterisk but highlights the ones the user has missed and adds a red line with the explanation at the top of the checkout page. This way, in case any required fields are left blank, the system auto-scrolls the page to the top and prompts what prevents from placing the order.

Remove any links that distract from the checkout process. Nothing should bother your customers when they are staying at the digital cashier with their shopping cart, ready to check out. Any links that are not related to the checkout process are the reason for digital cart abandonment for at least a half of online stores that come to us to get a usability audit. These can be the links leading the user to:

• Category and product pages, which are a part of the full website navigation and search systems in the checkout header.
• Information pages: shipping, payment, contacts, sale – those are present in the footer.
• Authorisation or account pages that can sometimes redirect to the user’s account instead of auto-filling their personal data.

Distracting your users with the links that are not related to the checkout, you basically give them a right to leave without even saying goodbye.

Tous jewellery brand has a list of links that may trigger digital cart abandonment at the checkout pages. The user may easily be distracted by any of the links placed in the footer. Once they open it in the same browser tab, they are likely to never complete the checkout.

MyTheresa places their distracting links in the header, making the product, My account and My wishlist tabs visible in the header of the checkout stage.

Checkout security

Lack of checkout security is another reason of digital cart abandonment. 18 % of shoppers abandon their carts due to the lack of trust towards the website. What can you do to make your customers rely upon you?

• avoid displaying a different price at the checkout. Make sure your users get all the information about shipping and taxes before they find themselves confused at the final stage of the checkout. Even if the product’s price is discounted, do any maths for your users and let them understand what they are going to be paying for. Explain any changes to the price of items in the cart, be comprehensive and transparent;
• use safety seals to highlight that you are using the trustworthy payment getaways which are seamlessly integrated with the checkout on your website.

Maisons Du Monde demonstrates transparency when it comes to order details and security using the trusted payment options

To sum up

The checkout stage is one of the most vulnerable spots of many eCommerce websites. Sadly, the list of pitfalls that lead to digital cart abandonment can be expanded. And it has expanded since people started to shop from their mobiles. In this article we covered the most common checkout mistakes of eCommerce brands.

Before the checkout, make sure the selected item is highlighted, and the user is aware of what’s already in their cart.

Long forms and misuse of fields at the checkout are a massive show-stopper, that trigger digital cart abandonment.

Authorisation should be suggested as an option but never used as something mandatory. Guest checkout is a user-friendly way to collect customer data and no additional actions are required at the checkout.

Keep your users focused at carrying their cart to the digital cashier. Remove any links that are external and not related to the checkout.

Let your customers know how they are progressing at the checkout. Using accordion-style checkout forms, make sure the users are free to travel back and forth.

Secure checkout by letting your customers know you are transparent explaining the price including VAT and shipping  costs and offering trusted payment options only.

At Promodo, we know how to combat the most common mistakes at the checkout stage and keep our eyes sharp to spot any points of growth in your websites’ UX. Want to combat cart abandonment? Take our hand and let’s do it together!

‍