Knowledgebase: Miva Merchant FAQ
Checkout Progress Bar Best Practices
Posted by Wayne Smith, Last modified by Wayne Smith on 22 November 2011 08:10 AM
Miva Merchant E-commerce Blog
   

 

 

Besides running, the worst part about a race is not being able to see the finish line. It’s the same for checking out on an ecommerce store. Users should feel as though they are making progress, not just filling out endless forms. Unless your shoppers are Bear Grylls (if they are, awesome), they are going to want to know where they are at all times. The easiest way to do it during checkout is using a checkout progress bar. Here are some best practices to follow when designing a checkout progress bar.

 

Start by Showing a Secure Connection

 

A secure connection is a major make-or-break factor when it comes to ecommerce. If a user doesn’t see the lock, they will be uncomfortable putting in their information, and most likely leave your site to shop somewhere else. If you are creating a checkout progress bar, why not start by showing them that their information is safe?

 

Example: Pet Net Direct Checkout Steps


Pet Net Direct Checkout Steps

Example: ScotteVest Checkout Steps


Scottevest Checkout Steps

 

 

Use Color to Show the Current Step and a Trail to Show Previous Ones

 

This one seems obvious, but is often neglected. Color helps draw the eye toward specific elements and highlights a current position in a progress bar. Some keep it minimal and only change the text color, while others go one step further and completely change the background colors of the current step.

 

Example: Amazon Checkout Steps


Amazon Checkout Steps

Example: Design Collectors Checkout Steps


Design Collectors Checkout Steps

 

 

Use Arrows to Show Forward Progress

 

The arrow is a universal symbol to show directions, progress, or when a diapered cherub makes you fall in love. On the web, arrows can be helpful as well, from directing the user’s eye to a call to action, showing breadcrumbs, or in this case, a checkout progress bar. In the following example, Southwest even takes it a step further by allowing a user to click their already completed steps in case they need to go back and change something.

 

Example: Southwest Checkout Steps


Southwest Checkout Steps

 

 

Conclusion

 

Progress trackers should always be shown above the checkout fields and should be clearly labeled. Showing visual progress with arrows, color and a trail is ideal, though not always necessary. Unsung heroes of the checkout, progress trackers help users distinguish where they are in the process, giving them a sense of progression while filling out the forms, and keeping them from bolting at the last moment, before completing their transaction!

(21 vote(s))
This article was helpful
This article was not helpful

Comments (0)
Post a new comment
 
 
Full Name:
Email:
Comments:
CAPTCHA Verification 
 
Please enter the text you see in the image into the textbox below. This is required to prevent automated registrations and form submissions.

Help Desk Software by Kayako support.miva.com/supportsuite/index.php?