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.

I'm searching for a good/alternative solution to handle multi-state selections in a check box tree. A normal check box tree is mostly doable, because it has three different states.

mock up showing root folder, secondary folders with tri-state check boxes, and files with bi-state check boxes

It might not be the best solution, but most of our users know how to use it. My biggest issue is, what happens if the parent nodes themselves are selectable items? Assume the tree is a company site structure having world regions as nodes and countries as leafs. The customer should be able to select a world region and also be able to select a country. All selected items will be shown in a report later.

What would something like this look like?

two mock ups showing root folder, secondary folders with two bi-state check boxes or color icons, and files with bi-state check boxes

Does it make sense to show the node with double check boxes or with color indicators? Or may be using something like miller columns?

miller column

Does anybody have a solution for this problem they've seen before or have a suggestion for a much smarter solution?

share|improve this question
add comment

6 Answers

Another approach is to break out the "select all" behaviour or the "select just the enclosing entity" option into an extra line item.

We tackled the problem like this, where each top level category can be selected for summary only treatment, or individual subcategories selected, or all sub-categories selected.

category selector

This way a category that has (say) 250 sub-categories doesn't have to overwhelm the report, while still allowing the person generating the report to pull out and highlight particular sub-categories.

share|improve this answer
    
In the example image, the "Account one" and "Account two" sub-categories of "Operations" will be listed in the report with sub-totals, as well as a summary for the "Operations" category itself, while the "Investments" category will only have a summary with no break outs of sub-categories. –  Erics Oct 17 '11 at 11:01
    
i dont like the '-' styling it implies -to me- that it collapses part of the tree and not the amount of checked items –  colmcq Oct 17 '11 at 11:24
    
Yeh, it's the horrible tri-state checkbox thing. Have also seen it done with a dot instead of the tick. –  Erics Oct 17 '11 at 11:39
add comment

In tree menu, if checked state on folder (e.g. Africa) doesn't mean selecting all items(countries) in it, so you're doing something wrong and you have to reconsider architecture. Maybe make a list with highlighted titles, instead of tree...

@usercoffee
If the folder in not selectable itself, so tri-state checkbox will work here great.

tri-state checkbox

[Edit]
Show "Select All" buttons on hover.

enter image description here

share|improve this answer
    
Perhaps the region/country stuff was a bad example. In may case this selector type is required in report generators. The parent nodes can contain data itself and therefore you can selected without meaning to select the items below too. Changing the architecture isn't so easy, because it is already there. We try to find a nicer way to select items instead of scrolling to the whole list every time. –  Timo Aug 3 '11 at 11:10
    
Ok, I get your problem now. See the image I've attached. –  Dmitry Semenov Aug 3 '11 at 12:18
add comment

Perhaps it could also be an solution to split parent nodes into a leaf and a parent in case of they are selectable. But this does not looks really nice in large trees.

enter image description here

share|improve this answer
add comment

Consider positioning checkboxes at the end of the row.In that case tree will be lot more usable for more nested items than just 1 or 2. I see this as very important aspect, see for example this Blend Navigator with its flags (checkboxes) at the end of the item row. http://help.syncfusion.com/ug_84/User%20Interface/WPF/Tools/ImagesExt/image37_423.jpg Also switching whole groups is solved there..

share|improve this answer
add comment

Just as food for thought - and I have no idea if this will suit your situation, but you might try considering a completely different approach to the problem. You said this was to let the user choose world regions and countries - how about letting the user interact with more meaningful data like the mock-ups below.

The user simply selects one of 6 or 7 regions on the map, then can select the check box for that region and all, some or none of the ones for the actual countries in that region, either individually or using the select all/select none buttons.

enter image description here

share|improve this answer
3  
That's indeed a nice approach. Even if the region/country stuff was just an example. In our application we use many different types of trees and users can build up trees in different ways. Perhaps i have to step back and find a totally different approach like yours. –  Timo Aug 3 '11 at 11:00
1  
Indeed, thinking in a different way and being open to such thought is a great plan. And with various types of data you will be able to visualise it better in some other form and increase the value. –  Chris Morgan Aug 3 '11 at 13:13
    
i like the concept, but your making the assumption that your users have geographic skills. –  Simon Mar 23 '12 at 22:24
    
@Simon well not necessarily - I wasn't intending the user to have to know where a location would be found. The handful of top level regions could easily be labeled and the map is intended more as a contextual visual feedback as opposed to the rather abstracted standalone tree/list/checkbox presentation. I always think if you can make an interface interesting as well as functional, you go a good way to making the user's experience a bit better. –  Roger Attrill Mar 23 '12 at 23:39
add comment

I currently have a quite similar problem and, thinking about the miller columns, an idea that comes to my mind is to indicate the number of selected items over the total number of items in the sub-level.

enter image description here

Then, a variation in the font weight/color of a full selected folder can help to visualize quickly the "fully selected" state.

  • Folder 1 - 2/15
  • Folder 2 - 10/10

Maybe you can find here some inspiration !

share|improve this answer
    
I had some bad experience with miller columns. We used it in a product 2 years ago and nearby no user really understand how it works. Unless they are not comming from Unix or Mac OS X, mostly no user have seen them before. Specially windows users asked us so many times how this should work :-( –  Timo Aug 3 '11 at 9:58
    
I understand what you say and have no doubt about it, but many things have changed in the last two years, and users get used with interface elements and interactions that were very rare at this time. I'm not saying that millers columns are the perfect solution, but rather that you should not be affraid of a bad experience happened two years ago :) –  Alex Fernandez Aug 3 '11 at 10:09
    
I'm not affraid of using miller columns. But i see it almost every day, when somebody is stepping behing my mac and sees my finder in miller column view :-) I love miller columns, because i'm so fast with it –  Timo Aug 3 '11 at 11:06
add comment

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.