How to create a good filtering and sorting system when there are 30+ options to choose from

Question

I have ~30 categories grouped into 3 groups. Each group contains about 10-15 categories.

Group A

• Category 01
• Category 02
• …

Group B

• Category 11
• Category 12
• …

Group C

• Category 21
• Category 22
• …

User story

• Users can select many categories from any group. It wouldn’t be an OR filtering, but an AND one.
• This is an internal app and most of the time they will have something in mind that they want to filter by. They are returning users that are very familiar with the data.
• A search bar is required.

The original page is a bit like a Excel sheet where you have 3 columns and the headers have a dropdown that shows you the categories and you can search from there.

The client wants to have all the categories in one filter but then by having all the categories in the dropdown it looks very busy and it doesn’t work so well on mobile.

I was wondering if there is a technique that would work better with this use case?

Answer 1

Maybe it is possible to display all categories at once. Or make the grouping for faster overview of all the elements.

Answer 2

If you only need to provide complex filtering for power users, consider building it into a search tool. It'll be a much simpler experience for those who don't need it--and more powerful for those who do.

Some examples...

Gmail

Wrike

Slack

Hope that helps!

Answer 3

I would avoid drop lists all together as they do not disclose the options at a glance. Instead, this I would opt for this solution which has the following advantages-

1. it is a well established pattern in the e-commerce world
2. exposes the hierarchy of the category system and taxonomy
3. enables quick navigation to the relevant categories and sub categories
4. separates the filtering from the display to save space on small monitors

Answer 4

I'm not sure that a look ahead is the most usable and fast solution. I think if you only have 10 items in each cat you can easily have this as a drop down list. So my solution is have three drop down menus.

Answer 5

I have a similar issue I'm working on at the moment.

Is there anything you can do to predict preset/popular views? i.e.

View 1 shows columns X, Y, Z View 2 shows columns A, B, C etc or Show All Dogs Show All Cats

There comes a time when it's best to let the user download it and do their work on Excel rather make the interface too complicated to work on.

Answer 6

You could go with your design but I have following suggestion for add on:-

• You could show a search bar with options like CAT A, CAT B, CAT C which are your categories.
• Now As user will select one of the above categories then you could show a one more search bar just below your previous bar which would be showing all option's related to the category selected above.

So this way user would be able to follow your flow and design wise it would look good. Also your "AND" operation could be performed.

Answer 7

It sounds like the users know what they are looking for so the idea of having to add filters that in-turn also have filters seems unnecessary. For example, if a user knows they want to see Chihuahuas, a parakeet, and tabby cat only. They shouldn't have to first add the dogs group, then filter to the type of dog, add the bird group, then filter to that type of bird, add the cat group then, filter to that type of cat.

It sounds like a simple typeahead field with dismissible pills for each filter would work. You could even have the typeahead have a dropdown when clicked that shows the top 5 or so most common searches/filters if the data suggests there might be a need for that. Once the user starts typing obviously the results would change based on what they are looking for. One search to rule them all, no long dropdown. There is a pretty good type of select/dropdown field type called Select2 that you might be able to implement.

If you are unsure of how they are currently using your product you could: 1. Watch some users use the dropdowns as they currently exist to see if you can gain anything from that. 2. Check analytics to see if there are common searches/filters that stick out. 3. Mock up your ideas, make them clickable with a prototyping program (Invision, balsamiq are pretty easy) then give some users the scenario you are trying to solve for and see how the do. usertesting.com is a good site if you don't have access to users easily.

Answer 8

I’m making some assumptions here that might be wrong, so feel free to interpret my thoughts as they fit reality.

1. It sounds like your users are power users: They know what filters there are, and they know what filters they want to use prior to viewing the list.

2. It sounds like "mobile" is an important aspect.

3. It sounds like the available filters will not change very often, but largely stay the same.

Based on those assumptions – without knowing anything about the surrounding interface and other aspects that might point towards other solutions – I would suggest a simple clickable list that toggles each filter on/off, because …

• The options will stay in the same place, making it easy for returning users to find them
• Selecting multiple options takes nothing more than an extra click/tap each (which is less effort than starting to type and hitting enter, and MUCH less effort than anything else on a mobile device)

If your users are really power users, you could maybe reduce the options to color-coded icons they will recognize after some learning, which could make the display a lot more compact than text.

If your users are ridiculous power-users you could even have keyboard shortcuts for the most frequently used (or all) filters.

Hope that helps at all!

Answer 9

Check out Google Analytics and ExtJS. Both of them solve the multiple filters problem. See especially the size column here: http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#grid-filtering