Usability tip: how to create filters?

At SEM Days 2012, Paul ROUKE, Head of Usability & Conversion, PRWD talked about filters in an e-commerce stores.

Filtering is a way of reducing the number of products in a product listing. Users choose which criteria are important to them and view only relevant products. For example, price-conscious users may choose to view only products for under £10 (thereby filtering out all products over £10). (says here – Filter & sort: Improving ecommerce product findability)

Let’s have a look at a photo:

(via)
And another one:

(via)

And another one:

(via)

OK, what do we notice?

  • You can have multiple selections. You can select filter A and filter B in the same time.
  • You can set a price range (At ASOS you can slide any number you want – 2, 3, 4, 5, anything; PC Garage does it differently, the values increment as the prices in the specified category increase; so, if you have products which cost 2, 10, 14, 20, 30 lei, you can only select 2, 10, 14, 20, 30 lei as slides; you can’t select from 11 to 17, you can select either 10 to 20 or 14 to 20 or something like that; at eMAG they care for speed – you either select a predefined ragne, or you insert exact differences; I personally like eMAG’s solution better; PC Garage follows equaled by ASOS – for IT guys, it may be a cool feature to be able to select just predefined values; for fashion girls, the above feature might lead to a confusion and frustration – “Why can’t I select 13 as a value? I want 13!!!”.
  • eMAG does a great thing and shows you the number of products you’re going to get after applying a certain filter.
  • The filters are easy to spot, on the left, already expanded. It’s easy to select them, you don’t have to do an extra click for this.

Paul presented some other ideas like the ones above here:

My thoughts on this?

  • I think filters should be as close to one click as possible. Avoid “select – select – click”. Make it one click.
  • From an SEO perspective, you should be reading a lot on duplicate content if you use filtering / sorting in a category. It can lead to problems. I’d suggest rel=”canonical” as a solution, but do read more on this.
  • If you list, let’s say, only a few producers (top 5 producers, instead of all 50, most of them with a product or two), you should have a “See more” link which should be AJAX powered. The page shouldn’t reload when I click “See more”. I click, the instantly show, I click a desired producer, now the content reloads.
  • You should also use filters non-dedicated to specifications – like “We have it in our stock” or “Products added in the past 30 days” or “Products for which the producer has recently reduced prices” or “Products at promotions”. You don’t have to do this, yet my suggestion is at least considering this.
  • Combine filtering with sorting. If I can see only products between X and Y dollars, sorted by decreasing popularity, I’m a happy person. If you randomly display a list of products, and I can’t alter the sorting, I won’t be happy.
  • I have this thought – if you use a slider for price, and the prices go up and down, how about showing an image as the slider moves (first an image with the cheapest product, then a more expensive product, as the slider moves, then a different product, and so on)?
  • You may want to consider clear-cut filters. Instead of saying “Dresses which contain red”, you might want to use “Dresses which are ideal for a wedding party” or “Dresses that go nice this season” or “Dresses which are for older people” or “Dresses which are fit to be worn at the office” or “Dresses which we have blogged about” or “Dresses which have received awards” or “Dresses which our clients search the most for”. Something like that. Some of these can be also be used as sorting options.
  • Don’t exaggerate with options and selections. PC Garage offers everything, eMAG only partially. In my opinion, ASOS offers too much, and eMAG does just the right thing – it offers you enough sorting/filtering options that you don’t feel overwhelmed. Filters should, themselves, filtered. You do this for the customer, you’re the expert, not the visiting confused client.
  • You may want to put clear contact data after some filters are applied. Let’s say I want to buy a camera between 1,000 and 1,500 lei and I look at DSLR. If I get only one product, how about putting, after that one product is displayed, a line which says: “Not enough products? Contact us and we’ll help you with the decision”.
  • I’d also consider in-place suggestions. If I select a 3,000 lei point-and-shoot camera, why not suggest me “Hey, for this amount you can get a really good mirrorless camera; it’s the same size, and the quality is better”. This goes beyond selling, and I don’t consider it an option working for every store. But you might want to consider it.

Note: Also see the Yahoo! Group on which I present similar issues:IMRo. To join, email imro-subscribe@yahoogroups.com and reply to the confirmation email.

I am a Freelancer. My expertise is in SEO (Search Engine Optimization) / UX (user experience) / WordPress. Co-founder of lumeaseoppc.ro (series of events on SEO & PPC) and cetd.ro (Book on branding for MDs). On a personal level, I like self-development - events, sports, healthy living, volunteering, reading. I live in London, and lots of things live in me.

No comments yet.

Leave a comment

Your email address will not be published.