show password user experience

Question

I have an email and password field on the sign up form. A password rule text and a show password checkbox appear below the password field.

The rules for showing the div containing password hint text and checkbox is follows:

• As soon as the user focuses out(tabs out) of the password field after entering a valid password, the password tip should hide

• Another rule is, as long as the password does not match the rules, show the password tip

• When we click on the "Show password" checkbox or the "Sign up" button after entering a valid password, the focus shifts to the checkbox or button and since the password is valid as per the rules, it hides the password tip. Is there a better user experience for show password behaviour?

Answer 1

There is, imho, a better way to show this. Instead of a checkbox you could implement the style of Windows 8 (formerly known as Metro). They add a little eye to the right of the field, and when you press and hold, you see the password. Otherwise you see the usual bullits *******

The Windows 8 show password looks like this:

From security point of view, implement show password in the client only - never on server side.

Answer 2

I would recommend showing the password tip at all times. The reason being you would reduce potential frustration by providing a intial input or help to the user while he is logging in. Here is an example of how Yahoo keeps the password help at all times:

Though I agree the above case is for a sign up page, it can be extended to your application as it would keep the user informed about what his password must have been.

However if you do feel you need to keep the tool tip hidden due to space constraints, I would recommend keeping it active even when the password is shown since I would like to see what is wrong with my password that the error message is being thrown.

I would also recommend looking at this question Would it be bad design (and unsafe) to put password guidelines next to a login box?