Optimize your mobile checkout experience in five simple ways
These tips can help you curb the costly problem of cart abandonment and better retain your mobile shoppers.
Among the myriad challenges that ecommerce merchants face, cart abandonment continues to be one of the most difficult to solve — seventy percent of shoppers who put a product in their cart never complete their purchase. Research from the Baymard Institute, the product of large-scale UX research on checkout flows conducted over the past 11 years, reveals that cart abandonment often occurs when shoppers encounter poor design or usability issues. These problems are particularly prominent on mobile sites and apps.
Many instances of cart abandonment can be avoided, however, through simple optimizations to the checkout process. In fact, Baymard’s research reveals that an ecommerce site can increase its conversion rate by 35% simply through a better checkout design. To put that into perspective: A 35% conversion rate increase for the combined $1.34 trillion ecommerce sales in North America and Europe would translate to $472 billion worth of potential orders.
Want to do a better job retaining mobile shoppers? Here are five simple optimizations that you can make to encourage shoppers to complete their orders.
1. Offer guest checkout and make it prominent
Quite simply, shoppers often don’t want to go through the process of account creation every time they’re purchasing something from a new merchant. According to Baymard, 28% of shoppers reported abandoning a checkout in the past three months because the site required them to create an account.
But it’s not enough to simply offer a guest checkout — it also matters how that guest checkout is displayed. More than 60% of mobile shoppers reported difficulties in identifying and selecting the guest checkout among the other options available, including the sign-in for returning customers and the account creation option. The trick, then, is to put the guest checkout first, so that it can’t be confused for anything else, and both new and old shoppers feel invited to use it.
2. Auto-format the credit card field to match a physical card
As you’ve likely experienced, typing on a mobile phone doesn’t always yield the most accurate results. Shoppers naturally struggle to type in a 15- or 16-digit credit card number correctly. During user testing, Baymard noted that 23% of shoppers adopted a strategy for verifying their credit card number as they filled in the credit card form: They typed it in four-digit blocks.
One way to make checkout easier for shoppers is to set up your credit card field to look exactly as it does on the physical card. You can even design your credit card field to automatically format the numbers in real time, so that shoppers can easily double check their information as they insert it.
3. Make the billing address and the shipping address the same by default
Shoppers typically place orders for themselves, to be delivered to their homes or offices. And yet, Baymard’s research reveals that 13% of ecommerce sites still don’t default the billing address to the shipping address, even though most of the time they’re exactly the same. Asking for duplicate information is a surefire way to leave mobile shoppers frustrated, deterring them from completing a purchase. In fact, duplicate typing can increase the “work” that mobile shoppers have to do by as much as 20%-60%.
Make it easy for shoppers to avoid this hassle by automatically populating the billing address fields with the information in the shipping address. Another tactic is to hide the billing address field entirely, so that all your mobile shoppers see is a pre-selected checkbox that says “billing = shipping,” encouraging them to keep moving through the checkout without slowing down for a moment.
4. Include a “Place Order” button at the top of the order review step
Twelve percent of shoppers mistake the review step in order flow for confirmation — that means many shoppers accidentally leave a checkout before their order has been placed, thinking all the while that their order is on the way.
This confusion is understandable — often, the review and confirmation steps in a checkout look the same. They have the same product information and shipping details, there’s just one difference: One has a “place order” button, while the other does not. The trick is to make sure that mobile shoppers see the “place order” button no matter where they are on the page, which means putting it at the top of the order as well as at the bottom.
5. Offer third-party payment options
Expectations around third-party payment options are rapidly growing, with many shoppers strongly relying on them for ecommerce checkouts. According to Baymard, six percent of shoppers abandoned an order simply because their preferred third-party payment option wasn’t offered.
Baymard’s testing reveals that some shoppers prefer third-party payment options because they don’t trust merchant sites with their card data, while others prefer them for the convenience — saving time by avoiding re-entering their personal information. But third-party payment options have other benefits, too. For those four percent of shoppers who experience credit card validation errors, third-party payment options can act as a trusted fallback.
To learn more about offering third-party payment options, as well as five more tactics for optimizing your mobile checkout process, you can download the full report right here.
Source: Mobile Checkout Optimization Report, The Baymard Institute, 2020.