What's the best way to display a hierarchical category list with a preview?

Question

I am working on a site designed to display data organized into hierarchical categories. We are looking for the best way to display these categories so as to show the user a large amount of information in as few clicks as possible.

Some requirements:

1. Category list is an arbitrary number of levels deep but we only need to display two levels down on any given page - i.e., if we're on a page for a level 2 category we want to show its children and its grandchildren.
2. Arbitrary number of children and grandchildren in any given category but only the first ~10 children and ~3 grandchildren for each child need to be displayed initially; the rest can be hidden and expanded/collapsed.
3. Any "leaf node" child category (i.e., one which contains no grandchildren) has content which must be shown in the list as well, but can be excerpted.
4. Hovering over a category (or clicking on a "preview" link next to it) will bring up a preview panel which shows some of that category's content so a user can see the most important information for that category without navigating away from the current page.

Most everything else is up in the air - e.g., whether the preview activates via hover or click; whether it's a tooltip or static element, etc.

Here is one candidate we're working on. In this example, the user is hovering over, or has clicked on, "Iceberg Lettuce". "Grains" is a leaf node with excerpted content displayed. The "23 More" and "Collapse" expand or collapse the lists of grandchildren.

Any of you have experience implementing something like this? Any suggestions are mightily welcomed. :)

Answer 1

I can think of a couple of suggestions (which you may or may not like, I'd welcome constructive feedback), but most of these could be used in combination, so see what you think:

1. Display the category description on the onhover event of the category title (though this won't work for touch devices).
2. Display a bit of text next to the category name to indicate the number of sub-categories:
   Fruits (23 sub-categories)
3. Add a drop-down indicator next to the category name and displays a grid-like menu of sub-categories (multi-column), this is basically a multi-column menu that scales to a far large list than a standard menu.
4. Use a button-like expand/collapse indicator, but place it, say, to the left of the category name, then the user doesn't have to scan the sub-categories to find the expand/collapse button (as in your current example), because it's always in the same place. Text and/or an image could be used (with the text displaying the number of sub-categories) for this:
   #23 Fruits

Some of these (especially if used in combination) could made the category headers look quite busy, it depends on what you think is the most useful information for the users and things like how long your category descriptions are.

Answer 2

I would recommend a layout like this where you show some of the content at the beginning and clicking on view more the other columns get totally collapsed and the only the selected column is fully exapanded. The number next to the view more mentions how many items are there in the category.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

Number of clicks is not usability. What you want is time on task and error counts. If it takes longer for a user to visually identify where he wants to click (this is typically a lengthy task) then you lose. If it is fast but 90% of the time the user ends up at the wrong place, you lose. Amazon has found a very good way to do this, backed by millions of dollars and with billions of dollars in revenue in the balance. I would copy their model, even if it means one more click.

Plus doing a hierarchical navigation means that you can save pixels, air your designs for pointing efficiency and aesthetics. It also is likely to help your user understand the information architecture of the site on the long term.