Product filters might seem like a small and even insignificant feature on an ecommerce site. But in reality, a slick system can be the difference between a seamless user experience and a clunky one.

With this in mind, I did a little digging to see the state of play on some of the most popular fashion retailers online.

Here are a few product filters that caught my eye – both good and bad.

(Note - as there are a few differences on mobile, such as abridged filters, I am solely concentrating on the desktop experience for now.)

H&M

H&M’s ‘Shop by Feature’ filter is designed to point the user in the direction of curated themes.

While creative in theory, it actually seems to be quite pointless.

What the retailer seems to have forgotten is that the whole point of a filter system is to narrow down products in order to point the consumer in a specific direction – not lead them down a random path to ‘off duty denim’ when it’s far easier to just filter by ‘jeans’.

Aside from this, the regular filter is very user-friendly.

With options to choose by colour, size and style - plus a handy 'clear all' button - it's easy to narrow down exactly what you're looking for.

River Island

River Island’s filtering system is slightly fiddly in that it only allows you to select one filter at a time (selecting mutliple filters involves multiple reloading of the results page).

However, one feature I quite like is that it allows you to see how many items each one includes. While this might sound slightly off-putting (I did occasionally find myself focusing on the number rather than the actual category I was selecting) – it is pretty helpful.

For instance, if a filter returns just two items, you’ll know ahead of time rather than clicking through just to be disappointed.

Zara

Zara’s filter system is a mixed bag. By placing it at the top of the page instead of the left-hand side, it focuses the user’s attention.

It also enables you to select multiple features at once, using specific elements like ‘characteristics’ and ‘colour’.

And we mean specific… Anyone happen to know what an ‘ecru’ coloured shirt looks like?

Well thanks to its filtering system, you do now.

On the other hand, its filter button is not the most visible, nor are highlighted filters, a fairly major UX issue.

Annoyingly, there is also no option to sort filtered results.

zara

Ted Baker

Much of Ted Baker’s website is slick, so it’s a little disappointing that its filtering system is less so.

While it does offer a decent number of options to filter by, including patterns, colours, sizes etc, like River Island it only allows you to choose one option (i.e. colour or size) before you have to repeat the process to choose another.

Furthermore, the drop-down menu is a little slow, making the whole process feel slightly frustrating.

Luckily, with its creative copywriting and lookbooks, there's a lot to enjoy elsewhere on the site.

Hunter

Like Ted Baker, Hunter’s filter is in the form of a drop-down menu, however, with separate tabs for each filter option – it’s far easier to use.

It also includes some nice touches like a tick appearing as you narrow down the search, and an instant reset button.

Marks and Spencer

User reviews is a feature that many retailers fail to utilise. Functioning as a vote of confidence, rating systems are always useful for consumers that are unsure of what products to buy.

Marks and Spencer is one of the few retailers to shrewdly include them.

Allowing users to filter by star ratings (1 and above, 2 and above and so on), it helps out the consumer who values other people’s opinions. While it’s located at the bottom of the left-hand side and so fairly inconspicuous, it’s still a worthwhile addition.

 

Suit Supply

In contrast to H&M, Suit Supply is a great example of how to use product filtering in a more creative fashion.

Instead of words, it utilises visuals to highlight various product features, cleverly showcasing the retailer’s wide variety of options.

From collar type to style by context, this element is simple but effective, and something I've not come across before.

ASOS

With such a large amount of items, it’s a good job that ASOS offers such as comprehensive filter system.

From brand and style to fit and sleeve length, there any many different options to choose from, and with different filters across different categories - it’s cleverly executed.

As well as helping to guide the consumer to find what they like, it also allows ASOS the brand to showcase its wide variety of products.

  

What can we learn?

While H&M's example might not work, the brand's willingness to experiment with product filtering should be applauded.

If done right, a decent filter can massively improve the user experience.

Fast, with clear visuals and the ability to select multiple options... that's the dream.

Nikki Gilliland

Published 25 July, 2016 by Nikki Gilliland @ Econsultancy

Nikki is a Writer at Econsultancy. You can follow her on Twitter or connect via LinkedIn.

609 more posts from this author

You might be interested in

Comments (1)

Gloria Kopp

Gloria Kopp, Content writer at Studydemic

Great examples! I love H&M filters the most.

over 1 year ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Digital Pulse newsletter. You will receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.