User Login Form Usability Ideas

January 21, 2010

If you have a site where users are able to have data associated with them, you probably have a login form. You may ask users to enter their email address, or a username for your site, or even an OpenID url. If they enter the correct information, they are granted access to otherwise protected areas of the site. But, if they don't enter correct information for some reason, they get presented with an error message and have to try again. There are two major hurdles to login form design that I am going to address.

Show their username again

When a user's login attempt fails, it's a pretty standard practice to unset their username and password and force them to re-enter them both. This is a bad design pattern. Users should not be forced to remember and reenter their username. Consider this workflow:

  • A user comes to your site, and enters their username and password. The username is entered into a regular text input, so it's plainly visible to the user and anyone standing over their shoulder.
  • The user's information was incorrect, so the page refreshes, they see an error message. The user thinks, "Oh, I must've mistyped my password". However, both the username and password fields are now empty.
  • The user tries to login again, however they are momentarily disoriented by having to remember which username they use for this site. Sometimes, users might even have multiple logins for the site, so they have to remember which one they just tried to login with, and even if that username is correct.
  • The user enters their username, and the password again, and hopes to get the information correct.

If the site left the username in the field, the user would not have to remember which username they tried to use, and could focus on typing the password correctly. By leaving the username in the form, you can eliminate a point of confusion for the user, and ultimately help users use your site.

Unmasking passwords

In one off his AlertBox columns, Jakob Nielsen takes the radical position that

Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures. -- Jakob Nielsen, June 23, 2009

Personally, I don't agree with him 100%, but since he's the world's foremost expert in usability there must be something to his claim. Security considerations aside, masking passwords does hurt usability. (Masking passwords means displaying bullets instead of letters and numbers -- '••••••••' instead of 'password') Why? It's because it forces your users to think about typing their password correctly, and thinking is bad for usability.

It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice -- Krug's second law of usability

I don't think that password masking is going away anytime soon, nor should it. It is still a security concern if someone can stand behind you and learn your login information. People routinely store all their life's information in their email inbox, so if their email account was compromised by a nefarious individual... well it would be bad.

Neilsen goes on to say, "users are sometimes truly at risk of having bystanders spy on their passwords, such as when they're using an Internet cafe. It's therefore worth offering them a checkbox to have their passwords masked". This is a Good Idea, and offers a sufficient compromise between security and usability.

So, for optimal login form usability,

  • Don't remove passwords after failed login attempts, and
  • Unmask passwords by default, but give the user the option to mask the password, for example when someone is nearby.