Filtering and Sorting Best Practices on Mobile
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
A lot of applications are using this approach. Filters are offered to the user on the screen of the search results. The filter view is laid over the results in order to give context to the items that are being displayed.
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
This method is similar to the one mentioned above. However, it sacrifices context for the sake of a more focused experience and more real estate to work with.
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
Search results are tricky since the data returned varies heavily based on the input of the user. What approach will be a good solution depends on the amount of verticals and total amount of data.
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
Unlike filtering, sorting does not limit what is being shown to the user but it changes the way results are being displayed. Popular sorting functionalities are price, quality or alphabetic order. In order to save space, one can merge the filter and sort views as seen above by Etsy and Foursquare.
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
Not everything should be filtered. It is smart to address top level decisions such as product categories on separate screens. Those are decisions that are being made by almost all users, no matter what they are looking for.
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.
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
Filtering and sorting are powerful tools to make it easier for users to find what they are looking for. Spend some extra time thinking about your possibilities — it will pay off down the line.
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.
