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

How to name your files

Posted: March 31st, 2009 | Author: | Filed under: Good practices, Usability fail | Tags: , , , , | 4 Comments »

I was reading an article on Useful Usability and opened all 15 links to save the PDF files on my computer. I don’t have the time to read them now but i hope to find some in the near future. (It’s basically like writing things on a CD, you’ll never insert that in the optical unit ever again :) ).

Anyway, I saved almost all of them in a directory on my computer. Looking at them later I realized many of them have names which don’t say anything about the content of the file, one of them is named “johnny.pdf”. The title of that particular article/study is “Why Johnny Can’t Encrypt: A Usability Evaluation of PGP 5.0″. While “johnny” is part of the title, left alone it doesn’t say anything about the usability evaluation in the file.

When dealing with files on the web, name them according to the content. You don’t know where they may end up, you want exposure after all, help that exposure with a content descriptive name.

Another important reason: SEO. It’s one thing when Google Bot crawls a picture of a blue book named “blue_book.jpg”, and another when it crawls “ds7d6s9ad99s9s76d6s.jpg”. Your picture will end up higher on the Google Images Index and generate you more traffic.

The main reason though, has to be the user. To a human being “ds7d6s9ad99s9s76d6s” doesn’t say anything about the content, “blue_book” does.

Developer note:
For huge applications dealing with many files it’s quite hard to avoid duplicates (that’s why developers use hash strings like “ds7d6s9ad99s9s76d6s”), take flickr.com for example, all their image names look like that. For the rest of the applications developers can use some kind of hybrid naming like “blue_book_7d7s8767.jpg”. It’s much better than to use only the hash string.


You know…

Posted: March 26th, 2009 | Author: | Filed under: Usability fail | Tags: , | 3 Comments »

… you have a problem when the user reaches your help pages. Usability fail.


Overview on login forms

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

We discussed the other day about the login with email vs. username and I came to the conclusion that it depends on the type of the application, if it’s social, you’ll want username, if not, it’s better to only ask for the email.

Today we’ll take a look at login forms as a whole. We’ll see the good practices, the “dos” and “donts” with examples from a few major sites on the internet. I’m not saying there’s a right formula for all the sites but there are some things that need to be on every one of those login forms.

So, let’s cut the crap and get this going (because some of you only look at pictures and read bold text, and i know that).

Examples:

amazon

Amazon.com get’s it simple. Two fields, a button and a “forgot password” link. That is all there is mandatory on a login form and that is what the guys at amazon put there, no more, no less. Authentication is made by email and password.

cnet

The next example is from cnet.com. They have a few more options: a register/join link (if you don’t have an account), a remember me checkbox and a feature i started to see on many websites, connect with facebook. I didn’t try but i guess you can use your facebook account which is great.

digg

Digg adopts a different way to show the form, a modal window. I personally hate modals, i think they require useless clicks. They have also a “create new account” as an alternative and offer a recover username option. Looks nice and clean.

ebay1

Ebay.com has 4 links in the login form, a bit too much if you ask me. They also have a “keep me signed in for today” option and some advices to avoid others entering your account or phishing attacks. They have a history there, it’s normal.

elance

Elance.com adds a radio button option because there are 2 types of accounts, there is one checked by default so it’s quite ok. There is a locked icon with no title on the link so a user does not know what it does until it clicks. Does it lock your account?

facebook

Facebook login is also simple: remember me, forgot password and login. I think they could do better than a blue button on a blue background.

google

Google accounts it’s also quite simple, they have a “remember me on this computer” checkbox, a “create account” alternative and a rather unusual link for password recovery named “i cannot access my account“. I think the title is quite natural.

imdb

IMDB has the ugliest login form i have ever seen, no CSS whatsoever, but, it gets the job done, i think. IMDB also lets you login with either username or email. Interesting, they let the user choose, or they switched a while back from username to email and that’s how they support the old accounts.

live

Live.com (msn, hotmail etc) has some rather confusing login: they ask for a “live ID” and give an email as a example (if it weren’t for the example the users were doomed) and two “remember me” options: one for this computer and one for the password. This cant be good for a naive user. They also have a link for “using advanced security” whatever that is.

myspace

Myspace has a really nice idea for offering an alternative to login, they made two tabs with login and signup, the login is the default (used more). I like it. Also like the contrast of the login button, well done.

newegg

Newegg is hustling as little the customers, it offers a “subscribe” checkbox on login, that can be frustrating when you log in often. They also offer the option to create a new account and they describe a little the benefits of doing that. I dont like the fact the buttons have the same weight. Which is more important, the login or the signin? :)

nytimes1

NYTimes.com moves the focus on new members (see the background, position, colors), i guess we know who’s more important for them. I don’t say it’s wrong, growing the userbase is the most important thing for a content website, so they act like it.

twitter

Twitter has a pretty weird login if you ask me, it has a confusing name (“sign in”) which sounds a lot like “sign up” and it has a big red “watch a video” button. C’mooon, if I have a twitter account I kind of know what it does, don’t I?

wordpress

WordPress has a nice simple form, and they have a tooltip with “This is a secure form” on the damn icon. Nicely done. They don’t offer a register alternative in the form but there’s no need, there’s a HUGE blue “sign up” button on the page.

wsj

Wallstreet Journal has a sliding form when you click login, nice and very space saving… buuut…. when you click login and the form slides down, it disables the register link, so you’ll have to wait until it slides back up or you click login again to toggle the form.

yahoo

Yahoo dealt with so much problems in the past (account stealing, phishing etc) that they made up a “seal” system to protect you, you upload a picture which will be saved and will set a cookie on your browser so when you come back to login you’ll see the picture and know it’s not a phishing site. I dont know how many people actually use this, I don’t.

Conclusions:

- keep it simple, the more options you add, the more confused your users will be
- I strongly suggest you keep a login form on every page of your website, if the site requires users to login often. One click away forms are … one click away.
- the button must be a button, a “call to action”, use colors, contrast, spacing
- make sure the form can be used from the keyboard and submitted with Enter
- password recovery option is mandatory
- offer a register alternative for users who don’t have accounts
- make it visible, look at the ebay page below, it took me a while to find the link with all teh red things there. I’m not saying the user will leave without finding it, but it grows in frustration, and there is a limit for that.

ebay_homepage


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.


Friendly URLs

Posted: March 13th, 2009 | Author: | Filed under: Good practices, Patterns | Tags: , , , , | 1 Comment »

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

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

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.

pagination

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

Posted: March 9th, 2009 | Author: | Filed under: Good practices, Patterns, To do | Tags: , , , | 1 Comment »

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.

The javascript alerts are the mother of all modals. Why in God’s name would you want a box to pop, tell you something you already know and have to click ONE SINGLE BUTTON to get rid of it? This is sick.

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

Posted: March 7th, 2009 | Author: | Filed under: Good practices | Tags: , , , | 13 Comments »

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.


Making users stay on your website

Posted: March 6th, 2009 | Author: | Filed under: To do | Tags: , , , | No Comments »

Let’s say you have a website or an online application and naturally, you want the users that get there to stay there. It’s not really the fact that the user leaves the website or how long he browses the site that interests me, but the question if he/she walks away frustrated or happy.

What does a user do when he/she get’s frustrated? User leaves, you say.

Yes and no. Yes he leaves, but not in a instance. Studies show that the user tries to get things working, he struggles a bit until he gives up and leaves. There are many ways to keep a user on your site, to make him feel ok, we’ll talk about a few of them in the future, but here’s the most important:

Make the user think he needs to stay!

How do you do that? Well, it sounds simple but it’s really not: cover one of his needs, scratch one of his itches, give him something he wants. The primary the need is, the badly the user will stick to your website and use it.

Believe me, if air would be available only on your website, you’ll have about 6-7 billion users on it every moment.

Set a primary goal for your website/application and stick to it, strip down all the nonsense that get in the way of the user and let him reach what he came for, he will come back, write about it, tell friends. This is the most common mistake the young entrepreneurs make: fill the application with lots of features, information, colors, distractions and don’t make a easy and fast path to the main goal of the user – the itch scratcher.

The rest, where do you put the register button so the user doesn’t leave until he registers… ARE DETAILS. You can have a perfectly usable and optimized interface and still an unsuccessful application. Users want to get the job done fast, easy and free if it’s possible.


Is your 404 page usable enough?

Posted: March 6th, 2009 | Author: | Filed under: Errors, Patterns | Tags: , , | No Comments »

There are lots and lots of articles on 404 pages and creative solutions for that. I was reading (looking at it to be more exact) today a post on Pattern Tap and i thought: What is a common user thinking when he sees:

404 – Please update your bookmarks

2009-03-06_1736

The common user has no freakin’ idea what “404” means.

The rest of the message is confusing also: “Please update your bookmarks“. Huh? bookmark? what bookmark? my bookmark? what’s a bookmark? Have i done something wrong? Is it me? Oh man, i fucked up, didn’t I?

The 404 message must be clear: “The page you’re looking for does not exist, either you came on a broken link or the page was deleted in the meantime” or something like that, in plain english so your mother could understand it.