11

I have created a hierarchical data set which I use to store a tree of regions. I want users to be able to add new nodes onto the tree, but I am having a hard time thinking of a very user friendly way to allow the user select the parent node they want to add a child to without having to either:

  • Scroll through the entire list
  • Click to expand all levels of the tree until they find the one they want (there is no limit technically to how deep this tree can go)
  • use some clunky combination of drop-down select boxes to choose the appropriate parent node

Here is a sample of my data, the actual data will contain a ton of information about locations worldwide:

Earth
- North America
- - United States of America
- - - Alabama
- - - - Montgomery
- - - - Birmingham
- - - Alaska
- - - - Juneau
- - - - Anchorage
- - - Arizona
- - - - Phoenix
- - - Arkansas
- - - - Little Rock
- - - California
- - - - Sacramento
- - - - Los Angeles
- - - Colorado
- - - - Denver
- - - Connecticut
- - - - Hartford
- - - - Bridgeport
...
- - Canada
- - Mexico
- South America
- - Argentina
- - - Buenos Aires
- - Bolivia
- - - La Paz; Sucre
- - Brazil
- - - Brasilia
- - Chile
- - - Santiago
...

Any Ideas?

3 Answers 3

13

When your hierarchy is so large, there's no way to avoid clunkiness because it's there by design (large data sets are unwieldy). Miller columns with an "add" button on the bottom will be the most elegant solution here. They allow you to have as many hierarchical levels as possible while making selection process simple because they clearly separate the levels. So your interaction will look something like this:

enter image description here

If you have space limitations (either horizontally or vertically) you can add the respective scroll-bars to accommodate for additional nodes (vertical) or levels (horizontal).

4
  • 2
    Miller columns... I'll be busting that term out casually next time I'm hanging with UI friends... hehe
    – Itumac
    Feb 13, 2012 at 19:37
  • and if he wants more levels?
    – Xosler
    Feb 13, 2012 at 20:22
  • This system is already messy (at least 6 levels). Making it deeper will increase the trouble but if they so desire another button "Add level" placed to the right of the list will do the trick.
    – dnbrv
    Feb 13, 2012 at 20:40
  • 1
    This is what I ended up implementing, and it works beautifully! Mar 28, 2012 at 13:43
2

Just throwing an alternative out there - Perhaps you could take an interactive graphical approach - something like Google maps.

So at the top level, you have your map of the world - you could click on a continent to snap-zoom in or you can smoothly thumbwheel in to the point under the cursor.

So if you clicked on North America, the next level of view shows all the countries in North America and you can click on Canada, USA or Mexico.

If you scrolled in to the point under the mouse then Continent names fade out and Canada, USA or Mexico fade in as you scroll and you can adjust your mouse position to be over your target and just keep zooming in - just as you would on Google maps.

Maybe you could already have locations already there rather than having to add country and state and city etc, but where there are already entries under that hierarchy, highlight them, perhaps by showing existing entries with markers (clustering multiple markers into a different marker symbol).

So when you reach a level where you want to add an entry you just stop zooming, click 'Add New' or 'Add item to USA', and then drag a marker to a location and maybe enter some detials to create instant metadata.

So really it's quite like adding a place (YouTube) on Google maps or using Google Map Maker then ...

0

The only solution that I can think of that supports unknown depth of the tree would be to try an auto completing text box which would allow the user to jump to, or possibly filter out nodes that don't match the value of the text box.

So for example if the user wants to add a new item to Alaska they would type into the text box Alaska which would filter the displayed tree to just show Alaska and its child-nodes. Along the way, when the user had entered Al it would show Alabama and Alaska collapsed.

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.