8

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?

–

  • 1
    can you give us a bit more info and include a screen grab? because "I have 3 categories to choose from but the user must be able to select from 30+ categories in one go because of the user story." is very confusing – colmcq Oct 6 '14 at 12:31
  • 5
    "The client wants to have all the categories in one filter" - this seems to be your problem there. Clients frequently ask for something which will have a small gain (like saving screen space) without realizing the costs. The accepted pattern here is to have the filters separate - see for example Ravelry's advanced searches. Maybe you should just prototype the ugly, busy version which follows straight from his requirement, and the structured one (with multiple categories separated), and show him both. They are sometimes reasonable when they see the implementation. – Rumi P. Oct 6 '14 at 13:13
  • still stuck. Are there three filter controls? each filter is cat A categories etc? – colmcq Oct 6 '14 at 14:49
  • sorry it's not very clear. Each category at the moment has a filter control. Dogs, cats, birds. Dogs would have>> Chihuahua, golden, etc. – Rosie Oct 6 '14 at 15:00
  • Two Group B. Sample UI does not even display a Group. And every filter is Cat. Not clear. – paparazzo Oct 6 '14 at 16:11
1

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

enter image description here

1

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

enter image description here

Wrike

enter image description here

Slack

enter image description here

Hope that helps!

1

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

enter image description here

0

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.

0

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.

0

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.

0

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.

0

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!

-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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