Mobile accounts for roughly 75% of ecommerce traffic now, but mobile checkout conversion rates remain significantly lower than desktop. According to Baymard Institute, mobile cart abandonment is around 80%, compared to about 66% on desktop. The gap is not because mobile shoppers are less interested in buying — it is because checkout on a phone is harder.
Navigation plays a bigger role in mobile checkout friction than most store owners realize. The header takes up space, the form fields are hard to tap, and the shopper’s thumb can barely reach the top of the screen. Getting mobile checkout navigation right means acknowledging these physical constraints and designing around them.
The thumb zone during checkout
Steven Hoober’s research on mobile device usage showed that most people hold their phone with one hand and operate it with their thumb. The comfortable reach zone is the lower third of the screen. The upper corners are the hardest to reach.
During checkout, this matters because the most important action — “Complete order” or “Pay now” — should be in the easy zone. Many mobile checkout pages place the submit button at the bottom of a long form, which is the right position. But the navigation elements at the top (back button, progress bar, order summary toggle) require the shopper to stretch or shift their grip.
The best mobile checkout flows keep the top of the screen simple — maybe just a progress indicator and a small logo — and put all actionable elements (form fields, buttons) in the natural thumb zone. The shopper scrolls through the form with natural thumb swipes and taps the submit button without stretching.
Reducing screen real estate waste
On a phone with a 6-inch screen, the header, status bar, and keyboard can consume more than half the visible area. If the checkout page still shows a full navigation header with a menu icon, search bar, and cart icon, the actual form area shrinks to a small window.
This is why minimizing the header on mobile checkout is even more important than on desktop. On desktop, a full header takes up maybe 60 pixels out of 900 — a small percentage. On mobile, the same header takes up 60 pixels out of 700, and when the keyboard opens for form input, the visible area drops further. Every pixel counts.
Some stores collapse the header entirely on mobile checkout, showing only a thin progress bar and a back arrow. Others use a sticky mini-header that scrolls away when the shopper starts filling in the form. Both approaches free up space for what actually matters — the checkout fields.
Cart access without distraction
On mobile, shoppers often want to double-check what they are buying before entering payment details. A common pattern is an expandable order summary at the top of the checkout page — the shopper taps “Show order summary” to see item thumbnails, quantities, and prices, then collapses it to get back to the form.
This is better than a full cart page because it keeps the shopper in the checkout flow. They can verify their order without navigating away. The worst pattern is linking “View cart” to a separate page — the shopper clicks it, reviews the cart, then has to find their way back to checkout and potentially re-enter information.
If you use a bottom tabbar during browsing, hide it during checkout. The cart icon in the tabbar is useful during browsing (quick access to the cart from any page), but during checkout it is redundant and distracting. The shopper is already looking at their cart in the order summary. Showing a cart icon in the tabbar invites them to tap it, leave checkout, and potentially lose their progress.
The back button problem
On mobile checkout, the browser’s back button is unpredictable. In a multi-step checkout (shipping → payment → review), tapping the phone’s back button might go to the previous checkout step, or it might go back to the cart page, or it might go to the product page they were browsing before. The behavior depends on the checkout implementation and is often inconsistent.
The best pattern is to provide an explicit in-page back action — a left arrow or “← Back to shipping” link within the checkout form itself. This gives the shopper a predictable way to go back one step without relying on the browser’s behavior. It also keeps the back action within the checkout flow, rather than potentially exiting it.
Form design as navigation
During checkout, the form itself becomes the navigation. Each field is a step the shopper takes toward completion. From this perspective, good form design is good navigation: clear labels, logical field order, reasonable defaults, autofill support, and minimal required fields.
Baymard’s research found that the average checkout has 11.3 form fields and 5.1 steps. Reducing these numbers — combining address fields, auto-detecting city from zip code, offering guest checkout — is a form of navigation simplification. Each field the shopper doesn’t have to fill out is a step they don’t have to navigate.
On mobile specifically, supporting browser autofill is critical. When the phone auto-fills the shipping address, the shopper effectively “navigates” through five fields in one tap. That is the kind of navigation efficiency that actually moves the conversion needle.
This article is part of the larger guide on Why shoppers abandon cart at checkout (and how navigation plays a role).