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