We've Launched "The Suddenly Remote Playbook,"
A Comprehensive Guide for Working Remotely
The Suddenly Remote Playbook
Read Now
UX Design
5 minute read

Safe and Sound – How to Approach Password UX

Mayank specializes in creating user-centered designs and translating complex systems into beautiful web and mobile experiences.

In 2019, cybercrime cost businesses more than $2 trillion globally. With the influx of digital products, more and more people are reusing login credentials–the leading cause of data breaches. For too long, the user experience of password management has been ignored. It’s time for designers to rethink every aspect of password UX.

Much of our lives are digitally managed. There’s an app, website, or SaaS platform for nearly every aspect of the human experience, and they all require passwords. With so many accounts come problems.

According to passwordresearch.com, 80% of data breaches are traced to weak or reused login credentials, 61% of people use the same password for multiple accounts, and only 44% of users change passwords at least once per year.

That’s a lot of trust to place in online platforms. If one app is hacked, all accounts are vulnerable.

Password ux

The present-day password situation is frightening. As designers, we might be tempted to concentrate on the visual appeal of login screens while ignoring how users actually create passwords. We might even think that passwords are developers’ responsibility.

Unfortunately, the password problem has real business impact. Frustration during signup leads potential users to abandon the process altogether. Others forget the convoluted passwords they were forced to create and overrun customer support, wasting time, manpower, and money.

A poorly considered password process has a negative domino effect on users and businesses alike. Is there anything designers can do to improve the situation?

How to Improve Password UX

There are a number of strategies that improve password UX, and they aren’t overly complex. As always, it’s important to have a picture of core users when planning a password experience. Aim to strike a balance between:

  • Clear instructions
  • Simple actions
  • Long-term user security
Reset password ux
Here’s an example of what not to do. The user receives an error message (Too long) but no clear indication of how to fix it or what the acceptable length is.

Don’t Use Too Many Security Rules

It ought to be easy to create a password. Forcing users to adhere to a long list of requirements causes friction in the signup process. It’s best to allow users to create whatever passwords they want, but if they choose something obvious like 12345, let them know that their personal information is vulnerable.

Tell Users Why Secure Passwords Are Important

No one likes to follow rules or instructions without context. Instead of impeding account creation, educate users about the dangers of identity theft and data attacks. Where possible, use real-world stats to drive the point home: “Did you know that a cybersecurity attack occurs every 39 seconds?”

Add the Option to Show/Hide Passwords

“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.” –Jakob Nielsen

Allow users to see passwords by placing Show/Hide icons within password input fields. An eye that opens and closes when clicked is common, but depending on the product and users, it might be more effective to include a simple Show/Hide text toggle.

Some sites default to unmasked input fields. While this strategy is generally welcomed by users, it should be employed with a Hide option for less secure environments (cafes, offices, etc.).

Password requirements ux
Along with clear password instructions, Maxwell Health utilizes easily identifiable Show/Hide icons with text labels.

Include a Password Strength Meter

Password strength meters give real-time feedback and tell users how well passwords will withstand data attacks. Strength meters should be paired with thoughtful copy that communicates different levels of password effectiveness.

Weak, medium, and strong are helpful indicators, but copy needs to warn users of what’s at stake: “Your password leaves you exposed to data theft.”

Along with copy, consider what colors will make an impact, but remember that color has cultural significance.

Password validation best practices
MEGA, a cloud storage provider, pairs informative copy with its password strength meter.

Switch to Passphrases

Passphrases tend to be anywhere from eight to 16 characters, but they can be longer. The greater the length, the more likely it is that a passphrase can endure a brute force attack.

The appeal of passphrases is that they’re easy to remember. Instead of something weak and forgettable like myhouse5, a user might enter myhouseisawesomeandcozy.

For passphrases with four or more words, a high level of randomness isn’t needed, but users should be warned to avoid well-known word pairings (song lyrics, movie quotes, etc.).

Password validation ux

Consider Password Alternatives

Passwords are a well-established paradigm, but they aren’t the only way to protect user data. Biometrics, physical hardware, and reimagined login processes are part of a tech industry push to make passwords a thing of the past.

Utilize Single Sign-on

Single sign-on (SSO) is a strategy whereby users gain access to multiple products and services with one username and password. Sites and apps that use SSO rely on third parties (companies like Google, Facebook, and Apple) to verify user identities. All users have to do is grant access to their SSO accounts.

SSO prevents users from piling up passwords, increases onboarding speed, and allows businesses to benefit from the security infrastructure of larger companies.

Change password ux
Rather than creating more passwords, new Kayak users can choose from a handful of SSO providers.

Use Fingerprints and Face Recognition

Many phones, laptops, and tablets are equipped with biometric technology that is easily integrated into the sign-on process. Rather than entering passwords, users simply touch or glance at their devices. Security increases because faces and fingerprints are difficult (though not impossible) to forge.

One drawback is that there are still devices without biometric capabilities, so designers should make other login options available.

Allow Passwordless Sign-in

As long as users have smartphones and usernames, passwordless sign-in is a viable option. After entering usernames, users receive an onscreen message containing a PIN number. At the same time, a phone notification prompts users to select a matching PIN from a list of options. This process also works with fingerprints and face recognition.

Enable Email Login

Nearly everyone who uses digital products has an email address, and most people already use email for security measures like forgotten passwords and usernames. Why not go a step further?

Email login works by sending time-limited links to users’ inboxes. Slack and Medium have an email login feature called “Magic Link” that makes sign-on much more seamless.

Password recovery ux
Once Medium’s email sign-on link lands in a user’s inbox, it’s only viable for 15 minutes.

Provide Physical Security Keys

Within enterprise organizations and industries where security is of utmost importance (finance, healthcare, etc.), more companies are opting to use physical keys. These cryptographic cards plug into USB ports and automatically enter single-use passwords in application sign-on fields.

The tech is still developing, but it’s proven to:

  • Make sign-in 4x faster
  • Reduce support costs by 90%
  • Virtually eradicate account takeovers

Additionally, companies like YubiKey are adding fingerprint recognition for increased protection. One obvious drawback is the risk of losing hardware. Even though lost keys can be disabled by administrators, account recovery is much more involved than pressing a “forgot password” button.

Password reset ux
YubiKey’s cryptographic security card plugs into USB ports and dramatically improves sign-in speed.

Simple and Secure Password UX

It’s no knock against users, but they aren’t the best at creating, remembering, or managing passwords, a fact that causes frustration and unnecessary UX friction. As designers, we shouldn’t settle for the status quo. We’re problem solvers, and there are multiple ways we can refine or completely rethink the password experience.

As long as there are digital accounts with sensitive data, we’ll need to design ways for users to verify that they are who they say they are. Perhaps there will come a day when passwords are obsolete, but until then, we ought to strive for password user experiences that are simple and secure for all parties.


Let us know what you think! Please leave your thoughts, comments, and feedback below.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

Are longer passwords more secure?

Longer passwords may expose users to risk. For example, a password consisting of a user’s first and last name, while long, is ultimately unsecure. When designers think through password requirements UX, they should include copy that helps users create passwords with high degrees of randomization.

Are passwords safe?

Passwords are a safe way to protect users’ digital data so long as users know how to create randomized passwords that are easy to remember. When passwords are hard to recall, or when users have too many passwords, it leads to reusing the same password for multiple sites. This is a leading cause of data breaches.

What are the most secure passwords?

Secure passwords have a high degree of randomization and somewhere between 10-20 characters. Passwords that rely on personal information or popular phrases are not secure. Reusing the same password for multiple accounts is risky. Designers can help by implementing password UX techniques into the signup process.

Why do you need a secure password?

Without a secure password, sensitive information is vulnerable to hackers. Designers can help users create secure passwords by implementing password validation best practices. For example, include a show/hide icon during password creation. This prevents typos or reusing old passwords (common in data breaches).

What makes for a good user experience?

A good user experience is one where users complete their goals efficiently and experience a high level of satisfaction. Designers must learn what product details and features will improve people’s lives. Otherwise, users are forced to make do with products that don’t fully consider their needs.