How to design Search Filter Experience?

Users are constantly overwhelmed by the amount of information they need to swift through to get to the one that is most useful for them. That’s why it’s important to design filters to your search to enhance the experience of the user.

Here’s a detailed breakdown of how a simple searching experience should look and feel like.

View all Search UX Patterns

Userflow

1. Search Results Page

Note: If you’re looking for detailed analysis of “Search Results Page” you can find it on Simple Search UX pattern.
1

Filter Icon

Add a search filter icon that's easy to understand and recognize. Filter icon as shown here can also be replaced by a slider icon showing that the user can toggle options.

1.1 Search Results Page

1

Close Modal Icon

Show a close icon so that the user can easily close the filter modal without having to press the system back button on their device. Closing will not apply any filters to the search.
2

Pull Swipe Indicator

Similar to the close button a Pull to open and close indicator helps users understand that the model is an overlay and not another screen. They can pull down to close the model, without applying any filters to the search. If you use the swipe indicator, make sure that the modal animates by appearing into the frame from bottom to up.
3

Section Headings

Clearly defined section headings help users understand that the following options are under the same category of options. E.g. the user wants to select amenities for hotel rooms like wifi, swimming pool etc, they should all be under the same category.
4

Section Descriptions

If needed, add section descriptions to further explain to the user what the options do. E.g. describe that these are the popular amenities that users often prefer in their hotel rooms.
5

Separate Secontions

Use information architecture for your filter or card sorting technique to group relevant options together.
6

Fixed on Scroll CTA

The call to action for applying all the filters and clearing all filters should be fixed on scroll if there are several options in the filter model. This makes the most important actions most accessible to the user.
7

Clear All Filters Button

Give the user the option to clear all filters applied in order to broaden their search. This lets the user to quickly broaden their search instead of going and unselecting multiple options in multiple sections - saving time.
8

Apply Filter Button

A clear button that indicates how many results they will be able to view after adding the filters, This vastly helps the user with understanding how much time they will need to invest and if there are no search results for their combinations of filter, they will be able to unselect some options to avoid a "no results found" screen.

Required Elements

It’s easy to forget and miss out small details. When designing screens for search filters experience you’ll need to design these elements.

Icons
  • Search Icon
  • Close or Cancel Icon
  • Filter/Sliders Icon
Buttons
  • Primary Button Default
  • Primary Button Hover
  • Primary Button Pressed
  • Secondary Button Default
  • Secondary Button Hover
  • Primary Button Pressed
Results
  • Results Card/List
Misc.
  • Separators (lines/dotted lines)
Input Fields
  • Default Input Field
  • Focused Input Field
  • Typing Input Field
  • Filled Input Field
Filter Option Selectors
  • Checkbox Selected (optional)
  • Checkbox Unselected (optional)
  • Radio Button/Switch Selected (optional)
  • Radio Button/Switch Unselected (optional)
  • Range Picker (optional)
  • Dropdown Menu (optional)
  • Numeric Selector (optional)

More Search Patterns

Search — Filter

Search — Filter

Search — Simple

Search — Simple