Best practice: dropdown selection with associated settings.

Question

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

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?

Answer 1

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:

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.