Product Filters and Designing for Ease of Use

Cover photo by Michael Olsen on Unsplash with collage elements.

Vitaly Friedman over at Smashing Magazine recently wrote an excellent article about broken product filters and the ways in which we can improve them. Often the frustration we feel while using these systems is compartmentalized because we’ve become so accustomed to the bad design. The erratic behavior of filters becomes expected.

Friedman makes a compelling argument for improving filters – and gives a roadmap for how to go about it. Filtering is everywhere but it doesn’t have to be frustrating.

What is a Filter?

We can define a filter as a way to sort and limit data. A filter takes a database and uses user defined parameters to remove unwanted data and show relevant data. There are many uses for filtering content but generally people are most familiar with product filters.

Amazon product filters are probably the most widely used example of filters. You can sort products by star rating, price, condition, availability, brands, deals and more. You will also find filters on flight booking websites, hotel booking portals, and other e-commerce stores. Filters are everywhere. And a lot of them have problems.

Friedman’s article is a must read for those interested in UI/UX design, but I’ll summarize his main points, the problems with filters and the solutions Friedman suggests, in the following sections.

Difficult to Hit “Comfortable Range”: Filtering can either leave a user with too many results or no results at all. A user may feel overwhelmed if there are too many results after applying a filter. On the other hand, a user may abandon the site completely if they don’t get any results at all. The solution is to eliminate roadblocks to hitting the comfortable range – which entails UX and UI design that make filter use smooth and intuitive.

Tiny Scroll Panes: Often a website will have their filters in a small section to the right or left of the page. The size of the filter pane has a direct effect on a user’s ability to accurately and easily click a filter. The solution is to present fewer options initially and give the user a larger scroll pane (along with autocomplete search results and popular options).

Difficult to Use Sliders: Sliders can be too loose with input. Dragging a slider requires precise input and the user might miss the value that they’re aiming for. The solution is to use sliders appropriate, add plus or minus button steppers for incremental jumps, use visual aids where you can, and allow for custom field input boxes.

Auto-scrolling Users: Filters often take input, apply the filter, and then refresh the page to show results. This is disorienting to the user and makes selecting more filters difficult. A solution is to freeze the filter panel after user input and make it clear that the results are being updated.

Freezing the UI: The solution above is not ideal. Freezing the UI slows down a customer. A better solution is to remove the results from the the filter panel so that they load asynchronously. When a user applies a filter the results should refresh but the filter panel remains in its current state.

Layout Shifts when Applying Filters: When a filter is applied some websites will change the placement or size of the filter area. The filter pane should remain logically consistent so that the user doesn’t need to hunt to perform their next input. Active, applied filters can be placed elsewhere on the page to avoid layout shifts.

No Feedback on Available Results: Some websites do not inform the user that a particular set of filters will have no matches. This causes frustration in the user – which inputs do I need to remove or add to get the results I want? Avoid this by giving the user a count of how many results will display.

Mobile Product Filters that Split the Screen: Filters on mobile exist in a tiny space that doesn’t leave much room for real-time results. This leads UI designers to split the screen so that filters are in one area and the products list is in another. Friedman suggests that we do away with the split altogether. There isn’t enough space to show both the results and the filters in a meaningful way. He suggests we try seeing if overlaying the filters works better.

Conclusions

Friedman finishes his article with a handy checklist for UI/UX designers to reference when designing filters. His suggestions are so reasonable and clear that they seem obvious. But I think that’s because we’ve grown so accustomed to bad product filtering interfaces. Struggling with them is what we’ve come to expect.

Hopefully, with these suggestions in mind, we can build more user friendly filters in the future.