We provided an article in July 2007 (Volume 19) that offered best practices for online checkout. With the ever-changing landscape of the Internet, we were curious to review our recommendations to see if they had stood the test of time. They had. But with the increased maturity of e-commerce comes increased visitor expectations.
Product photos, up-front shipping costs, and guest checkouts are requirements (more than mere expectations) at this point. So how do you not only keep up, but stay ahead?
Before we delve into some additional Best Practices for 2010 — think safe, swift, and savings — let's revisit the "must-haves" for a satisfying checkout experience.
2007 Best Practices, still as relevant today as they were three years ago
- Include a clickable image of the product(s) being purchased within the shopping cart.
- Once a visitor has entered a shipping address, ensure the total shipping costs and taxes are displayed on the subsequent page along with any additional shipping options. At a minimum, ensure this information is displayed prior to requesting any payment information from the user.
- Allow customers the ability to checkout as a ‘Guest’. Don't force them to sign up/register for an account to make a purchase.
- Provide an easily noticeable step/progress indicator throughout the entire checkout process.
- Where applicable, retain customers’ previously entered information. Additionally, provide customers with a 'Same as shipping' checkbox above their billing information to keep them from having to enter duplicate information, if the two are the same.
- Provide a complete summary of the purchase and costs before requiring customers to submit or place their order.
- Don’t keep your company's contact information hidden and be sure to include a phone number.
- Give a clear indication of what customers can expect after checkout is complete (i.e. order confirmation via email, expected ship date, expected delivery date, etc.)
Additional Best Practices for going forward in 2010
- Allay customers' security fears. Visitors appreciate sites that make an effort to protect their privacy and most will not provide their personal information during checkout unless they are confident their information will be kept secure. Visitors typically look for a familiar security logo/certificate from a company such as VeriSign, and also expect to see a 'lock' icon toward the right of their browser's address field. Additionally, some sites incorporate a 'lock' icon within the buttons that are located throughout the checkout process. Following are a few examples of how online retailers have indicated a secure checkout:
- Vertical wins over horizontal. Whether your checkout steps occur all on one page, accordion style, or over multiple pages, present the text fields in a clean vertical (top to bottom) format, versus a horizontal format. In our labs we observe that users encounter fewer errors and have less difficulty when fields for sections such as personal information, shipping, billing, and payment are presented in a clean, vertical format. This approach allows for easy, top-to-bottom scanning and the ability to quickly tab through the various fields.
- Reassurance is nice. Although all visitors do not typically expect an ongoing review/summary of their order as they go through the steps of checkout, they are pleasantly surprised with sites that do provide a snapshot of their order as they go along. Some sites also display previously entered information and allow customers to directly edit things like the color or quantity of an item, or even personal information, if they notice something that needs to change. This is appreciated by customers, as it prevents them from having to click back to a previous step of the checkout process.
- Flaunt it if you got it! If applicable, display any percentage of savings or deals within the breakdown of the order total as early within the checkout process as possible. Often, visitors have comparison shopped prior to coming to your site, so give them a reason to stick around and complete the purchase by displaying their savings throughout the process.
- Promotional codes first. Display the promotional code field or any other applicable code/coupon fields early within the checkout process and, if applicable, allow customers who do not have promotional codes/coupons to learn how they could obtain them for their current/future purchase(s). This type of proactive feature sends the message that the retailer is working to help the consumer save money, which is always appreciated!
- Help them through it. As with any process involving visitors inputting personal information, ensure your error messaging is direct and easy for visitors to understand. Along with the standard error messaging toward the top of the page, incorporate contextual error messages and highlight the text field where the error has occurred. Also incorporate other visual cues such as arrows, borders, call-out graphics, or messaging beside/surrounding the text field that needs to be corrected. Following are a couple of examples that do a good job of calling out where and which errors have occurred:
There are many more things that can be done to improve user's eCommerce experience, but these best practices are a result of what we commonly observe and hear from users in our usability lab studies. We believe incorporating these best practices will help improve the overall user experience of your checkout process, as it relates to e-commerce.
- Ruth Boyd & Tony Moreno, User Experience Analysts
