15

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?

  • 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. Feb 12 '15 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 Feb 17 '15 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 Feb 17 '15 at 18:46
35

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

  • 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 Feb 10 '15 at 18:04
  • 6
    @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 Feb 10 '15 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 Feb 11 '15 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.

  • 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 Nov 14 '16 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.

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.