How to accomodate a large set of filter controls horizontally on a page?

Question

Since the left column is occupied by the left navigation, this leaves only the middle area for placing filter controls. But there is a need to provide for more filtering options in future. In such a scenario, how to accommodate the filter controls in the limited area? Is it advisable to use a scroll (vertical/horizontal) or a chevron or something else?

Answer 1

Hide all but 2-3 most common filter options, and put an advanced filtering option on a separate page.

Answer 2

I guess Ryan option will be fine if the search is not the main feature on the site, let me explain.

The point is that in order to plannify the best way to display the filters you need to think on user behaviour...

• If the main feature on the page is search and users will need to search frecuently and using several filters to hide some of them is not a good idea, user will need to have filters visible and handly because they need to now wich criteria are available to add. In this event you need to find a way to display all filters together.

  Also I do not recommend use scroll on filters area, if a user select something on an input and then scroll down and the input is not visible he will need to scroll up and down (or left and right) in order to see what he is writting... this may make them goes crazy.

I've being thinking on how to gain space without scroll neither advanced search option and I have a "crazy" idea... I add here a mockup of the different steps:

This need a deep analisys but I guess it will be a cool way to display a search tool, anyway if you plan to use it I suggest to create a detailed prototype and test in deep before adding it to the final product.

• If the search is going to be done not so frequently and it's not the main feature on the page you may try to define main filters and keep visible just 2 or 3 and hide others on the advanced filters layer. In this event the solution suggested by Lie may be good (ie: http://awesomescreenshot.com/076j64ff2)

Hope this may help you :)

Answer 3

For a feature rich implementation of faceted search and navigation, see [http:// mspace.fm/](http:// mspace.fm/) and try the demo button at top right.

Here they have a very dynamic horizontal faceted search facility where you can pick and choose from a variety of categories to show initially or for the user to switch around. You could choose the most likely core facets to start with.

Answer 4

First up you need to think about your minimal case, that is users using only 1 filter. For this the search section must be a UI that most users are used to already (like the google search ui). Only then we evolve the idea and provide controls for multiple filters.

Below,

• Click on add 'another filter' and you can select from the criteria like 'name,gender,age'
• Based on the selection we provide either a text/dropdown field.

Here, you are not restricted by the number of filters (it'l just be a longer drop down list) and the scroll significantly increases only when the users have a LOT of filters in place.

additionally, a checkbox to temporarily disable a filter and search.

Answer 5

I am looking into having all my filter criteria in a page-wide accordion. It would open when they click it and then show all my criteria then they can also close it once they select their criteria. The selection auto-filters the data.