Six Best Practices for Online Checkout

A seamless online checkout process can act as a powerful driver of increased sales and profit margins. Not surprisingly, most of our clients in the retail space understand this and come to us regularly to get user feedback on their sites’ checkout process. Listed below are six best practices to address some of the issues that routinely surface during user testing of the online checkout process:

  • 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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s