On-site searching is a great way to help users wade through a site that is brimming with content. It filters out what is not relevant to the user and drives them to exactly what they are looking for and, when done right, directs them to act within the goals of the site.

E-commerce sites are probably the most common use case for utilizing search filtering because users are searching for detailed products. However, search filtering is also commonly present on sites that provide a service through information delivery, like blogs or news sources, and sites that provide bookings for flights, vacations and deals.

Since searching and filtering through content is complex, we’ve broken down this article into two interaction patterns to help simplify the concepts. These two distinctly different concepts are Single Value Search and Content Filtering.

Single Value Search

Single value searches are the least complicated type of search. Users come to a site and have one specific item in mind that they are searching for or the site only asks users to search for one type of content. It is pretty straightforward — a text field and a “go” or “search” button. Being simple doesn’t mean it can’t also be beautiful and delightful to use… search design can be done in many different ways.

Filters may not be necessary in these types of searches, but it can help to guide users along the way. You are “finishing their thought” by using auto-complete as a way of improving the user experience. Marmoset Music, for example, asks users to search for a “soundtrack” or a song. This is a narrow enough search that a filter may not be necessary but a drop-down can help users complete the action easily. Text shown  in the search box can be helpful in informing the user. Sometimes just populating the box with the term “search” or leaving it empty may not give users enough direction.

Many sites, most commonly e-commerce sites, use both single value search and a filter to help users navigate their site. When there are multiple values that go into a search, filtering is involved.

Filtering

This UX Matters article breaks down filtering into two approaches: “drill down” and “parallel” selection.

The drill down approach isolates pages by category as the search becomes more narrow. It is an OR approach. You can search for x OR x but only need to search for one. For example, users may be looking for a book at Amazon.com and click on Books, users are directed to a new page of just books. Then they may further filter by author, but they often only fall under one category (books) and then one author.

Amazon has a few levels of search filtering to get through the vast amount of content.

Amazon has a few levels of search filtering to get through the vast amount of content.

Dribbble allows users to search by color in a simple, minimal way.

Dribbble allows users to search by color in a simple, minimal way.

Parallel selection is used when there may be a few intersections in search descriptors. A user may be searching using several qualities or features as indicators to find it to find it.

Site Inspire, for example, users can filter down to sites that have multiple styles, one type, one subject and one platform.

Site Inspire, for example, users can filter down to sites that have multiple styles, one type, one subject and one platform.

Which type of approach to use is a matter of volume and type of content. A site like Amazon, with an endless amount of content, would be overwhelming without a very straightforward search approach. A site like this may also use filtering once the content is narrowed down through the drill down search. A site that wants to encourage many searches and a lot of browsing, would take a parallel selection approach.

UI of Filtering

Let’s look at some approaches to filtering down content, in terms of the UI structure and how they interact.

Traditional

Filters are most commonly seen next to the content while the content being filtered is on the right or below. This approach is great for when users are intended to browse. Perhaps users don’t know what they want but they do know what they don’t want. This approach allows them to filter away what they don’t want and continue to filter on the left while browsing on the right.

AirBnB takes a traditional approach in layout. The drop-down interaction to access the filters and the ease of use of the filters is to be noted.

AirBnB takes a traditional approach in layout. The drop-down interaction to access the filters and the ease of use of the filters is to be noted.

Warby Parker's horizontal filter helps users narrow down what they are looking for with check boxes. The clean aesthetic makes it unique and easy to use.

Warby Parker’s horizontal filter helps users narrow down what they are looking for with check boxes. The clean aesthetic makes it unique and easy to use.

Users can click on drop downs to filter results on Stocksy.

Users can click on drop downs to filter results on Stocksy.

Immersive

Many sites take a more experiential approach to filtering that can be a screen takeover, immersive experience of filtering to find the right product or service. This can feel premium and personal, increasing the customer service quotient for the user.

AARP's travel site makes the filtering experience into an exploratory journey.

AARP’s travel site makes the filtering experience into an exploratory journey.

Songza's music concierge helps users decide what to listen to based on their mood. Not only does it filter but it helps users figure out what they are looking for.

Songza’s music concierge helps users decide what to listen to based on their mood. Not only does it filter but it helps users figure out what they are looking for.

Virgin Airlines uses an immersive and aesthetic approach to filtering.

Virgin Airlines uses an immersive and aesthetic approach to filtering.

Volkswagen uses a step by step filtering experience that caters to user's personal needs.

Volkswagen uses a step by step filtering experience that caters to user’s personal needs.

Waycom is an ecommerce site that uses this approach to tailor products to users.

Waycom is an e-commerce site that uses this approach to tailor products to users.

Full screen search filtering is becoming quite popular and is an attractive approach. While it is often delightful to users, if the intent is for users to find many products and continue a shop/browse experience, this may not be the way to go.

Filter as you search

A drop down approach combines searching and filtering into one step.

Zebra's search functionality helps users find and compare car insurance. The search fields use selection options to make the search easier.

Zebra’s search functionality helps users find and compare car insurance. The search fields use selection options to make the search easier.

Adioso utilizes drop downs to help users be precise in searching for cities, dates and locations.

Adioso utilizes drop downs to help users be precise in searching for cities, dates and locations.

Takeaways

1. Establish the goal of the user experience on site.
2. Choose an approach based on the volume of content and goal for conversion of the site.
3. Search is intended to simplify the user’s experience so that the you and the user’s goals are achieved.

Comments
  • Deepa

    What are the best ways in phone app to address this situation you mention “Perhaps users don’t know what they want but they do know what they don’t want. ”
    Our app provides a lot of info, but we want users to weed out and never see certain types of info forever.. How do we do this without making it a intense process full of friction?

  • Pingback: Why filter bars are better than left-hand filters - UX for the masses()

  • Pingback: UX Flows: How to Help Users Search for What They Need on Your Site | Anita Edyati Blog()

  • Fernando Urkijo Cereceda

    Very nice review, it´s gonna help me a lot trying to figure out how to organize so many filters and search boxes! thanks!

  • What is a common threshold or rationale for deciding whether or not I need to implement a search or filter option, based on content volume?

    For example, I have 13 items that can be contained in 5 different and unique categories. A search or filter option would only render 1-2 results depending on how many options are given to or selected by the user. The search results would then feel scarce, and filtering/ searching could be considered a waste of time.

    Suggestions are greatly appreciated!