Checkout Design
Date: 2026-08-17
The last few screens, where committed buyers are lost to friction and surprises. The single largest cause of abandonment isn’t the form — it’s a cost appearing that the customer hadn’t been told about.
Checkout converts intent into an order. Everyone who reaches it has already decided to buy, which makes every loss here a self-inflicted one.
Why people abandon
Consistently, across research:
UNEXPECTED COSTS delivery, fees, tax
appearing late
← the largest single
cause, by a distance
FORCED ACCOUNT CREATION
TOO LONG / TOO COMPLEX
DIDN'T TRUST THE SITE with card details
DELIVERY TOO SLOW / UNCLEAR
NO PREFERRED PAYMENT METHOD
ERRORS AND CRASHES
RETURNS POLICY UNCLEAR
Only two of those are form design. The rest are information and trust problems, which means most checkout optimisation effort is aimed at the minority cause — Trust Signals.
Show the total early
BAD GOOD
basket £24.99 basket £24.99
step 1 £24.99 delivery £4.95
step 2 £24.99 ─────────────────────
step 3 + £4.95 total £29.94
+ £1.20 from the basket page
£31.14 onwards
A visible £4.95 costs fewer sales than a hidden one, because the hidden one isn’t experienced as a price — it’s experienced as having been misled, and it takes the trust of everything else with it.
Drip pricing is also a regulatory issue.
[CHECK: current CMA position on drip pricing and total-price disclosure before deferring any mandatory charge to a later step.]
Guest checkout
Forced registration is among the most costly and most easily fixed defects in commerce.
OFFER
guest checkout, prominently
account creation AFTER purchase,
prefilled — "save these details
for next time, just choose a
password"
AVOID
registration before purchase
"create an account" as the primary
button with guest as a grey link
Post-purchase registration converts better and produces the same account, because the person has already typed everything and is now invested — Commitment and Consistency.
One page or several
SINGLE PAGE + everything visible,
total always in view
− long, intimidating on
mobile
MULTI-STEP + less at once, clear
progress
− total can hide
− more page transitions
ACCORDION a middle path — one
section open, others
collapsed and summarised
No consistent winner in the evidence; the total’s visibility matters more than the count of steps. A multi-step checkout showing a running total throughout beats a single page that hides delivery until the end.
If multi-step, show honest progress — and never add a step after the count is shown — Commitment and Consistency.
What belongs in checkout
KEEP
the logo — orientation, trust
a running order summary
delivery date, not duration
returns policy, briefly
a support route
security signals near the card field
REMOVE
main navigation ← the one legitimate
case for stripping it
promotional banners
cross-sells competing with completion
newsletter sign-up as an interruption
The discount code field is the underrated hazard. A prominent empty box tells people a discount exists and sends them away to find one — many never come back. De-emphasise it, or reveal it via a link.
Payment
OFFER THE EXPECTED METHODS
cards, and the wallets your audience
uses
→ wallet buttons early skip the
entire form
FORMAT AS THEY TYPE
card number spacing, auto-advance
between expiry fields
NEVER LOSE THE BASKET on failure
SAY "your card was not charged"
← the sentence that determines
whether they retry
Mobile
Where most checkout traffic and most abandonment is:
correct input types and autocomplete
— Form Design
wallet payment prominently, first
sticky total and primary action
generous tap targets — Fitts's Law
no zoom-on-focus (font-size ≥ 16px)
Measuring it
- Funnel by step — where they leave — Funnel Analysis
- Field-level drop-off — which field — Form Analytics
- Error rate by field
- Payment failure rate, and retry rate
- Completion by device — the mobile gap
- Time to complete
Guardrail any checkout test on returns and support contacts. A change that lifts completion by hiding information raises returns and complaints, and the conversion metric will call it a win — Guardrail Metrics, Deceptive Design.