18

These are the two options I'm considering.

  1. Having a tickbox for a 'show password' option, which would let the user see their password. A 'caps lock' icon would be in the password text area which allows the user to see that the caps lock key is on. This is similar to what the Mac uses.

  2. Having an 'eye' icon, similar to the Windows 8 login screen, that allows the user to see the password. A 'caps lock' annotation would be below the password textbox. This is more inline with Windows.

I must admit that the 'eye' icon of Windows 8 is unfamiliar to me, and that not being a Windows user, I never noticed it until somebody pointed it out to me. Which overall is a better experience?

Improve this question
4
  • 2
    Having used Windows 8 / 8.1 since pre-launch stages I never realized that clicking on eye shows the password. Poor UX?
    – Chethan S.
    Commented Feb 12, 2015 at 6:49
  • the eye heavily reminds me of the logo that you find around the entrances to public transport in switzerland- it means be ready to have your ticket inspected inside. Wonder if microsoft were aware of this similarity.
    – the other one
    Commented Feb 17, 2015 at 15:23
  • the eye has another serious problem, it only works during click and hold, no good if you also want to use the keyboard, but then, MS are not renown for strong UX
    – Toni Leigh
    Commented Feb 17, 2015 at 18:46
  • Like many things on the internet, once something becomes 'fashionable', people learn what it does and even if the icon is meaningless ( like the old floppy disk icon for save) people go 'seen that before - I know what it does' and the problem goes away. So I'd argue that some of these answers are getting a bit out of date.
    – PhillipW
    Commented Oct 16, 2020 at 21:08

4 Answers 4

Reset to default
38

There are a number of variations of the the "unmasking eye" icon but they mostly have the same issue, below are some examples:

enter image description here

I have done some usability testing on this specific problem and many users I have tested with didn't even notice the "unmasking eye" there is also some issues with how to best convey the state of the password (masked/unmasked) and this really depends on how your users confer meaning to the icon; do they view it as a verb mask/unmask? or as Toggle? and if they do view it as a toggle, than Should a toggle button show its current state or the state to which it will change?

it’s worth spending time to develop the right solution. Especially when you consider even small design details can have a big impact. To illustrate, let’s look at a study Jack Holmes ran that analyzed the impact of removing password masking.

source: Showing Passwords on Log-In Screens by Luke Wroblewski

The above is particularly true in terms of perceived security and user trust. so to answer your question, I would use a tried and tested approach by using a descriptive label "show password" which removes any ambiguity and enhances user understanding of the functionality.

when passwords were displayed as clear text by default in an e-commerce form, 60% of people surveyed said they became suspicious of the site, while only 45% identified not masking the password as a usability benefit. In contrast, when a simple checkbox was added that indicated a Show Password setting was on, 100% of participants noticed the checkbox and interpreted the clear text password as a feature.

source: Showing Passwords on Log-In Screens by Luke Wroblewski

enter image description here

Hope that helps

Improve this answer
3
  • 13
    I think having the "show password" default to off would be better than having it default to on, since people might instinctively start to type in their password--even on a computer being used for a presentation--before realizing that it will be shown.
    – supercat
    Commented Feb 10, 2015 at 18:04
  • 7
    @supercat I agree ! It should default to "masked" the majority of users will expect this behaviour and this should also give them control upfront.
    – Okavango
    Commented Feb 10, 2015 at 18:10
  • Things outside your control allow users to remember their login info and this could allow people other than the original user to read a password. Be careful.
    – DaveAlger
    Commented Feb 11, 2015 at 16:56
2

There is a third option used on some systems where only the most recently typed character is visible for around half a second - as soon as the user adds another character or the time passes 0.5 seconds, the character turns into a bullet symbol - This is my personal favourite as it requires not intervention from the user to either activate or deactivate it.

Improve this answer
1
  • Its best used on Phones or other touch screen oriented keyboards since you can confirm you pressed the right key and did not fat finger it. Its works because its hard to see someones screen while they are typing on a phone, and its easy to move the phone to hide the screen if someone is trying to do so. On Desktops however, It just handing the password to anyone who is watching unless you are one of the fastest typers in the world, since most people can read faster than most people can type
    – Ryan
    Commented Nov 14, 2016 at 18:37
2

Use Icon or Text?

So, speaking from personal experience when I was asked to redesign the login page for a Financial software. I proposed three designs, including the eye icon.

To keep story short, I would definitely vote for using a text (Show Password or SHOW in the Password field) as opposed to the "eye" icon.

This was not based on a survey, but practice. We have a vast variety of users (clients) with ages that range between young users (age of a fresh college graduate) and old users (60s and 70s years old). Once we threw the design (with eye icon) as a beta we had a lot of phone calls asking about it. Questions ranged between, why we need this now? To What is this for?

We figured that some users tried it and did not find it important but risky (that's another discussion). While others (older respected generations) did not even click on it, they called to ask What is it?

Some designers suggested that we add a tool-tip on the eye icon says "Show Password" on mouse-over. But again many users did not even try to click on it and we believe some even ignored its existence.

However, after a call from the head of Customer Services department who called to have it completely removed, someone suggested to go very conventional and add a check-box with "Show Password" text next to it to remove all kinds of ambiguity it caused. However, I did not want to go very conventional with it, especially that we are already using that space for "Caps Lock is on" warning and "Forget username or password" link.

So I suggested to add a text "SHOW" in the Password field itself and added a tool-tip says "Show Password" on mouse-over. Text changes to "HIDE" to mask the password again.

We lived happily ever after!

This design actually solved three issues:

(1)- The need for the "Show Password" feature for a better UX.

(2)- The space issue that we had if we would have chosen to use a check-box and "Show Password" text next to it. (as mentioned earlier, we were already using that space for a warning message when Caps Lock is on and for a forgot username or password link).

(3)- It is a responsive design, using the text "SHOW" is fairly easier to click on a mobile device compared to a small check-box.

Hope this adds some insights.

Improve this answer
-1

eye question. (top or bottom)

bottom example: when passw is dots next to it'd put an 'open eye'icon, when passw is visible, i'd put an 'eye crossed with a line'icon //in my mind indicating the action is how it should work (opposed to showing status) thus when open eye is clicked them pw becomes visible ..

enter image description here

what do you think?

Improve this answer
2
  • 1
    Could you edit this question? I don't understand what you're trying to say.
    – Mayo
    Commented Sep 30, 2020 at 13:36
  • hi, top: more of an indicator., more of a Call to action -i prefer this one .. but client wants the top one imagizer.imageshack.com/img924/2484/P5YKEw.png Thanks
    – Yoko
    Commented Oct 1, 2020 at 19:19

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.