Innovation

How optimise your product filters for mobile

Go Back
Kate Pearson

2 months ago

When customers want to refine their search while shopping your mobile site, it’s vital the filters on your product pages are as easy to select as they are to navigate.

This is particularly true for mobile considering the limited space on this device. Retailers should ensure their filters are as efficient and concise as possible, which is something we’ve been working hard to achieve at blubolt.

In this post we’ll explore ways in which retailers can optimise the appearance of their mobile filters, in particular, multiple filter options. We’ll also highlight the work blubolt have been doing to mobile filters to help reduce friction and provide a more seamless shopping experience for customers.

Include multiple filters

Firstly, allow users the option to add multiple filters per search in a refine section. This is ideal for clothing companies. For example, customers looking for multiple sizes or colours in the same item can narrow down the search results.

Filter placement

The majority of eCommerce mobile sites will have their product filters in an easily accessible button on mobile. Often, it’ll be a hamburger style expand button located in the top corner of the screen, which indicates ‘filters’.

It’s also a good idea to pin multiple filters to an easily located section of the screen. Called some various of ‘refine’, this button is best found at the top of every product listing page. Making it easy to find means customers can narrow down their search quickly. They’re also less likely to get bored scrolling through too many results.

Route One ensure their filters are always accessible, including they “Refine” and “Sort by” buttons, which are at the top of every PLP. As an added bonus, they include arrow icons to indicate the direction of the expanding menu.

Icons or text

Another way to help streamline navigation is to ensure the filter buttons are simple to understand. This may sound obvious but some mobile sites just icons. Although they save space they can also confuse the purpose of the button.

Use one word, or minimal text with an icon, for things like ‘refine’ and ‘sort by’ on the product listing pages in order avoid confusion over their purpose.

Robert Welch use a combination of texts and icons to indicate the function of their multiple filter buttons.

Show numbers per filter

Show how many options are available for each filter choice or provide a total number once multiple filters have been selected. This way, customers can avoid the frustration of refining their search only to be presented with a ‘no results’ screen.

Children’s clothing company Frugi have simple to navigate drop-down filters in their refine section. Users can clearly see their selections in text to the right and the total number of items available at the bottom of the screen.

Remove all filters

Finally, provide a ‘remove all’ or ‘reset’ button within the multiple filters section. Customers can easily and effortlessly start their search again.

What have we been working on?

Following extensive market-research and user feedback, we have redesigned our mobile filters to provide optimum user experience. In particular, we’ve optimised for customers selecting multiple filters in order to provide a smoother navigation on the product listing pages. We’re expecting these visual and speed improvements to have a positive impact on the way customers shop on their mobile.

Some of the updated features include:

 

Improving this experience is part of our bigger roadmap at blubolt.  If you’d like to hear about our platform and services we offer at blubolt, please get in contact with us today or click here to explore our mobile solution in more detail.