On the web interface I'm working on, the user has to pick an item from a long list. They may or may not know what they are looking for.
In the database, this list is organised in a hierarchical way, but the list will be flat: all levels will be displayed side by side.
I'd like to help the user find what they want by including some filters which show that hierarchy.
Here is what I had in mind :
1) The first level of the hierarchy is displayed on the left. The user may choose one of the items to narrow down the list on the right.
2) Once the user has chosen a filter, they can go further by choosing the second level of filtering. On the left-hand side, they can ever remove the filter they have just applied or apply a new one which is one level deeper in the hierarchy. This could go on for a few more levels.
The problem I have is that I found out that the list of the first level hierarchy can be very long. So it doesn't seem right to display it on the side as filters as I did. I need some kind of drop-down or scrollable list and I really don't like this idea.
Another issue I have is that I need a location to be selected by default.
What I've come up with so far is this below. I'm not happy with it though. As you can see there is a scrollable list and the first item is selected by default. Because it's selected I'm showing a drop-down for the level below that selection.
Do you have any better idea? I feel like this is not user-friendly at all.