what is the best UI for multiselect from a heirarchy of data

Question

i have a hierarchy of data and i need to create a UI to pick from this list. the data is structured something like an org chart where teams have parent teams.

team seven
team three
--team one
--team two
----team four
---------team seven

Somehow i want to show that some teams are "under" other team so instead of just having a list i thought of doing this:

team seven
team three
team three --> team one
team three --> team two
team three --> team two --> team four

but this gets pretty wide pretty quickly if there is a deep tree.

can someone give me some advice to create a multi select picker when there is lots of data and the data is in a heirarchy structure.

Answer 1

I think you answered your own question, right here:

but this gets pretty wide pretty quickly if there is a deep tree.

What you're looking for is a checkbox tree, no?

Answer 2

I think that something to take into account here is if the user knows the structure of the hierarchy and will only the use the controller to go to such teams and do something, or if the user will be navigating the structure until he finds the team he's looking for.

In the former it seems reasonable to use a structure similar to your first example because it is easier to get more directly to the team you're looking for. In the latter an structure as your last example would be better because it shows the user somewhat of a birds-eye view of the whole thing.

If you could provide some more info on how the users will be interacting with the controller, what do they know before hand, etc.. that would help a lot :)

Answer 3

I think you have two tasks:

• Display a tree.
• Make nodes checkable.

The last task should be easy. And for the first one, you have various possiblities, but each one has its own caveats. There are some nice samples and libraries in the web to explore them:

http://vis.stanford.edu/protovis/ex/ (scroll down to Hierarchies ) http://thejit.org/demos/ (specialized on trees and graphs)

I also want to invite you to have a look at my question. It is about dependency trees. Maybe you have some great ideas: Project dependency visualiztion and navigation