Mobile Design Details: Hide/Show Passwords

Passwords on the Web have long been riddled with usability issues. From overly complex security requirements to difficult to use input fields, passwords frequently result in frustrated customers and lost business. The situation is even worse on mobile where small screens and imprecise fingers are the norm. But what can we do?

Once again, the constraints and capabilities of mobile devices challenge us to to rethink long-standing design standards. In this case, the password input field. You’re all intimately familiar with this interaction because the average person logs at least 15 times a day and 86% of companies in the United States use password authentication for their services. But just in case, here’s how a typical password field works: you enter a character, it displays a “secure” response in the form of a •.

What’s wrong with that, you may ask? Very simply put, there’s no way for you to check your work by seeing what you entered. Which turns out to be very useful when you’re forced to use a minimum amount of characters, some punctuation, and the birthdate of at least one French king for your password. So people often submit incorrect passwords and head into downward usability spirals.

Around 82% of people have forgotten their passwords. Password recovery is the number one request to Intranet help desks and if people attempt to recover a password while checking out on a e-commerce site, 75% won’t complete their purchase. As usability advocate Jakob Nielsen puts it:

“Masking passwords doesn't even increase security, but it does cost you business due to login failures.” ...and it's worse on mobile. -Nielsen Norman Group

Some mobile operating systems have recognized that imprecise fingers and small screens make it even harder to accurately input complex characters into a password field. So they’ve made a small adjustment to the way password fields work: they show you the character you’ve entered for a brief moment before replacing it with the standard “secure” •.

But since many of us look at our touch keyboards while typing, when we do look up at the the character we entered, its no longer visible and inconveniently replaced by a •.

Recognizing this well-intentioned change isn’t enough to fully counter password usability issues, some companies take the extra effort to provide a “Show Password” action. When activated, this action displays the contents of a password field in readable text but still sends it to a server securely.

This solution gives people the option of making their password visible and thereby readable but by default it appears as a string of ••••. Since most people stick with default choices, it may make sense to instead make the password visible by default but easily hidden if necessary. This is how we implemented things in our newest app, Polar.

By default Polar displays your password on our Log In screen as readable text. A simple, Hide action is present right next to the password field so in situations where you might need to, you can switch the password to a string of •••• instantly.

Wait... what? You’re displaying people’s passwords by default? Simply put, yes. We decided to optimize for usability and ease of log in over questionable security increases. On a touchscreen phone, its trivial to move the device out of sight of prying eyes. Or easier still to simply hit the Hide action to obscure a password.

But not that it matters, 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. As a result, we opted for usability improvements instead.

We also try to keep people logged in as much as possible by not displaying Sign Out actions front and center in the application. This makes entering passwords a rare occurrence and therefore less of an issue for the people using our app. Check it out for yourself.