We have been trying to implement a web-based configuration system and we have been wondering about the correct design choice to layout the options.

Our current Organization is similar to this: Current (Heavily Obfuscated) Layout

Clicking "Add VLAN" opens a wizard modal which allows you to configure various parameters. Think of it like this: http://www.panopta.com/static/bootstrap-wizard-plugin/demo/demo.html [Although ours doesn't look as nice as this, yet]

The problem is that our config dialog contains many options to choose from, and it is inevitable that we would have to put scroll bars (or long dropdowns) in our modals should we continue doing this. I don't think this is nice at all.

Our alternative way is to put a new sub-header in our nav-bar that would dedicate a whole tab to what used to be in the wizard dialog. I am thinking of going with this. But will putting a wizard inside a tab be a good idea or should we go about organizing data in an alternative way? Any example webpages, layouts that do this will be extremely welcome.

2 Answers 2


Putting a wizard inside the tab should be fine. But if you are using left-side navigation (as in the example screenshot), you may not want left-side navigation in your wizard (as in the example in the link). At any rate, make sure the navigation for the wizard steps is visually separate from main navigation.

One possible solution, especially if the user is required to move through each screen one at a time, is using progress indicators along the top of the wizard, as in this example:


I don't know if that works for your situation, but it may be a good way to visually separate the wizard steps from other parts of the navigation. More design examples of progress indicators can be found here:



I can say that users doesn´t like PopUps windows. Do you? Just when you are looking for something like Open a document, or like this. When you open a window and need to see other content in the system.

But the better way is booth.

Why do not open a modal and allow user to open in a new window if needed?

  • 1
    I think you need to difference between disruptive popup windows and usability dialogs and modals, never saw anyone complaint about this. Also, this answer as it is should be a comment, try to add something to it
    – Devin
    Jul 29, 2015 at 15:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.