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.

We have the following Dialog (see Screenshot) in our software, that I would like to improve.

Screenshot

1) The user should select a profile (screenshot: dropdownbox on the left) to use for the following action.

2) For each profile there are some settings (screenshot: radiobuttons and checkboxes on the right + reset button), that change if another profile is selected.

How do I visually present this so that the user easily comprehends the relation between the dropdownbox and the associated settings?

Anybody know a prominent example dialog? And what do you call this kind of pattern?

share|improve this question

1 Answer 1

up vote 3 down vote accepted

Luke Wroblewski calls this a case of a “selection-dependent input” (where the input controls depend on the selection in another control). I call it “value contingent regions” (where what you show in a region of the page depends on the value in another control).

The usual design, which seems to work well, is to graphically enclose the region, with the determining control (the profile dropdown, in your case) in the upper or left margin to suggest a hierarchical relation. For example:

Frame with determining radio buttons on left, value contingent check boxes on right

A brief label also helps establish the relations (e.g., "Allowed Observation Activities" above, or "Profile Name Settings" in your case).

Luke Wroblewski has general advice and plenty of examples at UXMatters - Selection-Dependent Inputs.

share|improve this answer

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.