Mobile Checkout: One Thumb, No Surprises

Design the mobile checkout for one thumb and a broken attention span. The primary actions sit within the thumb's easy reach, fields summon the right keyboards and let the phone autofill them, the total survives every scroll, and nothing the buyer has entered is ever lost to an interruption, a reload or an error. Most checkout loss on phones is not disagreement with the purchase; it is the accumulation of small physical difficulties at the moment commitment is spent. Remove the physical difficulties and the decided buyer simply finishes, which is the entire promise of this guide.

Place the continue and pay actions where the thumb rests, make every tappable element large enough to hit without aiming, and keep destructive or secondary actions physically separated from the primary one so a hurried tap cannot undo progress. Accordions and dropdowns that demand precision picking from dense lists should be replaced by scannable, generous choices wherever the platform allows. Test with the phone in the hand it will actually be in, at arm's natural angle, not flat on a desk under two careful hands. The WCAG standard's target guidance points the same direction as buyer comfort here: what is accessible is also completable.

Each field should declare its true type so the phone offers the email, numeric or telephone keyboard as appropriate, and autofill should be enabled and correctly named so stored addresses and cards can do the typing. Accept pasted values with their natural spaces and formatting. Keep labels visible while a field is filled, because a small screen plus an on screen keyboard can hide every other clue about what is being typed. Where a choice can replace typing - selecting a saved address, a delivery point from a list - offer the choice. Every keystroke saved on a phone is worth several on a desktop.

The mobile buyer cannot see the whole order and the current step at once, so the checkout must carry the essentials forward: a compact total that persists, the step's purpose in its heading, and the delivery choice's arrival implication restated where payment is taken. Collapsed summaries should show the final total, not merely the item count. Equally, error messages must appear where the buyer is looking after a failed submit - a jump to the problem field with the explanation attached - never as a banner above a fold the keyboard has covered. Context loss is the mobile specific form of surprise, and it is a design choice.

Mobile sessions break: calls arrive, apps switch, signal drops in a lift, the bus reaches its stop. The checkout should preserve entered details across those breaks wherever the platform allows, restore the buyer to the step they left with everything intact, and never punish a return with a restarted form or an expired session message that loses the basket. Buyers who resume and complete are among your most decided customers; the design should treat resumption as a normal path, not an edge case. Test the break deliberately: start a checkout, leave for an hour, and return through the cart.

Checkout pages accumulate scripts - payment widgets, address lookup, fraud checks, analytics - on the devices least able to carry them. The Core Web Vitals thresholds from web.dev, LCP 2.5 seconds, INP 200 milliseconds and CLS 0.1 as checked in October 2026, are the working reference: the step must appear promptly, respond to taps without lag, and never shift its layout as a widget loads beneath a descending thumb. A pay button that moves at the moment of tapping is a defect, not an inconvenience. Audit what loads on checkout with particular suspicion, since every addition was justified for some other purpose.

Run the full purchase one handed, standing, on a mid range phone over mobile data, using slightly imperfect details, and include a deliberate mistake and a deliberate interruption. Note every moment of stretching, squinting, retyping or uncertainty, in the order met, and fix them in that order. Repeat the test whenever the platform or theme changes the checkout materially. The wider bench on speed and mobile conversion covers the store as a whole; inside checkout, the standard is narrower and stricter, because this is the last place a decided buyer can still be lost to physics.