UX Design Patterns #6: Search, Sort and Filter Sorted

The sixth in our video series on UX design patterns, we take another look at the Search, Sort and Filter mechanisms here.

Users visiting websites, especially in the field of e-commerce, lie somewhere on the spectrum of those who know what they’re looking for on one end to the ones that have come just to browse on the other.

Search, Sort and Filter are essential to help the groups of users on the first half of the spectrum. These mechanisms are particularly important as the time taken by the user to find a product is inversely proportional to the likelihood of a purchase.

These were also mechanisms invented before the advent of machine learning. We need a new interface now that keeps up with the times instead and that’s what we’re discussing here.

THE PROBLEM

So Search, Sort and Filter: how different are they from each other? Conventionally, they’re very different. Users “Search” to find something specific from large amounts of information. They usually use keywords or type in phrases to find what they’re looking for. It is the most common way of finding things on a website or an app.

They “Filter” when they want to narrow the list of available items based on specific criteria such as brand, price range or colour. This mechanism is useful in situations where the user may not know exactly what terms to search for or where choosing from a list of search criteria is faster than typing in all the search terms.

They “Sort” when they don’t want to narrow their search but rather, arrange it in a certain order, for example, newest first or alphabetically.

However, all three functions eventually lead to the same outcome: surfacing relevant content. Yet, on most websites and apps, they’re split into three separate functions. Baymard Institute reports that users tend to use Sort and Filter interchangeably. What this means is that a task that can be accomplished in a single click unnecessarily takes three.

THE SOLUTION

A singular Search, Sort and Filter functionality

To save space, some websites (such as Etsy and Foursquare) have chosen to merge the Sort and Filter options into one page. It’s here that the distinction between Sort and Filter becomes redundant and the Sort function becomes a Filter itself.

Alternatively, some websites have arranged the Sort and Filter functionality and the Search one in separate parts of the page. Since both serve the same purpose, separating them doesn’t make sense. From these observations, a layout that combines all three functions into one holistic Search function is the most logical solution.

HOW IT HELPS

The time spent searching is reduced

By reducing the number of pages the user has to click through to find relevant content, the amount of time spent searching is reduced significantly. The less time a user spends searching is more time spent browsing, thereby increasing the chances of a purchase.

It guides the user towards relevant content

By displaying the filters upfront, the user is made privy to exactly what the site has to offer. This reduces the time the user spends searching as they can simply click on whatever they’re searching for. Furthermore, it can also inform the user of what the site has to offer beyond what they were initially looking for.

Rigid categories and fluid filters

Traditionally, products are listed in categories. While categories are pertinent on sites with a large amount of content, that isn’t the case when the content isn’t vast. In fact, this can lead to the problem of over-categorisation. This occurs when a website lists its products as rigid, individual categories. Instead of this, listing products as combinable, fluid filters allows the user to customise the result list to exactly what they’re looking for.

By reducing the number of pages the user has to click through to find relevant content, the amount of time spent searching is reduced significantly.

THE LIMITATIONS

Much like any other interface, this comes with its limitations too. It may enable users to find content fast now but to find content even faster, the way these filters are designed needs to be redesigned.

One particularly important filter that needs to be thought through well is the price range filter. Useful in some e-commerce verticals, it doesn’t lend itself to the proposed idea easily.

However, it can still be achieved by creating individual filters out of the various price ranges. Additionally, with the help of machine learning, the ranges could be specified based on what users are most likely to type rather than having it be pre-decided.

If you have more ideas on this, do sound off in the comments below or write to us at social@redd.in.

— Rozann Peter, Experience Designer at Redd Experience Design