Content
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.
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?
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:
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:
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.
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:
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.
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.
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:
How to combat that?
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:
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.
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?
Maisons Du Monde demonstrates transparency when it comes to order details and security using the trusted payment options
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!
You may also like
Choose quality and trusted services to improve the presence of your company on the Internet, and feel free to contact our UK team if you have any questions.
In this article, we'll explore the rather technical part of how to run ads for Shopify store.
We at Promodo are ready to help you improve your performance across all digital marketing channels.
Get started