Ineffective checkouts are the single greatest cause of e-shopping failures, costing the industry an estimated US$6.5 billion in lost sales. But there are easy fixes.

This article is an excerpt from Creative Good's Holiday 2000 E-commerce report. Download the full report for free.

How would you react if you walked into a store, found something you wanted to buy and brought it to the cash register -- but the store would not let you pay? You'd probably get frustrated and walk out, never to return to that store.

That's essentially what's happening online -- and at a tremendous cost to e-tailers. In Creative Good tests of several well-known e-commerce sites, checkout was responsible for failure to complete an online order over 40 percent of the time.

This is a huge failure rate for one feature -- consistently poor performance across multiple sites in multiple categories. If every site made simple improvements only to the checkout process, the worldwide e-commerce industry could gain over US$6.5 billion, including US$3 billion in North America.

While customers in our tests encountered other difficulties on the sites we tested, problems with checkout were the greatest cause of failure in the buying attempts we saw. Many times during the tests, we saw customers successfully find a product, decide to buy it and successfully add it to their cart -- all in vain. Checkout was too difficult to complete. Frustrated, many customers gave up and left the site.

Failures during checkout were due to three main causes:

• confusion over "Return" and "New" customer paths

• difficulty creating an account

• ineffective error messages

In all these cases, sites failed to make it clear what customers needed to do and how they could advance in the checkout process. Shoppers failed to buy because the customer experience was too difficult.

Read on for examples and simple solutions to the problems we saw.

Problem: 'Return' vs. 'new' customer paths

Several of the sites we tested offered separate checkout paths for new and return customers. Sites offer separate paths to make checkout easier for return shoppers (so that on the second visit, for example, return shoppers don't have to type in all of their information again).

The problem is that separate checkout paths tend to confuse customers. In our tests, many new customers mistakenly selected the checkout path for return customers.

That was the case on BestBuy.com's first checkout page. Most customers ignored all the text instructions and immediately entered their email address in the field under the "Registered Customers" header, possibly because (scanning the page from left to right) it was the first field customers noticed. Some were then confused as to what password BestBuy wanted, and several entered the password they use to check email. The BestBuy site then displayed an error message that only added to their confusion.

Gap.com also offers two options at the start of checkout. New customers were drawn to the empty email and password fields and filled them out, even though the text directly above reads "I am a registered user." Customers then got an error message because, of course, there was no Gap.com account with that email and password. (Some readers might notice that the "new user" radio button is selected; on Gap.com,the filled-out fields overrode that setting and the server considered the customer a registered user.)

Online shoppers rarely read instructional text; instead, they look for an action to take that will bring them closer to their goal. In this case, shoppers saw the empty fields and acted on them. In general, we found that two checkout paths were problematic when both paths were prominently displayed to the customer.

Solutions from B&N and Amazon

Some sites, however, were able to offer separate checkout paths without confusing shoppers. The Web sites of both Barnes&Noble and Amazon effectively served both new and return customers by making only the new customer path prominent.

On Barnes&Noble, no new shopper clicked on the "sign in" link for return customers. Notice that the "Checkout Now" button, which is the beginning of the new customer checkout path, is much more prominent.

Barnes&Noble made the right decision by making the new customer checkout path more prominent than that of return customers. (This particularly makes sense for return customers, since by definition, they are more familiar with the site and more likely to see a less prominent link.)

In our tests, every shopper successfully checked out at Amazon. As with other sites we tested, customers filled in their email address right away. But in this case, filling in the empty field was the correct way to begin checkout. The Amazon form is successful for several reasons:

• The email address field is first, motivating customers to (correctly) begin filling out the form.

• The radio buttons, to choose between new and returning customers, appear between the email and password forms, distracting customers to read the radio button text before immediately filling out the next field.

• The radio buttons' text is well-worded. They mention "new customer" and "returning customer," much clearer than Gap's "new or unregistered user" and "registered user" fields.

• The "new customer" option states clearly that "You'll create a password later," helping new customers avoid mistakenly typing their email password into the password field.

• The password field is clearly described as being only for the "returning customer."

• The checkout form changes slightly for a return customer.

Amazon uses "cookies" to recognise its return customers and present them with a slightly modified checkout page.

For return customers, Amazon has already filled in the first field with the email address, and the radio button defaults to the "returning customer" option. All the return customer has to do is complete the only empty field -- the password -- and click "Sign in" to continue.

While Amazon does many things right with the beginning of its checkout, the most important takeaway is that the page is designed primarily to help new customers get through the page correctly. Of secondary importance is that return customers are served by the clever cookie-based change.

Problem: Creating an account

Several sites confused customers by making parts of their sign-in or registration process too prominent to new customers. For example, some sites required customers to register before they could make a purchase. The registration process prevented many customers from buying the products they had added to the shopping cart.

In Gap.com's case, the site confused customers by reminding them that they had not yet signed in to their account. The Gap.com home page contains this text at the top of the page: "You are not signed in".

Several shoppers noticed this text because it loaded first. Because the rest of the page, consisting mostly of graphics, loaded slowly over the dialup modem, "You are not signed in" appeared by itself for several seconds while the other page elements loaded.

While no customers actually left the Gap.com site because of the text, it certainly didn't enhance the customer experience, as shown in these comments:

• One shopper on Gap.com said the message "means I can't get access to the site."

• Another commented that when the message "pops up, I think the page isn't going to show up."

Another problem occurs on Buy.com's home page, which urges customers to "create an account to get started"

Buy.com seems more concerned with pushing registration than with showing customers products. Why would a shopper sign up before knowing what the site offers? As on Gap.com, it's not a good idea to distract new customers with prominent reminders about accounts and signing in.

A much worse problem on Buy.com occurs when a new customer finishes adding products to the shopping cart and clicks "Check Out": the site immediately requires new customers to create an account before they can proceed. New customers, credit card in hand, hardly want to "create an account" just for the privilege of giving the site their money. They want to proceed in the checkout process.

To make matters even worse, Buy.com's first Create My Account page includes "Account Type," a required field: Buy.com should remove the Account Type field, since there is no benefit to customers by completing the field. And there is no benefit to Buy.com, either; if customers get confused by the field or otherwise leave Account Type incomplete, the Buy.com Web site prevents them from going any further in the checkout process. (At this point on Buy.com, one exacerbated shopper said, "Where do you just buy it?")

Barnes&Noble also includes in its checkout process a required field that shouldn't be there. The checkout page asks customers, "For future reference, please name this address". Unlike the Buy.com Account Type field, the "name this address" field could be helpful to shoppers on a return visit to bn.com. But like the Account Type field, there's no reason for it to be a required field. Again, any customer who is confused by the field and leaves it empty is prevented from going further in the checkout process.

In tests, the idea of naming an address was unclear to customers, despite Barnes&Noble's example ("e.g. Home"). One customer asked, "Please name this address? What does that mean?" BestBuy.com confused several customers by asking them to create a password hint. This was not a required field, but it did confuse customers with its lengthy instructions.

Here's how the process is supposed to work:

• Customers select a personal question to be asked in case they forget their password, and tell BestBuy the answer to the question.

• The answer to that question should be something other than their BestBuy password.

• If a return customer clicks "Forgot your password? Get help here", the site will ask him his personal question. A correct answer will permit the customer to log on.

Some customers simply did not understand what BestBuy was asking of them. One said, "I am thinking maybe they mean to put in a fake password."

Solution: 'Passive registration'

The problems above show that new customers can get confused if certain parts of the registration process are too prominent during checkout. Amazon.com avoids this problem by "registering" new customers automatically when they make their first purchase. Amazon quietly creates the account during the regular checkout, without explicitly asking customers to create an account. We call this process "passive registration."

For new customers, Amazon's first-time checkout process involves the following steps:

• Enter an email address

• Enter a shipping address

• Choose a shipping method

• Choose a password

• Enter a credit card number

• Confirm a billing address

• Review order and submit

The Amazon checkout process is successful for several reasons:

• Nowhere in the Amazon checkout process are new customers required to "create an account," choose an "account type," or even asked to choose a "personal question."

• The process is front-loaded with steps that make sense: entering an email address (as discussed above) and the shipping address and method.

• Only in the fourth step are new customers asked to choose a password. By that time customers are halfway through with the checkout process and less likely to abandon the site.

Overall, Amazon gives customers the benefit of an account -- an easier checkout process on the return visit -- without subjecting customers to unnecessary obstacles in creating the account. This focus on the customer experience makes Amazon's checkout a success.

Problem: Checkout error messages

Some customers will inevitably make mistakes entering information no matter how easy checkout is. In these cases, it's important to have clear, simple and polite error messages to help customers proceed.

In our tests, we observed how customers reacted to several different error messages in checkout. The quality of the error message often meant the difference between a successful purchase and a failed attempt.

Barnes&Noble customers see this error message if they fail to complete the "name this address" field. The error message, which reads "Please name this address for future reference," appears on the top of the page, far away from the field it refers to. The "name this address" field is halfway down the page with no indication to the customer that it needs to be filled in. Unsurprisingly, customers did not find this error message very helpful.

Problems with email address entry
Many shoppers, especially AOL users, had difficulty entering their email address when creating an account during checkout. Some entered a username (e.g.JohnDoe) but no domain name. Others entered only part of the domain name (JohnDoe@aol) and were unable to buy because they did not understand to enter their full email address (JohnDoe@aol.com).

On the sites we tested, error messages did not always help customers with email problems. For example, Buy.com shows this page if a shopper's email address is invalid.

Buy.com's error message reads, "Please provide a valid email address." It tells customers they've made a mistake but does not show them how to fix it. Customers may try again, only to be baffled when their address is repeatedly rejected. Buy.com should include an example of a complete, valid email address to help customers through checkout. Throughout all our tests, over 10 percennt of customers were never able to correctly enter their email address on the site they were on, despite repeated tries.

Note what happens if a new BestBuy customer chooses the return customer checkout path. BestBuy's error message reads, "The email address and password you entered do not match" -- suggesting that the shopper entered the email or password incorrectly. The real problem, however, is that as a new customer, the customer has no password at all on the system and should have taken the new customer checkout path instead.

Solution: Clear, simple, polite error messages

eToys, by contrast, helps customers succeed with its clear and prominent checkout error messages. For example, in this screen, eToys asks customers to "Please enter the credit card's month of expiration."

eToys' error message succeeds for three reasons:

• The error message is written politely: "Oops! Before we can go on, please see if you can fix this..."

• It's displayed clearly: The message is displayed in bright red text, beside a large graphic, to indicate that an error occurred (clearly displayed).

• It's worded simply: The message clearly explains how to fix the error and continue to make a purchase (worded simply).

eToys could improve the message further by moving the credit card number field closer to the error message, making it even easier for customers to correct the mistake and proceed in checkout.

KBKids also displays its checkout error messages clearly, helping customers see where they need to make a correction.

KBKids places blinking red triangles next to the fields that customers need to fill in. While this practice would be annoying on practically any other page on the site, it's helpful in checkout, since it's then especially easy for customers to see where to fix the problem and move on.

Amazon's error messages go a step further to explain its checkout process. When customers leave a required field blank, Amazon explains says why the information is necessary. Doing so helps shoppers through the checkout process, and in this case -- explaining the need for a phone number -- reflects sensitivity to customers' privacy concerns.

Testing methodology

Creative Good conducted more than 50 consumer tests to generate the data for this report. The tests were conducted at an independent testing facility in a suburb outside New York City. We conducted the first round of tests in August 2000.

We tested eight major e-commerce sites in four categories important to holiday shoppers:

• Apparel: Gap.com, LandsEnd.com (not mentioned in our checkout discussion)

• Books and Music: Amazon.com, bn.com (Barnes&Noble)

• Electronics: BestBuy.com,Buy.com

• Toys: eToys.com,KBKids.com

The consumers recruited for testing were representative of customers who will shop online this holiday season. The consumers we tested met the following criteria:

• All had used the Internet for at least 6 months.

• All had successfully made an online purchase in the past.

• All had either bought gifts online last holiday season or were seriously considering buying gifts online for this year's holidays.

• None were Web developers, Web designers or Internet professionals.

• None worked for any of the companies whose sites we tested.

To simulate the actual shopping experience, we conducted three-quarters of the tests on dial-up connections and one-quarter of the tests on an ISDN line. We tested on PCs running Microsoft Windows and the Internet Explorer Web browser.

About 'listening labs'
The Holiday 2000 tests employed Creative Good's "listening lab" methodology. Though based primarily on traditional usability tests, listening labs are less task- oriented and more open-ended than usability tests. In particular, listening labs are one-on-one sessions in which the customer -- not the moderator -- sets the context. The labs are non-directed in an attempt to recreate the environment at home or work, where customers actually use the site -- and where there are no pre-defined tasks or scripted moderators sitting beside them.

Listening labs overcome some key shortcomings of usability and focus groups:

• Listening labs are non-task-oriented, since pre-defined tasks tend to neglect what each individual customer wants to do on the site, and often miss larger strategic findings. In our Holiday 2000 listening labs, we merely asked customers to use the site to shop for a holiday gift for someone on their gift-buying list.

• Listening labs rely less on quantitative measurement than some usability tests. For example, we did not use "eye-tracking" or any other detailed measurement during the tests. We did, however, quantify the most important metrics: how often, and where, customers succeeded and failed on the sites.

• Focus groups, in which a scripted moderator asks questions to a group of customers sitting in the testing room, measure what customers say they like. Listening labs observe what customers do, not what they say they do.

• Traditional usability and focus groups are controlled by a moderator, following a script and specifying the user's task. Listening labs are controlled by the customer, following whatever path he or she wants through the site.

For more information on the listening lab methodology, refer to Creative Good's Dotcom Survival Guide (free download).

Timing of screenshots
The screenshots featured in this report were taken in August and September 2000. Because sites are constantly changing, some of the sites may have redesigned since we took the screenshots. In fact, in most cases we hope that the site has redesigned by the time you read the report, so that the site improves the experience for its customers. The screenshots in the report depict what customers saw in our tests.

Copyright © 2009 CBS Interactive, a CBS Company. All Rights Reserved.
ZDNET is a registered service mark of CBS Interactive. ZDNET Logo is a service mark of CBS Interactive.