Due to the success of my first four 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 in improving checkout experiences so as to reduce the high bailouts being seen globally in online retail which is averaging around the 70% range.
This means, of the 100 consumers who start a checkout process, only 30 will go all the way through and complete a transaction. This is extremely low and if done right, checkouts should be converting in the 50% range. I know this because I have had the privilege in designing shopping cart experiences and have achieved 50% conversion rates.
The first article from my next book is on the checkout progress bar...enjoy!
Progress Bar
At the top of checkout pages is one of the more crucial elements known as the checkout "Progress Bar". Figure 1 is a wireframe of what a best practice progress bar looks like on a desktop screen, and Figure 2 is 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 how much effort is in front of them. This comes back to consumers wanting to be in control of their journey.
By understanding what is coming (in the form effort) the consumer will decide whether he/she will continue on.
Having no progress bar increases a consumer’s risk because they are unsure what’s ahead. Is it two steps or ten? And by increasing the consumer’s risk, retailers increase their own risk of not capturing a sale.
Psychological representation of progress and completing steps:
Consumers have a psychological drive to complete tasks presented in front of 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, holds consumers to the checkout process and thus contributes to reducing 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 do's 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 in completing to-do lists and checkouts with progress bars.
Facilitates back steps:
In the first four books research proved consumers rarely ever conduct only forward steps in their journey. There are normally as many back steps as there are forward ones.
“Forward” and “backward” steps are defined as getting closer (“forward”) and further away from (“backward”) viewing product detail pages.
The same can be said for the checkout process. Research proves there are many back steps being conducted during checkout. There are two forms of back step in checkout journeys:
- Consumers taking a back step within the checkout experience (such as going from the Payment page back to the Delivery page)
- Consumers leaving the checkout to view more information (such as delivery information) then coming back into the checkout
Both behaviours are better supported with a progress bar. The caveat to this statement is the progress bar needs to be designed in a way to make it visually obvious it can be used to make forward and back steps.
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 waiting for pages to download (see Figure 5), consumers are used to “progress indicators” to set expectation. Progress bars is a part of “online life”. The two examples below set expectation on wait-time.
Checkout progress bars set 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 convention, checkout experiences are not. There are endless versions of checkout experiences, and while it may make sense that taking money from a consumer can only be done in one or two ways, it 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) is to apply extra effort in the creation of guiding elements to pull/lead consumers through a process.
Think about a physical retail setting where a consumer must comply with multiple steps to complete a purchase, this is 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:
In order for a progress bar to achieve the above it must comprise the following visual and behavioural characteristics…
- 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.
- Each step must display as a clickable element (once a step is completed). This is done to facilitate back steps.
- 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.
- The titles in the progress bar must match the titles on each checkout page. This visual continuity assists with the benefits stated above.
- 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:
Retailers like Nordstrom are intentionally used to show other retailers how the "big boys" don't necessarily conduct themselves within the realms of best practice. It's not a strategy to copy other retailers who appear to be doing well online. Nordstrom does many things very well, but to blindly copy a retailer is a dangerous game.
Nordstrom has strong influencers which contributes to its online success such as their brand equity, their physical footprint, and their strong supply chain function. However, if they adhered to digital best practice they could do more.
An example of this is their checkout and their use of a progress bar (or lack thereof).
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 because of the purchase validation Nordstrom delivers. Once the consumer adds a product to its shopping cart, he/she is presented to validation messaging seen 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 his or her cart and they want 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”: the two options seen in Figure 8.
None of these initial steps in Nordstrom’s shopping cart are helping the consumer begin an intuitive checkout experience.
The next articles to come out as a result of this research is...
To challenge the use of a single step checkout vs multi step. Which one is better and why?
Understand why retailers (such as Nordstrom) eliminate all the header elements when consumers start the checkout process. Does this work? Does this help consumers in their checkout experiences?
Watch this space and find out soon.
This article was as tagged as Best Practice , Customer Experience Design