Filtering and Sorting Best Practices on Mobile

Thierry Meier
Nov 19, 2015 · 6 min read

Whenever a designer faces the challenge of displaying vast amounts of data to users, filtering and sorting options become inevitable. Filtering and sorting help users narrow down the data that can be displayed according to what they are looking for.

Currently I am working on a mobile experience for a large electronics retailer. A good navigational structure, thought-out filtering and sorting will be key to providing users a painless way to find what they are looking for.

Designing a filtering and sorting solution is by no means rocket science, however, there are a couple of different approaches one could take.

Slideover Onscreen Filtering

Foursquare, Amazon and Etsy (left to right)

When to use: Works well if filtering options are not too vast and you want to maintain context to the results displayed. Always works well when displaying search results.

Case study: Foursquare and Etsy are using the same approaches, making use of a standard pattern, while Amazon went for a custom solution. Note that Amazon has sub-filters or a second level of filters.

Fullscreen Onscreen Filtering

Airbnb, Kayak and Hostelworld (left to right)

When to use: If there is a lot of data that needs to be filtered, then going for a slide over makes sense. It gives you more room to work with and the user is not being distracted while going through the many options.

Case study: In the screenshots above, Hostelworld could benefit from an on screen context filtering method. Only two options are being asked of the user to filter. I would use an approach similar to Foursquare’s above. Hostelworld could also benefit from a “Reset” action to easily clear filters.

Search Result Filtering

Apple and Etsy (left to right)

Case Study: Apple treats every search request equally. Categories which were previously selected through a view are now put inside a fullscreen filter view. Etsy on the other hand has a very flexible solution. Etsy is providing users a different approach based on how specific their search request is.

If users search for a general term such as “anchor”, Etsy offers you to narrow down your search results by categories. When searching for a more specific term such as “anchor necklace”, Etsy will return a list of items right away.

Sorting

TripAdvisor, Kayak and Hostelworld

When to use: Sorting makes sense when it is hard for users to point out extremes (e.g. the lowest price) by themselves. On mobile, this is the case quite early since designers work with a very limited viewport. It is a subjective decision designers have to make.

Case study: While TripAdvisor and Kayak use the slide-over approach, Hostelworld once again uses the full-screen approach. Again, I would advise them against using this approach as it takes users away from the results.

Beyond Filtering: Address Important Choices Separately

A user will know in what category he will likely find his item, however, he might not be sure yet in what price range or what colour.

Postmates, Etsy and Apple

When to use: Not everything should be stuffed in filters. Important top level choices which are being made by almost all users are best being made upfront. It also declutters and simplifies the user experience.

Case study: Tapmates lets you specify the product category when you enter a store on their app. They could have showed users items right after entering the store and bury the product categories in a filter.

Conclusion: Think Twice

Always keep in mind that there is always the possibility that the best approach is to have no filtering or sorting features at all. Postmates is a great example for this.

It is also valuable to find out which filters are being used the most. Based on those findings you arrange the filters accordingly. Airbnb knows that most people use the listing type and price filter, so they put them on top.

That’s about it. As mentioned — no rocket science.

If you have more patterns around the topic of filtering and sorting, please reach out to me and I’ll try to include it in this post.


If you think this could be useful to fellow designers, please click the “Recommend” button below.

Thierry Meier

Written by

Product Designer. Digital Nomad. Creator of @betterdaysapp. Follow me on Twitter @thierrymeier_.