Design detail: An easier login form

Jakob Nielsen recently posted an article urging designers to stop masking passwords on websites. Password masking means showing dots or asterisks instead of the actual password when you are typing it into a web form. Here’s the summary of Nielsen’s argument:

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.

An easier login form

Nielsen’s article sparked some controversy in the interaction design circles. It also made me think about other aspects of login forms that could be improved, and here’s what I came up with:

  1. Use input prompts to tell users what to type into a text field. Input prompts can improve most forms and you should apply them generously.
  2. Use real-time validation to help users type their input in the correct format and let them know immediately about any potential errors.
  3. Use real-time validation for username to check that the user account exists.
  4. Disable submit button until user has completed all required fields. Do this in conjunction with real-time validation to ensure correct input.
  5. Use good defaults so that users can complete the form in as few interactions as possible.

Let’s have a look at Twitter’s Signup screen for inspiration and put the above improvements into practice. Here’s my design sketch of an easier login form:

Design detail - An easier login form by Volkside

Obviously this approach won’t work for applications with very high security requirements, where you don’t want users ‘testing’ which accounts exist and which don’t. However in many web applications users already know each others’ usernames, and the practical level of security is maintained whilst providing a better login user experience.

What do you think of the above design?

How would you simplify it further or otherwise make it even more easy for the users?

In closing

Here’s a great tweet from Robert Hoekman, Jr., the author of Designing the Obvious and Designing the Moment:

From @lorenbaxter: “Which brings up the question, How critical is it that your users log in?” Bravo, Loren. That’s the real debate to have.

So, optimising the design of your login form can improve the user experience tremendously but getting rid of the form altogether might improve it even more!

Further reading

Password masking:

Web form guides:

Login form galleries:

This entry was posted in General, Interaction design, User experience and tagged , , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.

One Comment

  1. Posted 27/07/2009 at 10:18 am | Permalink

    For further reading… here is the login form:

    http://tribune.majlab.com/code_examples/mask_password.html

    …that has a simple standalone JavaScript solution for masking the password field. No JQuery or other library needed (~500 bytes only)

  • Volkside products

    • Naview helps you create easier navigations through prototyping and testing
    • Wirify is a bookmarklet that lets you turn any web page into a wireframe in one click
    • Tweetpond is an underwater-themed ambient visualisation of Twitter
    • More …