Product filters

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.

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).

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.

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.

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.

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.

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.

Friendly URLs

Friendly URLs are are usability patterns if you want. Let me explain myself for a moment here.

When a user sees in his browser example.com?index.aspx?action=art&id=7799&cat=52&p=2#a22 he simply ignores that. That URL doesn’t give him any information at all. It’s a bunch of numbers, parameters, crazy signs.

When he sees example.com/kitchens/a-article-about-nice-kitchen-furniture.html#comment-no-22 on the other hand, the user kindda’ guesses that he’s about to read an article about kitchen furniture, part of the kitchen articles category in the site. Hell, some computer-savy guys might know the browser will set on the 22nd comment to that article.

URLs can act like breadcrumbs. It’s a signpost, a “You are here” marker.

Bonus: they are great for SEO, everybody knows that, and they are much more appealing esthetically.

Usable pagination

You would think the most visited sites in the world would have perfect or close to perfect pagination systems, because let’s face it, the users browse a lot (that’s how the websites became most visited in the first place). Well… not really. Although there are good examples, none of them seem perfect to me. Some of them fit the content of the sites they’re on pretty good, google search for example – it doesn’t need anything else, it’s stripped to the skin.

My personal favorite is ebay. It is the only one which jas a “jump to” feature – very useful from my point of view when you have lots of pages (maybe filters too). What ebay lacks is links to first and last pages – a quick way to change the order of browsing.

The links on pages – it’s preferable to have well defined click areas with a few px of padding. It’s damn hard to click those little numbers. Many sites go with the square like links – they are very good, easy to click, follow, see.

Next – Prev buttons – should have indicators: arrows, < >, « » or anything suggesting the direction. The user sees and evaluates these things a lot faster than the word “Next” or “Previous”.

Positioning - bottom of the content is mandatory, but in sites with heavy browsing i suggest duplicating it at the top too. If you have 30 products on a page it takes more to load them and scroll down, so a pagination at the top will increase the speed of navigation.

Here are the examples.

Modals are killing the spirit

One of the worse things to put on your website/application is a modal alert. I’m not glad with the modal forms either. The only modal thing i can live with must be the lightbox style view of images, if the images are large, this is probably the best way to view them fast and with the smallest effort.

And i’ll tell you why that’s so frustrating: once a modal alert pops in you cant do anything else, you cannot use any of the browser’s functions, cant see on another tab what the terms on the alert are meaning, can’t go back either. This is worse when the message is not clear and you have to confirm something with “OK” and “CANCEL”. “Ok what? Cancel what? Is this gonna ruin the work i’ve done so far if i get it wrong?”. Not funny.

I’m a little bit of a hypocrite. I use javascript confirmation when deleting something. You would think that’s a good thing but it’s not, try to delete 10 things one by one and you’ll know what i mean.

Solutions:
- instead of alerts use inline messages (see the yellow bg ones on Gmail) are the most elegant and usable solution to a problem i have ever seen, non intrusive, space saving, time saving. If the messages disappears after a while it’s perfect.

- Instead confirming a delete let the user delete stuff and provide a “UNDO” option. (It’s said that the undo functionality is the greatest way to let user explore, fuckup, recover, the best way to change the user from beginner to intermediate). Of course, this is no easy job for a developer. Providing such a feature is a real pain in the ass, that’s why you don’t see it on many web applications, that’s why i break the usability rules and ask users for confirmation when deleting.

Login with email vs. username

Today we’ll discuss why is much better to ask the user to login with email/password instead of username/password. I’ll be short and punctual, i don’t like long blabbing articles the essence of which can be written in a line, so:

1. The email address can’t be already registered (obviously), and if it is, you registered it and you can request a new password
2. As a consequence of the above, the user can’t forget his email. You may be having what, 2-3 email addresses? You can’t forget them
3. One less field on the register form. Everybody hates long forms
4. You make the users use a real name, instead of s_87757 or pinkygirl1995 or other crap like that

If you think of something else, drop a line and i’ll add reasons.

Content is the king!

The most important thing in a website is the content, what the website can do to make the user happy. It can be an information (or a lot of information – see wikipedia), it can be a product (or a lot of products – see Amazon), it can be a kind of entertaining (Flickr, Youtube), or anything that adds a +value to the user’s life.

So, the content is the king, but the king is nothing without his people – the users.

Everything in the site/web app must be created to make the life easier for the user, to facilitate his/her access to information/products/etc. I’m gonna tell you in a future post how easy is the user driven away from a website and how hard it is to make him/her stay or even come back again.

These posts won’t be “laws of usability”, i don’t know everything and some of the time i will be wrong. Not ashamed to admit  it. We all learn from our/other’s mistakes, we just have to have the power to admit/see the mistakes.

Bottom line, take the information presented here with a grain of salt, chew it yourself, come with a better solution and be so kind to drop me a line.