Over 200 Professionals Have Mastered Ecommerce with our Courses

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

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 

Leave a Reply

Your email address will not be published. Required fields are marked *

Ecommerce Training for You and Your Team

Increase Revenue

Increase revenue by learning & adopting Ecommerce best practices

deliver faster

Faster implementation driven by knowledge

reduce cost

Save money by implementing the right solutions from the start and avoiding rework

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

Your data will never be shared with anyone else