Web UI design guidelines for selection from large hierarchy

Question

Problem at hand: How to present two large hierarchies in Web UI for computer-illiterate users that fill some kind of boring application form.

Use-case: User selects item "a" from hierarchy "A", then it selects item "b" from the (completely unrelated) hierarchy "B" and fills in a short free-form text to supplement his choice.

Both hierarchies have less than 10 levels in depth (usually - 5), but each level could be very wide (20,40,50,100 items).

So, drawing the whole "tree" and allowing user to "click it" is out of question. Gradual descent through the tree is possible, but: 1)there could be case with a user being lost/unsure where to navirate -> he would be forced to backtrack through different branches until he found what he is looking for 2)there is an issue with "wide subtrees" - they could be too wide to present them in one line or column on the screen.

Computer-literate users could be saved by the incremental search that would dynamically trim the tree (provided that UI would be speedy enough during the process).

Right now I'm struggling with users who are reluctant to abandon the mouse and press some keys.

Any ideas for me?

Answer 1

Think about how windows vista or windows 7 menu works. You open it, then click your "all programs" menu voice. The whole list of items changes with the new content.

Let's think about it multi level now. I present you a list of Level-1 items. You click one, the whole list changes with its child Level-2 items. Then your click an item, and again the whole list changes with its child Level-3 items, and so on.

Complement it with a Breadcrumbs navigation like: you're here -> Level-1-Item -> Level-2-Item - Level-3-Item -> and so on

Where any item in the breadcrumbs is clickable and can teleport you back to that level.

Add a quicksearch by keyword.

I can tell you, it's quite functional. I developed this component, based on Jquery and Ajax json calls and I use it on some web applications I'm working on.

If you're interested, I can send you the component with some example. I'm planning to make it opensource on my upcoming blog anyway.

Answer 2

One option would be to try an iPhone/iPod menu-style scrolling list. Although they're presented as menus, this Filament Group example shows one with a breadcrumb trail, and one with back-navigation. You'd probably want to implement this in some sort of vertically-scrollable div. The left/right sliding animation and breadcrumb trail provide some situational cues to the user. It's clear which choices are branches and which are leaves. There's no depth restriction. Plus, this navigation scheme will be familiar to anyone who's used an iPhone/iPod/iPad.

I'll bet this has been implemented somewhere. If I dig one up, I'll edit accordingly.