Best practices for using filters and sort

November 8, 2017 9:01 am

Best practices for using filters and sort

If you visit an e-commerce site, a travel site, or any website where users are given multiple products to choose from, the chances are it will have some form of filtering and sorting function to help a user choose what they would like.

Every day, more and more people are choosing to shop online, and if they can’t use your site to find something they like or need, then there is a good chance they may not come back.

In this article, I will discuss the benefit of using filters and sorting, and highlight a few ways you can use these tools to help your users find what they are looking for. I have concentrated on fashion sites for the examples, but they can be applied to many more sectors.

Why should you use filters and sorting?

Hick’s law states that, the amount of time it takes for someone to make a decision, increases with the amount of options they must choose from. When implemented, filters and sorting will not only reduce thousands of products into a manageable amount, but they will also order products in a way that meets the user’s interests and needs. Which in turn, will increase the likeliness of the user finding what they are looking for.

Therefore, if an e-commerce site wants users to buy from them, it makes sense for them to allow users to reduce the amount of options they see and increase the likelihood that they will decide to make a purchase.

What is the difference between sort and filter?

Here at SimpleUsability, we speak to lots of users who confuse the two terms, with many using ‘filter’ to describe sorting and vice versa. So, what are the differences?

Sorting is where the order of the items is changed but the number of items visible to the user stays the same. Typically, these are things shared across all products, so some common sorting options could be on price (high to low or low to high), alphabetical order (A-Z or Z-A) or rating (high to low or low to high) as shown in the image below:

Figure 1: Amazon’s sort options are consistent across the site

Filtering is where the number of options is reduced to contain only those matching the criteria that a user has selected. These are usually based around the characteristics of the products, so common categories could be colour, size or type. But they would also have some unique categories depending on the department they are in, as shown in the image below:

Figure 2: While Amazon’s filter options will change depending on the department you are in.

Both filtering and sorting allow users to take control of the products they see at the top of a long list of products and, even if sort does not bring exactly the products they need to find to the top, it still allows them to systematically work through the products in an order they understand. This perhaps explains why users confuse the two functions.

Now that’s ‘sorted’, let’s look at some of the best practices for using these features that help users find and select what they are looking for.

Make sure users can find them

When conducting eye-tracking research, we regularly see users are drawn to the top and top left area of the page expecting to find the filter and sort options. And on desktop, where there is (usually) enough screen space to display both options, users tend to find and use them relatively easy.

Figure 3: Asos’ desktop has the filter placed down the left and the sort placed at the top of the page results.

However, we tend to see some problems occur when the experience switches to mobile, and designers are faced with the challenge of including numerous categories and options in a more confined space. A common solution is to hide all the options behind a filter bar or a single icon, that displays an overlay once the user presses it.

Figure 4: The filters on Asos’ mobile site appear as an overlay.

However, in doing this, the positioning of the filter and sort button that accesses the options can be different from site to site. We often see users miss these options and scroll aimlessly up and down the page looking for a way to filter and sort the products on a page. There’s only so much they will take before they go and look somewhere else.

Therefore, when hiding mobile filter and sort options behind a button, it’s important to consider the following things:

  • Keep it at the top. Just because the user is now on a mobile, it doesn’t mean their expectations of where to find the filters has changed.
  • It can be a static button or a sticky element on the screen, but keep it at the top of the page, to help users find it.
  • Don’t rely on just an icon. In our research, we see users look directly at icons, on mobile and desktop but because they are not sure what the icon is, simply carry on with their task journey. Remove any ambiguity by adding a label to the icon, or removing the icon altogether and just have text. It doesn’t take up too much extra room, but it will increase the chances of users knowing what it means and that it’s what they are looking for.

Figure 5: By keeping the options at the top of the page on mobile, Asos maintain a consistent experience for their users. They are also clearly labelled, making it obvious to a user.

Ensure the categories and options are relevant to users

When people shop for things in a store, they do so based on a learnt experience of what they like, and in the case of clothes, what fits them and their style preference. They will look in a certain department (shoes, shirts, trousers), then find specific colours or styles that they like, to narrow down the choices. And finally, when they have found something, they will look to see if their size is available, which again is different depending on what item of clothing they want.

When it comes to filters, matching the user’s mental model of how they would choose something in the physical world, is important in helping them choose something on a website. If they cannot filter by the same categories, options or language they have come to expect from their shopping experience, then they are likely to struggle to find what they are looking for.

For example, when shopping for children’s clothes in a store, a parent would know which item will fit, based on the age range shown (3-6 months etc.). If, when they came to buy the same items online, they were shown the options for size in cm or inches, instead of age, they may struggle to know which one will fit their baby.

Figure 6: Topman filters showing different filter options for jeans and jumpers matching what you would find in store.

Problems can appear when you start using options that are too specialist, and only a few users understand. You may run the risk of confusing or alienating the casual shopper on your site. When shopping for shirts on Zalando, you’re given the option of filtering by collar type, 17 collar types to be exact. Here’s a sample of what you can choose from:

Figure 7: Zalando offers 17 different options for collar type to filter by.

Now, I wear shirts most days, but I certainly don’t know the difference between all these collar types. I’d be confident picking a ‘Button Down’ out of a line up, but I would be pushed to guess at the others. Charles Tyrwhitt, has similar options on their website, but rather than leaving the user to guess, or most likely ignore this filter option, they offer the chance to find out what these different styles are by having a guide hidden behind a ‘What is this?’ button.

Figure 8: Charles Tyrwhitt lets me find out exactly what their specialist terminology means.

Having specialist terminology on filters isn’t necessarily a bad thing, if you offer your users a way to see what it means. As I mentioned before, I wouldn’t know the difference between a ‘Hood’ or a ‘Kent Collar’ if I saw them on a list, but if I saw what they looked like in a shop I would know whether I like them or not. By giving users the chance to see what they are, they can continue using the filters to narrow down their search to match their preferences.

Clearly display the selections and results to users

As UX Practioners, we know feedback is an important heuristic for the usability of a website. So, once users have found filter and sort, understood the options they have, and made their selections – it’s important to let them know their choices have been applied to the list of products.

Figure 9: Zalando show which filters are used and the specific options selected.

Zalando do this in three ways, leaving the user in no doubt about the changes they have made. First, they add a green tick next to the filter categories, so the user knows which they have used. Second, the specific options chosen from those categories are listed above the results, so the user knows the exact filters that have been applied to the products. And thirdly, they list the total amount of products, in this case 84, that are shown because of the filters. These, combined with the ‘Sort by’ dropdown close by, provide a good level of feedback to the user

Just as with the lack of space on a mobile screen causing issues for the placement of the filter and sort options, so too can it cause problems for the feedback of a user’s selection. Designers are forced to prioritise the amount of information shown to a user, but with feedback being such an important heuristic, how is the best way to solve this?

Zalando offer a neat solution by showing the selected filter options as a horizontal slider under the filter button. And the user has the option to quickly remove any filters by pressing the ‘x’.

Figure 10: Zalando prioritise the selection of options over others when filters are applied on mobile.

Asos add a simple ‘tick’ to the filter button once it is applied and shows how many products are available for the user. Meanwhile, Next manages to strike a balance between both Asos and Zalando by showing users that filters are applied, the options they have chosen and the amount of products available to view.

Figure 11: Asos have gone for a simple indication that filters are applied while Next shows the chosen options as well.

Wrap up

Filtering and sorting on websites is too big of a topic to cover in one article, but hopefully this has given some ideas on some of the best practices regarding placement, relevance to users and feedback, that will help your users find what they are looking for the next time they are presented with 3,245 styles of shirt.