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.

I'm just working on a quite complex interface. There are/will be tons of items in it and there is a massive search feature. Search is filterable just like on Ebay or Amazon etc. Filters are very complex (in fact different even by categories). There are even sorting and other functions above the search results.

Since there are many results we display 40 of them on one screen with thumbnail and additional informations (like Name, Owner…).

The usual place for such filter panels is on the left side of filtered objects. However I think that in this case (a lot of extra information) it might bother the user who just wants to browse through results. I think that a search term could be "well formed" enough to narrow the results for the first result page (especially if search engine is good enough at relevancy ordering).

The amount of information displayed is huge: at least 30 filter possibilities and even more variations (depending on filtered category) + sorting + >40 results (with item name, owner and more).

Most of members in my team think: "display every filter without the possibility of closing them on the left". This is the usual method (the position is very common, at least).

My point of view:

  • add the arrow to be able to close filter groups (and they are closed by default)
  • rearrange the whole pane to the right

I know, it's not a common arrangement… That's the biggest disadvantage of it. Still, you are able to focus on your main point: results.

Which one is better in this case?

  1. leave everything as usual (left sided filtering everything opened) -> amazon.com

  2. close all filters by default and create a "learnable" interface -> google.com

  3. close all filters by default and rearrange the page to have them on right side of search results (not common, but content focused)

  4. leave all filters open but put them on the right side of the results (not common, but content focused)

wireframe for filter panel placement

share|improve this question
    
Hi Csongor, it doesn't look like you have a specific question. Could you rephrase things so you have a question that can be directly answered? –  Rahul Jan 24 '12 at 15:05
    
Let's give it a try ;) –  Csongor Fabian Jan 24 '12 at 15:08
    
You are right Rahul - it's not a question that has an exact answer, it's problematic in terms of selecting the accepted answer because neither I know the right one : ) (if even there is an exact right one) - I'll try to do my best in selecting the most useful answer : ) –  Csongor Fabian Jan 24 '12 at 15:31
add comment

4 Answers

up vote 3 down vote accepted

Keep filters on the left side and make categories collapsible. It's the most common approach so doing it differently might confuse/disorient users. You might want to show some frequently-used options expanded and you can find out which ones those are by doing some user research & testing.

There are plenty of sites with complex filtering options (mostly online stores) here's how they do it:

LinkedIn
linkedin search filters
There're a few interesting things going on here. First, the search query is shown right above the filters with the option of searching again while keeping the filter selections. Second, some of the categories (namely Current company, Relationship, and Location) are displayed expanded (I've collapsed to reduce the screenshot's height). Third, the filters are used to promote the premium product by displaying additional filters that aren't available to free accounts.

Dell
dell search filters
Dell does a few things well and a few things poorly. The good elements are the option to refine the results, displaying the number of results to be shown when filtered, showing only the commonly used selections then adding View More, and highlighting On Sale filter. The bad choices are the triangle that usually means expand while there aren't sub-filters, using red color to signify categories (too much contrast), poor name choices for filter groups (Helpful Links and Shop by Price), and putting Related Links above the filters.

Amazon
amazon search filters amazon search filters
Amazon's filtering is more linear at first. If your search term spans multiple departments, Amazon offers to narrow it down and only then provides you with the more traditional filters, such as brand, price, and rating. Notice, that some filters are linear, such as shipping options and departments, while others allow for multiple choices, such as brands. In addition, there are also links What's this? next to some of the options explaining the terms & conditions.

Kayak
enter image description here kayak search filters
Kayak knows that the reason for using the service is to find the lowest ticket price so they show it next to each filter option and disable some options (namely Depart/Return, same airports). They also include an explanation to some options. Though the biggest fault is that no options are collapsible despite the list being long. In fact, Layover Airports and below are collapsed by default but can't be minimized once expanded.

share|improve this answer
    
Thanks for the very useful examples. It helps a lot: a combination of collapsing filter groups (default opened according the user's interaction) looks like the best option (leaving filters on the left side). Thanks again! –  Csongor Fabian Jan 25 '12 at 11:02
add comment

I vote for your option 2:

In usability tests I have done, users saw and used the filter methods more often when they were positioned at the top of the page. But most of them preferred not to use them at all.

Based on all the tests I have done, I generally advise against investing too much time and money in filter functionality. Especially when the items are easily scannable, people prefer to browse through a page of 100 results rather than trusting their filter abilities. They are afraid to miss something.

There is an A/B test of a tools shop that said the ctr is higher without filters: http://whichtestwon.com/uk-tool-centres-filer-test-results

share|improve this answer
add comment

This is what comes to my mind:

  • Only show the most common used or relevant filters and hide the rest (like Google serp for example)
  • Display the filters in a lightbox or an expandable box above the result and update the results with ajax. You could also use a result counter that automatically changes depending on the amount of products that fits the filter selections.
  • Minimize the size of the filters by using sliders, dropdown-autosuggest fields etc.
  • Display the filters to the left or above (in two or more columns to save space) the search results because it where most people will likely to find them.
share|improve this answer
add comment

I don't think that having filters on the left or the right really matters that much in terms of UX. However, you may want to keep in mind the users that have become accustom to going to the left side of the screen ever time they want to filter. Since there is no obvious advantage to putting the filters on the right I would vote in favor of consistency with the current design and leaving it on the left.

As far as collapsing the sections of filters, that should be immensely helpful if there are in fact as many filter options as you portray. Be cautious though that you don't create a situation where users are now collapsing and expanding sections searching for whatever filter they are trying to find. Perhaps the more relevant question would be, are that many filters really necessary, helpful or effective?

If you can imagine a design where you could accomplish the needs of your users while simplifying the excess of filters you should strive for that. Perhaps maybe the way the users are interacting with the filters could be more effectively accomplished though methods other than check boxes. Since I don't know the meaning of your filters I cannot say, but I would look into that more than just simply collapsing them.

Hope that helps!

share|improve this answer
    
Filters are very similar to those on ebay.com or alibaba.com - sometimes even more complicated as far as different goods have different properties depending on category. That's why if the search term is not "well formed" enough, there would be a huge number of filtering options. May we hope that users will define their search terms more exactly if the got to many results? If yes, then it's not a huge problem, still I think that "Content first" point of view suggests to put filters on the right side : ) Thanks anyway! –  Csongor Fabian Jan 24 '12 at 14:59
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.