Arrow close_button arrow_dropdown angle_left angle_right Phone Search Hand Slider Checkmark Read Icon eguide tools video
Groove Commerce
Design 1, 2, 3: The Holy Grail of eCommerce: The Checkout

Originally, I wanted to write about the prominent multi- vs. single-page checkout debate and which is better. I’ve used many multi-page checkouts that zipped me through the process and others that were never ending. Single-page checkouts can be quicker but also less user-friendly for people with older systems or fewer tech skills. Bottom line? I’m not going to give you an answer to which is better. Too much depends on your website, your audience, your shipping rate, and the information you need/gather during checkout. Instead, I want to refocus your attention on what really matters during checkout (and it’s NOT the number of pages of your checkout.)

I’m going to discuss 3 ways to improve your checkout regardless if it’s a multi-page or single-page checkout. And I’m not basing my recommendations on a few sites, I’m recommending them based on a 100 sites. And not just any 100 sites, but the Internet Retailer 2009 Hot 100 Retail Websites. (Update: I see I’m a few days behind. IR just released their Hot 100 for 2010. How untimely. Back into checkout research I go.)

I reason, it’s the holiday season, so every one of these checkouts should be perfect for their website, for their audience etc. Alas, there were many fundamental flaws that if fixed would surely increase conversion. So I’m going to highlight some of these mistakes, so that we can learn from them. (And to give a little poke to the big dogs that if they want to stay as a Hot 100 Retailer, they better recheck their checkouts.)

But onto the 1, 2, 3 recommendations:

1. Less is more. Okay so I lied. When I said what really matters during a checkout is not the number of pages, I should have put an asterisks next to it. For multi-page checkouts the number of pages does matter. Of 92 retailers (I had errors/problems with 8 retailers):

  • 11 used a single page
  • 12 used two page
  • 26 used three pages
  • 24 used four pages
  • 14 used five pages
  • 4 used six pages
  • 1 used seven pages

(FYI: I did not include shopping carts or confirmation/receipt pages in my tally, but I did include log-in pages or account creation pages, as well as summary/review pages.) Predominantly, these eTailers are using three or four pages for their checkout. My main concern is that 19 (21%) are using five or more pages! Usually these pages are excessive, for example:

A gift certificate or coupon code entry does not warrant its own page. Equally annoying, if I checked the “Ship to billing address” box, please don’t take me to a shipping address page. The point of the box is to bypass getting slowed down by shipping information. You’re thinking, what if people want to review it? That’s what a review page is for.

For people who have cut the excess from their checkout and still wonder if there’s more they can do, consider this. Many sites I saw were combing the account log-in page with the billing address page (see below.) And other sites are combining their review and payment pages.

The biggest argument for single page checkout is that it gives the illusion of being faster. But you can create this illusion within a multi-page checkout through good design and planning. What fields are really necessary? And how are those fields going to be styled? Below are three examples of gathering shipping information. Which one would you prefer to fill out and shop from?

I know I would want to buy from the middle one, because it’s streamlined (no excess fields) and visually comfortable—not too small or large, well aligned.

2. Distractions. The goal of the checkout is for the customer to complete their purchase. Remove all shopping navigation and call outs. 42 (46%) retailers kept their primary site navigation or included unnecessary callouts (newsletter, social media) on their checkout pages. Don’t give people lots of ways to exit. Exit comes with a purchase. Here’s an example of a checkout that’s way too busy:

In real life, a store fills the checkout area/aisle with lots of small, impulse buys. Usually, we ignore them all and make our purchase. Thus, it seems okay to include small callouts during the checkout process, but it's not okay. Consider how children behave when they're in a checkout lane. They grab every candy in reach, and their parents have to tell them to stop and put it back. People have to learn how to not be distracted. And online shoppers aren’t conditioned yet to ignore all the distractions. Similar to a child who can’t afford the candy (i.e. no sale), the online shopper will leave the checkout via a callout, only to wander off and not return at all. The up sell/callout backfires and the sale is lost.

3. Assurances! Maybe the Hot 100 Retailers think they can get by on name recognition alone because 31 (34%) of them had no security assurances, or minimal assurances (one page only), or assurances obscured by callouts or far removed from the checkout. Security assurances are important because they make the customer more comfortable with entering private information and make your online store appear more credible. As a tech savvy person, I automatically think twice about a store not showing a security badge. Why wait to show the badge until the payment page? Assure me the whole way through. And for the non-tech savvy person, they’re skeptical to begin with about putting their credit information online. By leaving out security assurances, you put in place doubts about the purchase and company, and that can only lead to a decrease in sales.

In conclusion:
I know these are pretty basic, but as you can see from the numbers above, they are easily overlooked or forgotten. I don’t want to be completely disparaging to the Hot 100 Retailers, so here are a few that I thought made the grade both visually and functionally (no, they’re not perfect either):

Mentioned in this post:
Hot 100 Retail Web Sites
: Internet Retailer
Gifts & Promotions Page : Fat Brain Toys
Log-In/Billing Page : King Arthur Flour
Shipping Page : Estee Lauder
Shipping Page : Design By Humans
Shipping Page : CVS
Shipping Page : Doctors Foster and Smith
Plus see list of links directly above

Design 1, 2, 3 is a monthly review to improve a design element in at least three easy steps. Want something given the 1, 2, 3 treatment? Mention it in the comments.

Get in Touch