Mobile Layout: Thumb Zones, Type Sizes and Tap Targets

Design the buying path for a thumb. The primary action, buy, book, enquire, belongs in the lower, easy-reach region of the screen or in a considered sticky bar, not stranded at the top where one hand cannot comfortably go. Body type should be readable at arm's length without pinching, which in practice means a comfortable base size, generous line spacing and strong contrast. Every tappable element needs a target large enough for a fingertip, with space around it so neighbouring links are not hit by mistake. Then sequence the page so price, key terms and the action travel together. A layout passing those tests feels effortless; a layout failing them makes even a willing buyer work, and the funnel prices the work.

On a large phone held in one hand, the thumb sweeps a comfortable arc across the lower middle of the screen, strains to the far top corner, and cannot reach the opposite top corner without a grip change. Navigation fashions that park key actions at the very top, imported from desktop habits, therefore tax exactly the actions the page exists for. Place the primary action where the arc is easy, keep destructive or minor actions out of the prime zone so they are not hit by comfortable accident, and test with both hands, since a meaningful share of visitors are left-handed and layouts are rarely checked in the left hand. Grip changes mid-task are where phones get set down, and set-down phones end sessions.

Mobile reading happens in poor light, in motion, at glancing speed, often by eyes that would not describe themselves as needing help. Small grey type on a tinted background fails all of those conditions at once. Set body text at a size the platform's own guidance would call comfortable, keep line length short enough to track, and give prices, delivery terms and key specifications the same legibility as marketing copy, because visitors read terms as part of the decision and suspect, usually correctly, that shrunken terms are shrunken for a reason. The accessibility standard behind much of this, the WCAG guidance, is listed below; its contrast and target principles are good commercial rules even where they are not legal duties.

Every mis-tap costs a backtrack, and enough backtracks cost the session. Size targets for a fingertip, not a mouse pointer: buttons with real height, list rows that can be tapped anywhere along their width, filter options spaced so one selection does not trigger its neighbour. Watch recordings filtered to mobile for the signature of target trouble, repeated tapping, instant backtracks after a tap, rage-like clicking on inert areas that look tappable, using the method in the analytics bench. Pay special attention to small text links in dense blocks, size and colour pickers, and the icons in a crowded header, which combine small targets with high intent and produce the most expensive mis-taps on the site.

A desktop product page spreads information across columns a phone must stack, and the stacking order is a conversion decision. The working mobile order for most products: name and lead image, price and key terms, the variant choices, the action, then the supporting detail, proof and deeper specification. What must not happen is the desktop sidebar's content, related items, promotions, newsletter blocks, arriving in the stack before the price and action because the template simply linearised left to right. Review each key template as a phone stack and reorder deliberately. This is layout work with a funnel consequence, best checked against the step rates by device in the manner of the pillar guide.

A sticky buy bar can put the action permanently inside the thumb zone, which is its genuine virtue, and it can also consume the screen, collide with banners and duplicate the in-page action confusingly, which is the subject of sticky bars and mobile chrome. If you use one, let it carry the decision essentials, product, price and the action, keep it slim, suppress it while the keyboard is open or the main action is already on screen, and confirm it never covers content or the cookie and chat furniture. Judge it on the mobile add rate after whole weeks, not on how it looks in a screenshot, and be willing to remove it: some pages convert better with the screen given back.

Emulators check widths; they do not check hands. Keep one mid-range physical phone as the layout test device, use it one-handed, outdoors once, and with the largest text setting your own accessibility options offer, because a share of your buyers browse that way permanently. Ask three outside people to complete a purchase task on it and watch where grips change, where thumbs hesitate and where eyes squint, following the session method used across this site. Layout defects found this way are cheap and unambiguous. File them as fixes, not test candidates: a button a thumb cannot reach does not need a split test to justify moving it into reach.