Designing Login Boxes: 6 Examples Of Good And Bad Design

 The login design to the WordPress blog administration (not the WordPress.com website) is just perfect. The page is in white and only what the user needs at that moment is displayed: the login box. There is no way to confuse users. An expression of simplicity.

The WordPress login in detail:

Lets see what happens with some of the Google services.

If a user has a Google Mail account is going to be very probable that she is going to be logged in most of the time. If she wants to login into Google Analytics she will be required the password anyways. This is done, probably, because many users have an account for Google Mail and another one for Google Analytics. This works fine here, although I would add a "keep me logged in" for those users using the same account for both services.

Google AdWords login works in a different way. When a user is already logged in at Google Mail and he goes to adwords.google.com, he will be automatically logged in with that account (if he is also registered at AdWords with it.) This is just great except for the fact that many users would not use the same account for those services.

The problem is even bigger if the user is not register at Adwords at all with the Google Mail account. In this case he is redirected to a page to create a new account but no login box is displayed.

The user is somehow trapped, he is redirected to a page without login box and going back to the previous page is not possible. The only solution is to go to Google Mail, logout and try again at AdWords. This kind of behavior is well intended but if it is not design properly it could confuse users.

Why do I like the FotoFlexer login?

Well, it has some nice details to improve usability:

1. Login happens through the user’s email address. Many users might set the account at FotoFlex with the same password they use for the email account. But many would not do that, to make clear that they are not requiring the email account password they ask for the "FotoFlex Password". I’m sure this avoids a lot of confusion.

2. Huge login button.

3. Huge "Register Here" button.

Problem:

"Forgot Password" and "Change Password" should look like links (underlined and blue).

Auctomatic.com developed a minimalistic login box. As the user clicks on "Login" the login box appears above the menu. In my opinion this does not look very good but that’s only personal taste. The problem it might appear is the "Forgot?" link. This website could be used by a lot of secretaries with only a little experience using the web. Using just "Forgot?" could confuse users…

 Maybe using a less minimalistic "Forgot Password?" could be a less confusing option.

The Dash.net login box looks nice but it could have a problem. When the user clicks on the input box to write in the username or password the title of the input box disappears. This could be trouble for some users, of course they will find the way to login but it is nicer when a user-friendly design avoids mistakes and saves users’ time.