All guides

The one-thumb test

Hold your phone in one hand and buy something from your store. Everything you cannot reach is a design problem.

In short

Most of your customers are holding a phone in one hand, on a train, in a queue, half-watching something else. Design for that person and the store works for everyone. Design for the person at a desk with a mouse and it works for the people who wrote the brief.

The test

Take your own phone, stand up, and buy something from your store using only your thumb. Note every moment you had to stretch, zoom, wait or switch hands. Each one is a design decision that assumed a different customer.

Everything your thumb cannot reach is a design problem.

Keep the button in reach

The add-to-cart button should stay on screen as the product page scrolls, at the bottom, where a thumb rests. The same goes for the checkout button in the cart. Making a customer scroll back up to buy is asking them to change their mind.

Make targets the size of a thumb

Forty-four pixels, minimum, with space between. Size swatches, quantity steppers, filter chips and the close button on the cart drawer are where stores fail this most, and where mis-taps turn into abandoned orders.

One column, in order

A phone has one column. Product photograph, title, price, variant, button, then everything else in the order a customer would ask. If the desktop layout has to be reinvented for the phone, start from the phone and let desktop widen it.

Nothing sideways, nothing pinched

Text that needs a pinch to read, a table that scrolls sideways, a carousel that fights the page scroll: these are not mobile problems. They are desktop decisions that were never checked. Fix them on the phone and the desktop version usually improves too.

Design for the thumb and the mouse takes care of itself.

Themes in this guide

Flow
Envy

Keep reading