Last chapter, we explored the importance of and the options for the first step of checkout, addressing both new and returning visitors. This chapter focuses on the checkout process as a whole – its organization and design.
The anatomy of a checkout process
Regardless of how you package your checkout — one-page, multi-step, AJAX-y accordion or an app-like wizard — you must collect certain information from your customer. Because there’s no lock-and-stock convention for how to organize checkout steps, there’s a wild West of design patterns.
Shipping and billing can be displayed as separate steps…
…or they can be “combined” to appear as fewer steps (shipping or billing addresses can be copied from the initial step).
Payment, review and order confirmation can be separate steps…
…or review and payment can be combined.
Review order and Confirmation can be presented as separate steps…
…or the process can appear shorter by dropping Confirmation.
Shipping method may be its own separate step, or baked into to the Shipping address step.
How you organize checkout absolutely affects usability and conversion rates, and is one of the primary areas to A/B test. How do you determine which is right for you?
One-page to rule them all?
Why present multiple steps when you can condense them to one page?
One-page checkout first gained popularity in the late ‘00s as an alternative to multi-page flows, and A/B tests often produced impressive lifts against incumbent designs. But whether one-page checkout is superior to multi-step is still a topic of hot debate, especially in today’s mobile-first environment.
One-page checkout does not equal one step. Unless you offer one-click checkout, a one-page checkout still contains multiple steps, just packaged up a different way.
A typical one-page checkout is presented on desktop in a multi-column format, with much of the content visible above the fold.
Multi-column one-page checkout layout
While users may perceive this to be quicker or easier than a multi-page checkout, multi-column layouts require customers to scroll down and up multiple times during the process, and require more “thinking” to complete.
Responsive one-page designs typically reflow to fit the mobile screen as one vertical column, which isn’t ideal for mobile users as it creates one long page to scroll through.
One-page checkout on mobile
One-page checkouts typically don’t offer horizontal preview of steps, which requires the customer to scroll to understand all the steps involved.
A more contemporary version of a one-page layout is the accordion checkout, where steps are presented vertically, and can be expanded or collapsed with AJAX.
Accordion checkouts work great for responsive sites, as they scale up and down easily, and are “tap-friendly.” Sections can also be easily edited from a single page without using a back button.
While accordion checkouts are gaining popularity and tend to convert well, it’s important that individual steps are optimized, regardless of how they are packaged up.
Checkout process best practices
Form fields will be covered in-depth in the next chapter, and mobile layouts and forms in their own chapters. This chapter focuses on the desktop context.
Enclose the checkout
Checkout enclosure is a long-standing usability best practice. Removing header and footer navigation, banners and any links that may serve as distractions creates a guided flow, and a no-turning-back experience for customers while maximizing screen space (more important than ever in our mobile-first world). Many A/B tests show lifts of 5% or more against “open” checkouts.
Example of an unenclosed checkout
Example of an enclosed checkout
While removing distractions tends to work, this doesn’t mean your header space should be completely blank. Consider leveraging live chat or customer service numbers in headers. It’s also a good idea to maintain the convention of linking your site logo to your home page. Customers who really do want to return to your site to keep shopping or review their cart one more time should be supported and not forced to use their browser bar to recall your site (especially on mobile devices).
Collect the email address early
Capturing a customer’s email address in the first step of checkout allows you to send cart recovery email, which can help you salvage hard-earned sales through reminders and incentives.
Don’t ask for it last!
Avoid double-column layouts
Numerous eye-tracking and user testing studies observe that Web users tend to fill in forms vertically from top to bottom, and expect forms to be laid out as such (with the exception of First and Last name, and City/State fields which can appear side-by-side). Two-column layouts can slow down both customers’ thought processes and their efficiency in filling in checkout forms.
Double-column layouts are sometimes chosen as a way to combine steps and (artificially) shorten the checkout process. These checkout designs impose unnecessary visual clutter and cognitive load on customers. Even on the “large screen” (desktop and laptop machines), this format requires customers to scroll up and down to complete.
Below, an extreme example of combined steps is highly problematic, as billing address (left column) and payment information (right column) appear within the same “box.”
Many users will attempt to fill in this form from left-to-right, switching contexts from name on card to credit card type, then to address, then to card number, back left to an unmarked field, and so on. (It’s also unclear which fields are required, for example the blank address field and Promo Code box).
The single-column recommendation has a few exceptions. Fields that are conventionally placed adjacent to each other, such as First Name / Last Name, or State / Zipcode are fine. Otherwise, opt for stacking fields vertically, and avoid multi-column layout.
Use conspicuous and prioritized calls to action
Using clear and conspicuous calls to action is one of the longest standing usability best practices, yet many ecommerce checkouts still use sub-optimal styling. While “ghost buttons” (white or transparent boxes) are trendy, they closely resemble form fields, and are less likely to be spotted or understood as actionable buttons.
Bold-colored buttons can also be problematic if they compete with each other and aren’t labeled with enough clarity. EB Games’ Save and New buttons are not intuitive (rarely used in a checkout flow and not distinct enough from each other as to what they do).
With all buttons colored red, there is no visual indicator as to what the most useful action to take is to proceed with checkout. This forces the customer to think longer and harder than he or she has to, and introduces uncertainty and doubt about submitting the form.
It’s also not recommended to place Cancel buttons to the right of a more important button, like Save or Continue. Both EB Games (above) and Petco (below) place Cancel to the right of Save, though Petco’s primary call to action is correctly styled with a bold color against the secondary button’s gray style.
Always ensure your primary call to action is styled bigger and bolder than secondary buttons or links.
Ask for shipping information before billing
Most ecommerce sites ask for shipping information first, with the occasional checkout requesting billing information first. While it’s arbitrary which step precedes the other so long as the steps themselves are clear and intuitive, going with the more conventional approach (shipping first) is more intuitive to your customer. If you offer multiple shipping options, it also makes more sense to collect shipping information before presenting shipping options and their associated costs before collecting billing information.
Use inline ‘copy address’ and progressive disclosure
Many checkouts combine billing and shipping steps with the option to copy the first entered address (be it billing or shipping) to the second step. While this is best practice, it’s not always designed or implemented the right way.
For example, the checkout below presents both billing and shipping forms in a single step, but it’s not clear enough that the customer can skip entering a shipping address if it’s the same as billing, even with “if different” indicated.
Web users are conditioned to never attempt to submit unfilled fields lest the form be returned redlined to death. The lack of clarity results in many customers duplicating their address “just to be safe.”
The best way to indicate that addresses can be copied to the next step is to use a visual marker – a checkbox. But make sure the checkbox is placed in the right spot. In the example below, it’s positioned top-right, out of the user’s natural eye flow when reviewing the form.
Ideal placement is inline — smack-dab in the user’s eye flow. There are a several ways to do this well.
One tip is to keep the box close to form headers like “Billing Address” and “Shipping Address,” and vertically aligned to fall in the user’s eye flow.
Vertically aligned checkboxes fall naturally within user’s eye flow
Horizontally aligned checkbox may be overlooked by users
Even better, place your checkbox within the field column, where it’s even easier to notice.
You can also use progressive disclosure, revealing additional form fields only when necessary. The below example uses radio buttons and conversational text to add clarity: “Where would you like your order shipped?”
Alternatively, some checkouts apply copy-address to the payment step, removing the billing step altogether. This approach works great when PayPal is an option, where billing information can be pulled through PayPal, and only credit card transactions require billing address input.
Present in-store pickup selection early
Omnichannel retailers are increasingly baking store pickup (click-and-collect for our European friends) into product detail pages and shopping cart review pages.
Store pickup option presented on product detail page
Store pickup presented in cart step
Customers who pre-select store pickup can be sent to a streamlined checkout process that excludes the shipping address and shipping method steps, whether the order is shipped to the store, or simply reserved in-store from local inventory.
But there are a couple caveats to this tactic. First, it’s easy for customers to overlook ship-to-store options on product pages because we’re conditioned to beeline to juicy Add to Cart and Checkout buttons. A counter-tactic is to use calls to action to force a decision on the product detail page.
Another caveat is omnichannel catalogs often contain online-only SKUs, and local store availability can vary. A single cart may contain a mix of ship-to-home and ship-to-store or store-pickup products. For this reason, e-tailers shouldn’t rely exclusively on early-funnel shipping selection, and should rather present store pickup and ship-to-store options as a checkout step.
The shipping method step typically follows shipping address, but presenting store pickup options after a customer has entered a shipping address doesn’t make sense.
Instead, present store pickup before the shipping address form, or even better, use progressive disclosure to hide both in-store pickup and shipping address fields until a selection is made. Hiding the address field makes the selection step stand out more, and prevents customers from filling in empty fields on mental autopilot.
Store pickup option presented inline with shipping step
Store pickup option using progressive disclosure, with address form hidden
If billing address is collected first, shipping step can leverage both progressive disclosure and a copy-address checkbox.
Progressive disclosure combined with copy-address checkbox
Show estimated arrival dates with shipping options
An advanced feature that may not be available with all ecommerce platforms (but is appreciated by customers) shows estimated arrival date along with week-date.
Show express payment options first in the Payment step
When offering express payment options like PayPal and Visa Checkout, make sure they’re presented early in your flow, not after the credit card form.
The example below asks for credit card details first. This design is problematic not only because customers may assume the site only accepts credit cards (especially on mobile where one must scroll to see the full form), the PayPal button competes with the Continue Checkout button, adding confusion to credit card customers.
Toys R Us (below) visually separates credit card from PayPal, but again, mobile users are less likely to notice both PayPal and Pay in Store options before encountering empty credit card input fields.
Visually separating payment type selection from credit card input fields is one way to improve usability when multiple payment options are available.
Progressive disclosure is even better. The following example hides the credit card form until selected.
Credit card form hidden
Credit card form expanded upon selection
The above example also visually blocks off the selected option with a gray field to further distinguish it from the unselected option.
Consider showing express payment options as early as the cart review page, as they allow customers to bypass billing address (and in many cases, shipping address) and payment steps. Presenting them too late in the flow causes some customers to enter information they don’t need to, defeating the purpose of “express” options.
Express payment options are ideally offered as early as checkout page, rather than the final, or second-to-last step
Ask for billing address in Payment step
Rather than ask for billing address earlier in the flow, consider combining it with Payment. Not only does this reduce the absolute number of checkout steps, it’s a logical grouping. Billing address is collected to verify credit card information. It also allows PayPal and other express payment users to bypass the billing address form completely.
In the example above, the billing address is pulled from previously input shipping information, with the option to change if different.
In the example below, billing address is pre-checked as “same as the delivery address.” The danger with this approach is customers with a different billing address may overlook the pre-checked box, and submit the form with an address mismatch error.
If you display the full billing address form, ensure you include a copy checkbox. Yoox (below) uses a copy checkbox in the previous (shipping address) step, but fails to apply the copied address to the payment step (double fail).
Best Buy gets it right, placing a copy checkbox inline above billing address fields along with a reminder that billing information must match the financial institution’s records to process successfully.
Avoid using tabs in checkout
Hidden content is always a usability risk. Avoid using tabs for alternate payment or shipping options.
Opt for the conventional PayPal button over plain text links. PayPal users will recognize it instantly.
The Visa Checkout tab as styled is unclear and unrecognizable.
In the following design, the eye fixates on the credit card input field. It’s too easy to overlook the gray PayPal button as it’s styled. PayPal is also repeated as a credit card option, which is confusing.
Use trust seals in Payment step
Ecommerce sites often place trust seals in header or footer navigation, and miss the opportunity to place it at the point where a customer feels the most anxiety – the credit card input step.
Repeat addresses and selections in review step
The purpose of the order review step is to provide the customer with a last chance to make any corrections to input information as well as review the final total if entries like promo codes, shipping address and shipping method change the order total from what was shown in the cart.
But many checkouts fail to display address and payment entries, showing only the order details and total.
Confirmation step omits review information
Some skip the review step altogether, baking it into payment.
No order review step
This is a problem that plagues one-page checkouts. Don’t assume that because previous entries remain visible in a one-page view that customers will double-check their information.
While some one-page checkouts include a blurb asking customers to review their information, customers are lazy. If it’s not front-and-center, very few will make the effort to scroll around to review field-by-field (and few will read the blurb).
Instructive text is not a substitute for an information summary
Review step properly summarizes information to review
Finally, ensure the summary appears above the Place Order button.
Don’t let your order summary slip below your Place Order button
If your site is responsive, ensure your content reflows correctly!
Support saving account info
Offering guest checkout without registration allows customers to save their information to an account as a final step is a helpful feature.
As with any call-to-opt-in, persuasive copywriting that describes clearly the value proposition of creating an account will boost uptake.
Think we forgot mobile checkout? No way! Mobile layout and form usability get their own full chapters, coming up next. Are you subscribed?