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:

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

up vote 12 down vote accepted

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

  • 2
    Miller columns... I'll be busting that term out casually next time I'm hanging with UI friends... hehe – Itumac Feb 13 '12 at 19:37
  • and if he wants more levels? – Xosler Feb 13 '12 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 '12 at 20:40
  • 1
    This is what I ended up implementing, and it works beautifully! – Brendon Dugan Mar 28 '12 at 13:43

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

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.

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Your Answer


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.