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