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. 

cart abandonment stats

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.  

amazon checkout progress indicator

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.

Dollar Shave Club checkout progress indicator

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.

ao.com checkout progress indicator

ao.com checkout progress indicator

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. 

Mulberry checkout progress indicator

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. 

Vertty checkout progress indicator

Mobile

Farmdrop

Farmdrop has gone for total simplicity here. Two stages, with clear colour contrast to indicate which one you’re on. 

Farmdrop checkout progress indicator mobile

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). 

Firebox checkout progress indicator mobile

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.

Apple checkout progress indicator mobile

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. 

Whisky Exchange checkout progress indicator mobile

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. 

Graze signup progress indicator mobile

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.