{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

We often discuss basket abandonment on this blog, and one of the quickest ways to lose your customer is to bore them with a seemingly endless checkout process. 

I say ‘seemingly endless’ because, however long the process really is, if you don’t include some kind of progress indicator then people have no way of telling how close to the end they are.

So they might as well assume they’ve got a long way to go, get bored and give up.

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.
Jack Simpson

Published 19 January, 2016 by Jack Simpson

Jack Simpson is a Writer at Econsultancy. You can follow him on Twitter or connect via LinkedIn.

252 more posts from this author

Comments (5)

Avatar-blank-50x50

James Whitman, Product Owner at Personal

I worked with a team to re-do a checkout for a Fashion and Homewear website a couple of years back and we ended up deciding on a 1 page checkout, that they're still using today.

We still added a progress indicator to the top because we found it improved the usability, even though all the actions were complete on one page. Its not something that got A/B tested, but it certainly helped when we did user testing on it to clarify what the customer needed to do. Checkouts are all about where is it going, how is it getting there, and how am I paying, making that clear really helps the customer.

6 months ago

Avatar-blank-50x50

Marie Despringhere, UK Country Manager at Optimizely

As important as checkout progress indicators are, there are also other best practice optimisation techniques retailers should deploy to keep customers engaged throughout the entire online journey, from start to finish.

There are many key best practices for retailers to keep in mind. For example, confirming when shoppers add an item to their basket and potentially recommending products to further increase the average basket value. Also, re-emphasising the unique buying benefits; such as free delivery, return policy, click & collect or other reasons that could compel the potential buyer. Thirdly, if customers are abandoning their carts repeatedly, A/B test the checkout flow and see what changes can quickly be made to maximise conversions.

Websites are filled with so many distractions that it’s essential for online retailers to keep the customer journey clear, simple and seamless.

Marie Despringhere, UK Country Manager, Optimizely

6 months ago

Avatar-blank-50x50

welldy limonta, Analytics and eCommerce Specialist at Pearson AustraliaEnterprise

This article has lost all images. Is there any way to have them back on your blog?

5 months ago

David Moth

David Moth, Editor & Head of Social at EconsultancyStaff

@welldy, we have a temporary issue with images that we hosted on Imgur. The tech team are working on it, so hopefully everything will be fixed shortly. Thanks for flagging it up, David

5 months ago

Avatar-blank-50x50

welldy limonta, Analytics and eCommerce Specialist at Pearson AustraliaEnterprise

No problem and thanks for fixing them, David.

5 months ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.