Masking passwords is a common age-old practice that’s found on sign up and login forms. It’s used to prevent over-the-shoulder snoopers from catching a glance of the user’s password.

While masking passwords is a good security practice, there’s a chance it could jeopardize the user experience of your sign up form. When users sign up on a website, they expect a no-hassle, worry-free form to fill out. But masking their password could prevent that.

Good for Logging in, Bad for Signing Up

Login forms are used more often than sign up forms. Users only need to sign up once to create an account. But they need to log in multiple times to get access to their account. Because users use login forms so often, there’s a strong chance that users will end up typing their password in front of other people.

Sometimes users might want to show their friends or colleagues something on a particular website, and they would need to log in to do so. Therefore, masking passwords on login forms is good because it keeps passwords hidden every time a user logs in to a website.

However, password masking on sign up forms is different. Password masking generally causes users to make more typing errors because they can’t see what they’re typing and can’t tell whether they made a mistake. The consequences of making a typing error when logging in is not as serious as making one on signing up.

If the user fails to type in the right password when logging in, they simply try again. If they type in the wrong password when signing up, they’ll get locked out of their account when they try to log in, and will have to reset their password.

The user isn’t to blame when this happens. It’s the designer’s fault for not making it easy for the user to see what they’re typing in the password field.

Killing Confirmation Fields on Sign Up Forms

A big hurdle that password masking creates for users is the password confirmation field commonly found on sign up forms. This field requires users to retype their password and checks that both match so that the wrong password doesn’t go through the form.

The reason password confirmation fields exist is because users can make typos when they type their password with masking on. Password confirmation fields catch those typos so that a wrongly typed password doesn’t get submitted.

Password confirmation fields might exist for good intentions, but they have a downside. They cause users to make even more typos because they have to type their password twice in separate fields with masking on. What’s worse is the extra work they have to do to correct their typos.

Since they can’t see where their typos are to fix them on the spot, users have to clear the fields entirely and retype their password. The password confirmation field not only causes more typos, but forces users to do more work to fix them, slowing them down and making sign ups more of a pain.

Unmasking Passwords Temporarily Decreases Typos

Password masking on sign up forms gives users more trouble than it’s worth. It not only masks the password, but any typos the user makes. The security it provides is often less than helpful because most people usually sign up for websites in private, with no one looking over their shoulder.

Signing up is usually a one-time deal. Once they’ve done it, they don’t need to do it again. Displaying their password in plain text that one time when they are alone is not as big of a security risk as most think. The chances of a snooper catching the user’s password is slim to none, even if the user is signing up in public because most snoopers aren’t random strangers, but rather somebody the user knows.

The solution to all these issues is to temporarily unmask the password so that the user can fill out the field quickly and accurately. Temporarily unmasking means only unmasking the password for a moment so that the user can see what they’ve typed.

Temporarily unmasking decreases password typos, and makes it easy for users to catch and fix any typos they make. And the user doesn’t have to worry about snoopers stealing their password because the unmasking is quick. Snoopers would have to memorize a string of random, alphanumeric characters on a screen in a matter of seconds, which is very hard to do.

A lot of the password snooping paranoia is blown out of proportion. Password snooping is not as big of an issue as most think. The bigger issue is users getting locked out of their account because of typos caused by masked passwords. Below are a couple of simple techniques you can use on your sign up form to prevent that from happening.

Unmasking on Field Focus

You can make the password field easy for users to fill out and secure at the same time by unmasking the password when the keyboard focus is on the field, and then automatically masking it when the focus is off the field.

This allows users to see the characters they’re typing only when the password field is selected, decreasing the risk of password typos, and preventing others from sneaking a peek of their password when the user has moved on to other fields.

Another small security measure you could add is to display the user’s password in small, light gray, italicized text. This makes your password hard to make out from a distance. Making out each character would require moving close to the screen. The only person that has a clear view of the password is the one sitting right in front of the screen.

Unmasking with a Checkbox

Another approach is to provide a checkbox for unmasking. When the user types their password, it’s masked. But when they check the box, their password gets unmasked, allowing them to see whether they’ve made a typo.

Users have to make a little more effort with this approach by clicking to unmask and mask their password. However, this is far better than a password confirmation field because it allows users to see and fix their typos with ease.

Balancing Security and User Experience

Following design conventions is generally recommended, but when a convention slows users down, complicates a task or increases the chances of user error, it needs serious reconsideration. Security should be balanced with user experience.

Favor security too much over the user experience, and you’ll make your site a pain to use. Favor the user experience too much over security, and you’ll make users feel nervous about using your site. But once you find that balance, users won’t have any trouble using your website, even if it doesn’t follow every design convention.

Toolkits