1

I have a wizard which has two tabs and in first tab I have drop down box. There are two options in the drop down.

If the user selects the first option in the drop down then he can navigate to second tab. If the user selects second option then we need more input from the user, before going to second tab.

Please suggest what is more appropriate:

  1. Open another dialog box to ask for input
  2. Add another tab after the first tab to ask for extra input.
  3. Or any other option?

Attaching the mockup

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Select Option 1, one more drop down appears enter image description here Select Option 2 enter image description here On selecting option 2 one more step is added enter image description here

Please suggest what is the best approach to display this, need it urgently. Thanks

2
  • Can you show me the wizard so i can answer you accordingly !
    – Mohsin
    Dec 30, 2014 at 13:36
  • I have added all the mockups. One solution I can think of is to have "Select Model" in case of any option selected in step 2. Will it be good user experience to have just one dropdown in second step in case of option 1 Dec 31, 2014 at 10:20

3 Answers 3

2

A wizard with tabs? Wizards and tabs should be mutually exclusive. As it says on page 179 of the Windows 7 User Experience Interaction Guidelines, you shouldn’t use tabs if the controls on one tab are dependent on the settings of another. The user should have one decision for each page of a wizard –there never should be so many controls that you need tabs.

Variable Paths with a Wizard

With that in mind, the solution is:

  1. Eliminate the tabs. Make each tab a separate page in the wizard

  2. If the user selects the first option in the drop down, clicking Next proceeds to the wizard page that was formerly a tab.

  3. If the user selects the second option, then clicking Next proceeds to an intermediary wizard page that requests the additional input. When the user provides the input and clicks Next again, it proceeds to the page that was formerly a tab.

Looking at your mockups, it looks like your case is one of changing a step based on a previous selection, not adding a step. If the user selects Option 1, then the second page of the wizard presents the Model drop down. If the user selects Option 2, then the second page presents the Logical View. This eliminates making the model drop down appear when the user selects Option 1. Making a control appear on a wizard page is inconsistent with the principle that each page in a wizard is a single decision. Lucky for you, moving the model drop down to a second page also gives both paths through the wizard the same number of steps, so you don’t have to deviate from the design requirement to show the steps on the left.

A wizard is good precisely for these situations where the next input depends on the previous input –where there are multiple paths to completion.

Showing Progress in a Wizard

As for the general problem of showing progress in a wizard with variable paths, the solution is to use a progress bar and/or percent complete, not the number of steps. At any point in the wizard the percent complete is (Number of Steps Completed) / [(Number of Steps Completed) + (Maximum Possible Number of Remaining Steps)]. In your case, it’s 0 / (0 + 3) = 0% done on presentation of the first page, 1 / (1 + 1) = 50% done on the last page after selecting Option 1, and 1 / (1 + 2) = 33% done on the second page after selecting Option 2, followed by 67% when getting to the third page. In other cases, the progress won’t be linear like yours, but at least it always increases and, besides, users are used to percents and progress bars not being linear with computers.

However, if you are required by the style guide or whatever to show a list of numbered steps, then you have little choice but to insert the step. However, I wouldn’t give it a whole number, forcing you to renumber all subsequent steps. I’d number it “1a” or “1.1” or “1½” –whichever makes the most sense to your users. If possible, insert the new step with some brief animation to keep it from being too jarring, and your users might be okay with it.

Then show the design to whoever required step numbers in a wizard. While you’re at it, ask him/her what’s supposed to happen if the user clicks on the Step 3 tab after selecting Option 2 in Step 1. Maybe then they’ll get the clue that wizards shouldn’t have tabs, numbered or not.

Alternatives to a Wizard

It’s possible you don’t want to use a wizard. In general, wizards are for complex tasks that are done rarely. If this task is done regularly, then consider alternative designs. For example, take the input controls from the second tab and put them below the drop down on the first tab. The fact that they are dependent means they are related and should be on the same tab. Maybe draw a border around the dropdown and dependent controls to emphasize that they are related. Disable the dependent controls when one option is set in the drop down, and enable them when the other option is set.

In your case, it looks like users use the Logical View window to specify a model under Option 2, which alternatively (with Option 1) the users do with a drop down. You could use something I call an “assignment dialog.” A familiar example of an assignment dialog is the “Browse” button and dialog to select a file. You show the current/default model in a text box. Beside the text box is a command button. It could be labeled “Browse,” but maybe something else makes more sense to your users. When the users select the button, it opens a dialog featuring your logical view to select a model to fill the text box.

I’m not clear what the Option drop down does, but maybe you can eliminate it. Instead, you always show the Model drop down, which also always includes the “Browse” (or whatever) command button. Users decide whether to use the drop down or Logical View by whether they select the dropdown button or the command button. With this approach, you may be able to consolidate everything to a single main window with a drop down, a command button, and whatever is in the last step (if it's a "congratulations" page, just eliminate it completely -"success" pages are largely deprecated even in wizards).

Radio Buttons?

BTW, assuming you keep the Options control, see if you can replace the dropdown with radio buttons. With only two options, radio buttons don’t take much more space, and they're easier to read and use. It would also allow you to signal which specific option is associated with additional dependent input (e.g., by the dependent controls being under or beside the specific option they relate to).

6
  • Thanks for detailed explanation. That's really helpful. I have attached the mockup. Actually as per design all our wizards show steps on left hand side so I cannot remove that. My query is that if second option is selected and suddenly I show one more step on left hand side is that ok or will it confuse the users. I will change the dropdown to radio button as suggested. Dec 30, 2014 at 16:57
  • Michael, can you please let me know your view based on the mockups I provided. Thanks in advance. Jan 1, 2015 at 10:40
  • I've re-written my answer to take into account the mockups. My specific recommendation for you is, "if the user selects Option 1, then the second page of the wizard presents the Model drop down. If the user selects Option 2, then the second page presents the Logical View," but I've added more general advice too. Jan 2, 2015 at 13:56
  • Thanks Michael your inputs are very helpful. I cannot eliminate third step as we need further input from user in that step. You have proposed two options. Considering I need third step which one would you prefer more 1) the user selects Option 1, then the second page of the wizard presents the Model drop down. If the user selects Option 2, then the second page presents the Logical View. 2) Having the browse button. Thanks Jan 3, 2015 at 12:42
  • @user1796650: I’d guess if your users likely can’t figure out on their own whether to use the drop down or the logic view, then have the initial page to help them with that. If the users can easily figure it out from a single page with the drop down and the browse button, then try that. User research will provide the answer. Jan 5, 2015 at 13:21
2

A Dropdown with just two options isn't the right way to go consider displaying both the options with radio buttons. Using tabs in a wizard wouldn't be appropriate. Consider something like this .

enter image description here

It will be a better to convert the tab into one additional step.

2
  • I have attached the mockup, need to follow the same format. Dec 30, 2014 at 17:00
  • This is what I was thinking. Use radio buttons for the two options and if you select the "complex" one, either add an extra step to the wizard to capture the fields, or display the fields on Step 1 (they'd be invisible/disabled if "simple" radio button selected. Jan 2, 2015 at 14:33
1

Considering the user cannot navigate to the second tab, keep it disabled. When conditions to enable it are met, enable it and provide a fade-in animation such that the user notices the change. Keep it simple! :)

1
  • I agree with @Jawa. Since the primary input is on Tab 1, the conditional input should land on the same tab. Information Architecture in a space crunch, defines your question more than, techniques to show the extra input fields. If you can provide a layout of your dialog box (how big it is, what info goes into it) it'll give a better picture. Dec 30, 2014 at 13:34

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.

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