We're planning on integrating some kind of progress bar in a multi-step process.

Our developers figured it would make sense that on step 4 of 9, 3/9ths of the bar would be filled in to show how many steps were actually completed:

Step 4 of 9 with 3/9ths filled in

However, a few regular people I showed the examples to were initially confused and thought since you're on step 4, 4/9ths should be filled in.

So I was thinking of doing something like this as a compromise but I don't really like it:

enter image description here

My question: Are there any related best practices/research on whether to show in the progress bar how much has been completed vs what step they are currently on?


2 Answers 2


Your "regular people" (i.e., your users) are generally correct.

The first image you display does not tell me where I am. When I look at a mall map I don't care where I've been, I want to know where I am now so I can see how much further it is to the Cinnabon!

If you use a two color scheme, given context this tells me I'm on Step 3:

enter image description here

Adding an additional color to help indicate "past", "present" and "future" helps to further separate the different segments of the overall task:

enter image description here

Outright telling your users where they are in the process is best. It may not look as modern, but it is the clearest way to get the point across.

enter image description here

  • Good point about showing where they are now, instead of where they've been. I think just highlighting their current step will work well.
    – bendur
    Nov 27, 2013 at 20:40

I generally like the progress bar used on Udacity.com:

Progress bar at Udacity.com

I believe, it provides the information required in a modern fashion without having to use 1 - 2 - 3 -... (even though as pointed out, it might be the most understandable fashion).

In this progress bar the blue blocks are completed, orange is current subject, grey is future.

The progressbar at Udacity also provides a hover over option, where users can hover over the block for information about the contents of that chapter.

Personally, I like this approach and hope it will be helpful towards your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.