Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm wondering what is considered "best practice" for displaying hierarchical lists that allow selection in a web app. In this case, we're presenting users with the option to select n counties per state. We've explored options such as a tree view:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

While the presentation is workable, there aren't any decent pre-rolled solutions that we've found available for this.

We've also thought about multiple list boxes, like this:

mockup

download bmml source

We're stumped. The tree view option raises concerns about complexity of implementation if there's not a pre-rolled solution we can use. The multi-list option is confusing to us as developers and so it would presumably be to users.

What, if any, best practices are there around this kind of situation? How might you display this hierarchical list of options?

share|improve this question

1 Answer 1

up vote 5 down vote accepted

I don't see a big difference in difficulty of implementation between the two models you describe but this ins't an implementation discussion.

Only people with much more information about the project can determine whether the extra cost of implementation to achieve greater usability will pay off. My initial reaction (and that of most people here I think) is "of course it will", but I don't know enough about the project.

Of the 2 models you describe model 1 looks clearly more usable. And it looks like it's a hierarchy with a depth of exactly 2, which makes it easier. Here's one alternative which suggests the hierarchy to those that might not be familiar with the indentation hierarchy indicator:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I think the behavior you describe of checking the state causing all counties to be checked, and the unchecking some counties causing the half-check (3 state checkbox) is probably good. It's not that conventional on the web but I think the meaning/behavior is easy enough for users to figure out. Here's more on 3 state checkboxes (or tri-state checkboxes):

Are tri-state checkboxes too complicated?

Tri-state checkbox: Which state should be selected after clicking?

(If tri-state checkboxes are the implementation difficulty you mentioned search for "javascript tri-state checkboxes", it looks like there might be some already made.)

I suggest usability testing on it (the 3-state checkbox behavior) if you can afford it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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