Checkout Progress Bar Best Practices

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?

Pet Net Direct Checkout Steps
Example: Pet Net Direct Checkout Steps

Scottevest Checkout Steps
Example: 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.

Amazon Checkout Steps
Example: Amazon Checkout Steps

Design Collectors Checkout Steps
Example: 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.

Southwest Checkout Steps
Example: 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!