Single-Page Checkout - Spiralyze

Single-Page Checkout

Usability Medium Priority 34% Adoption 3 Seconds Saved

Implementing a single-page checkout with the end in sight saves time and reduces perceived effort for the customer. It makes it easy for the customer to give you their money.
Conversion Opportunity 1.8%

The best designed checkouts use a single-page layout, where all forms and inputs are on a single page. Payment info, shipping info, and purchase review/confirmation should all be on one page. This enhances the checkout process in a few ways:

  • Reduces friction by limiting clicks to next page, limiting time spend waiting for pages to load, and foregoing unnecessary separate login pages and confirmation/review pages
  • Reduces the perceived effort required on part of the user
  • Shortens time until purchase competion

A well-crafted single-page checkout will always feel faster and simpler than a multi-page checkout.

Usage

Many websites use an unnecessarily long and tedious checkout process. Some sites expand it so there are separate pages each for carts, login, shipping address, shipping method selection, payment, and a review/confirmation page. Other sites seem to squish these together into a single page, but implement an accordion-style checkout that still slows down the user and puts more work between them and their purchase – and between you and their money.

Converting to a true single-page checkout means that the user will have all required inputs in front of them from the start. It also means users with slow internet connections won’t be slowed down by the time it takes to load each new page.

Faster checkout time means fewer cart abandonments, which means more conversions.

Put all required forms on a single page, and do away completely with any review/confirmation pages. These pages serve no purpose beyond giving the user a chance to change their mind and abandon their purchase

6pm employs an accordion-style checkout, which, though one-page, still must load individual stages, giving the checkout a multi-page feel.

Overstock employs a single-page checkout. Note that all forms are on a single page, making it feel quick and clear.

ToysRUs doesn't even try for a single-page checkout. As a result, it feels longer and effort-intensive for the user.

Adoption

0
20%
40%
60%
80%
100%

Single-Page Checkout has an 34% adoption rate among our benchmark group.

Best Practices

No Login Pages

An optimal checkout makes guest checkouts the default choice. For customers that wish to login to their account, put that option at the top of your single-page checkout.

No Pre-Purchase Review Pages

A review/confirmation page may seem nice for a user, but in reality it only provides them with another opportunity to rethink and abandon their purchase. Don't ask a user "Are you sure?" Just take the money.

Smart Use of Space

With all required forms on a single page, extra attention should be given to ensuring you have a clean, intuitive layout. For example, shorter fields like City, State, and ZIP can be put on the same line.

Examples

Good

Overstock Example

Overstock.com uses an effective, low-effort single-page checkout.

Groupon Example

Groupon uses an effective, low-effort single-page checkout.

Okay

6pm Example

6pm uses a concise accordion-style checkout - not bad, but slower than a true single-page checkout.

Nike Example

Nike uses a 3-step accordion checkout. Not bad, but still more steps than a single-page checkout.

Bad

Toys R Us Example

Toys-R-Us uses a 5-page checkout. Note they make the checkout look a longer than necessary by counting the receipt page as a step.