Find a Needle in the Hay: Best Practices for Filtering UI Design.

The ultimate list of things to know if you want to add search filters to your product

A UI designer’s biggest job is communication.

With today’s computing, our products can deliver millions of bits of information to the users. Making that information accessible and letting our users navigate it the way they prefer is the essence of UI design.

One of the best crutches we have for efficient communication with our users is filters. Designing filters is all about ensuring the users can get exactly what they want, with minimal browsing.

In this article, I’ll talk about what search filters are, when they are necessary, how to choose which filters to add, discuss sidebars vs horizontal toolbars, and talk about the general best practices when designing a filtering UI system.

When you should add search filters

As any design decision, adding search filters will not be useful for every single product. If you’re designing for a one-feature app, for example, or there is simply no data to be sorted, you can safely skip this article.

Use this as a rule of thumb: if you have a lot of content which has obvious traits (price, media type, size, color, etc.) — then filtering is for you.

If, on the other hand, your content is difficult to categorize, or when you have very little content overall, or when it’s simply easier to structure your content as a hierarchy — skip filtering.

However, thanks to the prodigious advancements in computing power, many apps give their users a lot of data to navigate. From online clothing stores to e-book reading apps, an average user has to sort through many libraries’ worth of catalogues.

Therefore, knowing the best practices for filtering might end up being useful even for the designers that don’t need to know much about filtering at the moment.

Search filters = excluding information

First things first: adding search filters to your project is about excluding information, not adding it.

Even though using filters may end up looking like “adding” certain lines or checkmarks, filters essentially signal which information “not” to include out of the initial set of data.

Now, some products make a mistake of not providing you with any information until you specify the filters you want applied. While sometimes that’s unavoidable, it’s a pretty important UX no-no, as it forces your user to make a huge design decision before they properly see what kind of results they can get from you.

This is why, instead, you should start off with all of the information collected in one place, and then provide the filters to shave off all of the unnecessary data, until all that the user’s left with is the exact match to their query.

Pro tip: not all users are pros. Most won’t know exactly what they want to see — your filters will double as hints about products for those users.

For example, a non-techie user might be buying a graphics card without having all of the necessary know-how. When you as a designer add the “cooling type” as a filter to the product section, you are effectively telling your user that there is such a criterion, and help them make a more informed choice overall.

With the right filtering structure, you can make even the most newbie of your clients feel like an expert. If we look at filters from this angle, then having a robust and precise filtering system could function as one of the biggest reasons to use a particular service instead of some other.

Search filters are about meaningful choices

This is where we need to take a step back and see what filtering options are within the structure of our product.

Let’s take Dan Brown’s framework for information architecture and apply it here. Filtering as a concept fulfills two principles at once:

• Principle of choices — meaning when a user has a particular task, we should provide a bunch of meaningful choices for them to handle it.
• Principle of multiple classification — meaning we should give our users an opportunity to go about browsing our content in different ways.

This means that, as we’re designing our filtering system, we need to always keep in mind that filters should: a) provide meaningful choices; and b) let the user browse how they want.

Pro tip: keep in mind Dan Brown’s principle of growth! It’s very helpful to presume that the content you currently have is only a portion of the content you’re going to have in the future.

This means that if you only have enough content to justify three filters, leave more space and opportunities to add more, as your website will keep growing and will need an ever-larger search filtering.

In this context, the sometimes-praised horizontal toolbar would not make for a great substitute for a traditional sidebar, since having dozens of buttons and icons arranged horizontally will obviously end up quite exhausting.

Whatever type of toolbar you end up choosing, remember that as your content grows, you will need to save space and “hide” some filters, while having others immediately available. This is where you’ll need to do some testing and figure out the most important filters for each iteration of your filtering UI.

Choosing the right filters

Make them meaningful and make the results readable

The best thing you can do as a designer when adding search filters to your product is to make them meaningful and important.

This means that filters should embody concrete, recognizable characteristics.

In the simplest terms, if you’re running a movie database, you can’t just attach a moniker “good movies” and then add a corresponding filter. Instead, you can note down the movies that were nominated for an Oscar, and create a “Oscar-nominated” as a filtering category.

Obviously, the more detailed your filters will get, the better the results your users will end up with.

Now comes the problem of making those results readable to the actual user.

Of course, having a filtering UI always visible will also let your users know what they’ve chosen. But, depending on the type of system you’re working with, you might want to hide the filters themselves, leaving only the results.

This is where it gets tricky.

Some filtering is obvious. E.g. a color filter will sort everything by color, so there’s zero need to add text to the results saying “colored in blue”.

However, if a characteristic can’t be discerned visually, either because the results just don’t allow it, or if your user is browsing on a smaller, mobile screen — that’s when it makes sense to use tags.

Ideally what you want is to add specifically colored tags to a particular part of product descriptions. By looking at the results provided, the user will see that certain filters are in use, without having to look at the toolbar.

Focus on the dealbreakers

Also, try to figure out the so-called “dealbreaker” filters. Those are the filters without which a user will definitely not be interested in other results.

For example, if you’re planning a trip with your dog, then “pet-friendly” becomes a dealbreaker. As you’re browsing apartments to rent for the trip, if they aren’t pet-friendly, all of the other factors will be irrelevant.

Working out your specific list of dealbreaker filters will be a huge boost to your filtering system.

As any other design decision, it will rely on your understanding of your user’s journey and the context for your data.

Allow a combination of filters and use filter feedback

A big part of filters’ effectiveness will come down to using a number of them at the same time, letting the filters interact to produce the best results.

However, a big problem is teaching the user how the system you’ve designed interacts with their chosen filters.

E.g. you’re browsing clothing. For a style you pick “Regular” and “Relaxed”. Before you actually get the results, there is no way to know how the filtering works.

Will you only get the results that combine “Regular” and “Relaxed”? Or will you only see the clothing that’s stamped as either one of these?

This is why you need to settle the question of filter feedback if you want to create an effective product.

Live filtering updates

Live updates for filtering UIs is great because the user gets to immediately see the changed results they are getting.

Going back to the clothing store example, as I’m adding more colors, they flood the results, which is very convenient for contrasting and comparing different products.

Live updating gives users a seamless way to manipulate information: by getting new updated results, they instantly know if they need to add more filters or take some out.

During live updating, it’s very important to give some feedback to the user. Since adding new filters won’t necessarily change the results shown, we need to find another way to signal that a live update is taking place.

Many designers here settle for dimming the screen and showing an icon letting users know the results are being “refreshed”.

You can also use load bars, or animate the old results disappearing, and add a salient visual detail indicating that the updating is done.

But, as usual, this is not a perfect solution.

The biggest alternative to live updating is a little thing called filter batching.

Updating filters in batches

So live updating is great. I love seeing it and love using it. But it’s not the whole story.

First, there are mobile devices. Their screens are simply too small to pack the results, filters, and the live update feedback, without a visual overload. Added to which, their RAM is not robust enough to handle dozens of updates a minute as you’re adding new filters. Things will lag a bunch.

Second, the product you’re working with might be handling a lot of data. For users doing a lot of research, having to wait for the results to update after each individual filter would be simply unbearable.

What you can instead is to let the user batch their filters before any actual updating takes place.

The user selects a few filters at once, then clicks the “Apply”, “Search”, “Done” buttons. Only then will the results start updating, giving the user what they’ve asked for.

Example of batching your filters: A great example of batching filters is Airbnb. It uses some live updating elements, but mostly you get to specify exactly what you’re looking for before being given the corresponding results.

The main reason it works for Airbnb because most people already have an overall idea of what they want out of the search.

Avoid presenting zero results

Nobody enjoys seeing a “No results found” message, that’s just a fact. This is why it’s crucial to orient the user towards the successful searches.

The way to do that is to shape the data. Here’s some best practices:

1. Next to each filtering option, you can show how many results will be available to the user before actually updating the results.
2. Simply prevent access to the conflicting filters, since they won’t provide any results anyway.
3. Avoid filters that will only show one result.
4. Having figured out the most important filters for your users, show those first.
5. Implement a “Clear filters” button in your filtering UI. That way, you’re minimizing the actions the user will need to take to go back to square one.

For example, at Airbnb, they solved the “zero results” problem by showing you this compact bar chart on a range slider. In a single filter, you learn the “average” pricing — as well as what’s cheap vs outlandishly expensive.

Conclusion

With today’s computing power, any product could potentially overload their user with information.

And while dividing the human-computer communication into manageable bits and pieces is up to us on every stage of design, search filters are a small, vital, and often-overlooked piece of the puzzle.