How to Optimize Each Type of Checkout

MARCH 18, 2015
Written by Joe Rosenthal

Different types of checkout have different strengths and weaknesses. Whether you have a single page checkout, a multi-page checkout, or an accordion checkout, there are opportunities to seize and hurdles to overcome.

types of checkoutPreviously, we’ve done an overview of each type of checkout that demonstrated the strengths of each layout when done right. Those overviews are full of helpful information and, if you’re still trying to decide between the types of checkout, that’s a great place to start.

Today, we’re going to discuss building each type of checkout to their individual strengths. To get the most from your checkout process, you need to construct something that flows nicely, and each type of checkout has its own way of doing just that.

 

One-Page Checkout

One-page checkouts are meant to be quick, modern, and provide a direct route to conversion. With this type of checkout, you want to design a flow that reinforces expedience, even if it means not using all the design elements you might want.

 
bellroy_checkout_thumb

 

Strengths

Expedience
Keep the number of fields to a minimum. Your inner-marketer is likely trained to ask for as many user details as consumers will volunteer, but you need to resist the urge. Only ask for what you need to complete the transaction and let users checkout quickly.

Use smart, in-line error finding on your checkout. When you’re using a single page to field all of checkout, user input needs to be correct the first time around. If users submit improper data, you’ll have to push them out back onto the same page, which gives a sensation of stalled progress. Telling users where errors are before they submit them is a way to make this type of checkout most valuable.

twitter_error_finding

Finality
By design, one-page checkout structures lead to a completed purchase after just one page. As a consequence, all of your calls-to-action must be abundantly clear. A button labeled “Continue” is much less clear than a button labeled “Confirm Purchase.” Leave any ambiguous buttons at the door–let users know exactly what they’re doing.

fallenhero_buttons

Additionally, the stark finality of one-page checkouts may send some hesitant shoppers looking for return and shipping policies before finishing a purchase. For these shoppers, make these policies easily accessible or abundantly clear on page. If you’re going to link to these policies, do not move shoppers away from checkout–use an on-page solution instead.

 

Weaknesses

Abandons
Though one-page checkouts are quick, they make it difficult to remarket. If a user abandons a sale, they do so before submitting any pages of input. Typically, once users are gone, they’re gone for good. Retailers can mitigate this by using a real-time, form field monitoring program, like PreCapture. This solution will help you collect user contact information without relying on the shopper’s click.

 

Accordion Checkout

gap_accordion_thumbAccordion checkouts lay out the required user information in a collapsible, compact arrangement that provides consumers with a quick and clear look at checkout as a whole. When implementing an accordion checkout, you’ll want to focus on the clarity and compactness of the structure.
 
 

 

Strengths

Clarity
When a consumer begins checking out, they’re able to see all of the collapsed steps laid out in front of them. They have a clear indication, from the first pane, of what checkout will entail and approximately how long it will take. It’s up to you to satisfy user expectations. Make sure the last step of your accordion checkout is truly the end–don’t lead to a secondary confirmation page.

Compactness
Accordion checkouts are meant to take typically long task and shorten it, so make sure the end is in sight for users the entire time. Part of what makes an accordion checkout so effective is that users can see the end of the task from the onset. Keep your checkout small and, if possible, make the final pane visible above the fold.

 

Weaknesses

Navigation
gap_accordion_edit_thumbUnlike single- and multi-page checkouts, accordion checkouts have dynamic layouts that involve a lot of expansion and collapse rather than a collection of static pages. As a result, navigation can get a little tricky. The most troubling tool is also one of the handiest in the browser’s toolbox: the back button.

When a user completes one section and hits “Back” to try and return, oftentimes they’re spit out at the cart, only to find all of their progress missing when they return to checkout. This frustrating affair kills conversions. So, what can you do?

  1. First, save checkout data often. If someone accidentally departs and returns, make sure their recent input is still waiting.
  2. Secondly, create a clear pathway between sections. In the example from Gap.com, the large ‘Edit’ buttons give users clear direction if they want to rework some input.

 

Multi-Page Checkout

Multi-page checkouts are the ‘vanilla’ of ecommerce checkouts. Everybody who’s shopped online understands the basic formula and, for the most part, it performs well. While multi-page checkouts aren’t the fastest type of checkout, they are very familiar to the majority of shoppers.

traditional2_thumb

 

Strengths

Easily Understood
As we said, most already know how the multi-page checkout works. Shoppers expect a first page that asks for shipping information, followed by another requesting billing information, and a final page for review. On your own multi-page checkout, stick to convention and strive for familiarity, even among first-time visitors.

Remember: Never use ‘side-steps’ in your checkout flow. All progress should you move you forward. Moving customers in any direction other than forward (toward confirmation) can feel sluggish and repetitive.

Step by Step
With a multi-page checkout, it’s easier to collect leads. To move from one section to the next, users typically have to click “submit,” volunteering information. At each ‘checkpoint,’ vendors can store submitted user info, including email addresses, for later marketing.

 

Weaknesses

Length
target_parody_thumb
The average checkout structure in 2012, as reported by Smashing Magazine, was 5.08 steps. While there’s little defining how long a ‘step’ takes, an average of 4 to 5 “continue” clicks is just too many. Keep it short, keep it useful, and keep it simple.

 
 
No type of checkout is inherently better than another, but each does have a number of strengths and weaknesses to recognize as you build yours. For more information on the different types of checkout or the different types of site abandonment, contact UpSellit!

 
 
Written by Joe Rosenthal

Thank you
A download link has been sent to the
email address provided.