5 ways to improve applied filters on mobile

May 22, 2017 4:32 pm

5 ways to improve applied filters on mobile



In their recent article ‘How to design ‘Applied filters’ (42% get it wrong)’ the Baymard Institute proposed essential features to make filters user friendly on desktop.

These are:
1. Ensure the user can easily find any currently applied filters
2. Make it clear which criteria the currently displayed product list is filtered by
3. Allow the user to easily deselect applied filters
4. Provide the user with additional context when selecting new filtering values
5. Help the user infer how much of a filter type’s ‘range’ is currently selected

As more customers are turning to mobile to browse and shop online, we think it is important to look at filters on mobile. In this article, we have looked at how filters are implemented on mobile across the e-commerce sector, considering if Baymard’s recommendations should be adopted for mobile.

This article will look at the following fashion websites: Topshop, Asos, Missguided, New Look and River Island, and compare them to the following grocery websites, Asda, Morrisons and Sainsbury’s.

1. Ensure the user can easily find any currently applied filters

It is essential on both desktop and mobile that filters are always easily navigable and accessible. After a filter has been applied, it should be easy for users to find this in order to make amendments to the current filters selected.
Across the five mobile websites reviewed, the option to ‘Filter’ is in a similar position across the different e-commerce sites. The consistency in design across multiple websites increases the learnability of the website for users, as they can recall behaviour they have learnt from past websites and apply this to the site they are currently using. This allows users to gain a sense of familiarity when using new websites, and therefore it is beneficial for e-commerce websites to have consistent design with each other.

Fig 1

Fig 2

Fig 3

Fig 1, 2 and 3: These screenshots show the content on the websites above the product listing for ‘Dresses’. All three websites have the option to ‘Sort’ and ‘Filter’ in similar positions on the product list of their website, confirming the theory that consistency is key.

When comparing the type of consistency seen across e-commerce fashion websites to grocery website, users are not given the same affordances.

Fig 4, 5 and 6: These screenshots show how filters differ in position across three different grocery websites when looking at ‘Fresh Fruit’.

Fig 4

Fig 5

Fig 6

While the position of the filters may not be consistent across the different websites, once applied, the filters remained in the same position across all of the websites, and therefore would receive approval from Baymard in their user friendliness for findability. To improve this across the grocery sector, the filters could appear in a consistent position across all grocery websites, to allow users to apply their learned behaviour when using these sites.

 

2. Make it clear which criteria the currently displayed product list is filtered by

Fig 7

Fig 8

Two of the five fashion websites reviewed clearly state how many filters have been applied on the search results page. However, the other three keep users guessing until they re-open the filters tab to reveal how many have been applied. A big success of filters on desktop, according to Baymard, are when users can clearly see what filters have been applied on the search results page.

Fig 7 and 8: While New Look and Topshop both indicate to the user how many filters are applied, they fail to state what two filters have been selected.

Implementing this functionality across mobile websites would help improve the efficiency of using filters, as users would easily be able to see which filters have been applied from the search results page, and will therefore allow them to better understand the content they are seeing.

When comparing the visibility of applied filters across Grocery websites, Sainsbury’s clearly state not only how many filters are applied, but also display what these are, for example ‘British’ and ‘Organic’. This allows the user to understand and make sense of the results which are being displayed to them.  While Baymard considered displaying the applied filters a key to user friendly filters, it appears a lot more can be done on mobile to improve the experience for the user.

Fig 9

Fig 10

Fig 11

Fig 11

Fig 9, 10 and 11: Sainsbury’s clearly shows which filters are applied, unlike its competitors Asda and Morrisons

 

 

3. Allow the user to easily deselect applied filters

Within the filters tab on all of the e-commerce websites, users are quickly able to either ‘Remove all’ or ‘Clear all’, to take away any filters currently applied. This makes beginning a new search on the website easy for the user, as they do not have to manually de-select each applied filter.

Baymard considered the ability to remove selected filters from the search results page a priority when considering the usability of applied filters, however this feature was not seen on the mobile websites reviewed in this article.

Fig 12

Fig 13

Fig 12 and 13: Users would have to select ‘Reset filters’ on Missguided, whereas Sainsbury’s allows the user to remove individual filters.

With the fashion websites reviewed, users had to open up the filters to find the option to ‘Reset filters’, whereas Sainsbury’s offered users the ability to remove individual filters from the search results page. Even though this is often stated as best practice when designing filters across desktop websites, screen real estate is often a top commodity in mobile design, and therefore could explain why so many websites choose not to provide users the option to do this. This could be a case of what in fact works well on desktop, could be a hinderance to the mobile user experience.

4. Provide the user with additional context when selecting filtering values

All of the fashion websites reviewed informed the user how many results to expect when selecting individual filters. These counts help users because if they are looking for something specific on a website, it gives them an idea of how many results they may need to look through to find it.

Fig 14

Fig 15

For example, if a user came onto River Island looking for a ‘Shift dress (2)’, they would find this considerably quicker than if they came onto Missguided looking for a ‘Day dress (824)’.

Fig 14 and 15: Users are able to see how many results each of the filter options will display.

In contrast, Asda was the only grocery website which clearly stated how many results the user would receive when selecting a particular filter. Does this suggest that filtering may be less important for users buying groceries, than when browsing for a Saturday night outfit? While it may help to see the number of results available when there will be a lot to choose from, for like on Missguided’s ‘Day dresses’, in the case of grocery shopping, it may actually give a negative impression to the user if few results are available.

Fig 16

Fig 17

Fig 18

Fig 16, 17 and 18: Only Asda allows users to see how many results each filter option will return.

 

5. Help the user infer how much of a filter type’s ‘range’ is currently selected

On the search results page, the total search results should be clearly displayed so users understand how many results they will have available to look at. If these results are across multiple pages, then the user should be able to clearly see how many results are displayed on the page they are currently on, out of the total number of search results e.g. 1-50 of 96. While Baymard suggested this was a priority when designing user friendly filters, when the experience comes to mobile this may not apply.

Due to the rise in infinite scroll, the majority of the e-commerce websites reviewed in this article displayed all of the results on one page, with the page reloading more results once the user reached the bottom of the page, or using a ‘Load more’ button to indicate more results were available.

As seen below on the Asos website, instead of displaying the number of results at the top of the page, once the user reaches the bottom of the page they are given the option to load more results, and at this point can clearly see how many results are currently being displayed, and how many more results are left.

Fig 19

Fig 20

This indicates to the user how many results are left to view, and gives them an idea of how many more times they will have to select ‘Load more’ to see all the available items.
Again, this could be an instance where a different technique is required on mobile, to optimise the experience for how users use their phones to browse.

Fig 19 and 20: Users can see how many results are left to view before choosing whether to ‘Load next’.

Conclusion

While Baymard has carefully considered what may help improve the user experience on desktop when it comes to applied filters, it is clear through the design of mobile websites that not all of these considerations have been taken into action. This could suggest, as seen in this article, that an alternative approach may need to be considered, to ensure the best user experience when using applied filters on mobile.