Mobile Checkout Design: UX Best Practice

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:

• Long page loading times
• Poorly designed navigation
• Lack of mobile page responsiveness
• Too many steps between adding items to the cart and continuing shopping
• The buttons are to small to click with a finger

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:

1. Reduce price shocks with transparent pricing around shipping and other charges
2. Implement an exit model (a pop up) that will collect the shopper's email address so you can push out shopping cart recovery emails
3. Provide a guest checkout option
4. Identify any UX funnel leaks - examine your user flow and conversion pathways
   

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:

• There's too many field to fill out
• The process was too complicated or confusing
• The checkout didn't feel trustworthy
• Site errors
• Not enough payment methods
• Hidden costs suddenly emerging

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.

• Keeping the shipping address at the top of the page with clear editing options
• Display the number of items in the cart and all pertinent product details - like colour and size. Any ambiguity of needing to check could potentially cause abandonment
• Include any discounts, shipping charges or taxes clearly

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.

Emphasise security

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!