Categories: Mobile Apps

Let’s not understate the importance of the checkout page on your mobile app. To get here you’ve successfully onboarded a user. You’ve convinced them that your product is worth buying. You’ve got a fan – a paying customer!

So don’t throw it away with a less-than-stellar checkout page. Cart abandonment rates hover at about 70%, which represents a lot of lost income. Why do people click away? Confusing forms, annoying typing, lack of common payment channels and lack of trust.

Let’s take a look at how you can optimize the user experience on this key page of your mobile app.

Know what mobile app users need

Keep your design simple to use and follow.

Keep your design simple to use and follow.

Do they want to check out quickly? Save and use multiple addresses? Track an order? Use multiple payment methods? Pay with loyalty points or use a discount code? Determine exactly what your users expect from the experience and ensure that you’re delivering upon expectations.

Design vs reality

First up, walk through the check-out process yourself. Check that your designs reflect the actual process. Are there extra steps like logging in or adding user info that aren’t shown in your wireframes? What may seem like a 4-step process may be a 6-step one. Are there any places you can simplify, such as mandatory logins or long text-fields?

Assume users are lazy

Keep things simple for your users. Mobile shoppers don’t want to create an account or share their personal details. Use auto-fill to generate addresses based on zip codes, or to partially prefill emails. Use micro-copy to suggest what information, and in what format, you’re expecting. Don’t make them guess. Finally, don’t ask for information that you don’t really need. It’s unnecessary typing, and reduces trust.

Be kind about mistakes!

Be kind to your mobile app users. Make checking out easy.

Be kind to your mobile app users. Make checking out easy.

Provide instant feedback about input errors and let users know what they need to do to fix these errors. Don’t bump them back to the beginning of the process or reload the entire screen. Snatching away glory at the last instant will leave a bad taste in their mouth.

One screen = one step

Allot each screen to one particular task. Think shipping, payment and review. You may want to create a breadcrumb trail or use material design-friendly tabs to help users navigate through the process – and know where they are. Use modal screens to allow users to seamlessly work through sub-steps within a step. This lets them focus on the task at hand.

Be scroll-friendly

Mobile app users scroll up and down on their phones – rarely from side to side. Rather than a grid format for things like payment options, use a simple card layout. Users can scroll and select, rather than having to reach for an awkwardly placed grid option. Aim for consistency of delivery throughout.

Open it up for review

Give users a last chance to review and confirm their order. What they’ll want to see on this page will depend on your product, but purchase overview, shipping address and last-chance voucher entry are usually high on the list. A subtotal, along with a chosen payment method are also valuable.

Any business model problems?

Part of a great experience is matching expectation with reality. Are you offering affordable products only to slug customers with a huge shipping fee at the last minute? Consider bundling this fee into your prices or offering discounts on larger purchases to avoid scaring them off.

Test your checkout process!

If at first you don’t succeed, test, test again. Crucial areas to test include sign-in options, progress bars and navigation, security logos, payment methods and form display.

If you enjoyed this post, please consider sharing it using the buttons below.

Touchtap is a digital agency specializing in mobile-first development.We can build your mobile app for you.

Back to Posts