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





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!

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

Comments (0)
Post a new comment
Full Name:
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