The instance I selected the text a question mark appeared. Yeah, I don’t know what’s that. I click on the question mark and it opens a popup with a dictionary lookup on the word.

OH, how natural this was!!!

PS: Turns out the “amuse-bouche” is some kind of appetizer.

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

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

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

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

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

“404 – Please update your bookmarks”

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.