Use Progress Indicators for a Standout, Multi-Page Checkout

As you read this, consumers are filling their virtual shopping carts and the industry, as a whole, is on pace to shatter all previous ecommerce records this holiday season. Even so, there are merchants that won't benefit at all from the increased seasonal buying activity. The reason is their checkout process, of course. It's been proven time and again to either influence (negatively or positively) the success of retailers depending on how well it is thought out, monitored and measured.

Website Magazine has written extensively in previous issues on the essential elements of the checkout process - those elements that every e-merchant must address in order to stand out in the hyper-competitive retail landscape. But the checkout process, at each and every online store is unique.

For retailers using multi-page checkout or single-page checkout, there is simply no right or wrong, just what results in a conversion for your online retail enterprise. That being said, if you're using a multi-page checkout, progress indicators can save the day. It seems like such a basic approach - let users know just how many steps remain until their order is completed - but is widely underused. 

Progress Indicators for Multi-Page Checkout
Progress indicators often have a bad reputation. They can be seen as an incentive for users not to complete what they set out to do (e.g. "there are too many steps in the checkout process - forget it!"). In reality, including progress indicators within a multi-step checkout process is important to implement because the mind (that of the consumer) automatically breaks down complex purchase process into smaller, simpler parts for understanding and comprehension. When merchants opt to visually lay out the multi-step process, users are as likely to complete their order as they would be on a single-page checkout.

Another interesting consideration to make is a retailer's audience. In the case of a retailer selling higher-priced items, or items designed for an audience that does not buy online regularly, multi-page checkouts make more sense. The consumer may feel safer in a slower process, where it's possible to double-check their order before completing it. This may also prevent the checkout process from seeming overwhelming. For this audience specifically, this is often the case when they are forced to interact with longer, one-page checkouts. These pages typically require address and billing information immediately for order completion.

Progress Indicator Best Practices
There are several things to keep in mind when developing a progress bar. An Internet retailer should number the steps, provide action visuals, such as arrows to suggest a sense of action is possible, should always highlight the user's current page and should include a "review order" step in the process.

A merchant's responsibility also extends to the form functionality itself, regardless of whether it is a single- or multi-page checkout. Online retailers should make every effort to "carry" information, such as billing address to shipping address fields to reduce repetition by users. They'll also need to remove distractions so the user can focus exclusively on the transaction - although there is something said for introducing a last-minute offer or product suggestion.

Progress Indicator Showcase
There are myriad uses of progress indicators on websites - and it's not necessarily exclusive to retailers. Progress indicators can be used for multi-step forms, product tours, and, of course (and for our purposes here), online ordering. Let's showcase a few progress indicators in action during this holiday 2012 shopping season: 

Amazon.com: Amazon takes a rather minimalist approach to its checkout process. It includes a progress indicator, but deemphasizing it by placing it at the top of the page, nearly out of direct view of the shopper.
 


DrugStore.com: The point of including a progress indicator is so users can see in a near instant where they are in the checkout process. Drugstore.com does this well by using bright colors in its checkout progress indicator.

  

Macys.com: The use of color is an important consideration in relation to progress indicators, but not so important that retailers should sacrifice brand recognition. Macy's does a good job by highlighting the active step by using its familiar red color and greying out the other steps.

LLBean.com: The best progress indicators leave no doubt about the reason for their presence and can quickly indicate to users through a variety of means (e.g. color, highlighting, etc.) where the user is in the checkout process. LLBean does well to present its checkout progress indicator predominantly and forcefully.