The Best Practice Progress Bar and how it contributes to creating amazing checkout experiences

Due to the success of my first five books on eCommerce best practice, I have begun writing my fifth book in the "Best Practice Series" titled "The Best Practice Checkout Experience".

Due to the sheer size of this subject matter, I will be sharing snippets of my research and findings that can immediately help retailers improve their checkout experiences, thereby reducing the high bailouts being seen globally in online retail, which average around the 70% range.

This means that of the 100 consumers who initiate a checkout process, only 30 will complete a transaction. This is extremely low, and if done correctly, checkouts should be converting at a rate of around 50%.

Being a top-performing eCommerce Consultant, I know this because I have had the privilege of designing shopping cart experiences and have achieved 50% checkout conversion rates.

Progress Bar

At the top of checkout pages is one of the more crucial elements known as the checkout "Progress Bar". Figure 1 illustrates a wireframe of a best practice progress bar on a desktop screen, and Figure 2 shows the mobile version.

Figure 1

Figure 2

This element, if done right, serves multiple purposes...

Sets Expectation:

When consumers are about to embark on a checkout experience, they want to understand the effort required. This comes back to consumers wanting to be in control of their journey.

By understanding what is coming (in the form of effort), the consumer will decide whether they will continue.

Having no progress bar increases a consumer’s risk because they are unsure what’s ahead. Is it two steps or ten? And since consumers are risk-averse, the likelihood of them leaving the checkout is high.

Psychological representation of progress and completing steps:

Consumers have a psychological drive to complete tasks presented to them. The progress bar serves this drive by visually representing the completion of steps where micro validations are being applied along the way ("micro validation" = consumers cannot complete the delivery step until all the information is properly input, once the consumer moves past the delivery step, they are provided with visual cues indicating they correctly completed the delivery step ).

The combination of needing to complete tasks and being visually rewarded when specific steps are completed motivates consumers to proceed through the checkout process, thereby contributing to reduced bailouts.

A progress bar is similar to a to-do list, and the human brain is wired to respond to to-do lists because…

• They dampen anxiety about the chaos of life
• They provide structure, a plan that consumers can stick to – to-dos apply focus to completing whatever the task may be
• They are proof of what was achieved
• Not completing to-do lists or a defined task triggers anxiety and stress – there is a need for closure – the brain has a powerful need to finish what it starts

The last point is one of the reasons cart abandonment emails are effective.

The sense of achievement is a large motivator.

Simplifies back steps:

Research shows that consumers rarely take only forward steps in their journey. There are usually as many backward steps as there are forward ones.

“Forward” and “backward” steps in online retail are defined as getting closer (“forward”) and further away from (“backward”) viewing product detail pages.

The same can be said for the checkout process. There are as many back steps being conducted as forward ones during a checkout experience. There are two forms of backsteps in checkout journeys:

1. Consumers taking a back step within the checkout experience (such as going from the Payment page back to the Delivery page)
2. Consumers leaving the checkout to view more information (such as delivery or returns information), then coming back into the checkout

Both behaviours are better supported with a progress bar as long as it's designed in a way to make it obvious for people where they are in the checkout flow.

Convention:

Progress bar elements are used throughout the web and is something consumers are used to. Whether it be to download a large file (see Figure 4) or wait for pages to download (see Figure 5), consumers are used to “progress indicators” to set expectations.

Progress bars are a part of online life. The two examples below set expectations on wait time.

Check out progress bars set an expectation of interaction cost (the cost of effort required by a consumer to complete the checkout).

Figure 4

Figure 5

While progress bar treatments are conventional, checkout experiences are not. There are endless variations of checkout experiences, and while it may seem logical that taking money from a consumer can only be done in one or two ways, this is not the case.

This is what makes progress bars in checkout so important.

Communicating Cumbersome Tasks:

Rule #1 in simplifying complicated tasks in an impersonal medium (such as online retail) is to apply extra effort in creating guiding elements to pull consumers through a process.

Consider a physical retail setting where a consumer must follow multiple steps to complete a purchase, guided by retail staff —a “human progress bar”. Checking out in store appears easy because there is always someone accessible to help and lead the process.

Best Practice Characteristics:

For a progress bar to achieve the above, it must comprise the following visual and behavioural characteristics…

1. It must be positioned at the top of the page (located below the header). Eye-tracking studies verify this region of the page is where the eye lands first when consumers move on to new pages. Due to all the benefits (stated above) the progress bar must always reside above the fold across all screens.
2. Each step must display as a clickable element (once a step is completed). This is done to facilitate back steps.
3. As the consumer progresses through the checkout, the progress bar must visually change to indicate progress. These visual changes must be clear and obvious. Not subtle.
4. The titles in the progress bar must match the titles on each checkout page. This visual continuity assists with the benefits stated above.
5. As a step is completed, apply visually validation cues to inform the consumer the system has captured all the information and it's been entered correctly. This is achieved by introducing "tick" elements within the progress bar (see Figure 6).

Figure 6

Nordstrom - bad example in action:

Nordstrom may be considered a success story online, but their checkout experience is to a low standard, specifically in the context of progress bar utilisation.

This retailer has a 4-step checkout, but consumers would never know this when looking at the first step of the checkout experience (see Figure 7).

Figure 7

This experience is made worse by the purchase validation Nordstrom provides. Once the consumer adds a product to their shopping cart, they are presented with validation messaging, as shown in Figure 8 below.

Figure 8

The primary call to action is for a consumer is to “Checkout”. However, when the consumer selects the “Checkout” button the are taken to what’s shown in Figure 9 (below)…

Figure 9

There is no header, no progress bar, and the consumer is taken directly to the sign-in step. For many consumers, this will be a jarring step.

• What happens if the consumer has multiple items in their cart and wants to see the total cost of the order?
• What happens if the consumer wants to see what the delivery costs will be for this order?

Nordstrom is also assuming the consumer understands what “Checkout” means vs “View Shopping Bag”.

None of these initial steps in Nordstrom’s shopping cart are helping the consumer begin an intuitive checkout experience.

Conclusion:

After reading this article, you may think you don't need a progress bar because your checkout is a One-step process. Guess what! One-step checkouts are the worst-performing checkouts in the world.

Research shows that the top-performing retailers in the world typically average five steps in their checkout process.

Hence the importance of the progress bar.

There is good news. Every eCommerce Platform has the power to enable you to improve your checkout journey.

The first step is to work with a high-calibre eCommerce Consultant to plan the checkout experience (and introduce a progress bar) and then implement the change.

There is more good news! When your checkout flow aligns with the best practices defined above, you can expect substantial growth in conversion rates.

Imagine if you have 10k people leave your checkout each month, and you reduce that by 20%, which is a conservative estimate. You have just added 2k extra transactions without spending a dollar on more marketing.