Which implementation for a dynamic hierarchy tree will show as much info as possible while still allow seeing the changes made in the background?

Question

I'm in the middle of building a search engine website for a specific corpus.

We've already implemented most of the menus and the structure of the website. recently we got some feedback that forced us to implement a feature that we haven't thought about.

We are looking for a way to create a new filter in our results page. this filter will allow users to choose "categories" to filter the search results. this categories filter will display about 8 root categories which have many sub-categories, which have few more sub-categories, there are about 5 levels (sometimes the lowest levels may have sub children).

Here are the categories (which are basically classifications): you can play with the different levels - click on "A", see that it has the title "HUMAN NECESSITIES", then click "A01", it has the text "AGRICULTURE; FORESTRY; ANIMAL HUSBANDRY; HUNTING; TRAPPING; FISHING", under "A01" you can see that there are many more sub-classes ("A01B", "A01C", "A01D" etc') that have more sub-classes under. each class has a "title" which I also want to display.

As you can see, at any time the user can go back to the upper level and basically know where he is in the path.

A search may return results from different classifications. I want the users to be able to filter results by classifications. at first, I plan to show the root classifications related to the search results on the main results page with a count of the results under that classification (I still don't know where it will shown in the page). each result is linked to a sub-sub-classification, each result may be linked to several sub-classifications.

After a user performs a search we will gather and display all the root classifications related to that search with the number of results under each class. the user will be able to choose a classification, then he will be able to choose it's sub and so on while still maintaining the path.

The link above shows a solution that we can't use, it takes too much space and we want to dynamically refresh the results set on every click, narrowing down (filtering) the results, so whenever a user click or "goes into" a sub class he will be able to see the change on the results page.

My thoughts

In my imagination I think of a semi-transparent rectangle that "floats" on top of the results, it can be dragged any where on the screen, it has a 50% transparency and when clicking on a class it will open a list of sub-classes, then collapse the upper levels so the user will be able to go back.

The problem is that titles can be very long and the path can be too deep to show on one screen while still be able to see and interact with the results (there are several functionalities for each result on the results page).

The solution that comes to my head for the titles problem is that titles may be shown as a 'tooltip' on mouse over, but the fact that tooltips are only shown when hovering on a class it may be difficult to remember which title corresponds to the matching class.

what am I looking for?

• a compact solution
• clean responsive interface (let people know that the "box" is responsive)
• allow users to navigate easily thru the tree (see the whole path)
• display the titles
• show the results changing dynamically in the results block
• the ability to choose 2 root nodes and walk into them in parallel (nice to have, not a must)

Here is a wireframe of the website:

This is how I imagine it:

The problems:

• how to show the sub-classes but keep the box's size rational?
• after the user clicks on one of the classes, where should we display the sub-classes list? (under the father node? or on the right?)
• the users should be able to see the results updated after each filter selection

Is that the right solution?

My hope is that I will be able to use an already developed library and customise it to my needs.

Answer 1

You say:

the link above shows a solution that we can't use, it takes too much space and we want to dynamically refresh the results set on every click, narrowing down (filtering) the results, so whenever a user click or "goes into" a sub class he will be able to see the change on the results page.

I see it differently. You already have a working navigation scheme that fulfills your requirements: the titles are shown and the path is traceable. Don't make it more complicated by adding an extra filter section and overlay windows. To my mind, you only need to place the search box above the navigation scheme. Once the user has entered a search term, the navigation tree should be filtered by removing entries not included in the search results. You can further support the user in browsing the search results:

• show the number of hits next to each class, subclass etc.
• automatically scroll to the class or subclass with the most (or most relevant) hits
• automatically expand the class or subclass with the most hits

This way you can reuse one interface for two different user goals:

• the manual investigation of the class hierarchy, that can be performed by expanding and collapsing classes
• the automatic reduction of the class hierarchy according to the search term.

This makes the site easier to use and you avoid a redundant presentation of information. However, your design should make it clear for the user that search box and navigation tree are not independent from each other. For example, it should be indicated that the user has to clear the search box in some way in order to see the complete class hierarchy again.