Increase Checkout Conversion Part 2: Mobile User Experience
James Pruden
Managing Director at Xigen, Business Investor, Digital Expert & Entrepreneur.
With 54% of consumers shopping on mobile and eCommerce revenue in the UK forecast to hit more that ￡105 billion by 2024 (more than doubling since 2019)1, it's never been more important to ensure that your eCommerce store offers customers super-low friction mobile shopping experiences.??
Mobile sales in the UK rose by staggering 169% in January 2021.2?
Given the accelerating growth of mobile eCommerce because of the covid pandemic and subsequent lockdowns, it's vital to pay close attention to mobile checkout user experience (UX). As with desktop and laptop, the point at which customers are most likely to experience higher friction UX and abandon their shopping journey is during the checkout process.?
To reduce friction at mobile checkout, the techniques used for desktop still apply, such as:
But because of the way consumers interact with mobile devices, tap-and-swipe rather than point-and-click, and given smaller screen sizes, there are some mobile-specific best practices for streamlining checkout UX.
Mobile Conversion?
Overall conversion rates are lower for mobile, with a typical B2C conversion rate of 3.7% versus around 6.5% for desktop in the year up to Q2 2021.3
Omnichannel State of Mind
Before we dive into ways to streamline mobile checkout UX, let's talk about omnichannel shopping and its relevance to mobile eCommerce (mCommerce).?
With more eCommerce transactions than ever being done on mobile, consumers are expecting consistently outstanding shopping experiences on every device they use, whatever their location, at any time.?
The days of online shopping being done exclusively from behind a desk at home are gone. Consumers use multiple devices as well as physical retail stores to browse, research products and make their purchases.?
As a result, the lines between shopping on desktop, mobile, social media (with the introduction of on-platform 'buy buttons'), and traditional brick-and-mortar shopping are fading as customers now expect a seamless, unified shopping experience across all channels.?
There are some simple, effective steps that can be taken to streamline mobile checkout flow, for lower friction, and more intuitive UX that will better engage customers.??
K.I.S.S
'Keep it simple stupid'. That's perhaps the most important thing that you can do in your mobile checkout to reduce friction.
Keeping smaller mobile screens uncluttered and ensuring low cognitive load will help to keep customers focused during the checkout process. That means only including user interface (UI) elements on-screen that are necessary for that final, crucial step in the shopping journey. Let's look at some of these.?
Off Canvas UI
Using off canvas UI elements will help reduce screen clutter. The most recognisable off-canvas UI is probably the hamburger menu—three horizontal lines in a top corner of the screen. The hamburger menu enables customers to make menu selections only at the point they want to navigate, not having the menu taking up precious screen space all the time.?
Mobile off canvas UI elements can also include a straightforward 'menu' button, side bar menus and searches.
Form Chunking?
Another way to keep it simple is to use clear signposting, such as 'next' button and CTAs to lead customers through checkout, breaking the process up into smaller, more digestible chunks.?
An example would be separating forms into more mobile-friendly chunks rather than having a single continuous form that requires scrolling and may contain fields that are too small for comfortable mobile use.?
Reducing customers' cognitive load in this way will make forms more manageable on a smaller mobile screen and for tap-and-swipe interaction.??
Form Autofill?
If your customers are logged in, or are in-app, then information such as their name, billing address and card details can auto fill into the appropriate form fields. This can save a great deal of time for customers and is particularly helpful if they are in a hurry or not in a position to get their card out, on public transport for example.?
Some browsers, such as Chrome, will auto complete forms, but you shouldn't rely on that alone. And of course, customers choosing guest checkout won't be signed in, so won't be able to use autofill.
Match Input UI to Form Fields?
It's important to ensure that for each form field the appropriate UI pops up, either keyboard or numeric keypad. This might sound obvious, but not doing so could trip customers up as they progress through the checkout, having to use smaller keyboard numbers for numeric fields.
领英推荐
Image: UX Planet
29% of European mobile checkouts failed to surface a numerical keypad on mobile.?
Progress Bar
When using chunked, multi-page forms it's important to include a progress bar so that customers can see how far along the process they are and how far they have to go. This helps keep them focused and engaged in checking out, making them less likely to abandon.?????
Persistent Cart
It seems an obvious thing to point out, but your mobile customers will often be 'mobile'. They are likely to not be at home when using their phone to shop. They could be anywhere: in a cafe, out shopping, on public transport etc.
In these situations, customers will encounter more distractions and interrupted shopping journeys, and as we've seen with omnichannel, your customers are likely to be shopping using different devices too.?
Ensuring that your shopping cart saves products across sessions means that customers won't have to go looking for products again when they return to their cart, which is a major cause of friction.?
Look at the cart as a 'holding area' for products that customers can add to as they browse with the intention of making a final buying decision later, removing unwanted items and purchasing those that they like. This is common practice in B2B eCommerce and crosses over to B2C.?
Most online stores offer persistent cart, so your customers will expect it. Not offering it in an omnichannel world will negatively impact conversion rates.??
Easier Mobile Payment
Entering payment details at checkout adds unnecessary friction into mobile checkout flow. Finding a payment card and tapping in the numbers while out and about often puts customers off from making a purchase there and then.?
To improve UX at mobile checkout offering a choice of payment methods in addition to traditional card payment will help to improve conversions.?
For example, third party payment methods such as digital wallets: PayPal, Google Pay or Amazon Pay are ideal for faster mobile transactions as they only take a few taps to complete, having saved card number, address etc. on the customer's account.?
From a UX point of view, ensuring that payment selection buttons are clearly shown and are in order of popularity will help checkout flow.??
Digital wallets, as with guest checkout, mean that customers don't have to spend time filling in forms, enabling faster checkout in fewer steps. This will make them less likely to abandon the transaction—for customers with an account who are logged in, autofill can help remove some of this friction too.??
Digital wallet payment can also be perceived as more secure and trustworthy than using cards, especially in unfamiliar online stores. This affords concerned customers a layer of protection that can mean the difference between abandonment and conversion.??
Just 12% of European eCommerce checkouts support digital wallets.?
Final Thought
If you're not paying attention to your online store's mobile UX and providing customers with low friction shopping journeys, especially at checkout, then your conversion rate, sales and customer retention will suffer.
Streamlining checkout flow for higher conversion rates should be ongoing. Testing and behavioral analytics tools offer valuable data and insights into what is working for your checkout process and what isn't.?
Reducing friction in mobile checkout flow is more important than it has ever been, given the rise of omnichannel and unprecedented eCommerce growth since the beginning of the Covid pandemic.?
Viewing eCommerce holistically and offering your customers super-low friction, unified shopping experiences, especially on mobile, regardless of physical location, will help give customers the shopping experiences that they demand.???
Is your mobile checkout offering customers fast, streamlined shopping experiences? If you would like to know more about mobile checkout conversion rate optimisation, get in touch today for a chat with our eCommerce design and development team.??
Sources
1 https://www.statista.com/statistics/285661/m-commerce-retail-revenue-in-the-united-kingdom-uk/
2 https://dontdisappoint.me.uk/resources/finance/mobile-commerce-statistics-uk/
3 https://www.statista.com/statistics/960431/great-britain-online-shopper-conversion-rate-by-device/
? https://go.stripe.global/rs/072-MDK-283/images/The_state_of_European_checkouts.pdf
? https://go.stripe.global/rs/072-MDK-283/images/The_state_of_European_checkouts.pdf