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.

What is the best way of display a list of options nested within two options?I placed a mockup for reference to my question. If the user click the top radio button he should pick just one among all the options available. Space is limited to display those options but I believe the mockup is strange and would like to know how others approached this type of task. enter image description here

share|improve this question
    
Hi @brisa, could you please explain what you need your users to accomplish? The question is a bit confusing. Thank you –  Anna Rouben Nov 15 '12 at 18:50
    
The user should be able to choose only one option, but we would like to group the 4 options (theoretically shown on the combobox) as a subgroup, as they are all related, whereas option 2 (on the mockup, under combobox) is completely different. Confusing - I know - PM request. –  user17508 Nov 15 '12 at 19:00

2 Answers 2

up vote 2 down vote accepted

You should introduce a 2-level hierarchy of options, for example you can add a nested list of suboptions as indicated below. However, nested lists tend to be confusing. You should try to make the main-options clearly distinguishable ("make choices distinguishable" is one of the guidelines in The UX Book).

Keep the suboptions greyed out until the first main option is selected

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Furthermore, I would prever radio buttons over the drop down list in the second level, if there are only about 4 suboptions. An explanation you can find here.

When drop-down lists have less than 7 options they suffer from a lack of up-front information. The user has to click in order to see the available options.

In order to reduce the vertical height I have arranged the suboptions horizontally - its a suggestion.

share|improve this answer
    
Thanks for answering. –  user17508 Nov 15 '12 at 21:53

If I look at the sketch you provided, I wonder why you don't use one single combobox for everything or just radio buttons from options 1 to 5.

So if you really want to gather the first 4 options in one sub-group, then I would suggest to put a name to this group and use it as text in the first radio button. For example, something like this:

Options with sub-options

Alternatively, you could put the combobox below the associated radio button and use progressive disclosure, to make the combobox appear only if its radio button is selected. This is often seen in web forms.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Depending on your use case, for example, if your "Option 2" radio button is representing all the options from the combobox, or maybe none of them, you may go for something like in Google Chrome synchronization settings:

Chrome

If you select the "Sync everything" from the combobox (replacing your radio buttons), all the checkboxes below will be insensitive but still checked (you may use radio buttons instead of your combobox). If you select the "Choose what to sync" option, then all the checkboxes are enabled and you can (un-)check the one(s) you want individually (in your case, just one sub-option).

What kind of option do you have? and how many in the sub-group? some context would help us to help you :)

Edit after first comment:

Giving the fact that you have 7 items for the sub-group, I would suggest to use a combobox instead of radio-buttons. Here is an example:

mockup

download bmml source

You may replace the terms by whatever is appropriate in your context ("active/inactive" instead of "activated/deactivated", "objects", etc.).

Alternatively, you may still keep the combobox enabled even if the second radio button is selected. And you may select the first radio button automatically as soon as the user select something in the combobox. I'm not sure if there is any usability study on this... but I've seen both cases in several applications.

share|improve this answer
    
Sub group items are 7 total: All new, today's new, Yesterday's new, etc. The users already know those are New AND Activated category.The other option on main group is New AND not activated. –  user17508 Nov 15 '12 at 21:31
    
I like your suggestions, but we don't want to allow the user more than one option. Thanks for answering and taking your time. I will keep those in mind for a future project. –  user17508 Nov 15 '12 at 21:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.