In eCommerce design, the checkout path is one of the most highly scrutinised parts of the user journey. And rightfully so: it directly influences brand perception, propensity for return visits and an organisation’s ability to drive revenue online. With more and more users shopping on smartphones, it’s imperative to design a mobile checkout flow that not only follows the best practices for eCommerce user experience but is also optimised for the capabilities and constraints of mobile devices.
In this article, we’ll use findings from research for the fourth edition of the Ecommerce User Experience report series to outline and discuss some of the most important design guidelines for an optimal mobile checkout experience.
Mobile Shopping Cart and Checkout Options
Often, the checkout process begins with revisiting the shopping cart and editing it to contain only the items that will be purchased in the current session. The following guidelines ensure that the early stages of the mobile checkout are pain free for users:
- Provide quick access to the mobile shopping cart. Tapping on the shopping cart indicates a desire to move forward, so get users to the cart as quickly as possible. Avoid performance related delays and remove any unnecessary obstacles that may get in users’ way when trying to access the cart.
- Make it easy for users to update the contents of their shopping cart. People often change their minds about purchasing a product or accidentally add an item to the shopping cart twice. Allow users to easily change the contents of their shopping cart.
- Give users a clear Remove button next to each item in their cart. Don’t force them to change quantities to zero in order to delete a product from their shopping cart.
While shopping on HP’s site, one study participant became frustrated when she couldn’t figure out how to remove an unwanted printer cartridge from her cart because she was supposed to set the quantity to zero. As a result, she purchased the printer cartridges from Amazon instead.
- Don’t use an Update button for committing changes to the shopping cart. Some sites force users to tap an Update button for any change to their shopping cart to become effective. Someone who wants to change the quantity of an item must therefore indicate the new quantity and then press Update to commit the change.
This design is suboptimal for two reasons: users must perform two actions to change the item and people often fail to tap the Update button because they forget or do not realise they are supposed to do so.
- Support continuity of the shopping experience across multiple devices. As brands continue to develop across channels, users’ expectations for easy access, flexibility and consistency while shopping continue to rise. Because users move between channels while shopping, it is important to give them reliable access to their carts on desktop, mobile web and mobile apps.
Users of Apple devices can benefit from a feature called Handoff, which allows them to use a website in Safari on one Apple device and then continue the same experience on another compatible device.
An application can also hand off the user’s session to another device where the application has been designed to support the feature.
To support seamless cross device transitions outside the Apple environment, make sure a shopping session can be resumed on another device once the customer is logged in. Labels showing when items were added and which device or channel they came from can also help customers understand a saved basket.
- Make guest checkout prominent and easy to find. Even people who have an account forget passwords. In many cases, it will be easier for them to check out as a guest than recover a password on a mobile device. Make guest checkout one of the most prominent checkout options.
Order Summary and Pickup Options
Shoppers do not appreciate inaccurate or unclear prices and grow frustrated when costs unexpectedly increase during checkout. When this happens, customers may abandon their carts and look elsewhere, particularly where shipping or delivery charges appear unexpectedly.
- Make the order summary easy to find in mobile layouts. Details including subtotal, taxes, fees, discounts and shipping charges are important for any checkout flow. On mobile, limited screen space makes placement especially important. Show the order summary prominently instead of making shoppers search for the final cost.
- Use the user’s current location where appropriate to determine taxes, delivery costs and pickup options. Delivery costs and tax can depend on the customer’s location. Where location information genuinely improves the journey, ask permission before using it and allow the customer to change the location easily.
Form Fields and Input Interactions
Filling in forms on mobile can be time consuming and error prone. Reducing the number of fields and automatically completing information where appropriate can make checkout considerably easier.
- For each field, present the correct keyboard. Use a numeric keypad for numeric data such as telephone numbers and payment information. For email address fields, use the keyboard designed for email entry so useful characters such as @ and . are readily available.
- Calculate fields automatically based on users’ prior inputs. Information such as city or region can often be determined from a postcode or ZIP code. Where this is reliable, do the work for the customer while still allowing them to correct the information.
- Browser autofill and saved data should work properly. Name, address, email address, telephone number, password and payment fields should be coded so the browser can recognise them and provide relevant saved information where the user chooses to use it.
- Avoid cumbersome selection controls where simple input is quicker. Long dropdown lists can create unnecessary effort on mobile. Choose the interaction according to what is quickest and least error prone for the customer.
Easy Payment on Mobile
Entering payment details can be slow and error prone on mobile. Digital wallets and saved payment information can reduce the amount of typing required and make the final part of checkout considerably easier.
- Offer mobile friendly payment options without overwhelming users. Recognisable payment options such as PayPal and Apple Pay can make checkout easier, but too many alternatives can introduce choice overload. Make the distinctions clear and give suitable prominence to the payment routes customers are most likely to use.
- Take advantage of built in payment and autofill features. Mobile browsers and operating systems can reduce the need to type payment information manually. Forms should be built so these features work correctly where customers choose to use them.
Conclusion
What distinguishes the best mobile checkout experiences is attention to the small parts of the journey. Mobile focused interface decisions can reduce friction, make information clearer and help customers move through checkout with less effort.
Checkout is only one part of the wider eCommerce customer journey. WLW works across eCommerce strategy, customer journeys, design, development, SEO, marketing, conversion and continued improvement. Our work has included eCommerce programmes where research, customer experience and design contributed to significant improvements in conversion. See our eCommerce UX and conversion project.
For the original Nielsen Norman Group research behind the examples in this article, see The Mobile Checkout Experience.
