Most user friendly way to represent radio button with sub options

Question

I'm working on a settings section where the user needs to pick a radio button (or a segmented control) and each option generates a set of multiple options that can be selected in any combination. Lets call the first "location" and the latter "panels"(that are available for each location).

My question is, if there is a more user friendly way of representing the multi selection dropdown (see images) and having the 2 controls grouped in a way their relation is metaphorically more obvious.

Thank you all in advance.

P.S The more relevant topic I could find is this one: Radio buttons menu with radio button submenu

Step 1

Step 2

Answer 1

Your solution looks neat and robust, I must say. I have some questions, though.

• are there any panels in the combo-box that are common to more locations?
• do the panels' names indicate location (i.e. are the panels the state/province names)? Say, I blindly opened the combo-box, selected some panels and later realised that the selected location is wrong?
• what happens when the user has selected some panels and later realised that their location is different (or were curious to see the panels for another location) but then came back to the original location? Which panels are selected then?

EDIT: since the OP has provided me with the answers I adjust the answer accordingly:

• Yes, there are panels common across locations.
• No, they do not indicate locations. They are actually user databases.
• Currently, in my design a selection of another location means a deselection of panels.
• The sum of all panels are no more than 20

In this case I'd keep the current visual layout and only disable the items in the combo-box that do not apply to the selected location. This gives the most straightforward information to the user that certain item is not available in their location.

---

In case that panels are exclusive to a certain location I'd present the following solution:

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

As you can see, only the combo-box corresponding to the selected location is enabled, still any selections inside the disabled combo-boxes retain their values.

If this is too much of the combo-boxes for you, you can stay with one combo-box and enable/disable the corresponding items (panels) depending on location to clearly differentiate between the location selection. This would, however, introduce two more problems:

• after each location change the user needs to revisit the combo-box to see what has changed and semi-manually search for the changes
• users from certain locations would have to scroll further to get to their panels than the others, provided the panels are sorted by their location.

Anyway, presenting such sparse selection (roughly 75% of the choices would be disabled) is not user-encouraging, in my opinion.

I have presented this solution as in my opinion presenting a sparse selection, i.e. a combo-box with roughly 75% items disabled is not encouraging for the user.