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

  • 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.

    enter image description here

    enter image description here

    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"

    I don't have enough rep to vote-to-close on this site. Just found my answer here. *"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."*

    Thanks @ChrisF. The unfortunate thing about that question is that it doesn't have a "clear answer" but more a debate in all the comments. Ugh.

    I think "IE" should be changed to "that is", because I thought it meant Internet Explorer :p

  • 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> 
    

    I agree, that sounds correct. Interestingly, however, on Google's create account page it has the opposite behavior. By default it hides the password and displays a crossed out eyeball icon. Clicking the crossed out eyeball toggles it to an open eyeball and now you can see the password you are typing.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used