5 things to be mindful of when you design filters

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…