Re-design of password masking in the registration form improve the user experience

A very practical article on the problem of password masking, translation contributions to everyone, I hope that in the design of the registration form has some implications.

Password masking is a very old practice, usually used to register and log on forms, to prevent prying eyes from seeing the user's password. Although password masking is a good security practice, it can still compromise the experience of registering a form. When users register, they expect to fill out a form that is uncontroversial and without worries, and password masking can be counterproductive.

One, apply to login, but not suitable for registration

Login forms are more common than registration forms. Users only need to register once to create an account, but require multiple login to enter the account. Because the login form is so frequently used, it is likely that the user will enter a password around others. Users sometimes want to show some content on the web to friends or colleagues, and they also need to log in. Therefore, the password masking in the login form works well because it hides the password every time the user logs on.

However, the registration form is different. Password masking often leads to errors in user input, because they do not see what is being entered and cannot tell if they have lost the error. The result of the error in the login is not as serious as the registration, if the user loses the password when logging in, they just need to enter it again. If you lose the error at registration, you may be locked out of the account when you try to log on, and you will need to reset your password. Users often do not complain about this situation. But the user does not see oneself in the input content, the operation is complex, this is the designer's fault.

What happens if you omit the confirmation box in the registration form?

In the registration form, a big obstacle to user-created passwords is the password confirmation box. This box requires the user to repeatedly enter the password and check the match to verify the error. The reason for the password confirmation box is that the user may lose the error while the password is obscured, and this extra box can verify the errors.

Password confirmation box is well-intentioned, but there is a disadvantage: the user has to be hidden in the password in two boxes to enter two passwords respectively, which is more prone to input errors. Worse, they had to correct the error, because the user could not see where it was wrong, so they had to clear it and re-enter it. The Password confirmation box not only causes more input errors, but also allows the user to do more to fix the problem, slowing down the process and making the registration a pain point.

Third, the temporary removal of password masking can reduce the rate of transmission error

Password masking in the registration form can cause more unnecessary trouble to the user. It not only obscures the password, but also masks the user's input error, making it difficult to find and solve. It does not provide as much security as it does because people usually sign up for the site in a single person, and there is no one around. Registration is usually a one-time operation: once completed, there is no need to do it again. Displaying a user's password in plain text may not be a security risk. Even if a user registers in a public place, the opportunity for prying eyes to see the password is slim.

The solution to all these problems is to temporarily remove the password masking, so that users can quickly and accurately input, which means that the password is not obscured in a short time so that users can see their input. A short masking can reduce the error rate and make it easier for users to view and modify errors. And the user does not need to worry about the voyeur, because removing the shadowing is instantaneous, for example, if we display the last few characters of the input, it is very difficult for the voyeur to remember a string of random alphabetic characters in a few seconds. If we only show the latter few characters, they will take a long time to peep through the entire password.

I think we sometimes get paranoid in our heads--so the bigger problem is that the user is locked out of the account because of the password masking. Here are some simple tips to prevent this from happening:

Tip 1. Do not use shadowing at the focus of the input box

You can make it easier to fill in passwords and be more secure at the same time, by removing the shading from the keyboard focus in the input box, and then automatically obscuring the focus when it is moved out of the box. The user can only see the characters entered when the input box is activated, thus reducing the error rate and protecting the character from being stolen when the user enters content in another box.

Another small security measure that can be used is to display the password in light gray italic characters. In this way, you need to be close to the screen to discriminate each character. Peeping people rarely stare, except for the person sitting in front of the screen, which makes it difficult for others to identify the password.

Another option is to show only the last character of the password, and hide other characters with an asterisk to confirm the password entered by the user.

Tip 2. Use check box when removing shading

Another method is to take a check box when removing a mask. In other words, the user enters the password to use the masking, when checked the check box, removes the masking, enables the user to see whether oneself enters the error. This method has one more step check, but it is much better than a password confirmation box because it allows users to easily view and modify their input errors.

Summary: Balance between security and user experience

It is advisable to follow design conventions, but when a convention slows down the process, complicates the task or increases the likelihood of error, it needs to be reconsidered. Security should be balanced against the user experience. Too much emphasis on security will create pain points for product use, and focus on the user experience, while ignoring security can make visitors uncomfortable when they use it. Once the balance is found, the user's use is not in any trouble, even if it does not fully conform to the design conventions.

Note: English original: Better Password masking for sign-up Forms, compiling: Hou Wempe (@ Hou Wempe)