Designing a shopping app for one hand
Put what people tap most within reach of a thumb, at the bottom of the screen. Everything else in mobile UX is downstream of that one fact.
The reachable area is smaller than the screen
Phones grew and hands did not. On a modern handset held in one hand, the comfortable arc for a thumb covers roughly the bottom two thirds of the screen and leans toward the side the hand is on. The top corners — where desktop design puts navigation and search — require a grip change.
A grip change is not a disaster. It is a small tax, paid on every interaction, by somebody who is standing on a train.
What belongs at the bottom
- Navigation. The tab bar exists for this reason and it is the single biggest difference between an app that feels native and a website in a shell.
- The buy button. Pinned, not scrolled past. A product page where the customer has to scroll back up to buy is asking them to reconsider.
- Search. High-intent visitors go straight to it, and they convert at several times the rate of browsers.
What belongs at the top
Things you read rather than tap: the title, the price, the delivery date. Reading has no reach problem.
Tap targets, measured rather than eyeballed
Forty-four points square is the floor, with real space between adjacent targets. A control that is comfortable with a mouse is frequently too small and too close to its neighbour for a thumb in motion — and the failure mode is not a missed tap, it is the wrong one, which is worse because the customer has to notice and undo it.
Test it the only way that works
On a real phone, in one hand, standing up. A resized browser window on a desk answers a different question and answers it wrongly.