Why filter bars are better than left-hand filters
3 minutes read
You’re designing a search results page, or perhaps a listings page. There could be quite a lot of results coming back so some filters will be a good idea. But where do you put them? It’s a no brainier isn’t it? Filters always go on the left-hand side don’t they? Since the Internet big bang filters have always gone there. A thin strip of tiny checkboxes and hyperlinks squeezed within an inch of its life. Well I’m here to tell you that there is a better way. A more mobile and tablet friendly, more flexible, more useful and more elegant way to present filters. That better way is a filter bar.
What’s a filter bar?
A filter bar (or alternatively filter drawer) is simply a horizontal strip containing the different filter options. It’s usually shown above the results or listings (although sometimes below on mobile) and is often pinned to the page so that the filters are still available as the user scrolls. On selecting a filter option the associated filters are presented in a panel or overlay. Example filter bars can be seen on the Thomson holidays website and Atlassian’s JIRA (show below).
JIRA provides a filter bar for narrowing down search resultsHere are 5 reasons why a filter bar is a better design pattern to use than left-hand filters.
1. Filter bars allow the full page width to be utilised
As there is no longer a big fat left-hand filter panel taking up around a third of the page, the full width of the page can be utilised. Imagine what you could do with all that extra space? Bigger images, more information, cute cat gifs. Having the full width available is even more useful for mobile and tablet designs.
2. Filters can be available as the user scrolls
As a filter bar can be pinned to the page, filters can be made available as the user scrolls. The Thomson holiday search does this rather nicely on both desktop and mobile. Of course you can pin left-hand filters but this tends to get very tricky when the list gets taller than the page. Being able to make filters available all the time is especially useful for mobile and tablet as their supermodel-esque screen proportions invariably lead to longer pages.
3. Filter bars are more flexible
Filter bars provide much more flexibility when it comes to the UI components that can be utilised. For example, rather than just checkboxes and hyperlinks you might use sliders, tables and graphs. The Thomson board filter is a nice example of this, utilising a table to better present the available options.
Thomson uses the flexibility of the filter bar to better present board basis options4. Filter bars better showcase filters
By making the filters more prominent on the page and by making them available as the user scrolls a filter bar does a better job of showcasing filters. Presenting filters left to right also makes it very easy for users to quickly see what options are available.
5. Filter bars are more mobile and tablet friendly
Well-designed filter bars are more mobile and tablet friendly as they allow the full width of the page to be used and can be made available as the user scrolls. They are also more flexible when it comes to the UI components that can be utilised. You can easily present nice and big checkboxes, links and buttons that even the most fat fingered users can use with ease. Obviously on a mobile and tablet there is limited screen width available so it’s a good idea to show the most important filters and have a ‘More’ option listing any other filters in a drop down (see below).
A more option can be used to show all the available filter optionsBut won’t filter bars confuse users?
Filter bars have a number of user experience advantages over left-hand filters, but won’t they confuse the heck out of users? Well, that’s always a possibility, but most probably not. I’ve extensively usability tested designs featuring filter bars and users have consistently found them to be intuitive and easy to use. In one study I actually usability tested an existing left-hand filter design against a filter bar alternative, and users consistently preferred the filter bar design. Filter bars are also a well established design pattern. For example Microsoft Office has been using its tabbed ribbon to present available functions for a long time now.
The Microsoft Office ribbon is a very similar design pattern to filter barsAs with any significant design change you should always carry out usability testing to evaluate a new filter bar design and should also track and monitor its use once live (an A/B test with the current filter design is always a great idea). So try it out. Ditch those left-hand filters for a nice filter bar and make filtering search results and listings easier and more elegant for your users.
27th July 2015 @ 5:36 pm
A couple areas where left hand filters may be better:
– left hand filters show the user all of the filter options at once, and do not require them to click each dropdown to see. This means fewer steps / quicker interaction.
– left hand filters easily allow multiple selections via checkboxes if the user wants to choose multiple filters in a single category.
An example where I could see the left hand side filter being better is searching for flights. Perhaps I want to see all of the airports I can fly out of / land and easily toggle these.
Therefore, I would say it depends on the user’s focus and behavior to determine which type of filter to implement.
28th July 2015 @ 12:51 pm
Hi Evan,
I completely agree that there are situations where left hand filters might make more sense. As you rightly point out it depends on the context and the desirable user behaviour. Interestingly I’ve previously worked on flight websites and found during user testing that users are often baffled by the multiple of filters that many of the sites provide. Often it’s as much about keeping filters simple and intuitive, as to where to place them on the screen.
2nd November 2015 @ 2:53 pm
Thanks for the interesting article. I’m working on a project right now converting long vertical filter panel into neat filter bar. Do you see any advantages in placing the filter below the results listing, i.e. attached to the bottom of the browser window?
2nd November 2015 @ 3:33 pm
Hi Jason, it’s more usual to show a filter panel at the top but the bottom could also work. This certainly might be useful for mobile where the bottom of the screen is much easier to tap when holding a device. As with all designs I’d recommend user testing it to find out how well it works with users.
Neil
14th June 2016 @ 8:50 pm
Enterprise apps may be better suited to left hand filters. Especially when dealing with search results that you need to filter frequently like a stock photo site. It’s much easier to have a lot of options and users can get used to the large number of them if it’s something they are doing every day. We’ve found some solid results in our application supporting the left hand filters. However, we didn’t present another option. But they did generally like it.
8th August 2016 @ 3:22 pm
TL;DR Users may have preferred left-hand filters because they’re familiar with it even though they may have used a filter bar in the wild without realizing it.
We ran a preference test using static mockups comparing left-hand filters and a filter bar. Most users preferred left-hand filters primarily because they’re familiar with the pattern with some even saying “not to re-invent the wheel” with the filter bar. These users were tech-saavy adults in their 20s and 30s. This was a tool where the main users didn’t need to filter that much anyway as our single sign-on system allows us to pull relevant information and apply what we think to be the appropriate filters for most users. The ones that do need filters are the managers who need to be able to not only see their own projects, but the projects their team is working on as well.
I wished we could have tested this with prototypes instead of mockups, but we didn’t have the development resource to do both.
23rd April 2017 @ 9:52 pm
There are a lot of assumptions here that would need to be tested. In multiple apps we’ve found filter bars to be more useful with our target audience. Also there is some conflicting info presented here: in the opening you describe a “A thin strip of tiny checkboxes and hyperlinks squeezed within an inch of its life. ” then describe a them as “As there is no longer a big fat left-hand filter panel taking up around a third of the page, the full width of the page can be utilized.” You might want to pick your hyperbole. Why couldn’t you use sliders left hand filters? Why can’t left hand filters be available as the user scrolls? Also, why wouldn’t you be able to have a different style of filter for desktop vs mobile devices? You should be building what works best for the audience in each situation not what can carry over. That’s not design driven, that’s programming driven. Anyway, this is simple to do with good css. We’ve done it before on multiple occasions. Sorry but this article is peppered with hyperbole, (inconsistent hyperbole) , and lack of research as to what can and has been done with filters. I don’t have a problem with filter bars, just how examples were presented here. Either way or another way can work better for your audience and it’s best to do your user research and usability testing. I do agree with that .