The checkout page nobody finishes checking
Walk your own checkout on a phone with one thumb, standing up, the way customers actually do it. Somewhere between the cart and the payment screen, there is usually a step that was designed on a desktop monitor by someone with two hands and a cursor. That step is where mobile shoppers stall. The five fixes below each take minutes, and each one removes a thumb-sized obstacle rather than a design theory.
1. Make the keyboard match the field
Asking for a number and raising a letter keyboard is a small insult repeated on every field. The fix is an attribute, not a redesign:
<input type="tel" inputmode="numeric" autocomplete="cc-number"> <!-- card number -->
<input type="email" inputmode="email" autocomplete="email"> <!-- email -->
<input inputmode="numeric" autocomplete="postal-code"> <!-- postcode -->Where to check: view your checkout’s HTML by right-clicking each field and choosing Inspect. If an email field uses type="text", everyone types on the wrong keyboard. This is the single fastest win in mobile checkout, and it is five minutes.
2. Give every field a permanent label
Placeholder text disappears exactly when it is needed, and mobile screens mask even more of the form than desktops. Labels that stay put mean nobody scrolls up to remember what goes in the box.
<label for="phone">Mobile number</label>
<input id="phone" type="tel" ...>The visible label also helps people who fill forms by listening, because screen readers announce labels far more reliably than placeholders. Same five minutes, two audiences served.
3. Keep the pay button in the thumb’s natural arc
A pay button at the top of the screen is a logo exercise, not a checkout decision. The bottom of the screen, inside the natural reach of a held phone, is where the button belongs, pinned, full width, and always visible.
.checkout-submit {
position: sticky;
bottom: 0;
width: 100%;
min-height: 48px; /* comfortable thumb target */
}Forty-eight pixels is not a design opinion, it is the comfortable minimum touch target for a thumb. Below that, real fingers miss and mistype.
4. Split the keyboard’s worst habit: auto-capitalisation
Email fields that auto-capitalise the first letter cause failed logins and bounced receipts later, because the customer never notices the silently capitalised E. Two attributes end it:
<input type="email" autocapitalize="none" autocorrect="off">Copy-paste this into your team chat as the rule: every email and address field on mobile gets autocapitalize="none" unless there is a genuine reason not to.
5. Show, on screen, what the last step was
Mobile users arrive at a checkout step with no memory of the two steps before it, because the phone screen showed them one at a time. A compact progress strip answers the question nobody asks out loud: how far along am I, and what did I just do.
<nav class="steps">
<span class="done">Address ✓</span> <span class="done">Delivery ✓</span>
<span class="current">Payment</span>
</nav>Keep it to words, not numbers. “Address, Delivery, Payment” reads in one glance. Three dots and a percentage do not.
Then test the way the fix was designed
One thumb, one hand, standing up. Place a real test order on your own phone with the same attention a stranger would give it, and watch your own hands: where they hesitate, where they mis-type, where they scroll when they should not need to. Those hesitations are the checkout page nobody finishes checking, and each of the five fixes removes one of them by name.
Want more like this? Join MOKU Club for free. Weekly resources, early access to new guides, and occasional templates you can actually use. Join below.
