πŸ‘©β€πŸŽ“πŸ›’πŸ‘¨β€πŸŽ“ Our thumbs don’t magically scale with the screen size – tips for mobile checkout

Optimizing Ecommerce for mobile

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.

Fit learning Ecommerce into your busy schedule with Microlearning posts. Subscribe to receive weekly updates 

Courses for Professionals Building Ecommerce of Tomorrow

Courses for Business Leaders, Managers, Marketers

Ecommerce training by Michael Vax

Fit learning Ecommerce into your busy schedule with Microlearning posts.
Subscribe to receive weekly updates.

Your data will never be shared with anyone else

Harness AI Advantage

AI-Powered EcommerceΒ is the ultimate resource for professionals who want to understand and utilize AI’s transformative potential. It is the blueprint for understanding and applying AI, giving your business just the edge you’ve been waiting for.

The book aims to guide your exploration of the strategic implications of Artificial Intelligence for an online business. It’s not a technical manual or a list of -by-step instructions. Look at it as a toolkit designed to aid you, eCommerce professionals and entrepreneurs, extract the best from what AI offers to enhance and revolutionize your business.


Readers get a detailed analysis of eCommerce use cases for leveraging AI, recommendations on developing an AI vision and strategy for their business, and selecting the best technology to implement it.