Fundamental Guidelines Of E-Commerce Checkout DesignURL:http://uxdesign.smashingmagazine.com/2011/04/06/fundamental-guidelines-of-e-commerce-checkout-design/

Here is the harsh reality of e-commerce websites: according to recent e-commerce studies, atleast 59.8% of potential customers abandon their shopping cart (MarketingSherpa puts it at59.8%, SeeWhy at 83% and MarketLive at 62.14%). The main question is why docustomers abandon their shopping cart so often? Is there some fundamental mistakethat designers of e-commerce websites do very often? Are there any common guidelines orrules of thumbs that make it more difficult for our users to purchase products? And is theresome meaningful way to improve the conversion rates for our products?

Well, that’s exactly what we wanted to find out. In 2010, we recruited a batch of Web usersand conducted a usability study, focusing only on the checkout user experience, from “Cart” to“Completed order.” The study was conducted using the “think aloud” protocol and wasdocumented by recording everything that happened on the computer screen. The behavior ofthe test subjects was then analyzed by scrutinizing these recordings at a later date.

The study has shown that it is often difficult to lead customers to the final step in thecheckout process when the only thing left is to submit their credit card details.

The 15 e-commerce websites that we tested were: 1-800-Flowers, AllPosters, AmericanApparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com,PetSmart, Thomann, Walmart and Zappos.

In total, the test subjects were given more than 500 usability issues, ranging from beingdistracted by animated graphics to being thrown off course by an illogical checkout flow. Theseissues were then analyzed and distilled into 63 checkout usability guidelines in a report titled“E-Commerce Checkout Usability.” In this article, we’ll share 11 fundamental guidelinesfrom that report with you.

1. Your Checkout Process Should Be CompletelyLinear

Issue: Having steps within steps confuses and intimidates customers as it breaks with theirmental model of a linear checkout.

One of the worst usability violations that we discovered in our testing was non-linear checkoutprocesses. Websites with a non-linear checkout process left several of our test subjectsconfused and intimidated. At the time of testing, both Walmart and Zappos had a non-linearcheckout process.

The typical way to “accidentally” end up with a non-linear checkout process is to create stepswithin steps. This happens, for example, when the customer has to set a “Preferredshipping address” (Walmart’s violation) or “Create an account” (Zappos’ violation) on aseparate page, and is then redirected to a previous checkout step upon completion.

Below, you can see Walmart’s checkout flow in thumbnails (click image for larger view). Noticethat it’s non-linear because the “Preferred shipping address” sub-step directs the user to aprevious step:

Walmart’s non-linear process. Large view.

Luckily, making the process completely linear is easy. In this case, a sub-step such as“Account creation” should never redirect to a previous step in the checkout process, butinstead direct the customer to the next step in the checkout process.

This is critical because the mental model of most customers dictates that a checkout processshould be linear. Upon seeing the same page twice, most customers would conclude that thewebsite has an error, because this is what happens with validation errors.

As one test subject said, “This looks suspiciously like the page I was on before. Is theresomething I didn’t do correctly?”

2. Add Descriptions To Form Field Labels

Issue: Without descriptions, many form field labels can be ambiguous.

“What does this “Address line 2” mean?” a test subject mumbled. Other test subjects wereconfused by “Billing address.”

The vast majority of test subjects had problems understanding certain labels. They varied inwhich labels they had trouble with. The problem was critical in a few cases, and one subjectgave up a purchase because she couldn’t understand the label for a required field, making itimpossible for her to complete the checkout process. Therefore, always provide clear

instructions for each field.

One form that caused confusion belongs to HobbyTron, where test subjects had to guess what“First” refers to:

On Apple’s website, the majority of test subjects started typing their zip code in the fieldlabeled “Area code”:

When you have form field labels without any explanation, some of your customers will likelybe confused about what information is being asked of them. Alleviate this by adding shortdescriptions and examples next to labels. Because not all customers need the extra help,you may want to hide these instructions behind a “What’s this?” link, or perhaps slightly fadeits color or reduce the font size.

Below are examples of how descriptions below form field labels can help customersunderstands what inputs are required of them:

Even unambiguous fields, such as “Email address,” are great opportunities to explain whatyou’ll use the data for. “Email address” may be a sufficient description, but most people wouldwant to know how you’ll use their email address. Why do you need it?

Finally, for fields that users have to fill in by referring to a paper or card, illustrations canenhance the descriptions a lot (for example, an image of an expiration date from a credit card).

3. Avoid Contextual Words Like “Continue”

Issue: Contextual words such as “Continue” are ambiguous and tend to confuse customers.

Depending on the customer’s state of mind, a button labelled “Continue” in a shopping cartcould mean one of two things:

1. Continue shoppingSay, if the customer is also looking for a shirt to go with those jeans.

2. Continue to checkoutIf the customer has all the products they need and just wants to pay.

Another example is “Back.” Back to the last page? Back to the search results? Where? Andhow about “Proceed”? These are all contextual words that change in meaning dependingon the context (i.e. the page) and the customer’s state of mind.

HobbyTron was one of the websites on which multiple test subjects clicked on the “Continue”button thinking they would continue to the checkout section:

Hobbytron’s Continue button. Large view.

After clicking a wrong button, one test subject said:

It was confusing because I thought, “I want to continue.” I didn’t think about continuingshopping, but rather I was continuing to checkout.

This is a good example of how contextual words, being open to interpretation, can confusecustomers. Roughly half of the test subjects at least once clicked a wrong button because ofcontextual words.

Instead, use words that aren’t open to interpretation, such as “Check out now” and “Shopmore.”

4. Visually Reinforce All Sensitive Fields On ThePayment Page

Issue: Customers might hesitate if credit card fields don’t appear secure (regardless of actualsecurity).

Many test subjects didn’t think about security until they had to enter their credit card details.In fact, several test subjects talked about certain parts of the checkout page in terms of being“secure” and “insecure” (typically related to credit card details).

Parts of the page with security icons, badges or text and a general “robustness” wereperceived as being more secure, while parts without these visual cues inspired lessconfidence, despite the fact that these fields were all part of the same form on the same page.Technically, there was no difference in security. However, most customers don’t understandthe technical workings of forms. All they know about your website is what their gut feelingtells them.

There is a clear divergence between the customer’s mental model of form-field security andthe actual security.

As one test subject who had just abandoned their purchase said, “It didn’t look safe enough.”Her reaction wasn’t based on the technical security of the website, but rather on the perceivedsecurity of the fields.

Below is a quick mock-up I made to illustrate how you can visually secure your credit cardform fields (version B). Notice the background color, padlock image and placement of theGeoTrust seal:

Mock-up of a visual reinforcement. Large view.

By adding visual cues (such as borders, background color, and security icons and badges)around the form fields for credit cards, you can increase their perceived security for non-technical customers.

5. Don’t Use An “Apply” Button In Your Form

Issue: Customers don’t understand “Apply” buttons for distinct sections of a form.

More than half of test subjects were confused by websites with an “Apply” button somewherein the form; for example, to apply a shipping method to an order.

In almost every case, these buttons were either:

1. Not clicked, even if the relevant input field was filled out;2. Mistaken for the main form submission button.

Test subjects simply didn’t understand the purpose of having a separate “Apply” button in aform.

Below is Newegg’s checkout, where only half of test subjects who filled in their zip code alsoclicked the “Go” button (problem 1 from above):

NewEgg’s Apply button. Large view.

The consequence of mistaking “Apply” for the main form submission button is thatcustomers will be redirected back to the same page in order to apply the change, thwartingtheir expectation of moving to the next step and likely leading them to think that there’s anerror on the page (as we saw in guideline #1). This happened to two test subjects, who wereleft to guess what the error was because no error message was displayed (since a technicalerror never actually occurred on the page).

Below is a form for American Apparel, where test subjects mistook the “Apply” button forthe main form submission button (problem 2) and consequently couldn’t proceed with thepurchase.

American Apparel’s Apply button. Large view.

If you really need to update a value before moving on to the next step, then auto-update thevalue using AJAX or the like, without showing an “Apply” button.

6. Format Field For Expiration Date Exactly As ItAppears On Credit Card

Issue: Fields for credit card expiration dates can be tricky to decipher if they aren’t writtenexactly as they are on the credit card.

Some websites use month names, while other websites use a combination of month names andnumbers, while still others just use numbers. Which is best? The correct way to format a fieldfor an expiration date is to match what the customer sees on their credit card (i.e. numbersonly). This minimizes confusion and misreading because the user can easily verify the fieldagainst their credit card.

Below are four examples of how not to format the fields for expiration date. Example D,with the month written as text and the year in four digits, is the worst.

The correct way to format the month field is to use numbers and to prefix all single-digitnumbers (i.e. 1 to 9) with a 0, so that they appear exactly as they do on credit cards (forexample, 03 for March).

The correct way to format the year field is to use just two digits, to match the number on thecredit card (for example, 14 for 2014).

Our test subjects didn’t have any difficulties when month names were included, as long asthey came after the digits. So, “03 – March” is okay, but “March – 03” is not. Whatever is onthe credit card should appear at the beginning of each option.

You could put a forward slash (/) between the month and year fields to further match creditcards (so, 03 / 14 for March 2014).

7. Use Only One Column For Form Fields

Issue: Customers have an amazingly difficult time understanding the relationships betweenform fields in two columns.

Half of the test subjects had problems when form fields were in two columns. There weretwo typical scenarios:

1. One of the two columns of form fields was missed. It was either dismissed as unrelatedor simply overlooked by test subjects.

2. Unrelated form fields were filled in and/or submitted, often causing validation errors.

Below is Perfume’s form for signing into and creating an account:

Perfume.com’s shipping form. Large view.

This form was interpreted in three ways:

1. All form fields should be completed in order to create an account.2. The “Email address” field and the fields in the right column should be completed to use

“Guest checkout.”3. Either the left or right column should be filled out.

Another example is PetSmart. There, the most common behavior was to overlook thesecond column, with the “Credit card identification number,” resulting in an error message:

PetSmart.com’s payment form. Large view.

On two occasions, test subjects abandoned their purchase because they kept submitting thewrong data in the wrong column.

Our suggestion is to use a single column. None of our test subjects showed any difficulty withthis.

8. Use Shipping Address As Billing Address ByDefault

Issue: Most customers order products to their home, so requiring both a billing and shippingaddress doesn’t make sense.

Customers typically order products to their home address. So, by default, you should use thesame address for shipping and billing, unless you happen to record data differently for yourstore.

By defaulting the billing address to the shipping address, your checkout process will havemany fewer fields, making it less intimidating for customers. Users also reduce the risk of

many fewer fields, making it less intimidating for customers. Users also reduce the risk ofmisspelling their address if they have to enter it only once; they won’t rush through the formas quickly, and if there are errors, the customer will have to fix them only once.

NewEgg’s checkout. Large view.

Moreover, you should hide the billing address fields entirely. Disabling the fields isn’t goodenough. On the one website that did this, most test subjects were confused by why the fieldswere grayed out, with some users clicking on them. Instead, show only the fields for the billingaddress, unless the customer explicitly asks to use separate shipping and billing addresses.

Some websites have a “Copy shipping address” button. The problem with this is that it alsocopies any errors, so the customer has to correct the same information twice. While thecustomer could just click the “Copy shipping address” button once they’ve corrected the error,all of the test subjects in this situation forgot to do so.

Apple’s copy shipping address feature. Large view.

Also, depending on the website’s layout, such a feature could be easily overlooked. On Apple’swebsite, half of test subjects overlooked the “Copy shipping address” link and ended up typingin the same address again.

A check box (or something similar) is better for this purpose because errors will have to becorrected only once. Amnesty International’s checkout page is a good example of how to dothis right:

Amnesty International’s checkout. Large view.

9. Use Clear Error Indications

Issue: Customers overlook error messages, making them less likely to resolve the errors.

More than half our test subjects had serious problems finding or understanding errormessages on the websites we tested.

When a customer has problems with a form, the likelihood that they abandon the purchaseincreases significantly. When a customer fails more than once, they will be inclined to leave thewebsite altogether (whether because they assume they were blocked or the website has a bugor something else).

Below are four examples of a lack of a clear indication of error.

On American Apparel’s website, the yellow bar at the top is actually an error message,saying that the data in the phone field at the bottom isn’t valid:

On Walmart’s website, the two red arrows (next to “Ship to home” and “Site-to-store”) areactually error indicators:

On PetSmart’s website, the red of “State/Province” is not an error indicator, but rather justthe style chosen for this particular label:

On Perfume.com’s website, the red does indicate an error in the “Phone” field:

Unless placed in close proximity to the relevant fields, error messages were likely to beoverlooked by our test subjects. Many websites present error messages only at the top ofthe page, not next to the form fields.

Without this proximity, error messages can be difficult to understand. Some test subjects,seeing nothing wrong with the fields, tried to submit the form again, assuming the page didn’tload properly the first time. This, of course, resulted in the same page being shown again withthe same error message.

If a customer doesn’t notice or understand your error message, they will not be able to resolvethe error or proceed through the checkout process. In such cases, abandonment is inevitable.So, put time and effort into designing and wording your error messages.

Make sure your error messages:

Are contextualized (that is, not at the top of the page but in close proximity to therelevant fields);Are clear and concise;Stand out so people notice them (provide high contrast and maybe even use arrows orother visual indicators).

10. Registration Should Be Optional

Issue: Customers strongly resent having to sign up for an account.

Customers dislike having to register for yet another account. This quickly became evidentduring our testing as every single subject showed great frustration when forced to do it. 30%of them ended up abandoning one of their purchases as a result.

There are many reasons for this resentment.

For one, customers already have a myriad of user names and passwords to remember anddon’t want to create an entirely new account just to buy one or two products from an onlinestore.

Another reason is that 40% of test subjects expected to be spammed with marketing material,even if they explicitly declined to sign up for a newsletter during the checkout process. Thesecustomers have a mental model in which Account = Newsletter. Or, as one subjectdescribed it: “If I create an account, they can send me spam from now on and forever.” Theirprior experience on websites that check the newsletter box by default and obscure it likely ledthem to this conclusion.

Also, customers likely realize that you’re storing their information indefinitely. While mostcompanies keep a customer’s information in their database regardless of whether theyregistered an account, most customers don’t think of this. It’s about perception, and somecustomers just don’t like the idea of a website storing their personal information.

Signing up for an account also takes time. It adds more steps and fields to the process—andcomplexity. Yet another reason to dislike it.

Finally, many customers just don’t understand why they need an account to buy a product. Asone subject clearly put it, “I don’t need to sign up for anything when I’m buying a perfume in aregular [brick and mortar] store.”

Most test subjects didn’t mind having the option to create an account, but they found itillogical and annoying to be required to do so. Some said they would voluntarily create anaccount if they regularly bought from the website.

If you’re looking for an unobtrusive way to get customers to sign up for an account, then

If you’re looking for an unobtrusive way to get customers to sign up for an account, then

consider simply asking them after they have completed their purchase. “Would you like anaccount? Just enter a password in the field below.” You can set their email address as theiruser name and fill in the account information with their order details. This way, the customerisn’t forced to create an account but has an easy way to do so after completing their purchase.(Remember to explain the benefits of having an account.)

11. Don’t Require Seemingly UnnecessaryInformation

Issue: Customers feel that their privacy is being invaded when they are required to submitseemingly unnecessary personal information.

Refusing to give up their phone number, one test subject anxiously clamored, “Look, why dothey need my phone number? What do they need that for? They don’t need it!” Every testsubject at one point or another complained about a website that asked for too much personalinformation.

Being asked for a phone number when the website already had an email address wasespecially irritating when subjects were trying to make a purchase. The logic goes, if the storealready has one way to contact them, why does it need another?

Apple’s checkout process.

If the information is necessary, at least explain why. What is obvious to you may not beobvious to the customer. They have learned to expect the worst when shopping online(usually spam email and phone calls).

Our test subjects were surprisingly forgiving, as long as the website explained why theinformation was needed. Here’s a tip: don’t hide it behind a link; state it directly in the field’sdescription. In fact, the test subject we quoted above provided their phone number to anotherwebsite without any complaints because the store clearly explained that the phone numberwas needed so that it could contact the customer in case of delivery problems.

The more expensive the order, the more accommodating the customer will be. When buying alaptop, customers want you to be able to contact them. But this holds true only if you requirethe information in order to complete the purchase. On websites where the field was optional,our subjects weren’t comfortable giving their phone number and simply left the field blank.However, this means that required and optional fields must be clearly distinguished.

However, this means that required and optional fields must be clearly distinguished.

Designing A Better Checkout Experience

While there are many more subtleties to designing a good checkout experience, these 11guidelines go a long way. If you adhere to them, your checkout process will perform well aboveaverage.

In a study that he conducted 10 years ago, usability guru Jakob Nielsen concluded that largee-commerce websites violated many basic checkout usability guidelines. It seems little haschanged when you look at websites like AllPosters and Walmart.

While a lot of the big websites boast impressive features such as geo-targeting, addressvalidation and state look-up, they don’t manage to get basic usability principles right, andthey suffer greatly as a consequence.

With the latest improvements in Web technology and browsers, the potential to create anamazing user experience has increased dramatically. Yet, advanced features shouldn’t be thefocus until basic usability guidelines are met. If we add the latest technology just because it’snew and exciting, then today’s abandonment rate of 59.8% is unlikely to decrease.

Things like meaningful flow (see guideline 1), good copywriting (2, 3), simple form design (4, 5,6, 7, 8, 9), and privacy considerations (10 and 11) go a long way to creating a great checkoutexperience.

Do yourself and your customers a favor by following these 11 guidelines. Once you’ve coveredthe basics, you can venture into more advanced territory.

You can find further checkout usability guidelines in our report titled E-Commerce CheckoutUsability (not free).

Further Resources

You may be interested in the following related resources:

MarketingSherpa, SeeWhy, MarketLiveThe three different sources that document the 59.8% cart abandonment rate.10 E-Commerce Checkout StrategiesKey strategies for making the checkout process easy for even inexperienced shoppers.E-Commerce Checkout Page Design: Learn From Amazon.comA walkthrough of an effective e-commerce checkout page.Happy Customers Through an Improved CheckoutA collection of details to keep in mind when working on checkout forms.

A collection of details to keep in mind when working on checkout forms.

One-Page Checkouts for E-Commerce SitesAdvantages of a one-page checkout, and how it boosts conversion rates.

(al)

Christian Holst

Christian Holst is the co-author of the research report E-Commerce Checkout Usability, aswell as founder of Baymard Institute, where he write weekly articles about web usability andconversion rate optimization.