Icon for unmasking passwords (open or closed to begin with)? [duplicate]

Question

What is the convention for showing toggle icons to a user? This question is specific to password unmasking, but it can easily be used in "on / off" icons et al.

In our situation, we have an unmask button at the end of a password field. The password is masked by default, and the icon is an open eye indicating "if you click me, you will see what's behind the curtain" Then the inverse is true when the password is unmasked. The eye is closed, indicating "if you click me, we will hide your password".

see the following two images.

for the user's experience, is this the right approach for this situation, or should it be the opposite?

Example:

• password masked == eye closed icon
• password shown == eye open icon

Note: we're additionally using a title attribute on the button that says "show password / hide password"

Answer 1

While the other answers are helpful in directing us to use text rather than imagery, they don't seem to answer the question. The best answer is actually found in another question.

If the toggle is an action - Play/Pause - then it should show the thing that will happen. So while paused it would show Play and then while playing show Pause.

If the toggle is an option - Shuffle/Linear - then it should show the current state.

So in the case of this question, the imagery posted in the question would be the proper convention.

IE: since the switch is an action, we want to show an icon indicating what pressing it will do, not the state it's currently in.

An additional "helper" to this would be to use a mouse over title to describe it's purpose.

<!-- html example -->
<button type="button" 
        title="Show Password">          <!--  this is the title -->
        <span class="fa fa-eye"></span> <!--  this is the icon  -->
</button> 

Answer 2

I wouldn't complicate the situation by using a non standard icon. Just make a button that says "show password" (or "unmask", "reveal" or similar). The button should be pushed in in that state, so clicking it again unpresses the button. A checkbox accomplishes the same thing.

Answer 3

The commonly used icon for showing passwords is the eye icon which when clicked shows the passwords as given below

However since the concept of revealing passwords is still unknown, a simpler approach might be to just use a checkbox to reveal the password

This can be easily understood by users.

To quote this article

UNMASKING WITH A CHECKBOX

Another approach is to provide a checkbox for unmasking. Thus, when the user types their password, it is masked, but when they check the box, it gets unmasked, allowing them to see whether they’ve made a typo. A little more effort is required with this approach with the checking and unchecking, but it’s far better than a password-confirmation field because it enables users to see and fix their typos with ease.

Another advantage is that users can check the checkbox as long as needed to allow them to read the password at their leisure while with an icon you have to keep it pressed and hence the user has to keep on interacting with it.

Another advantage is that its accessible to screen readers as users can quickly understand what checking the checkbox does.