2

In a mobile app context, when the user is presented with a dialog specifically asking for a password, what are the best practices for allowing the user to show the password while entering it into the field?

In particular, I’m wondering about:

  • writing “show password” versus using an eye icon.
  • the location of the element (see locations 1 through 4 in the image), especially when trying . Using an eye icon in position 3 is common but can be problematic with long passwords.
  • showing the password only when pressed versus toggling visibility on/off with each press.

enter image description here

1
  • An important factor here is expectations: what is the standard for the OS or platform? What's recommended in the design guidelines? What are the top applications for that platform doing?
    – slezica
    Aug 27 '20 at 20:57
3

writing “show password” versus using an eye icon.

Both options are widely used.

Better still, use an eye icon with a label that says ''Show/Hide Password" so it's clear what the icon means.

Or If you want to save real estate for the input field, you can shift the action below the field so you can either have an icon or a checkbox to clearly mention the action.

enter image description here

showing the password only when pressed versus toggling visibility on/off with each press.

This is an accessibility concern. Users with dexterity/motor issues will find difficulty in 'touch and hold' the button, also users with cognitive related issues will have a hard time remembering what they just saw.

Also from a usability perspective, studies have shown that it is better to keep the password unmasked on mobile screens by default.

According to Luke Wroblewski:

there’s a visible touch keyboard directly below the input field that highlights each key as you press it. These bits of feedback show the characters in a password at a larger size than most input fields. So in reality, the •••• characters aren’t really hiding a password from prying eyes anyway

Related Articles:

https://www.nngroup.com/articles/stop-password-masking/

https://cxl.com/blog/password-ux/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.