Photo by John Flinchbaugh, CC by-nc-sa
On average, almost 70% of customers abandon the checkout process before completing their purchase.
Cart abandonment rates are even more frustrating than bounce rates. They mean that one potential customer was motivated enough to select a product, proceed to make a purchase, but then, for some reason, they changed their mind.
Why do those clients leave? And what can be done to fix it? These are some tested best practices to build a checkout flow that converts.
DOs and DON'Ts for a perfect checkout experience
Firstly, display the thumbnails of the items being purchased and allow the client to edit their cart at any time. Increasing the number of items or deleting something from the cart are basic actions they need to be able to do.
Provide contact information, preferably a telephone number. Some people feel uneasy when making purchases online, and they might want to speak to another person to solve their doubts.
Don't trap users in the checkout process. Although at first it may sound like a clever way to force them to finish the purchase, in the end, it gives nothing but a poor user experience. If they don't know how to exit or go back to your site, they will likely close the tab and exit for good.
To avoid this, add an option to return and continue shopping. As long as you make the way back to the cart easy to reach, this should have a positive impact on the usability of the page and its ability to convert. Also, remember to include a clear progress indicator on the checkout page. They inform customers about how long the process is going to take, while also giving them more control to move back and forward and make edits.
The cart and the items inside it should be visible and easy to access while customers are browsing around the page. Don't let them get lost.
The important actions should be highlighted in a way that they're impossible to miss. Test different combinations of text and colors on your CTAs (calls-to-action) so customers never have to think about what the next step might be. For example, always make the "Proceed to checkout" action shaped as a button, in a colour that pops out.
La Redoute's checkout page illustrates several good practices: Easy-to-find shopping basket, progress bar, relevant information about availability, refund policy, and shipping costs... Making changes to the items is easy, and the CTAs serve to proceed and pay or keep shopping.
Allow different payment methods so that your client can pay comfortably. Some don't have a problem providing their credit card information, others prefer PayPal. Give them options to use their preferred system.
For registered users, save this information to make their next checkout quicker. The best example of this might be Amazon's 1-click instant purchase. The process becomes effortless and more convenient.
Display updated information about product availability. Otherwise, trying to add an out-of-stock product to the cart can be a stopper in the purchase flow. It is not necessary to tell how many items there are left, although if the number is very reduced it can be good to inform your client. The sense of urgency encourages to shop the item right away.
Reinforce shoppers with positive information. Customer reviews and testimonials improve the page's credibility.
Any additional information related to the product -about its warranty, maintenance, specifications... should be available to check, so customers don't have to leave the page to search for it. With reviews and sufficient documentation, you are giving your clients what they need to make well-informed purchases.
Save every cart, both for registered customers and guests.
Some people just like to save items in their shopping carts as ideas for later. It's a way to store things they liked. When the buyer is a registered user, send them an e-mail to remind them of their cart. In the case of guests, associate their cookie to the shopping cart and use re-marketing ads to bring them back.
In any case, whenever they return it will be nice to see the cart still remembers everything they liked the last time.
Improve the perceived security of the payment form
When customers are going to provide sensitive information, such as their credit card number, it is important to make them feel secure.
Most clients lack the technical knowledge to know what is happening behind the scenes, and it is important to make them perceive the checkout as safe.
This can be done by adding third party reinforcements. According to a survey run in 2013 by Baymard Institute, the badges that give users the best sense of trust when paying online are Norton (36%), McAfee(22%), TRUSTe, BBB, Thawte, Trustwave, GeoTrust and Comodo, in that order.
Note: 49% of the respondents marked they didn’t have a preference or didn’t have enough information to make a rationalized choice.
It is recommended to test several placements for these badges, to track conversion rate differences. Most checkout pages make the mistake of placing them on a sidebar, or in the header or footer of the page. They are less likely to be noticed in those areas.
They should be somewhere near the credit card fields, to remind insecure customers that the process is safe. It even looks like the payment process is the one that has been validated.
Yes, it doesn’t make the slightest bit of sense from a technical standpoint, but it works in terms of perceived security.
It is also recommended to encapsulate the most sensitive fields in a distinct style, using borders or backgrounds of a different colour.
Lastly: Remember to display contact information at this stage.
Never force users to register in order to make a purchase. It is tempting to use this in order to get the client's e-mail address, but for a first-time visitor having to register and fill in fields with personal information is bothersome, and seems unnecessarily intrusive.
Instead, DO: Allow guest purchases, and kindly ask them to register after the purchase, not before. You can then make the request more appealing, by offering juicy information about future offers or discounts, for instance.
Don't hide shipping costs or other extra fees. A sudden increase in the cost is an unpleasant surprise that might demotivate and even annoy the customer.
Instead, DO: Be upfront about your shipping information. Also, if you offer flat shipping or free shipping, make it visible as well and highlight it.
Coupon codes are one element that you should use with caution or simply avoid, at least on your checkout page.
Instead, DO: include one field to input discount codes that the client already has.
About cross-selling: It can be a good idea to recommend similar or related products, but do it with caution and test the results. The checkout might not be the best placement for these suggestions.
Resources and further information:
- Conversionxl.com: How to design an eCommerce checkout flow that converts.
- Inc.com: 7 simple ways to decrease shopping cart abandonment.
- Shopify: How to reduce shopping cart abandonment by optimizing the checkout.
- Bryaneisenberg.com: The design problems of forms.
- Baymard.com: Visually reinforce sensitive fields.