Mobile commerce: fixing checkout on phones and tablets

Before changing anything, segment your data by device. In Google Analytics, create an advanced segment for mobile (phones) and another for tablets, then look at four reports: Ecommerce Overview for conversion rate and average order value, the Goal Funnel for checkout steps, Site Speed, and Browser and OS.

Typical findings:

Then test it yourself. Buy something from your own store on an iPhone 5 running iOS 7, a Galaxy S4 and an iPad, on a cellular connection rather than office Wi-Fi. Record the screen or take notes at every tap. Most owners find at least one step that does not work at all, such as a date picker that cannot be tapped, a dropdown that overflows the screen, or a 3-D Secure page that breaks in Mobile Safari.

Mobile shoppers abandon slow pages before they ever see the form. Google's own benchmark is that mobile pages should render in about a second, and the median retail page takes far longer on 3G.

• Aim for checkout pages under 500 KB and under four seconds on a 3G connection. Compress images, remove third-party scripts you do not need in checkout, and defer anything that is not essential.
• Serve the checkout over HTTPS from the first step and make the padlock visible; shoppers on phones look for it.
• Use a viewport meta tag and a layout that does not require pinch-zooming. If your platform is not responsive yet, a dedicated mobile checkout template is a reasonable stopgap.
• Keep the order summary visible but collapsed, with a tap to expand. Hidden totals cause second-guessing.
• Make the primary button full width, at least 44 pixels tall, and the only thing in its color on the page.

Every field on a phone costs more than on a desktop. Cut and configure ruthlessly.

1. Offer guest checkout first, with account creation as an optional step after the order. Forced registration is still the single biggest mobile killer.
2. Count fields. A good mobile checkout asks for 8 to 12 fields total. Remove "company," "address line 2" unless expanded on demand, "fax," and confirmation fields for email.
3. Use the right keyboard. HTML5 input types matter: type="email" for email, type="tel" for phone and card numbers, type="number" for quantity, and autocapitalize off for email. This alone reduces typing errors noticeably.
4. Default billing to shipping with a single checkbox to change it.
5. Use ZIP code lookup to fill city and state, which removes two fields and a dropdown.
6. Show errors inline next to the field, in words that say what to do, not a red banner at the top that the shopper cannot see after scrolling.
7. Put labels above fields, not inside as placeholders that vanish when typing starts.
8. Save progress. If the shopper leaves and returns, the cart and entered details should still be there, including across email links.

Typing a 16-digit card number, expiry and CVV on a phone is where many orders die.

Add an express option. PayPal Express Checkout, Amazon Payments (Checkout by Amazon or Login and Pay) and Google Wallet each let shoppers pay with stored credentials. PayPal is the most widely adopted; merchants commonly see mobile completion improve 10 to 30 percent after adding it. Place the express buttons on the cart page as well as in checkout.

Let returning customers pay faster. If you store cards with a PCI-compliant vault through your gateway (Authorize.Net CIM, Braintree, Stripe), returning shoppers can pay with a single tap after login.

Format the card field. Auto-space the card number, detect the card type from the first digits, and accept expiry as MM/YY. Do not make the shopper choose card type from a dropdown.

Avoid mobile-hostile verification. Review whether 3-D Secure (Verified by Visa, MasterCard SecureCode) is worth the abandonment it causes on phones, and test any fraud screening rules that treat mobile traffic as suspicious.

Show accepted cards and trust marks near the payment fields, at a size that is legible on a four-inch screen.

Most of these fixes are available on current platforms, but the effort varies.

• Shopify stores can enable a responsive checkout and PayPal Express from settings; theme-level work covers cart and product pages.
• Magento stores generally need a responsive theme (the new responsive reference theme is in Community Edition 1.9 beta) or a dedicated mobile checkout extension, plus a one-page checkout module tuned for touch.
• Bigcommerce, Volusion and WooCommerce each support responsive themes and PayPal Express; verify how their checkout handles HTML5 input types.
• Custom platforms should start with the checkout template and payment integration and leave catalog redesign for a later phase.

Whatever the platform, test on real devices rather than only in a desktop browser's emulation mode. Form behavior, keyboards and autofill differ.

Do not attempt everything before the holidays. Rank fixes by expected impact and effort.

1. Anything that is actually broken on a major device (highest impact, usually low effort).
2. Guest checkout and express payment buttons.
3. Field reduction and input types.
4. Page weight and speed.
5. Visual redesign of the checkout.

Measure each change with the device segments you built, and if traffic allows, run an A/B test using Google Analytics Content Experiments, Optimizely or Visual Website Optimizer. A store with 20,000 monthly phone sessions and a 1 percent conversion rate that moves to 1.4 percent gains 80 orders a month, which usually pays for the work within a quarter.

Judging mobile by last-click conversion alone. Many shoppers browse on a phone and buy on a desktop. Check Multi-Channel Funnels before concluding mobile does not sell.

Stripping features out of the mobile checkout. A cut-down m-dot checkout without promo codes, gift options or all shipping methods pushes shoppers to desktop or away entirely.

Hiding the checkout button below a wall of cross-sells. On a phone, the cart page should lead with the total and the button.

Testing only on the newest iPhone. Android holds over half of US smartphone share; test on at least one mid-range Android device.

Ignoring tablets. iPad shoppers convert nearly as well as desktop users when the site works; a desktop layout with tiny links and hover menus wastes that.

We treat mobile checkout as a connected web, growth and technology problem. Discover: we segment analytics by device, walk the checkout on a set of real phones and tablets, and review speed, payment and platform constraints. Plan: we rank fixes by revenue impact and effort, set targets for completion rate per step, and agree on what ships before peak season and what follows. Build: our UX, design and development teams implement the checkout changes, payment integrations and speed work, with the growth team setting up device segments and tests. Improve: we read the funnel weekly after launch and iterate, moving from repairs to redesign once the basics hold.

A representative engagement is our ecommerce work, where a retailer saw mobile traffic climbing past a quarter of sessions while phone orders stayed flat. We found a broken address step on a common Android browser, introduced guest checkout and an express payment option, cut the form to the essentials with correct input types and reduced checkout page weight. Phone completion rose step by step, and the retailer moved to a full responsive redesign the following season on the strength of the numbers.