14

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.

mockup

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.

4
  • 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. May 6, 2013 at 23:32
  • which do you think mine is? :)
    – Jason
    May 6, 2013 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. May 7, 2013 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, 2013 at 6:08

4 Answers 4

28

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

1
  • 3
    I should really consider sending you a mail before answering a question... +1, what can I say ? May 6, 2013 at 22:48
6

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.

1
  • yes, I do agree
    – rags
    May 7, 2013 at 7:07
1

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.

0

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.

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.