Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

4 Answers 4

up vote 6 down vote accepted

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.

share|improve this answer
That could work - maybe I can imply an order by the way the controls are placed on the form. That, along with the "low-lighting", etc, might make it a bit nicer. –  IanR Oct 5 '10 at 11:41
Yep, I think you can definitely use location to imply the order. –  Dan Barak Oct 5 '10 at 11:45
Good answer. I'm not crazy about the modal dialog though. Perhaps you could disable the action button when an invalid combination is selected, and if necessary, display a note explaining why. If an override option is necessary, you could implement that as a checkbox that remembers its state. –  Patrick McElhaney Oct 5 '10 at 13:52

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.

share|improve this answer

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.

share|improve this answer
The problem stated in the question is that the user might have already chosen something in the second box, that becomes an invalid choice once the first changes... –  Dan Barak Oct 5 '10 at 10:30
@Dan Barak: Exactly...and I don't think I can just hide options as that might make it difficult to get to the valid combination they want (i.e., they may end up 'passing through' an invalid combination to get there) - if that makes sense!? –  IanR Oct 5 '10 at 11:32
I think that's right. My general guideline is that if the user can take some action to enable that option, it shouldn't disappear completely, but only be marked/greyed/disabled. –  Dan Barak Oct 5 '10 at 11:47
Sometimes making invalid choices unavailable limits your ability to switch from one valid setting to another (involving changing more than one choice) because the 'intermediate' steps are disallowed. I have an answer along those lines. –  DJClayworth Oct 5 '10 at 20:35

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 :)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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