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.
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.
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.
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.
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.
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.
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.
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.