2

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?

5 Answers 5

3

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

4
  • Yes this could be one way, though then it requires deciding what filters to include upfront.
    – Kartik G
    Commented Aug 25, 2011 at 7:34
  • 1
    @Kartik G: the most common filter is usually a no-brainer uber-textbox that will search on all criterias, like Google search. For the common case, the user shouldn't need to think which filter they should use.
    – Lie Ryan
    Commented Aug 25, 2011 at 12:23
  • Great point there about not making the user think too much about filters.
    – Kartik G
    Commented Aug 31, 2011 at 3:57
  • @KartikG, making those decisions is a part of our responsibility and our role
    – Dvir Adler
    Commented Jan 29, 2018 at 18:50
6

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:

enter image description here

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 :)

5
  • appreciate your time and effort in visualizing an alternative. Would this work when each filter (field) has predefined options from which the user has to select one or more options?
    – Kartik G
    Commented Aug 25, 2011 at 7:40
  • Hi Kartik, this still need some time of brain to be well defined but I guess it will work, as you are displaying the input in a layer you can add there whatever you need (dropdown menu with predefinied options, multiselect, checkbox select...) Another thing I guess need to be added is an option to edit / delete next to the selected criteria to allow user to easily change or delete it. :)
    – Kulyn
    Commented Aug 25, 2011 at 7:51
  • +1 Though I do hope I can click the tick? So I can change the value to search for? Commented Aug 25, 2011 at 7:57
  • Cool way to solve this Marjan, then maybe we need to clarify by using a differente icon which clarely say "ey click to edit guy" :) Thanks!
    – Kulyn
    Commented Aug 25, 2011 at 8:04
  • Now I want to be able to search for tall authors.
    – aslum
    Commented Feb 22, 2012 at 20:31
3

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.

enter image description here

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.

enter image description here

0

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.

0

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.

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.