Take the 2-minute tour ×

We're having a bit of a debate here among teammates as to what would be a better UX solution, so I was hoping you guys could help me settle this.

We have a linear flow through a data-collection experience where we use a progress bar to indicate how far you've progressed (duh). We recently decided that we should add backwards and forwards navigation through this flow in case you need to change things. Our current UX framework is a fixed-width "workbench" on the left with the main interaction panel on the right. Resting above the main panel is the progress bar.

Two ideas have been proposed as to where this back-and-forth navigation should be located:

  1. At the top of the page, on either end of the progress bar
  2. At the bottom of the page, on either side of the workbench area.


download bmml source – Wireframes created with Balsamiq Mockups

Which of these makes the most sense to you? I won't say which way I believe as I don't want to unfairly sway opinion. Thanks.

share|improve this question
You say you don't want to sway opinion by expressing your own view, but the question title implies your own view....just something to take into account when interpreting answers. –  3nafish May 6 '13 at 23:32
which do you think mine is? :) –  Jason May 6 '13 at 23:55
No idea, but the way you phrased the question title could bias answers in favor of placing the navigation on the progress bar....not that that's particularly likely, just a possibility. –  3nafish May 7 '13 at 0:07
for what it's worth, now that i've accepted a correct answer and enough time has passed, i think, my option was the nav at the bottom –  Jason May 9 '13 at 6:08

4 Answers 4

up vote 28 down vote accepted

It can work well, but I wouldn't recommend the method that you are proposing.

You can use breadcrumbs as a form of progress bar, which not only solves your navigation issue, but shows what still has to happen better than a pure progress bar. It is also common practice on some of the most used websites, so your users are likely to already be used to it.

Here are some examples:

enter image description here

enter image description here

share|improve this answer
I should really consider sending you a mail before answering a question... +1, what can I say ? –  Gildas Frémont May 6 '13 at 22:48

If you are using the progress bar to move forward and backward, you are essentially implying that the user is 'undoing' his progress or is able to jump forward (?) in progress.

Separate your concerns and use the progress bar to show progress and use a navigation to navigate. Do not jumble the things. If the user needs to think twice whether his action will move him around in navigation or progress, it is a bad UX.

share|improve this answer
yes, I do agree –  rags May 7 '13 at 7:07

First, I am wondering if a progress bar is the best solution here. Progress bars show a continuous progress not a step to step progress.

Furthermore if I see a bar I imagine that I can jump to wherever I want whenever I want. I say "I" because I cannot be sure every user is going to feel the same, but to underline my conviction: video progress bars and timelines work this way. So if you want back and forth navigation it probably cannot be using the progress bar.

So to answer your question: second choice is surely the best. Only because n°1 is confusing (because of continuity vs step-by-step analogy and user habits).

Secondly, why the alternative to the progress bar is on the sides of the workbench area? Can't it be in so much other places? Bottom seems to be the most common place.

Remember those game installations?

enter image description here

I really want to challenge your design. Why a progress bar when you can use numbers (3/5 steps) or discontinuous graphic elements ([x] [x] [x] [ ] [ ])?

You want to use a progress bar when the process is sooooo long that you do not even bother the numbers of steps (like in a survey). And even in this case you want to add a numerical percentage (60% of the survey completed). And it only works the first time. And only if it give honest feedback.

Probably I do not have all the information here to be sure that my inputs make sense but it worth trying.

share|improve this answer

What you are referring to Progress Bar appears to be a Navigation Bar with Progress Indicator. In that sense, it is alright.

@rk's idea of user "undoing his progress" holds weight but the way I interpret, it is a navigation bar and progress bar showing where in the process you are. That means if you go a page back, you go a step away from your final goal and in that sense, it doesn't sound wrong.

Here my concern would be to give > and < triangles enough visual prominence (and they have good visibility in blank screen without any content at the moment) so they are spotted first and progress bar is "seen" later. If your progress bar "pulls" the visual attention and doesn't let eye see navigation as navigation, this is where you could an have issues. So be mindful of it.

share|improve this answer

Your Answer


