What are some ways to visually communicate hierarchy between two different select elements?

Question

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?

Answer 1

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.

Hope this gives you enough options.

Answer 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▼.

Answer 3

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.

^{download bmml source – Wireframes created with Balsamiq Mockups}