How to handle inter-related dropdown choices?

Question

I've got a form containing (among other things) 3 dropdowns, each with about 5-10 choices. The choices in these dropdowns are closely related and some of the permutations will be invalid. This also means that if the user changes the selection in one of the dropdowns then the current values in the other two may be invalid.

My design doc currently states that "if an invalid combination is chosen then an error should be displayed" and "to help the user to pick valid combinations all choices in the dropdown lists which will produce an invalid combination should be low-lighted in the dropdown".

I'm not convinved that this is the best way of dealing with this but I can't think of any better alternatives. I thought about combining them into a single dropdown containing all of the valid combinations but this could be unwieldy as well.

Does anyone have any other solutions?

Answer 1

If you can determine an order between the dropdowns, the solution is relatively easy:

Each dropdown selection resets the selections in the following (downstream) dropdowns. It also updates the available fields to fit the current selection in that dropdown (not showing disallowed options at all).

Consider for example older map sites: You could pick a state, then a city and only then a street. It would be quite acceptable that if you've changed the state, you'd lose the city you previously picked.

If there's no distinct order you can:

• Disallow selecting the new values that clash with the existing selection(s).
  I assume you can "low-light" (as you put it) these options in the dropdown even before selection.

• "Low-Light" (as you put it) such problematic new values, but allow the user to select them.
  You can then display a dialog box, explaining the new value is problematic.
  The user can choose:

  • Dismiss the warning and override - i.e. the new option is selected and resets the clashing values previously selected in the other dropdowns.
  • Heed the warning (closing the dialog) and selecting another value.
    .

  Anyway, the dialog must have a "remember choice" checkbox, so next time it won't bug the user.

Answer 2

Seen this many times, and while the obvious thing is to 'disallow' invalid combinations it has some disadvantages:

1. It may be hard to transition to a valid combination because the intermediate steps are all 'disallowed'. e.g. if you have choices A/B and C/D, and A permitted only with C and B with D, then the user cannot switch from A+C to B+D because neither dropdown will switch to the other choice. This can be an especial problem with more complicated system, and if the user is not very familiar with what combinations might be disallowed; finding legal intermediate steps can boil down to trial and error.
2. The reason behind the disallowal can be obscure, and you want to inform the user of the reason their choice is invalid.

What I would propose is not to disallow invalid choices. Your spec does not say they should be disallowed; lowlighting is not the same. Make the illegal choices distinct from the legal ones, by de-emphasis, but allow them to be chosen. Couple this with a message area which shows up when an illegal combination is chosen, giving the reason and suggesting an alternative (and not allowing the user to proceed to the next step).

All this is null and void if the choices can be broken down into a sequence: then it makes much more sense to present the choices in sequence and disallow any illegal ones when each choice is presented.

Answer 3

If some choices are invalid, you simply shouldn't display them. This will reduce the possibility of an error being displayed to the user.

If this is for a web app, use JavaScript to eliminate invalid choices depending on the selection. Progressively reveal the second dropdown with appropriate options after the first dropdown has been used. Ditto for the third. Validate server-side and only if it doesn't validate after your server-side validation should you display an error. Only those with JavaScript disabled or those intentionally trying to bypass your form will ever see the error.

If it's for a desktop app, use the same type of principle.

Answer 4

Though I understand that there might be the issue of lack of vertical space, I would definitely try not to use drop-downs, I would try to use list-type elements instead (select multiple or radio input groups) - this allows user seeing the changes happening while selecting something in one group that affects the options in other groups.

Also - I would at least try to either a) provide shortcut to most common selection sets b) try to re-engineer the whole thing. This interface cannot be called "simple", however smooth you can do it :)