As a newly graduated designer, I recall when I worked on any school project, I just threw a search box on design to meet the needs for filtering. Thanks to Google, I was so used to the magic of just putting in what I was looking for and the system would most likely return what I wanted within 1 or 2 pages, and even offered related info that I didn’t think of. When I started my design career, filter and search were not an easy task to design. I had to recognize how much work Google had to put into designing a web page with just a search bar in the center. After working on a couple of projects and hitting walls when I didn’t comprehensively think about how filters function, I want to share my experience with you.

We will only go through designs about filters. I want you to keep in mind that not all item arrays need filters. Ultimately, it depends on how manageable the volume of content is, you might not need to provide any filter, or you can categorize the content into small enough groups so that users can navigate through the content.

1, No filter state

Same as most empty-state design principles, you can add instructions or informative calls to action to lead people to use the filter. Don’t feel that it is necessary to display all items when there’s no filter applied. Depending on users’ needs, when there’s no filter applied, loading all content up front is not always the best for users. If the content is extensive, loading it before the user applied a filter can cause the system problems (e.g. overload). If there are plenty of irrelevant content, loading it before the user applied a filter can confuse our users.

In this case, you can either load featured content or bring attention to your filter design so users will look at the content you want to present, or lead them to filter down to the content they need. If your product is going to be heavily used in a user-filtered custom view, you can also design an onboarding experience to collect users’ preferences up front so users will be directed to relevant information when they log in for the second time. There are apps that collect users’ preferences when they onboard their users, they may have different intent but it is a good strategy you can borrow to help your users to set up a filtered custom view.

2, Define your filter logic and be clear about it

Usually, a filter’s purpose is to help users narrow down the number of items that display in front of them. If a user input 1 search query but there are still too many items to look through, the user can input more queries until the information is digestible. In this case, the logic in design is that the content needs to contain all queries users put in.

However, it is NOT the only logic that can apply to filters. For instance, a filter design for a scheduling app; the user, a store manager, needs to see when he or she assigned shifts to a sales associate and a technical support person. Depending on the use case, if the manager only wants to modify a shift that both of them were assigned to, he or she needs the type of filter logic I mentioned above. On the contrary, the manager might need to see shifts that either of them was scheduled to make sure they won’t work overtime. In this case, the filtered content contains schedules of both employees. It is no longer narrowing down the number of items that users filter, instead it opens up to more content about the second query the users put in.

Both of the situations are possible. As designers, we should think through the users’ journey and fully understand what they need to do with the filter to determine the search logic behind the filter. I also recommend always communicating with your developer team about the logic of this design and have them help you make the decision.

No matter what ways support your users’ needs; make sure you give a clear visual clue of how to narrow down and open up your filtered content.

3, What are the users’ next steps after filtering

Think a step ahead. What do your users need to do with the content they filter? What’s important for them to see? Are there links to click? How does that affect your filter? Reflect on the intent and why users filter your content, does your filter effectively support their use case?

There are many ways to display filtered content: you can hide irrelevant content and only show filtered items, highlight the filtered items among all content, and sort the content and have filtered items on top of the list. Be mindful of how your users will interact with the content and use that to determine how to display filtered content. For example, if the filter is for a tool where users can drag and drop items to change the hierarchy of the items, then you shouldn’t hide irrelevant items or sort the filtered content to the top of the list because users wouldn’t be able to drag and drop the content in the right order.

Some filters are shortcuts to help users achieve their goal. Don’t allow the filter behavior to be abrupt. Sometimes that logic might hide behind a designer’s blind spot. That’s when you should always try to test out your filter design.

4, Always try to test out your filter design

Search phrase from a mother on Great News

Filter behavior is very unpredictable, it is different from a flow that you designed for your users in which you know where they will go next. Users can input anything and get returned content based on what they search. We need to test if the returned content matches what the user expects. For example, if a user searches “Big bang,” should the system return content about the scientific big bang theory, the comedy TV show, or the Korean pop band?

On the other hand, when you give users a result to look for, the query they input to the system is also unpredictable. Power users might input the exact name of the result, but users who are not familiar with the result might input all kinds of descriptions to try to look for the result. Some of the queries might be keywords that directly relate to the result and some of them might be filling words. User testing can help you study those user behaviors. By understanding how your users search, you can make the filter experience more accurate and smooth.

5, Let users share their filter result by URL

This is another expected user behavior but we might forget when we design filters. If you are designing a web app, users are used to sharing things by just copying the link and sending out. It is a nice touch to your product. Also if users click the back button on the browser they expect to go back to the filtered page.