Why filter bars are better than left-hand filters
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).
Here 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.
4. 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).
But 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.
As 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.
- UI Patterns For Mobile Apps: Search, Sort And Filter (Smashing Magazine)
- UX Flows: How to Help Users Search for What They Need on Your Site (Digital telepathy)
- Live filter design pattern (UI patterns)