We’ve done quite some posts on conversion rate optimization and nearly always named progress bars in them. People value progress bars, and if they don’t function according to what they’re used to, they’ll get worried. That makes you wonder, right? Apparently progress bars work, but what makes them work?

In this post I’ll be diving in deep into what seems to be quite a small subject. I’ll explain how you can make the perfect progress bar. Of course, perfection is arguable and what works on your site might not work on another, so let me start by saying that I’m talking about a general perfection. These are things that, in general, work best.

What’s a progress bar?

For those of you left completely in the dark as to what a progress bar actually is, let me explain. A progress bar is a bar that, surprisingly, shows your progress of a certain task. This can be, for instance, the completing of a survey or completing a purchase. I’ll mainly be focusing on the latter; completing purchases.

Let me show you what a progress bar can look like. Here’s ours, which you’ll find in our checkout:

So as you can see, this progress bar just shows you where you are in the entire purchase process and what steps you’ve already completed.

What makes a perfect progress bar?

There are a few things that make a progress bar “perfect”. Obviously, this is a perfection and you should always test whether this setup is actually the best way to go for your site. I’ve constituted two things that make a progress bar perfect. These things are Usability and Psychological Triggers.

Usability

No breadcrumb
This might seem silly, but I’ve actually come across quite some websites that make their progress bars look like a breadcrumb. If the placing and look of your progress bar looks like a breadcrumb, it simply won’t work. Even worse is actually using your breadcrumbs to simultaneously be your progress bar:

This is totally unclear, and will not give you any benefit at all. This does not work.

Highlight the current step
A big part of the idea of the progress bar is that it’s visible for people where they are. Highlighting the step where your visitors currently are is very important. This is something the progress bar above doesn’t do very well, if at all.

Explain the steps
This is usually done right, but it’s still important enough to mention. You have to explain the steps in the progress bar, just as we’ve done. “Select payment method” is pretty clear as to what that step’s for. Next to this explanation it’s also smart to show the number of the steps, because that makes it that much more visible to the visitors how much more they have to go.

Here’s a screenshot of the progress bar on Zalando:

While these explain the steps pretty nicely, it begins and highlights a step that’s nothing to do with your progress. I’d always encourage you to show your visitors the connection on your website is secure, but this is simply not the place.

It looks like the first step, but it isn’t, as the next arrow starts with 1. So why is it in the same bar? On the current page they’re actually asking me to login, which to the most users doesn’t have anything to do with a “secure connection”. So this really isn’t explanatory at all.

Location
The location of the progress bar is obviously really important. If people can’t see it, the value of having one is naught. People will have to be able to continually view it, to also be able to continually view their progress.

Psychological triggers

Sense of movement
I’ve actually written a complete post about visual direction and attention. This will work just as well with your progress bars. The sense of movement is, among other things, triggered by arrow shaped forms. This will give the visitor the feeling they’re actually moving along.

Point of entry
At our own progress bar, people get in at the second step when they’ve added a product to their cart. And with good cause, as they’ve already taken the biggest step: deciding to buy something! However, this does give the users a boost as they’re already a quarter of the way there!

Validating completed steps
If people have completed a step, don’t just move them on to the next step. Use your progress bar to show them they’ve successfully completed the previous step(s). We do that by showing the green check mark after every step. This increases a person’s self-efficacy, which basically increases our motivation to complete a task.

Size of steps
This is a small thing which we’re not actually doing ourselves, but still one I wanted to mention. The steps of the progress bar could actually indicate the time it would usually take to complete a step. This can be done by making the more time consuming steps a bigger portion of the progress bar than the less time consuming steps. In fact, studies show that a slow start with a quick finish is highly preferred by people. So the longer parts of the progress bar can be placed at the start, and the shorter ones at the end.

However, this is the complete opposite of what Villar, Callegaro & Yang have found in their study. This shows that you’ll need to find out what works best for your site, if there’s any difference to be found. But it does keep you thinking, which is never a bad thing, when optimizing your website.

Summarizing

So there are eight things that you should or should not do to make your progress bar perfect:

1. Do not make it look like a breadcrumb;
2. Highlight the current step;
3. Explain every step;
4. Place it within view;
5. Add visual triggers that imply movement;
6. Skip the first step;
7. Validate completed steps;
8. Think about the time spent on each step.

I feel these are the things that every progress bar should have, as they’ll make the whole process the most clear. It simply makes it easier and more transparent for your users. And that’s exactly what you want. And this is just one little part of all the things we’ll point out during a Diamond Review, so do check those out as well!

I’m curious to hear whether you think I’m right, or completely wrong. Let me know in the comments!

This post first appeared on Yoast. Whoopity Doo!