Simplify Multi-Page Checkout - Spiralyze

Simplify Multi-Page Checkout

Layout High Priority 10% Adoption 10 Seconds Saved

In cases where a single-page checkout is impractical, a multi-page checkout can still be simplified and optimized to feel faster and easier for users.
Conversion Opportunity 1.3%

Sometimes a single-page checkout isn’t practical to implement – but even websites with multi-page checkouts can be made to feel fast and effortless for users.

Checkouts should be no more than 3 pages, maximum. Any more than this will intimidate the users. Imagine pulling up to a brick-and-mortar register and seeing that you have to go to a different cashier to scan, a different cashier to pay, and another cashier to ask you if you want to join their membership club. You would think twice about your purchase with that gauntlet in front you.

Checkouts should feel like a quick and effortless task as soon as the user reaches it. Don’t put any more distance between them and their purchase – and between you and their money – than necessary.

Simplifying a multi-page checkout, by reducing the number of pages or converting to a single-page, speeds up the whole process.

Usage

A checkout should be no more than 3 pages, maximum. Any more than this and the checkout will feel like a tedious slog for the user to complete. This gives you room for an address page, a shipping selection page, and a payment info page. Anything else, such as a separate login page or a review page, is unnecessary and only slows down a user’s purchase.

Separate login pages aren’t needed. A guest checkout option should be the default path for users – a login option can be placed in the header of the checkout page.

The worst page you can include in a checkout is a final confirmation page. Some websites make a final overview of the purchase before it’s finalized. This is nothing more than an opportunity for users to change their mind about their purchase and abandon it entirely. It gets them thinking about the money they’re about to give you, and that thinking is the mortal enemy of conversions.

An even better option is to utilize an accordion-style checkout, where all sections of the checkout are on the same page, but in hidden stages. This will still seem longer than a true single-page, but shorter than a checkout with many different pages.

Nike compresses their multi-stage checkout into an effective accordion layout, but they still included an unnecessary review step.

Adoption

0
20%
40%
60%
80%
100%

Simplify Multi-Page Checkout has an 10% adoption rate among our benchmark group.

Best Practices

No Login Pages

Some sites start their checkout process with a page that’s sole purpose is for login info or to choose guest checkout. This can be folded into the checkout itself by making guest checkout the default and providing a login option in the header.

No Review Page

The user is so close to completing their purchase, and review pages will only give them another chance to change their mind and abandon the checkout.

Give Preference to Accordion-Style Checkouts

We don’t consider it a true one-page checkout, but an accordion-style checkout is the next best thing. The whole checkout is in front of the user, and the end is sight, making it feel like a quick and low-effort process.

Include Progress Indicator

See Make Progress Obvious

Examples

Good

Newegg Example

Newegg limits their checkout to 3 pages of forms. Each page’s form is well-designed and feels short, too.

Kohl's Example

Kohl's lists the three stages, and smartly foregoes a confirmation page or login page.

Bad

Forever 21 Example

Forever21 has a separate login page, and there is also no progress indicator. The user reaches this page first and there is no end in sight, and forms appear in popups.