How to Create the Perfect Mobile Checkout
The customer is ready to buy from your online store. They proceed to the mobile checkout just to see that their finger and the button "purchase" were never meant for each other. Oops. Here, we are not going to discuss more ways to screw up. Instead, we'll share our best practices for mobile checkout optimization to avoid customer churn at the last stage of the purchase funnel.
When launching an ecommerce development project, it’s vital to pay special attention to checkout page optimization. Checkout is a bottleneck where the customer makes the final decision—to buy or not to buy. That’s the question: will they complete the transaction or will they abandon the cart?
The total amount of goods left in shopping carts was estimated to have totaled $5 trillion in 2015. These goods were a loss for those ecommerce companies but they also demonstrate how much potential there is in increasing conversions.
Potential customers may be leaving items in their carts due to poor experiences or difficulty using the web or mobile app. According to Google, 40% of ecommerce customers report that they will go to a competitor after a bad mobile experience, so a poor checkout process seems to be the major factor that drives mobile customers away.
Checkout pages are often a necessary hurdle for customers. However, mobile app developers craft a simple, unobtrusive mobile checkout process that maximizes conversion. Optimization is the subject of intense research and even minor tweaks can often produce considerable results. Let’s examine how the mobile checkout process can be streamlined.
Mobile Checkout Pages Present a Particular Challenge
When mobile commerce first emerged, mobile apps often followed the same basic design philosophy as desktop web apps. However, this resulted in poor user experience. Quite simply, small touchscreens require a much different approach than a desktop screen and mouse/keyboard input.
Fortunately, the mobile app industry is constantly evolving, and savvy developers are learning how to maximize m-commerce sales. Much of that comes down to optimizing your mobile checkout process.
Statista reports that in 2017, 24% of shoppers abandoned their shopping cart because they were unaware of shipping costs, 21% complained of a long process, and 16% described the process as too long. Given the small screen size of a smartphone, these issues could be exacerbated during the checkout process. Fortunately, these challenges, among others, can be addressed.
The primary reason for digital shoppers in the United States to abandon their carts in 2016 and 2017
Image Source: Statista
Understand the Difficulties of Touch Input on a Small Screen
A 4 to 6-inch touchscreen presents numerous user interface challenges. The screen is too small and the human finger is too thick and imprecise as far as touch input is concerned. Buttons and links can be difficult to click.
Fortunately, this yields some straightforward solutions. Web designers can make buttons easier to click by enlarging them. Buttons should be at least as large as a large finger, and there should be nothing else clickable nearby. As for links, it’s best to avoid them altogether as it’s more difficult to make them easily clickable.
Everything else that visitors must interact with should be easy to tap with a finger. Fonts should be large enough for customers to read the text easily. With smartphone screen space at such a premium, it’s vital to make sure every pixel is put to good use.
Designed For One-Handed Input
Not only are smartphone screens small, but also most customers can tap on the entire screen. Smartphone users hold their phones in very particular ways. The way a user holds their phone presents challenges of its own. UX Matters conducted research and found that 49% of mobile users use one hand. Another 36% used one hand to cradle the phone, and the other hand for input. A mere 15% used two hands.
Owing to these habits, mobile websites as well as mobile apps should be designed for one-handed input. One-handed use presents special challenges because the area that the user’s thumb can touch is quite limited. The screen map below presents a rough outline of which areas are accessible by the user’s thumbs and which are not.
Image Source: UX Matters
Optimize Forms for Mobile Use
When possible, forms should be avoided during the mobile checkout process. One way to address this is to enable easy auto-forms. Have customers to sign up for an account and then their data, including payment, shipping, and personal information can be automatically filled in. This way, the checkout process can be reduced to a few simple clicks.
However, while accounts and auto forms are great, guest checkout is important as well. According to Kissmetrics, 23% of ecommerce customers will abandon their shopping cart if they are required to set up an account. At the end of the guest checkout process, you can offer guests a chance to create an account by providing an email address and password, but if they don’t take the offer, no worries.
Further, do not place forms side-to-side, as it’s very difficult to reach both with your thumb. Instead, stack them on top of each other so that they are within easy reach. Ultimately, if customers are stretching too much to interact with your app, they may abandon it.
Multiple Checkout Pages Are a Plus
When it comes to desktop web apps, the fewer clicks the better. However, with mobile apps, more pages may actually be a benefit. That’s because it’s more difficult to scroll with a smartphone than it is with a PC. While it’s important to keep pages and clicks to a minimum, it’s even more important to eliminate scrolling on mobile ecommerce sites.
To the greatest extent possible, each ecommerce page should contain all of the necessary content and input right on the screen. If more than one screen’s worth of information is needed, it’s best to put it on another page. However, it’s important that customers are not overloaded with input forms and requests for information.
Keep it simple and focus on getting the vital information needed to complete the sale and deliver the product or service.
Always Keep the Mobile User Experience in Mind
Design languages evolve as web developers and analysts discover new insights and ways to increase conversions. However, what doesn’t change is the need to focus on the mobile user experience (UX). Understanding UX is especially important for the checkout process as it can help you understand why customers didn’t pull the trigger.
Consider guest checkouts. From the company’s point of view, requiring an account signup is great. Once the company has an email, they can send the customer deals and keep them updated. In the long run, customers benefit as well. Not only do they get deals, but they can use autoforms and checkout much more quickly. Yet some customers won’t trust the retailer enough to establish that type of relationship, at least not on the first interaction.
For those customers that do sign up for an account, consider enabling one-click purchasing. It’s been estimated that one-click purchasing increased Amazon’s sales by 5%. Previously, Amazon had patented this feature, but the patent has since expired.
Another important consideration is security. Numerous ecommerce websites and brick-and-mortar retailers have suffered serious security breaches that have exposed consumer data. Moreover, people are naturally reticent when it comes to payment and personal information. By displaying security badges, enabling HTTPS and encryption, an ecommerce application can help customers feel safer.
Conclusion: Mobile checkout optimization will pay off with increased success
Mobile ecommerce cannot be ignored. In the first quarter of 2016, mobile phones accounted for 45.1% of ecommerce traffic, edging out computers at 45%. Some estimate that mobile orders will outpace computers in order placement rates by 13% by the 4th quarter of 2018. By the end of 2017, some ecommerce retailers were reporting that mobile traffic accounted for more revenue than desktop.
There’s no sign of these trends slowing down. Smartphones are here to stay, and while they present new opportunities, they also offer distinct challenges. As such, every aspect of the mobile user experience must be closely examined and optimized, including the checkout process.
Have a project in mind but need some help implementing it? Drop us a line: