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?
leave everything as usual (left sided filtering everything opened) -> amazon.com
close all filters by default and create a "learnable" interface -> google.com
close all filters by default and rearrange the page to have them on right side of search results (not common, but content focused)
leave all filters open but put them on the right side of the results (not common, but content focused)
Answer
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.
No comments:
Post a Comment