Passwords Are Broken—Here's How to Fix Them

We've had a rocky relationship with passwords.

They demand to be exactly eight characters long, contain at least one symbol, and throw a fit if there are two consecutive letters, any months of the year, or the word Texas. Naturally, when we type something like this, we often make mistakes. Without knowing where the mistake was made, our passwords are cleared and we're forced to enter the string of gibberish again.

But the worst is when we forget our passwords, which 82% of us have at one time or another. Some of us will try and try again until we're too frustrated to even remember what we came to the site for. For those of us who have enough patience to reset our password via email, we're further insulted when the system tells us our passwords don't match.

Well, if I could see what I was typing...

Well, if I could see what I was typing...

These cases are a result of password masking, the little black bullets that appear in place of a password to give it a sense of "security." However, as Jakob Nielsen puts it:

"Usability suffers when users type in passwords and the only feedback they get is a row of bullets. Typically, masking passwords doesn't even increase security, but it does cost you business due to login failures."

How much business, exactly?

If you or your organization runs an online store that requires login, 75% of the users who don't remember their password won't complete their transaction. In one major online retailer, this loss in business cost them around $300 million a year. Although a study found that users tend to be suspicious of an e-commerce site when their password is revealed by default without an option to hide it, their trust in the site is unaffected when the option to hide or show is available. When this option was available, nearly half of the users identified it as a feature and appreciated how much easier they could input passwords.

Why do we mask passwords?

One of the early reasons for password masking was to prevent anyone from peering over your shoulder and snagging it. Some could argue it gives users a sense of privacy. But for the most part, password masking exists simply because it always has. This design pattern has been around since the dawn of computers, but unlike some patterns (the icon of a floppy disk representing "save," for example), this pattern is not timeless. Rather, it's proven to hurt business, burden users, and have no justifiable reason to exist anymore.

What if you could collect all the hours a user spends fumbling with their password and trade it for hours they spend using your app, engaging with your brand, or buying your products?

Well, you can.

Leaders of a revolution

Many login forms now have a toggle to show or hide the password, but the majority of the web—even mobile apps—still have some catching up to do. Here are some of the companies at the forefront of this revolution. Keep in mind that this is not a comprehensive list. I chose the ones I think do a good job representing the main variations of this pattern.

Dashlane — Eye Icon/Slashed Eye Icon

Amazon — Show Password Checkbox

Airbnb — Show/Hide Text

All these examples are effective ways of mitigating this issue. However, the variations that plainly state "show" and "hide" will have slightly more success because there is almost no room for misinterpretation, whereas an eye icon, or an eye-con (sorry, I couldn't resist), might not register immediately.

This pattern provides users with the security measure they expect (in the unlikely chance someone is right behind them, reading off their screen) meanwhile putting power back in their hands. With just a tap, they can check their work and edit where needed, whereas before, they were forced to start over if they made just one mistake.

Avoid overdoing it...

Vinted — Bullets/ABC

I'll give them credit for their creativity—the bullets represent the password in its masked state and the "ABC" represents the password in plain text. But most users probably won't get it, especially those who aren't even used to having the option to see their password. Remember, we’re already breaking a convention by letting users see their password. Break a convention within a convention and the user will be completely lost.

Also, what do the three bullets look like to you? Would you expect a menu to appear giving you more options? I did. That's because they're identical to the three dots we tap in the iOS interface for more options, which creates confusion. With pure iconography, there's always a small chance users will misinterpret your design, and the chances become higher with this one.

...Or underdoing it

Reddit — Open eye/Open eye

Reddit has the right idea, but their execution needs improvement. When users want to toggle their password from masked to unmasked, they tap the open eye. When they want to reveal their password, they tap the... open eye... Oh, it's still open. Hmm. The eye doesn't change when the user taps it, so it's not 100% clear what's going on. Add some feedback after the user taps the eye (e.g. changing its color, switching from open to closed) and you're good to go!

Highly — Reductive eye

Similar to Reddit, Highly uses an open eye to let users toggle the password mask (filled in: show password; grayed out: hide password), but the design falls short because the icon is so reductive, it's hard to tell what it is. Don't get me wrong, I'm a supporter of the minimal trend that gave us clean lines and bold shapes, but they do us no good when we can't tell what they mean. When faced with a choice between usability or trends, always choose usability. In this case, make the eye look more like an eye (and less like the bottom half of the wifi symbol) and this one's a winner.

Future solutions

Let's look at one designer's concept to save us from the trap of password masking. He provides a version for both desktop and mobile logins. 

Desktop — Hold spacebar

(c) Ahsan Idrisi 2016

Mobile — Hold password field

(c) Ahsan Idrisi 2016

While this concept certainly deviates from the style of toggles shown above, the instructions are clear and sit right below the password field, which eliminates any issues in discoverability. I especially like how he employs the spacebar since we don't use spaces in passwords anyway—how clever is that?

The only downside is this variation contains more text and takes up more room. This might not be a huge deal on desktop sites, but on mobile, where space is precious, the screen may start to appear crowded. On the other hand, I believe the gestures in this concept have a lot of potential to become universal if enough prominent apps and websites adapt this pattern. In time, users would know to tap the password field to reveal it without any text instructions, just like we now know scrolling and dragging the top of a feed refreshes it without anything explicitly telling us so.

What are your thoughts? Are you tired of seeing black dots when you type complex passwords or would you rather they stay? Did I miss an example worth discussing? Let me know in the comments.

Thanks for reading!