In this post I’m going to cover why checkout progress indicators are so important for ecommerce and show you some examples of effective ones I’ve seen.
Why they’re so important
Global cart abandonment rates hit almost 74% last year, so only a quarter of people went all the way to the pay button after starting a purchase.
In a study by UPS, 20% of people said their main reason for basket abandonment was that the checkout process was too long and confusing.
Progress indicators serve to rectify that exact problem. By telling people exactly where they are in the process and how long they’ve got left, you simplify the whole system.
We also know that 27% of basket abandoners leave due to time restraints.
Again, this is a problem that can, in part, be solved by the inclusion of a progress indicator. If somebody is pressed for time, they are much more likely to continue with the process if they know how close to the end they are. Otherwise they might not risk it.
In terms of checkout length, my strong advice would be to make it as short as possible in the first place. Some brands have even managed to condense it all into one page.
That said, if there’s a clear progress indicator then people are much more likely to put up with a longer checkout process because they can actually see the end goal.
Imagine having to run a long-distance race in which you had no idea when the finish line was coming. It would be torture. But once you know you’ve only got a couple of miles to go you get a sudden burst of enthusiasm.
Now take that metaphor, apply it to an ecommerce checkout page and you can start to see the psychology behind it.
Checkout progress indicator examples
Rather than try to explain progress indicator best practice, I thought it would be quicker and easier for all involved if I simply showed you a few examples.
Below is a selection of progress indicators of varying shapes and sizes, and I’ve split them into desktop and mobile so you can compare the different approaches across the two platforms.
Desktop
Amazon
The biggest ecommerce site of them all (at least in this country) has kept it simple and ‘on-brand’ with a trolley making the journey across the progress bar.
I’m not a fan of the number of listed sections, however. I think Amazon’s checkout process is actually fairly painless, but to look at that you’d think it was a total nightmare.
Dollar Shave Club
There are a lot of boring progress indicators out there. I like Dollar Shave Club’s because it’s eye-catching, but also because it fits nicely with the rest of its branding on the site.
Its simplicity also fits in with the general vibe. Three points on the indicator, numbered, with one word under each and a tick to show completed sections.
AO.com
AO.com, can you do no wrong? No, this isn’t the start of a very boring poem. I’m referring to the white goods seller’s seemingly god-like ecommerce design powers.
And its progress indicators are no exception. With a slightly different approach, AO.com lets you know which step you’re on out of how many and provides a button to scroll to the next step.
Obviously this method is only an option if your checkout fits onto one page.
Mulberry
Another slightly different approach from Mulberry. All three sections are visible from the start of the checkout process, and they expand as you move onto them.
You can also click to edit a completed section if you need to. Overall I’d say this is a fantastic piece of UX design.
Vertty
I like Vertty’s effort because it has made good use of its trademark triangular branding.
The design is clear, simplistic, and it does everything it needs to do.
Mobile
Farmdrop
Farmdrop has gone for total simplicity here. Two stages, with clear colour contrast to indicate which one you’re on.
Firebox
I like this example from Firebox because, again, it fits nicely with the rest of the branding on the site.
But I also like how bold and simple it is, including the language used (‘done’ rather than ‘confirm’ or something similar).
Apple
Apple’s approach is similar to Mulberry’s above in the sense that it displays all the steps on the screen and expands them as you click on each one.
This works well on a mobile screen as you simply keep scrolling down as you make your way through the checkout process.
Whisky Exchange
Another simple one from the Whisky Exchange.
I like that it includes the term ‘offers’ so you know in advance you’re going to be up/cross-sold to. It’s a small touch but a bit of up-front honesty always goes down well with customers.
Graze
This is a bit of an odd one out and not related to checkouts as such, but I wanted to include it as an example of how any process can be made to seem less daunting by using a progress indicator.
When new customers look at the below image it instantly gives the impression that signing up to Graze is quick and easy.
Key features of an effective progress indicator
Based on the examples above, I’ve listed what I think are the key features of a checkout page progress indicator. Feel free to add any you think I’ve missed in the comments below.
- Clearly visible.
- Simple wording.
- Bold, stripped-back design.
- Visuals that fit your brand.
- Obvious which step user is on, which have been completed and how many are left to go.
Comments