Checkout Page Analysis: The One-Page Checkout

checkout page analysis

 
Checkout pages are often the cause of boredom and confusion. To collect marketing information, vendors layer pages and pages of form fields into their checkouts, leaving the customer with a bloated, drawn-out process that’s much easier to abandon than complete. To reduce checkout abandonment rates, some vendors opt to cut out unnecessary steps between cart and conversion by including every form field on one checkout page.
 

checkout page analysis

 

The Single Page Checkout

One-page checkout procceses are lean, efficient checkouts that request all necessary user information on a single checkout page. As a consequence, one-page checkouts are typically minimalist. They only ask for essential user data and are usually very clean in design. However, as we’ve said before, no checkout structures are perfect. Today, we’re going to take a look into the one-page checkout structure using real-world examples from the following three apparel companies:

  1. CafePress
  2. SSENSE
  3. Nixon

Today, we’ll continue our checkout process analysis and move straight into examining the details of one-page checkouts.
 

Input Errors and the Checkout Page

Error checking is of magnified importance in one-page checkout structures. When all of a user’s input is put on a single checkout page, progress hinges on all information being correct and usable. If there’s an error anywhere on the page, the user is going to have to go back and fix it, which can be excruciatingly frustrating and is sure to increase checkout abandonment rates.
 

ssense_error1 SSENSE’s checkout page does the best job of alerting users quickly that their input needs attention. With real-time error checking on every field, SSENSE grabs user attention with red text as soon as a required field is skipped or left incomplete.
 

cafe_error

CafePress (above) was an early adopter of the one-page checkout and has an extremely lightweight, quick-loading checkout page. However, their error-checking mechanisms are lacking. Red asterisks mark required fields, but nothing alerts the user to skipped fields or invalid input until submit is clicked. Nixon’s error checking (below) ranks somewhere between the two by exclusively checking credit card information in real-time, but leaving other fields unattended until page submission.

nixon_error
 

Checkout Page Usability

Clean Forms.
The organization and flow of a one-page checkout is another exceptionally important element. The vendor must successfully guide the user’s eye through forms without missing a beat. When there’s only one checkout page to submit, getting it right the first time is paramount.

All three of the merchants analyzed have taken this idea to heart and use extremely minimalists designs. The three vendors break the checkout page into four sections:

  1. Billing address,
  2. shipping address,
  3. shipping options,
  4. and payment information.

The forms within these sections are generously spaced out, making sure each field gets the attention needed from shoppers.

nixonssense_thumb

Take a look at the two checkout pages above and pay attention to the amount of blank space that cushions all of the form fields.

 
Usability Tricks.
nixon_card_thumb
In addition to the cushy space in this checkout page, there are some usability trickes in play by these vendors that we love. With both SSENSE and Nixon, as you begin to input card information, the card type is automatically selected and the thumbnail is colored in. This simple feature is both pleasing on the eye and reduces the amount of time a shopper has to spend on the page.
 

nixon_name_thumbNixon, however, goes above and beyond with input efficiency. As the user types in their first and last name, fields further down the line are filled in real-time with the proper data. It’s a joy to watch and gives shoppers the illusion of quickened progress.
 
 
 
 

nixon_zipNixon also has an extremely handy ZIP code field. When the ZIP is input, the form expands to show an already-filled city and state prompt. Once expanded, all fields are editable, just in case.
 
 

 

Right-Side Checkout Page Real Estate

It’s a well-known best practice to align your checkout forms in a (mostly) single-file line. Typically, this cascade of forms spans the left side of the page and, as a result, the right side is sparse. So, how does each company use this space with just one checkout page?

NixonwidgetAll three companies opted to use a widget that follows the user down the checkout page. For Nixon’s checkout page, this widget contains customer service options, ensuring that users don’t leave the page in search of help. On Nixon’s widget (left), there are modal window links to relevant policies and FAQs that address common questions without redirecting the user.

The SSENSE and CafePress widgets (seen below) follow the user with an order overview, keeping users focused on the task at hand and ensuring that no mistake is made with the order contents. CafePress’s widget has the added bonus of displaying a bright CTA, never leaving the user without a next step

cafe_widget

 

Keeping Focus on the Checkout Page

One-page checkouts are appealing to shoppers because of how quickly they can be completed. Vendors love these checkouts because they drastically reduce the number of pages between cart and conversion. To achieve maximum efficiency from a one-page checkout, it’s necessary to focus customer attention on completing the first and only page.

checkout_focusthumb

All of the companies analyzed remove categorical browsing once the user reaches checkout to discourage idle shopping, but keep the pages similar enough to the shopping cart to make for a cohesive experience.

nixoncafe_cta

Nixon and CafePress have brightly colored calls-to-action to keep users constantly directed. Narrowing the user focus is a key component to reducing checking abandonment and driving conversions.

 

One-Page Checkout and Abandonment Recovery

Although there are significant benefits to using a single checkout page, there’s also a glaring error that can be a sorely missed opportunity if you’re not careful. By design, one-page checkouts don’t have users submit bits of information as they move through checkout. These submissions act as “checkpoints” for the vendor. If a user abandons a checkout page, they may have left enough information behind to power email remarketing efforts.

Without a pre-submit collection tool, such as UpSellit’s PreCapture, there is little chance to remarket to guest users that abandon checkout, as their contact info is never be submitted. Consider powering your one-page checkout with a solution that can help you recoup lost leads.

 
 
Across all three types of checkout, there are a few stand-out principles. As always, keep things simple, but also make sure your checkout is fast. Give users viable customer support options and keep the entire process focused on the conversion. For more information on reducing abandonment on checkout pages or to learn more about PreCapture, contact UpSellit.

 
 
Written by Joe Rosenthal

Leave a Reply

Your email address will not be published. Required fields are marked *