What is the best way to elegantly browse and select an item from a parent, child, or grandchild tree-structure?

Question

• they will select only one item
• the items in this case will be sporting activities
• the levels go from general to specific…..ex: biking (parent) > mountain biking (child) > downhill mountain biking (grandchild)
• they would be able to select an activity on any level, but want to encourage them to be specific when selecting an activity

Basically we want users to easily find any item on any level as easily as possible. We think having users drill-into and out-of folders and sub-folders is clunky. One idea is to have a search field with auto-suggest. The drawback here is users won't be exposed to all the items we have to offer (which we want). anybody have any ideas or examples they can share?

Answer 1

I would have a drilldown like this (not sure what the exact name for the pattern is) where the user would select from a list of sports. I would display as a autocomplete select box, where the user can either see the whole list of sports or start typing a sport to be given options.

Then once that is selected I would display the child sports, I am guessing this list won't be that long so there will be affordance to display the whole list. The user can continue to drill down until there are no more levels or they can click the "select" button to open this sport on any level. This button should be displayed relative to the active list (e.g. If the 2nd list was active (mountain biking, road biking) display the select button under this)

Answer 2

I'd suggest showing the top level of the tree, with a search box ie:

Search: [_____________]

+ Biking
+ Surfing

The user can either drill into the tree here or search, searching for bik would then appear as below:

Search: [Bik__________]

Biking
  Mountain biking
    Downhill mountain biking
Surfing
  Surf biking

ie you show the matches and the route to root, maintaining the original structure you showed them. You could also keep the full child list for an expanded node but greyed out in case they were searching for Biking but want velodrome riding or something?

Not sure exactly how well this would work out for you but I've liked this approach in places before and no one else seemed to be offering it as a solution.

Answer 3

I encountered a very similar problem this week. My favourite idea so far allows people to browse the items if they want, but makes it easy to search for items and encourages them to select the most specific one.

1. Initially display the entire structure as a tree, with all levels expanded. (Allows people to browse all the entries.)
2. Put a "Search" input box at the top.
3. When any text is entered in the search box, adjust the list to show only those entries whose name, or parent's name, or grandparent's name, contains the text. (Allows people to easily show all entries of interest.)
4. Display entries from most specific to least specific. (Encourages people to choose the most specific activity.)
5. People must click an item to select it.

So the initial view looks like this:

Search: [_____________]

Biking
   Tricycling
   Unicycling
   Mountain biking
      Extreme cycling
Surfing
   Longboard
   Surf biking

Then typing bik in the search box changes the display to this:

Search: [bik__________]

Extreme cycling
Tricycling
Unicycling
Mountain biking
Surf biking
Biking