Good content is sometimes not enough, the users must reach it so they can see it's good!

Product filters

Posted: March 16th, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , , , | 2 Comments »

I was talking the other day about pagination and David Hamill had a point there, those tiny numbers don’t send any message to the user, so what’s the alternative?

Well, a nice solution is the one used in Google Reader, when you scroll down to see the last feeds, if there are more, Google loads a few more and so on. Although this is a very nice idea, it’s not without disadvantages:

– you might not scroll all the way down and the feeds will not load
– it requires AJAX and that is not really SEO friendly, you want your products to be indexed by search engines
– it doesn’t work on browsers without javascript capabilities or with js disabled.

The most common alternative remains product filters. Just about everyone understands them and they are really easy to use. As I found some nice ones on getelastic and I knew a few other, I decided to show you the visual side of filters.

likecom likecom2

The first one is from like.com (one very very nice site btw) and it shows a shoe filter by style, you can see the visual icons on the left, not everyone knows all the names of the shoe styles, so that’s really helpful. The next one near it is from like.com also (you can see the resemblance) and it’s the most easier to make visual filter: showing the actual color near the color name. For the human brain it’s much faster to see colors than to read words (if you paid attention in science, color is a wavelength variation of light and we distinguish light very fast).

actionenvelope

I saw the next one on getelastic too, I really liked it and it’s found on actionenvelope.com. It shows an envelope filter by type/shape. Again, visual clues make the choosing much more effective.

ebay

This one is my personal favorite, it’s from Ebay and it shows a little car illustration for every type of car, because some people don’t know what’s a “hatchback” or a “coupe”, i’m guessing. Although I like this very much, I see a flaw, you can’t choose two of them if, let’s say, you want a sedan but you have nothing against hatchbacks too.

eastbay

The next one is a color filter with a twist: size. It’s from eastbay and it works like this: you find a shoe, hover the color variations and see below the available sizes highlighted. Pretty neat.

preciousglow

Here’s another one, from preciousglow.com, it’s a filter of diamonds by size, if you don’t know how marquise diamonds look like.

sonyericsson

The last one from this list is another shape/style filter from sony-ericsson, for the users more phone-naive, if i can call them like that.