Category: UX advice / Ecommerce guides

How do the top ecommerce sites display filters on their listings pages?



When it comes to filters on listings pages at desktop size, I’ve always recommended running them down the left side of the screen. From the many user tests I’ve watched, I’ve found users can easily see them all and adjust them.

Yet we’re now in a world of mobile, where it is almost always the largest device share for the ecommerce sites I work on, and in mobile designs it seems every site hides their filters behind a link. This makes sense for space reasons on smaller screens but do left side filters still persist on desktop? Are responsive designs now driving sites to look more similar across devices?

I thought it was time to find out what the big ecommerce players are doing, to get a sense if there’s a shift in the traditional patterns. In addition it would be useful to find out just how many filters sites are displaying and how they handle revealing more of them. Most of this applies to desktop layouts but there’s a look at mobile at the end of the article.

I’ve turned again to study 50 of the biggest ecommerce websites in the world (full methodology and list of sites here). I’ve pulled out the key findings and illustrated them with plenty of examples to inspire.

Where are the filters positioned on desktop?

On desktop overwhelmingly the big sites position their filters on the left side of the screen with 80% of them doing so. It shows that the old left side filter pattern is alive and well, and suggests that users continue to find this easy to operate.

Expedia are a typical example of a site with several categories of filter running down the left side of the page, giving the user visibility and lots of control of the listings they want to see.

Expedia listings page left side filters

Of the remainder, 14% of the big websites have their filters at the top of the page. This is a pattern that has been around a while but has never seemed to gain wide adoption. In my experience users can too easily scroll past it and miss them whilst looking for products. It could be fixed to the top of the page but sometimes these filter bars can be big which would get in the way when trying to view products.

The ASOS site features a top filter bar with two rows of dropdown menus. This contains a lot of information in a small space but does mean extra clicking for the user to find each of the filters they might want.

ASOS listings page top filters

4% of the websites studied (i.e. two of them) have filters both on the left side and the top. I’m not sure what motivates this decision as it means twice the clutter and controls on screen.

The GAP website offers a higher level of filter on the left side (kind of like navigation) along with more contextual filters along the top. Oddly the grouping of ‘category’ appears twice. They do a good job of keeping their top filters to a minimum though, preventing them being an element that dominate the page.

GAP listings filters left and top

Finally 2% or one website (Marriott Hotels) uses a mobile-style pattern of having a a filter button at the top of the screen, which when clicked opens up the entire filter menu. It’s interesting that more sites don’t do this in order to match their layouts across all devices, suggesting that the advantages of uniformity are outweighed by learned behaviour. Also on bigger screens the filter menu does look a bit clunky and oversized.

Marriott Hotels listings mobile style filters

How many filter categories are displayed by default?

Here I’m interested in how many categories display to the user without them having to do something like click to load more. To be clear on definitions: a category of filters is a grouping like ‘colour’ or ‘price’, within them are the filter values that you click (like 'blue' or 'red').

An obvious finding but one worth stating is that excluding the Marriott example above, all sites have a number of filters displaying by default—there are no others that don’t have at least some ready to access.

The average across the 50 sites studied is 8.5 filter categories with the chart below showing the distribution of them. It’s a fairly broad range with 85% of the sites having between 4-13 filter categories initially displaying. There’s a spike at 10 categories but it’s not clear why—perhaps just because it’s a nice round number.

The main takeaway from this is that you don’t need to be afraid of complexity when it comes to showing options to users—it’s better to have them obviously available if you want to help users find a product they want.

Top 50 ecommerce websites – number of filters shown by default chart

How many sites have the option of more filters on desktop?

Pretty much half (48%) of the websites studied don’t give the user the choice of loading more filter categories or values, meaning all of their options show by default. This is an ideal situation for a site to be in as by making users have to click for more, you’re making it less likely they’ll find or use the additional filters. My experience and other’s research suggests the majority of people don’t alter from defaults.

Shutterfly are an example of a site that show all of their filters without the ability for users to load more and are also interesting for taking a visual approach to showing filter values where possible.

Shutterfly left side visual filters

32% of the top 50 websites expand the number of filters in-line (i.e. down the left side of the page). The vast majority of them do this by adding more filter values to a category rather than showing additional categories—typically a site starts with five or six of the most popular values on display.

The below example on the left side is AO, where the Brand filter category starts by showing five values, and once the user clicks ‘More’ it expands to show all of them. The right side example is Cars.com where the user can click ’Show More Filters’ and about 15 extra filter categories appear. This second approach is less common and only really works for products like cars where users are willing to get deep into specifications.

Examples of expanding left side ecommerce filter lists

The remaining 20% show their extra filters through a form of screen-covering panel or pop-up. This allows them much more space to put many options in front of the user.

TripAdvisor use a classic method of a pop-up to expand a category, in this example allowing the number of amenities filters to grow from 4 to 18.

TripAdvisor listings page filters pop-up

Wayfair use something that has more of a mobile look about it. Several dropdown filters are available along the top by default but clicking the filters button brings a panel in from the side, which matches how filters are shown on smaller screens. This allows them to show many extra categories of filter.

Wayfair ecommerce listings filters overlay panel

Another style of panel is used by Airbnb (and VRBO) where there’s not an overlay but something that completely replaces the listings content. Despite this being the additional filters screen a user still has to choose to ‘show all’ each time they want all the values in a category, which could be frustrating.

Airbnb listings filters menu

The standard for mobile

When it comes to how filters are displayed on mobile it’s a clear picture: 90% of sites in this study hide all of their filter options behind a button. Tapping the button brings up a panel with all of the categories and values available. It’s the easiest way of storing the filters without getting in the way but means users are less likely to see and find them.

Booking.com are a typical example with filters sitting as an option along the top of the screen. If sites want to encourage users to engage with the the filters they can put the button at the button (something BestBuy does) which will put it within easier reach of a user’s thumb when browsing.

Booking.com filter button on mobile

The other 10% of sites on mobile they display some options along the top with the filter button to reach all of them. This is except Ikea who simply have four categories available at the top of the page.

Macy’s show an example of a smart way to encourage filter use on mobile without taking up too much space: contextually bringing out a single relevant category of filter options for the current view of listings. In this case as the user has selected ‘Dresses’ it provides the ‘Dress Occasion’ filters as buttons. If a user selects one of these the site will then provide another category such as colour.

Macy's progressive contextual mobile filters

Conclusion

It’s clear that two patterns dominate filtering depending on your screen size: multiple left side filters on desktop and a button to bring up a filters panel on mobile. This simple practicality of space allows users on larger screens to more easily play with lots of filters and see how the results update while mobile users are more likely to need to know what they’re looking for.

This means that desktops (and large tablets) will likely be the main device for someone wanting to do a more open-ended browse for products for some time to come. It’s one area where mobile can’t quite compete despite it being quicker for almost every other website task.

Last updated on 14 November 2018

ux / web design / ecommerce / mobile / desktop / filters / search / listings / research / top websites /

Designing Ecommerce Websites free ebook

Articles on similar topics

How do 50 of the world’s biggest ecommerce sites present images on listings pages?

Top 10 ecommerce UX design tips – free ebook

6 tips for great ecommerce product finders