6

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.

enter image description here

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. enter image description here

The issues

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.

Thanks

enter image description here

Improve this question
2
  • What does the 'anywhere in particular' drop-down do?
    – tohster
    Commented Mar 16, 2015 at 15:39
  • it shows the next level of locations within "warehouse C"
    – Raphaëlle M
    Commented Mar 17, 2015 at 9:57

2 Answers 2

Reset to default
2

I've come up with a different way of doing this:

enter image description here

I'm basically showing an already filtered list of locations. Since there is already a default location which is selected, I'm displaying it at the top of my list which is filtered with the 2 first levels of hiearchy.

The default location is "Front office - HR Office" which is within the Ground floor of Warehouse C, therefore those 2 filters are selected.

Instead of presenting the filters like things I can add or remove, I prefer to show them as a classic drop down menu.

If I was to change "Warehouse C" in the first filter to something else, the second drop-down will update to show locations within the new one chosen.

It's hard to explain, I hope this is making sense!

Improve this answer
1
  • I like this better than your original. I usually try to avoid having scrollable bits within a (scrollable) page. Showing both levels of filter as drop-downs avoids that.
    – Ken Mohnkern
    Commented Jun 15, 2015 at 18:17
2

Your problem could be solved using the Breadcrumb method. Combined with a dropdown list and auto-complete input box if you have a long list. Here is what I mean.

enter image description here

and the result will be shown as the following

enter image description here

The second pulldown list is filtered from the first list and the third one is filtered from the second one. I mean nothing will show in the second list that is not related to the first one and nothing will show on the third list that is not related to the second and first list.

If you want to filter by the building and the location you can drop the second list, some example may include and [X] in the breadcrumb item could be droped lit the sample below.

The World > USA > Restaurants > Fast Food Restaurants

this filter will show all fast-food restaurants in the USA but if you want all fast-food restaurants in the whole world .. you way drop USA by and [X] beside it

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.