25

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?

Improve this question

7 Answers 7

Reset to default
7

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

Improve this answer
4
  • 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, 2011 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, 2011 at 13:13
  • i like the concept, but your making the assumption that your users have geographic skills.
    – jakc
    Mar 23, 2012 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, 2012 at 23:39
4

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

Improve this answer
1

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 !

Improve this answer
3
  • 1
    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, 2011 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, 2011 at 10:09
  • 1
    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, 2011 at 11:06
0

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..

Improve this answer
1
  • Link doesn't work
    – Ulvi
    Dec 12, 2021 at 6:55
0

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

Improve this answer
2
  • 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, 2011 at 11:10
  • Ok, I get your problem now. See the image I've attached.
    – Dmitry Semenov
    Aug 3, 2011 at 12:18
0

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.

Improve this answer
5
  • 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, 2011 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, 2011 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, 2011 at 11:39
  • -1 because this answer appears to be a duplicate. @Erics, can you clarify how this answer differs from Stefan Gehrig's earlier answer?
    – Graham Herrli
    May 3, 2015 at 15:21
  • @GrahamHerrli the duplication of node-name as two lines is avoided, and more clear indication of hierarchy is provided.
    – Erics
    May 4, 2015 at 16:32
0

What we did in this case is add the parent node as the first item in the list so the user will be able to select it as a stand alone item:

enter image description here

Improve this answer
1
  • This case is in the question itself
    – Devin
    Jan 14, 2017 at 16:26

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.