Category: UX advice / Ecommerce guides

How to create mobile-friendly search filters – the key principles



Considering the mobile experience first is now essential in web design. If your site doesn’t work properly for these devices then you’re missing out on a huge number of users.

One of the hardest areas to get this right on ecommerce websites is the search results pages and in particular filtering—there can be a lot of filters to display and not much space to do it.

Back when mobile was seen as an extra and not as important as desktop, my solution was to strip out lots of filters and just show a few key settings to mobile users. This was based on the thinking that people did their serious searching and buying on their big devices.

In a world where many ecommerce sites have 60% or more of their traffic coming from ever-more powerful mobile devices, this is no longer true.

A lot of sites are responsive and so just stack the filters above the results in a single column, which isn’t a great solution. It means lots of scrolling and pushes the main content down, so users can miss the point of the page. I’ve seen a lot of ecommerce sites where the mobile experience seems to have been the last thing considered (if at all).

Here are six key principles to make sure you cover when designing filters that your mobile users will find easy to use.

A bad and a good example of mobile search filters

Separate

If your site requires a lot of filters then they’re going to have to be contained in a separate screen. This allows for scalability and more options to be easily added without enlarging the search results page itself.

Make it clear that the screen is a modal one and not taking the user somewhere else. Show a big close or back icon in the corner and an obvious button to apply the filters. If you have space you could even show that the filter menu sits over the results by displaying a bit of the content behind.

Tappable

Make the filter buttons and checkboxes touch-friendly—make sure they are at least 40px high and that there is plenty of padding between the elements. Use steppers where possible, which allow users to tap to increase or decrease an amount, rather than having to go through a dropdown list of choices.

Access

To access the filters modal screen, have a button that is visible at all times. This allows the user to decide if they need to use the filters at any point in their searching and easily tap to access them. You can either make this part of a bar of options at the top or bottom of the page, or a separate floating button.

Indicate

You should have an indicator showing that filters have been applied on the search results screen. This allows users to see that their results set has been constrained and will help them understand if they aren’t seeing as many results as they might expect.

To show this you could make it as detailed as showing all the filters that are active, though this can take up a lot of space. Alternatively it could also be a simple as a little icon showing the number of filters that have been applied.

Scannable

Whilst you should group sets of filters to make the whole set more scannable, avoid hiding options within sections. This makes it hard to find all the available filters (especially if you have to open and close each section). It also makes it hard for the user to see everything they have got applied.

Total

You should show the user how many results their filtering provides. This allows users to see whether they are getting back a suitable number of results to look through. It also tells the user if they’ve managed to reduce the results down to zero, so they can remove a filter or two.

You should display this in a clearly visible location and it can even be placed in the text of a CTA to take users back to search, such as ’See 9 results’.


If you want more tips and advice on great ecommerce search pages (as well as the rest of the shopping experience) then check out my book, Designing Ecommerce Websites. You can get some of the book content for free in my email course too—sign up below and I’ll just send you a tip-packed email each day for 5 days.

Last updated on 20 February 2018

ecommerce / web design / ux / mobile / search / principles /

Designing Ecommerce Websites free ebook

Articles on similar topics

The UX design of an effective ecommerce basket page – an illustrated guide

Mastering the ecommerce experience funnel: listings

5 things you should stop doing on your ecommerce site