4

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?

1 Answer 1

3

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.

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.