How checkout design improves sales.
One of our friendly local team will be in touch with you shortly.
03 February 2020
Designing a mobile checkout that follows UX best practice will help optimise your entire mobile site. In this post we look at the capabilities and constraints of mobile devices and how to create a mobile checkout that converts.
The smaller the screen, the bigger the challenge.
Once you've overcome the hurdle of getting customers through to your commerce checkout, converting the sale becomes the most important item on the agenda. After all, the checkout flow is where the money's at.
The checkout is the most important part of your mobile commerce experience, but if it's bad or falls victim to checkout abandonment then it'll need to be highly scrutinised from angles. And rightfully so, as the checkout directly influences brand perception, likelihood of repeat purchases and overall ability to drive revenue.
Designing a mobile checkout that follows user experience (UX) best practice will help optimise your entire mobile site. In this post we look at the capabilities and constraints of mobile devices and how to create a mobile checkout that converts.
SHOPPING CART ABANDONMENT VS CHECKOUT ABANDONMENT
It's important to point out that there is a subtle distinction between cart and checkout abandonment. Cart abandonment is when a shopper puts items in their cart and then leaves the site. Checkout abandonment is when a customer has already started the checkout process, or form, but leaves before completing it.
According to recent figures from Baynard, 70% of online shopping carts in Australia are abandoned. Getting to the route of shopping cart abandonment can help when decoding checkout abandonment. After all, tapping on the cart indicates a desire to proceed, so avoid any performance delays and remove any hurdles.
What causes shopping cart abandonment?
A big reason for cart abandonment is a bad UX. This includes:
Price shocks and price comparisons are also major factors. Make sure your site is loading as quickly as possible by checking its overall site health, is responsive on mobile devices and easily allows customers to shop.
There are a number of best practice points you can implement to reduce shopping cart abandonment:
What causes checkout abandonment?
Your shopper has clicked on the cart icon, reviewed their order, is happy with it and starts filling their details into your checkout form. Then, just like that, they leave.
With 87% of shoppers abandoning sites if the checkout process is too difficult, getting it right is so important for ROI. For the consumer, starting the checkout process is a greater commitment than simply adding items to the cart. The purchase decision has been made so what's causing ready-to-buy consumers to get do frustrated that they leave without what they came for? The answer usually lies in one, or many, of these factors:
Figures from Accenture highlight that 48% of shoppers will leave sites because of poorly personalised brand and payment experiences. Let's take a look at how you can improve your mobile checkout.
MOBILE CHECKOUT DESIGN UX BEST PRACTICE
When designing the mobile checkout process, you'll want to keep it as short and simple as possible. Making sure your checkout is mobile responsive goes without saying these days, but it's still worth saying.
Layer input fields in a single column
First name, last name, address and postcode are all input fields. These are easier to fill out when they're stacked in one column and helps to eliminate mistakes. Keeping the fields stacked, with labels placed above them, makes them faster to scan and fill on a mobile device.
Jump to our blog for more information on how checkout design improves sales.
Allow users to checkout as a guest
According to the Baymard Institute, 37% of shoppers would abandon a checkout if the website asked them to create an account. Consumers prefer checking out as a guest so make it easy for them to find - even customers who have an account may want to use guest checkout if they can't recall their password.
Place it above the fold on mobile and above the options to sign in or create an account so it doesn't get lost on the smaller screen.
Order summaries in mobile layout
Mobile layout is critical to the success of the checkout. The hierarchy of information and how it is presented is key.
Provide multiple payment options
A big part of the purchase journey is letting consumers do just that - purchase. While you won't need to provide every payment option out there, adding recognisable and popular options is recommended. Aside from Visa and Mastercard, alternative payment methods like Google Pay and Apple Pay are gaining traction in Australia. Ensure all the payment methods are clear and prominent, with logos.
'Save my card' functionality
This saves users time and really speeds up the checkout process. Card data is saved via tokenisation and cards are kept under a saved cards section. This is super convenient for consumers on-the-go or who want to get their shopping done quickly. Learn more about tokenisation here.
Inline input validation
A big part of mobile UX, inline input validation is a process of checking user inputs in form fields as the shopper moves between them. The functionality includes showing messages or indicators based on whether the inputs are correct or incorrect. This essentially provides live progress to the consumer and allows them to edit mistakes quickly and positively.
It's useful to keep in mind that the checkout process involves the consumer deciding to impart money. Boost their confidence in your mobile checkout with trust icons and buttons that denote a completely secure checkout process.
Your checkout must be tap-friendly
Even the iPhone X is small when compared to the average desktop. Also keep in mind that the average index finger is 45 to 47 pixels, so mobile buttons need to be easily tap-able with the fingertip.
CONVERT MORE MOBILE CUSTOMERS WITH BAMBORA
While following best practice is recommended, it's always essential to test any website design decisions before going live to make sure your checkout is easy to fill out. This way, you can solve any friction and ensure you're going live with the best user experience flow. Once you're live, conduct usability tests on a regular basis - sometimes even minor changes can significantly increase a checkout's usability.
Bambora offer our customers superior mobile checkout functionality through our Custom Checkout solution. We give merchants full control over the checkout process, which is designed with today's consumer in mind, working seamlessly across web browser, mobile and tablet. We offer real business growth through smart mobile UX with measurable benefits. Find out more about how UX design can help businesses grow by getting in touch!
Victoria Galloway has been writing and producing in the payments and eCommerce space for a number of years, both in the UK and Australia.
How checkout design improves sales.
More than half of Australians regularly abandon their carts when shopping online. This frustrating stat means the time and effort used on customer acquisition hasn’t been best spent. We’ve found seven tips to help you reduce friction in your payment process and convert more sales online.
As an independent software vendor (ISV), you have a lot on your plate. It's easy to overlook certain areas of your business that don't require your immediate attention. But one area you can't afford to ignore is offering integrated payments to your clients. If you aren't offering integrated payment solutions to your clients, then you are likely losing sales and leaving money on the table.