2

I'm working on an installation guide, or "wizard", for a web application. The installation guide will be quite complex, with many different steps, each taking up around a minute or two for the average user to complete.

enter image description here

We want to have the navigation of the guide on the left, as shown in the picture. This allows us for more flexibility as opposed to having the more traditional "navigation bar" at the top, as we can use the vertical space to display clear sub-steps that we can collapse/expand. It's also easier to add steps in the future, if needed.

One possible drawback that I've identified is the rather awkward positioning of the buttons. Most steps will require mouse and/or keyboard interaction in the "content area" of each step. Once complete with a step, the user would have to interact with the navigation menu which is on the left. I am more used to and it feels more intuitive to associate left with "back" and right with "next". We read from the top-left and move to the bottom-right, right?

Am I overthinking this or is this indeed problematic? Can the navigation here be improved in any way?

PS: The user can "skip" steps and hop back and forth as well.

2 Answers 2

4

I think you're right that the left-to-right direction of a wizard is perhaps more common. To compromise, and allow the vertical space to be expandable to accommodate a large number of steps and sub-steps, you could move your navigation buttons to be situated horizontally, below your content area.

Wizard structure with vertical navigation items on the left, with buttons to move forward and back below the content area to the right.

This would optimize your common case of navigating through page-by-page to mirror a typical left-to-right wizard workflow, but still would provide the screen real estate needed to show your numerous steps.

1

Personally I would create a strong contrast (shape and layout) between the informative navigation and the action buttons.

In fact, the menu's horizontal layout distribution and the horizontal position of the buttons can lead to confusion.

enter image description here

Layout comparison

Direction contrast

enter image description here

3
  • Interesting. What's your take about the navigation being on the left though? Typically one finds "Next" at the bottom right, not bottom left. Is this problematic do you think that one has to move from right to left to click "next"?
    – Chris
    Apr 13 at 14:37
  • I'm also curious what you mean by "horizontal layout", do you not mean vertical? In any case, how can that lead to confusion?
    – Chris
    Apr 13 at 14:38
  • Answer updated...
    – Danielillo
    Apr 13 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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