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 ecommerce checkout is using a checkout progress bar. Here are some best practices to follow when designing a checkout progress bar.
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?
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.
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.
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!