6

On the log in form, I want to give users the option to unmask the password field so they can see what they type. The phrase "unmask password" is too technical and its purpose may not be apparent to users. If possible, I'd like to reassure the user their password is still safe (since they may be unused to seeing it in plain text) so I was thinking when the user hovers over the button a message could display "your password will still be secure".

What is the standard terminology for showing the password in plain text? Is there standard position or appearance for a button or link to show the password?

Improve this question
1

3 Answers 3

Reset to default
6

The most effective way that I have seen is to use text. Simply have a checkbox that says "show password" or "hide password". It's clear and everyone understands it.

enter image description here

However, it's also becoming increasingly common to use the eye symbol as "show password", so if I had to chose a symbol and not text, I would use an eye icon.

enter image description here

Improve this answer
6
  • 1
    I agree the eye symbol is becoming common but I don't think it's common enough that most people would know what it's therefore (from the picture it's not intuitive it means "show password").
    – Celeritas
    Commented Apr 25, 2013 at 21:17
  • @Celeritas I agree, which is why my first choice is to use text.
    – JohnGB ♦
    Commented Apr 25, 2013 at 21:18
  • 2
    And if you use an icon, you have to think harder about how to make it accessible. A "Show password" checkbox is very clear and for screen-reader users is very easy to understand. An inline icon will require some fun ARIA tagging and DOM element juggling.
    – elemjay19
    Commented Apr 25, 2013 at 21:28
  • Also, the Mac login screen these days has the arrow button that means "log in" in that spot. So expect us confused Mac users to click that out of habit.
    – uliwitness
    Commented Apr 25, 2013 at 22:57
  • 1
    Now I know what it is supposed to be, I see that someone might portray an eye in this manner, but really, honestly, I would never have recognized that icon as an eye! Let alone have inferred what it was intended to do...
    – Marjan Venema
    Commented Apr 26, 2013 at 11:40
1

The checkbox way is simple and effective. But a switch, something like this:

enter image description here

Might just do the work.

Improve this answer
0

'Show Password' accompanied with a checkbox is clearly the standard and the best most effetive way to communicate it even though it's not saving as much space as an icon.

On another note, looking for an example, I just looked at gmail, facebook, instagram, amazon, ebay, trello, yahoo, twitter, codebase and podio and none of them had a 'show password' checkbox. Maybe it's not that crucial after all.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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