5

The use case having two input elements, in which second select input depends on the first one; so when first one is updated, options on the second changes.

Conceptually; both of these elements are pretty technical to understand, so initially it is not clear that one of them depends on the other.

A common pattern I can think of; is to have the second select input disabled until an option from the first one is selected, but in my case both of the input elements must have options selected by default.

What are some subtle visual approaches I can use to communicate this, before resorting to explicitly explaining it with microcopy?

3 Answers 3

8

Luke Wroblewski has done a lot of research on web forms.This article on dependent dropdowns would probably answer this question more fully for you.

He breaks selection dependency into a few different visual displays: page display, tabs (section and finger), section selectors, and exposing with radio buttons (below, within, inactive, and groups).

Depending on use and complexity, I prefer the exposing options within radio buttons after selection.

example of depend dropwdown - exposed within radio buttions

Hope this gives you enough options.

3
  • While I agree with what you have said, please give more than a link and an explanation of the topics. Just a link like that is a comment, while I can see you have a great answer in there - even if you summarise what LukeW is saying.
    – JohnGB
    May 14, 2013 at 18:16
  • sure. a bit more added.
    – brad
    May 14, 2013 at 18:53
  • 1
    Much better, so you get a +1 from me. Now it's clear and useful to other people even after that link goes down.
    – JohnGB
    May 14, 2013 at 19:18
2

Sometimes it is possible to integrate the comboboxes into a single sentence. For instance:

Display Aircraft▼ manufactured by Boeing▼.

Display Automobiles▼ manufactured by Toyota▼.

1

Your proposition might be good but can be quite frustrating for the user if not well graphically designed.

Another one would be not showing the second element at all, using a step by step approach.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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.