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 a web interface for running a report. The report can be pretty complex. There are various topics that can be included in the report, and each topic has sub-topics.

Right now, the interface is implemented with a list of checkboxes. It looks like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

When you check a checkbox to select that topic, more checkboxes appear below the parent checkbox for the subtopics:

mockup

download bmml source

We're looking to redesign this because when you select a checkbox, it pushes all the other checkboxes down and out of view. We have thought about making the checkboxes collapsible, but one of the benefits of the current implementation is it lets you see ALL of the checkboxes you have selected. If the checkboxes became collapsible, it would be harder to view everything that has been selected. Any recommendations for an alternative?

share|improve this question

3 Answers 3

up vote 6 down vote accepted

You could initially just have the user select from the list of main checkboxes. Once they've chosen the boxes, they can press select to go to a list that contains the sub-topics.

mockup

download bmml source – Wireframes created with Balsamiq Mockups


and then once the user finishes selecting the main topics....

mockup

download bmml source

This design will fulfill both of your requirements:

  1. to see all of the main topics that are selected at the same time. (Because they do not expand, you can quickly select all of interest.)
  2. still to see all of the topics that they have selected. (The second stage lists all of the subtopics together, so the user can see everything they've selected, rather than displaying subtopics one topic at a time.)
share|improve this answer
2  
@DiZou If you like the answer, you should accept it! –  norabora Apr 25 '13 at 19:55

I would go with the concept of collapsible checkboxes as that is a affordance which has become pretty common with the use of file explorers which allow users to expand and collapse sections as needed.

enter image description here

If you need to show the items which are selected, You can show the items which are only selected while hiding the rest as shown below

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
2  
I don't really see how this is any different then what I originally had. It also has the same problem as my original design where checkboxes gets pushed down as you check more checkboxes. –  Di Zou May 2 '13 at 13:33

2 propositions

First one will work depending on the lenght of the text and the quantity of subtopics but it lets you see ALL of the checkboxes you have selected

enter image description here

The idea is that you uncheck what you do not want instead of checking it.

Second will work in any case, but will be less transparent

enter image description here

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.