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

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


5 Comments on “Overview on login forms”

  1. 1 JP said at 11:53 am on April 13th, 2009:

    I also dislike modal windows for a different reason. I use a password manager app to keep track of my username/password combinations (currently 352 and growing daily). And it simply doesn’t work on some modal windows. Particularly the Ajax kind. This is because the code doesn’t exist until you press the login button, so the app doesn’t see the fields to fill in.

  2. 2 Tarek said at 3:47 am on April 14th, 2009:

    It would be nice if you write an article on Sign Up forms too.
    What fields should be there, and what to be skipped for people to edit later in their profile or settings page.
    Is the confirm email and confirm password fields mandatory, or shall stop bugging users?

  3. 3 admin said at 7:56 am on April 14th, 2009:

    i have a draft article on that too, it should be finalized soon.

    it’s arguable with the confirmation fields, some say they are a must, some (including me) say that are a waste of time and space in la form. Stay put.

  4. 4 kathryn said at 8:29 pm on August 18th, 2009:

    nice roundup, thanks!

  5. 5 Tahir Alvi said at 12:33 pm on October 24th, 2009:

    very nice article.

    Thanks


Leave a Reply