About 54% of today’s ecommerce transactions are generated from mobile devices. If you have an ecommerce website, it is now more important than ever to provide a mobile-friendly experience for your customers. Why? Because failing to keep up with today’s mobile users’ evolving preferences could mean that you are losing your customers to your competitors.
In fact, the average global cart abandonment rate is 78%. No longer can online retailers expect that a checkout process that might work well on desktop, can produce the same results on mobile. Even seemingly minute details such as using open form fields for four-digit credit card expiration date inputs, can have a major impact on whether or not your customers choose to complete a transaction or abandon cart.
Sure, there an infinite amount of ways that ecommerce checkout flows can be optimized for mobile, but there are just a few key elements that every checkout process should have. To help you get started, we’ve compiled this list of the five usability elements that are essential to every mobile checkout process.
- Prominent Guest Checkout option
- Specific keyboards for different fields
- Open form fills for credit card expiration dates and state fields
- Limited use of alternative checkout options
- Shopping cart that updates dynamically
Users may forget what their passwords are, so it’s important to make it easier for mobile users to be able to quickly complete a checkout process without being forced to login first. Since mobile users are more likely to use their devices while on the go, the task of looking for their passwords and account information may be a hassle at the moment. Therefore, the Guest Checkout option should be prominently displayed as the first choice, ahead of the login option for returning users. Checking out as a guest gives users the freedom to complete their transaction quickly and seamlessly when they need to the most.
Due to the many fields that users must fill out in a checkout process, using specific keyboards optimized for different types of input fields help to streamline the checkout process.
For example: Email fields should generate a keyboard optimized for email address input. These keyboards have the @ symbol prominently displayed within users’ thumb zones.
Similarly, credit card number and expiration date fields should generate a numeric keyboard.
These elements serve to reduce the interaction cost involved with any website experience, which minimizes the likelihood of frustration and increases the likelihood that your user can continue on to the next field or step easily.
Long dropdown lists of calendar months, dates, and state abbreviations, are much more difficult for users to navigate on small mobile screens. It is much easier for users to simply type a four-digit credit card expiration date or two character state abbreviation compared to scrolling down long dropdown menus to find the appropriate date and/or state. These long dropdown menus of can often take up the bulk of the mobile screen space and may make it difficult to exit out of once a choice is made.
Although it is generally considered a best practice to reduce the number of fields users must type in, short fields such as the credit card expiration and state fields are exceptions to the rule.
Alternative checkout options such as Paypal, Apple Pay and Afterpay are common forms of payment used in checkout processes today. However, when designing an optimal checkout flow, it is important to keep options limited as to not overwhelm or distract your customer from completing the transaction. Conduct customer surveys to see what types of payment options are most popular with your customers and limit options to the preferences of your target demographic and/or highest converting segments.
Don’t use a shopping cart that requires users to click an “Update” button in order to make changes. Shopping carts should dynamically change as users increase or decrease a product quantity, or remove an item.
Using an “update” button in order to make these changes forces the user to engage in two interactions, which further adds to their overall interaction cost. For example, if a user increased a product quantity, they’d have to also search for, identify and click on an Update Cart link/button in order to update the quantity — all on a small mobile screen. One of the biggest issues with this flow is that users may not realize they need to click the “Update” button in order to commit the change, which may lead to frustration. Therefore, in order to reduce as much friction as possible and to ensure a streamlined ecommerce checkout experience, using a shopping cart that dynamically updates is ideal, especially for mobile users.
Ensuring that your mobile checkout process includes these five essential elements can make the difference between a visitor turning into a customer or leaving you with an abandoned cart. If you are interested in learning more about how we can help you optimize your mobile checkout flow, contact us to set up a consultation.
