3 tips on designing an effective e-commerce checkout

November 27, 2009

Of the many different types of websites, none has received as much scrutiny as e-commerce, a category where ROI can be measured more easily than any other. And in e-commerce sites, the most studied area is the checkout, a multi-step process where users often fall off before completing their purchase. In my own research attempts, I found considerable amounts of information, but little written from a usability design perspective.

In this article, I will highlight three important steps that can be taken to improve the usability and ultimately the success of an online checkout. Many of these suggestions are based on common user experience design heuristics, the most well-known having been produced by Jakob Nielsen. These heuristics are violated both consciously and unconsciously, often by designers or clients who feel that users should be funneled through a checkout to the point that information and paths that would allow a user to postpone a purchase are removed. Unfortunately, this often leads only to frustrated users who will be unwilling to complete a purchase.

Tip #1 – Provide clear direction of paths on the sign-in page

amazon-sign-in lenovo-sign-in
Problematic Example – Amazon.com Good Example – Lenovo.com

When a user makes the decision to check out, they need to see sign-in options. A user may already have an existing account on the site, or they may be completely new. In addition, some new users may wish to create an account on the site, while other users simply want to check out as quickly as possible. A single page is usually necessary to direct these different types of users to the proper path.

Such a page should contain at least 3 elements:

  • Username and password fields and a sign in button for existing users.
  • A button or link for users that wish to create an account.
  • A button or link for users that wish to check out without creating an account (often called Guest Checkout).

Sometimes account creation is tied in as an optional step in the Guest Checkout, but if so, this should be clearly indicated on the page. In addition, many sites support 3rd party payment and checkout options like Paypal or Google Checkout, and these options should be visible on this page as well.

While most e-commerce sites include these elements, the presentation often suffers. One or more options may be overshadowed by another, or widget placement makes it difficult for users to understand what they need to do for each path. For example, the Amazon page uses the same form field and action button for both new and returning users, and uses a radio button to select user type. This blurs the line between the paths available, and leads many users to encounter error messages or begin down the wrong path. In addition, there is no guest checkout.

In contrast, the Lenovo e-commerce site uses the page architecture and design to clearly lay out the path for returning and new users. For new users, both the account sign-up and Guest Checkout are clearly visible.

Tip #2 – Let the users know where they are

zappos-address k-mart-address
Problematic Example – Zappos.com Good Example – Kmart.com

From Jakob Neilson’s 10 heuristics to Keith Instone’s Stress Test, user experience experts agree that it is important for users to be aware of their position in a website. It stands to reason that users should easily be able to access relevant information about their position and step in the checkout process. Designers may balk at including this information, saying that it will clutter the page and overwhelm the users, but good designers can work this information in an effective way. The following should be available on all steps of the checkout, not just the final Review and Confirm:

  • Clearly define the number and name of each step in the checkout process (usually at the top of the page).
  • Show the user where they are in the checkout process.
  • Clearly indicate what the user needs to do to continue by highlighting the Continue button and giving it a label that describes the next step
  • Show the user relevant information from previous steps, such as items in cart, shipping costs, total costs, shipping addresses, etc.

Zappos demonstrates a lack of useful information. The Zappos checkout does not even include a listing of the steps in the checkout process or a clear header that describes the current step. There is no information about the items in the user’s cart. Despite the lack of this important information, the page is very cluttered and text is tiny and difficult to read. Even the Continue button, which should pop-out, is buried under text.

In contrast, the K-Mart site is clean and contains significant amounts of white space, yet also provides relevant information to the user. The graphic at the top of the screen illustrates the steps in the checkout process and uses color to clearly show users where they are in the process. Information about the users order is provided in the right hand column, including a full breakdown of cost. Finally, the Continue button is clearly visible and well-positioned at the bottom of the form, though the labeling should call out the next step, such as “Continue to Shipping Options”.

Tip #3 – Let the user move freely

buycom-address Sonystyle.com checkout
Problematic Example – Buy.com Good Example – Sonystyle.com

Steve Krug, in his slightly dated, yet still excellent web usability book, Don’t Make Me Think, uses an e-commerce checkout as an example of a page where global navigation may not be necessary, though he still recommends a minimal navigation with a home link. Personally, I cringe at the number of e-commerce checkouts that remove most or all navigation options from the checkout pages, forcing the users down a narrow funnel. The problem is that some users may wish to leave the checkout for a variety of reasons but still come back. Perhaps they think of another item they wish to purchase, or want to fill out there cart to reach the minimum purchase threshold for free shipping. Many clients feel that they need to remove anything but the Next Step link in a checkout in order to drive users to complete their shopping. Unfortunately, boxing these types of users in will not push them toward completing their transaction. Instead, these users may become frustrated and abandon the checkout all together. The following should be available throughout the checkout process:

  • Global Navigation. Users have come to rely on it throughout their shopping experience. Taking it away reduces the users control and navigation options, and can raise a flag for the user if the look and feel changes enough to make them feel they have gone to another site for the checkout.
  • Back to cart button. Users that need to alter their cart should have a clear way to do so, in addition to visualizing their cart during every step of the checkout process.
  • Clearly labeled Next Step button. This was mentioned earlier, but it bears repeating. The button should be visible and pop out on the page.
  • Review and Confirm Step with links to each step in the checkout process, including their cart. The user needs to know that they have a last chance to look things over. If their is a problem with their information or cart contents, they should be able to easily change them.

The Buy.com checkout removes the entire global navigation, replacing it with a checkout progress indicator and Buy.com logo. Unfortunately, neither are clickable, leaving the user with “Save and Continue” as her only option. The lack of the global navigation menu also changes the look of the site, though the color scheme and Buy.com logo keep the site from appearing too jarring. In its defense, the Buy.com Review and Confirm page does include links to change a shipping address or go back to their cart, though these links are very small and easy to miss.

In contrast, the Sonystyle.com checkout includes the global navigation throughout the checkout process, adding the checkout navigation as an additional, prominent piece of information. A clearly visible Back to Cart button is also visible on all steps, and the user can easily change her shipping information from the previous step.

###

Conclusion and a few words on one page checkouts

So that concludes my three tips, which boil down to two important web heuristics: give the user sufficient information about where they are and where they can go, and give the user the freedom to move where they wish to.

A final point I wish to touch on is the idea of a one-page checkout. Some sites, such as eforcity.com, will use small points, four columns, and a scrolling page to fit all of a users shipping and billing options on one page. This is problematic for several reasons, not the least being an information overload. Other sites, such as Gap.com, use an AJAX driven interface to expand and collapse different steps in an acordian fashion, retaining a multiple step process without forcing a single page load. While this solution has its merits, it is important to consider the accessibility implications of implementing a checkout that relies so heavily on JavaScript, particularly in light of ADA (Americans with Disabilities Act) lawsuits such as the one that hit Target 3 years ago. In addition, users have become familiar with the three-page checkout, and a new paradigm may confuse some users. That being said, there is clearly a future for checkouts like Gap.com.

Gap.com checkout (AJAX expandable)

Gap.com checkout (AJAX expandable)