When it comes to the Internet, my dear mom is not exactly a whiz. I don’t have enough fingers to count the number of phone calls I’ve received from her with Internet-related questions:

My Mom

• “Phil, I have an article that I want you to read. How can I send it to you?”
• “Phil, you know that little box where I type the Website addresses? It disappeared and I can’t get it back.”
• “Philip, my email isn’t accepting my password. I’ve typed it in at least 5 times and now I’m locked out!” (She always calls me by my full name when she’s frustrated. Turned out she had her CAPS lock on.)

So the other day when she left me a voice mail asking for help, I was ready for just about anything. I got home from work, sat down at my computer, and gave her a call. She was having trouble buying some shoes on a well-known e-commerce site.

Mom: “I went to buy them and I typed in all the shipping information. Then it asked me for my credit card. But I wasn’t sure if I had ordered the right shoes, so I clicked ‘Back’ to make sure. But then it forgot all my information!”
Me: “OK.”
Mom: “So I had to type everything again, except this time I had a typo. I saw the mistake on the last page, and I didn’t see any place where I could fix it. I’d been on the site for an hour and you know how frustrated I get, so I just gave up. Can you help me buy them on another site?”
Me: “Whoa boy.”

My unassuming mother had uncovered fundamental problems with the site’s Checkout process. And while she may sit at the lower end of the Internet savvy spectrum, she represents a significant percentage of the site’s user base. How many other shoppers, like my mom, get frustrated by poor usability and simply leave the site? How many dollars in lost revenue are those usability problems causing?

Amazon.com’s Shopping Cart

After helping my mom buy the shoes (it was thrilling, let me tell you), I decided to look into how other popular e-commerce sites handle Checkout. I was truly surprised by what I found: While there are a handful of sites that do it well (Amazon and Apple to name a few), most Websites possess key usability flaws that serve as barriers to purchase.

Using my own research findings, as well as best practices we have accumulated here at eVOC, I now present a brief guide that summarizes the key attributes of an intuitive Checkout process:

Pre-Checkout

1. Shopping Cart

• This page provides key information upfront. It offers a summary of what users are buying, which includes the name, total price, quantity, and the ability to modify items or remove them from the cart. It allows users to calculate shipping costs and timing based on their location, or provides a link to view estimated shipping info. The page also includes a prominent button or link to return to the store for those users who are not ready to purchase

Checkout

2. Enter Shipping Address

• In this step, users enter their shipping and billing address. Required fields should be clearly marked with asterisks. Guidance should be provided next to any fields which may cause confusion (e.g., Apt #, ‘Must match credit card’, etc.)

3. Select Shipping Method

• The key here is to tell users what each option is, when it will arrive, and how much it will cost

4. Review Order

• This page includes a summary of users’ information, with each step represented visually in its own section (e.g., Product Summary, Total Cost, Shipping / Billing Address, Shipping Method, etc.). A prominent ‘Edit’ link will allow users to modify their details if necessary, before entering their credit card information

5. Enter Payment Information

• The most sensitive area for users in Checkout is the entering of their credit card information. This should happen last, directly underneath the summary of their order so that they can be sure their selections were correctly recorded by the site. Provide clear instructions about the credit card’s security code and let users click ‘Submit’ to officially send in their order

Post-Checkout

6. Confirmation Screen

• This page includes a summary of the order, provides a confirmation number, and informs users that they will receive a confirmation email immediately

While each of these steps does not need to fall on its own page, Checkouts are most effective when they follow the order described above.

Some global tips to consider:

• Include a breadcrumb at the top that helps users identify where they are in the process
• Differentiate the appearance of buttons/links that take users to the next screen
• Allow users to move back and forward in the process without losing the information they have entered
• Use clear messaging that clarifies if users’ cards will be charged before they advance to the next step. If credit card entry is the last step, this is only necessary on the last page

If possible to employ, this additional functionality also helps users:

• Ability to store users’ credit card and address information on the site and make it available for selection or modification on the appropriate screen when users need it
• Contextual tips on the side of each page about shipping, delivery, gift wrapping, etc.

By following these guidelines, any company that does e-commerce can feel more confident that shoppers will see the Checkout process through to the end, and will be satisfied when they leave – even my mom!

This entry was posted on Friday, September 26th, 2008 at 4:29 pm and is filed under Web Usability Best Practices. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.