7 Comments

  1. evan
    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.

    • Neil Turner
      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.

  2. Jason
    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?

    • Neil Turner
      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

  3. Steve
    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.

    • Byron
      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.

  4. Tim
    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 .