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.

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?

share|improve this question
add comment

3 Answers

up vote 7 down vote accepted

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.

share|improve this answer
    
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 '13 at 18:16
    
sure. a bit more added. –  brad May 14 '13 at 18:53
    
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 '13 at 19:18
add comment

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

Display Aircraft▼ manufactured by Boeing▼.

Display Automobiles▼ manufactured by Toyota▼.

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

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.