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

share|improve this question

3 Answers 3

up vote 5 down vote accepted

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?

share|improve this answer
    
what is a checkbox tree ?? –  leora Mar 26 '11 at 11:29
    
Take your pick :) –  Vitaly Mijiritsky Mar 26 '11 at 11:59

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 :)

share|improve this answer

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

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.