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?

Improve this question

3 Answers 3

Reset to default
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).

Improve this answer
4
  • 2
    Miller columns... I'll be busting that term out casually next time I'm hanging with UI friends... hehe Commented Feb 13, 2012 at 19:37
  • and if he wants more levels? Commented 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. Commented Feb 13, 2012 at 20:40
  • 1
    This is what I ended up implementing, and it works beautifully! Commented 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 ...

Improve this answer
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.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.