Sell more with mobile UX design

Mobile checkout: why 70% of customers give up on their phone

The average mobile conversion rate in ecommerce is 1.8%. On desktop it is 3.2%. The gap isn’t caused by the device. It’s caused by a checkout built as if a phone were just a small desktop. A touchscreen is not a small mouse.

A thumb is not a precision tool. And a train journey is not a desk.

The pattern in mobile checkout analysis is telling: shops that treat mobile as a platform in its own right convert far better than those that simply shrink their desktop version.

The 5 mobile checkout killers

1. Too many form fields

The average ecommerce checkout has 12-15 form fields. On desktop that is annoying but doable. On mobile it is a disaster. Every field means tapping, fighting autocorrect, maybe zooming, scrolling to the next field. With 15 fields that adds up to 45 seconds of pure friction.

A fashion shop cut its checkout fields from 14 to 6: first name, last name, email, address (with autocomplete), payment method, confirmation. No company, no phone number, no second address line, no title dropdown. Result: mobile checkout completion rose from 28% to 47%. With 15,000 mobile sessions a month, that meant 285 extra orders.

The rule: every field you can remove without putting delivery at risk is a win. Ask yourself whether Amazon would ask for it. If not, remove it.

2. Dropdowns instead of input fields

On mobile, dropdown menus are the user-experience equivalent of Lego bricks on the floor. A country dropdown with 195 options. A title dropdown with 5. A date-of-birth dropdown with 31 days. Each one means tap, scroll, select, return to the page.

An electronics shop replaced every dropdown with an input field with autocomplete. Country became a text field that suggests options after 2 letters. The title field was removed (it wasn’t required). Date of birth became a simple date field. Result: checkout time fell from 4 minutes 20 seconds to 2 minutes 10 seconds, and mobile abandonment dropped by 18%.

3. The keyboard trap

A mobile form that uses the standard keyboard for every field is inefficient. The email address needs the @ sign close at hand. The card number needs the number pad. So does the postcode. If users have to switch keyboards for every field, they lose time, and patience.

A home and living shop added input type=“email”, input type=“tel” and input type=“number” to the matching fields. The change was subtle but measurable. Checkout time fell by 23 seconds and abandonment by 4%. A little less friction goes a long way when traffic is high.

4. No progress indicator

A mobile user in a checkout without a progress bar has no idea how many steps are left. Is this the last page? Three more? That uncertainty makes abandonment more likely, especially on mobile, where distractions (push notifications, changing trains) can strike at any moment.

A shoe shop added a simple progress bar to its 4-step checkout: “Step 2 of 4: Shipping”. Mobile completion rose by 7%. Users knew where they were and how much was left. The effect was stronger on mobile than on desktop, because mobile users have less patience and lose their bearings faster.

5. Missing payment options

PayPal, Apple Pay, Google Pay: on mobile these aren’t nice-to-haves. They are essential. A customer holding a phone doesn’t want to type in a card number. They want to pay with a fingerprint or a glance.

A fashion shop added Apple Pay and Google Pay to its mobile checkout. Before: card and PayPal only. After: card, PayPal, Apple Pay, Google Pay.

Result: 34% of mobile orders were paid with Apple Pay or Google Pay. Mobile conversion rose by 12% overall. Wallet users took 45 seconds on average to check out, against 3 minutes 20 seconds for card users.

Mobile-first checkout: a worked example

A food shop with 60% mobile traffic had a checkout abandonment rate of 71% on mobile, against 38% on desktop. The analysis showed:

1. 1
   

   The address took 5 fields (street, house number, postcode, city, country).

   Fix: one address field with Google Places autocomplete. Type 3 letters, pick, done.

2. 2
   

   The payment page had 8 card fields (number, expiry, CVV, name and so on).

   Fix: Stripe Elements, which wraps card entry in a secure, optimised form.

3. 3
   

   No wallet payments.

   Fix: Apple Pay and Google Pay added.

4. 4
   

   No guest checkout.

   Creating an account was mandatory. Fix: guest checkout as the default, with an optional account after purchase.

Result after 6 weeks: mobile checkout abandonment fell from 71% to 39%. Mobile conversion rose from 0.9% to 2.1%. Revenue from mobile traffic grew by 130%, on the same marketing budget.

The quick-win check for your mobile checkout

Test your checkout on a three-year-old Android phone on a slow connection. If you get frustrated, so do your customers. Check these points:

□ Can I finish checkout in under 2 minutes?

□ Do I need fewer than 6 fields?

□ Can I pay with Apple Pay or Google Pay?

□ Is the button big enough for my thumb (at least 44×44 pixels)?

□ Can I always see which step I’m on?

□ Can I buy without creating a password?

If you answer “no” to more than 2 of these, your mobile checkout is costing you sales, and fixing it is the fastest optimisation you can make.

Frequently asked questions about mobile checkout

How fast should a mobile checkout be?

Under 2 minutes from basket to order confirmation. Every minute beyond that costs 10-15% conversion. The fastest checkouts (Amazon 1-Click, Apple Pay) take under 30 seconds. You don’t have to be that fast, but under 2 minutes is the minimum.

Should I optimise mobile and desktop separately?

Yes. Responsive design isn’t enough. Mobile users have different needs, different attention spans and different ways of entering data. A mobile-first checkout that you then extend for desktop works better than a desktop checkout cut down for mobile.

Do I need an app for better mobile conversion?

Not necessarily. A progressive web app (PWA) gives you 80% of the benefits of an app (push notifications, offline use, a home-screen icon) without the cost of building and maintaining a native app. A good PWA typically converts only 5-10% below a native app, at a fraction of the cost.

What is the biggest mobile checkout mistake?

Forcing people to create an account. A shop that makes customers register before they can buy loses 20-35% of its mobile customers. The reason: creating a password, confirming an email and filling in a form on a small screen is a hurdle many won’t clear. Guest checkout isn’t a nice extra. Your mobile sales depend on it.

You can learn this step by step in the Academy track UX & User Research for E-Commerce ↗.