Ecommerce designers need to consider that mobile users have a whole different set of requirements than their desktop-using contemporaries. They’re probably on the go and, as a result, are likely to be prone to distraction by incoming phone calls, messages, and notifications.
Importantly, they’re using a touch-screen device with a smaller screen and a fiddly keyboard. The mobile checkout experience needs to be tailored to these conditions. It should be designed for touch, not the mouse.
According to research by UX Matters, there are three basic ways how users hold their phones:
- One-handed – 49%, which represents almost half of the cases
- Cradled in one hand and operating with another – 39%
- Two-handed – 15%
In all occurrences, the thumb plays a very active role in the screen touch interaction experience. Here is what the ‘Thumb Zone’ heat map, as coined by Scott Hurf, looks like: You’ll notice that the “safe” green zone stays roughly the same.
That’s because our thumbs don’t magically scale with the screen size. In the context of an e-commerce checkout, it will be prudent to place the essential elements in the areas of the screen where they can be reached easily by thumb.
When it comes to mobile checkout, the multipage approach is always the winner. Avoid Long One-Page Mobile Checkout by breaking it into multiple pages. Each page should be fully visible with a clear “next step” button.
A progress indicator ensures that customers are not intimidated by a complicated form. Ideally, keep each page to 3-4 inputs.
Place each input field in an individual row and make the font and field size as big as possible.
Include an HTML tabindex attribute to specify the form fields’ order sequentially. That will enable shoppers to use the keyboard to move swiftly between form fields.
Define an appropriate keyboard layout for each field – numeric keyboards for phone number and credit card entries, keyboard layout for email, and date&time selectors Take full advantage of auto-fill/auto-complete support in browsers.
Offer guest checkout with a small number of required inputs do not ask shoppers to register or enter their email addresses and passwords twice for confirmation.
Add an address finder to cut down the time required to enter a full address. It is also less error-prone.
You also need to ensure that the payment process is as simple as possible. Offer the convenience of using a PayPal account or other express checkout payment options such as Google Wallet and Amazon Pay. They will cut down the time required to enter payment details.
