Extensive filtering on search results page

Question

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 information (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 the 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 the members of 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 the 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)

Answer 1

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

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 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'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

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.

Answer 2

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!

Answer 3

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.

Answer 4

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