Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

5 Answers

up vote 3 down vote accepted

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

share|improve this answer
    
Yes this could be one way, though then it requires deciding what filters to include upfront. –  Kartik G Aug 25 '11 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 Aug 25 '11 at 12:23
    
Great point there about not making the user think too much about filters. –  Kartik G Aug 31 '11 at 3:57
add comment

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

share|improve this answer
    
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 Aug 25 '11 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 Aug 25 '11 at 7:51
    
+1 Though I do hope I can click the tick? So I can change the value to search for? –  Marjan Venema Aug 25 '11 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 Aug 25 '11 at 8:04
    
Now I want to be able to search for tall authors. –  aslum Feb 22 '12 at 20:31
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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