Sunday, July 15, 2018

Indicating current step in progress bars


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?



Answer



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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...