Indicating current step in progress bars

Question

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:

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:

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?

Answer 1

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:

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

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.

Answer 2

I generally like the progress bar used on 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.