Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
Don't know about research but this one looks like a good practice to me: pitstopmedia.com/sem/images/progress-bar-smaller.png –  Assimiz Nov 27 '13 at 7:17
    
@Azzimiz I think you're right, the 'filling up the bar' style probably isn't as good as a 'you are here' thing. –  Ben Durnell Nov 27 '13 at 19:17
add comment

2 Answers

up vote 5 down vote accepted

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

share|improve this answer
    
Good point about showing where they are now, instead of where they've been. I think just highlighting their current step will work well. –  Ben Durnell Nov 27 '13 at 20:40
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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