top of page
Meghana Alavala Logo Horizontal - Color Mix 2.png

/ CASE STUDY /

Studying Password Input Field

Pink Poppy Flowers

People spend most of their time to figure out the correct combination of letters, numbers, and special characters for creating their passwords.

According to Nordpass, the most commonly used password even in 2025 is still @123456.

Encouraging users to create strong passwords is crucial for protecting their accounts.

UI-Patterns.com defines strong password as one that

  • Has more than 8 characters

  • Contains lowercase letters

  • Contains uppercase letters

  • Contains at least one numerical character

  • Contains special characters

This results in five levels of password strength, depending on how many of the above criteria are met.

Before enforcing strict security requirements, we must know if  we even need this level of security for our application?

Common Password challenges

Users face two main challenges when choosing a password:

  • Finding a set of characters they can actually remember while...

  • ...meeting the security restrictions.

Password strength instructions

Passwords have long been riddled with usability issues. Because of overly complex security requirements and difficult-to-use input fields.

Let's look at the basic password input field,

description.png

Research from the Nielsen Norman Group shows that users tend to scan pages, picking out individual words and sentences. Presenting password instructions in bullet points reduces cognitive load.

When designing a Sign Up form, our goal is to strike a balance between:

  • Clear instructions

  • Simple actions

  • Long-term user security

Larsen & Toubro Sign-Up Flow

Let me share with you one experience I faced while going through the Larsen and Toubro website registration process. Let's study this Sign-Up flow step by step,

LT login screen.png

During the registration process on the Larsen & Toubro website, I encountered an error message stating that the password was not valid.

The key issue that stood out here is that there is no clear indication of what caused the problem.

LnT Error.png

Without guidance on whether the issue stemmed from complexity requirements, formatting constraints, or another rule, users may feel confused about their next steps.

After encountering the 'Password is not valid' error, I was unsure what went wrong. It was only after hovering over the “i” icon that I discovered the password requirements were hidden behind it.

Since they weren’t visible upfront, I had no way of knowing if my password met the criteria before submitting the form.

Solution
f.png

  • Remove the “i” icon, which is used to show information, and display the requirements alongside the password field.

  • Ensure requirements are always visible when the field is selected.

  • Simplifying restrictions to sound more like suggestions.

f2.png

Instead of strict must-haves, a more user-friendly approach is to phrase guidelines as recommendations. Here I phrased it as:

For better security, consider including

I chose to remove the space constraint and to make a strong password, I wanted to suggest users add Upper and lower case letters.

It taps into psychology, people often respond better to recommendations than directives, as it gives them a sense of autonomy while guiding them toward the desired behavior.

Iterating for better design

Providing clear visual feedback on password strength helps users create secure passwords while reducing frustration.

Let's try some iterations to make it look visually pleasant and easy to read

requirements interations.png
Limit the requirements of the password

Instead of forcing users to follow strict rules to access an application, it’s more effective to encourage strong passwords while giving them the freedom to create something memorable. Forcing users to add specific characters and numbers increases the likelihood of them forgetting their passwords.

That’s why passphrases are easier to remember. If you like to explore more on passphrases, here is an article for you! Phrases are easier to remember than random characters. Phrases are meaningful and relatable.

In a study Why use passphrases over passwords? done by Marcus White stated that

According to Verizon, 86% of initial attack access is gained through stolen credentials. One simple way to strengthen all of the passwords within your organization’s Active Directory is to make them longer. This makes passwords harder to guess and crack through brute force and hybrid dictionary attacks. Passwords with complexity requirements and a common hashing algorithm (MD5) become near-impossible to crack via brute-force techniques when over 15 characters in length.  

But in our context, using traditional passwords is the better choice because People are more familiar with password-based authentication.

So when users are given the flexibility to create passwords they are comfortable with, they are more likely to remember them. Encouraging rather than enforcing security measures allows for a better user experience while still maintaining account safety.

Adding a Strength Meter

A password strength meter motivates users to create strong passwords in a fun and interactive way.

Giving a strength meter will show the user's progress and give them real-time feedback on how strong and secure the created password is.

There are types of strength meters used; some of the commonly used are,

strength meters.png

A password strength indicator enhances security and reassures users. It also helps attract potential clients who prioritize strong security measures when choosing a company.

strength metr frm.png

Placing the strength meter directly below the password field ensures that users receive immediate feedback. Even if a user initially decides to move on to the next step, seeing a yellow bar may encourage them to refine their password until it turns green, leading to stronger security.

Remembering the Password

Users frequently:

  • Choose simple, easy-to-remember passwords.

  • Write down passwords on paper or in notes.

  • Forget passwords, leading to high reset requests.

According to Luke Wroblewski:

  • 82% of users forget their passwords.

  • Password recovery is the #1 request to help desks.

  • 75% abandon purchases if a password reset is required.

Many online-security experts recommend a minimum of 8 characters (or 6 if the password is machine-generated), which provides a balance between increased security and being overly burdensome to users.

Password Visibility Toggle

Additionally, the absence of an unmask option increases the likelihood of unnoticed typos, adding to user frustration. First of all, do we even need password masking?

A study by Jack Holmes on removing password masking found that:

When an e-commerce form displayed passwords as plain text by default, 60% of users reported feeling suspicious about the site's security. Meanwhile, only 45% saw the lack of password masking as a usability advantage. However, when a simple checkbox was introduced to toggle the 'Show Password' option, all participants (100%) noticed it and recognized the clear text display as an intentional feature.

Giving an option to see their typed password can give them the freedom to see if there are any typos and help them remember their password

The downside of masked inputs is that they can hide typos, making errors harder to catch, especially on mobile devices, where typing accuracy is lower than on desktops.

Solution:

  • On desktops, hide passwords by default but add a Show Password checkbox.

  • On mobile, display passwords by default with a Hide Password option.

Giving the password visibility toggle button is implemented in different ways, Some of the most common ways are Using an Eye Icon, Using a check box with a label, or having a text button on the password field itself, and adding a tooltip on the eye icon saying "Show Password" in the hour state. Some UX designers have brainstormed and experimented with making the password field focus-sensitive and hiding the password when it is out of focus.

The most commonly used button for password masking is the eye icon button, but there is a lot of confusion going around the eye icon button.

sketch visibility.png
Adobe visibility.png

As you see, the sign-up form of Adobe uses an open-eye icon to indicate that the password is hidden, but Sketch uses an open-eye icon to indicate that the password is visible.

To tackle this issue, how about we give a checkbox,

check box.png

This can remove all kinds of ambiguity caused. This design solves,

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

  2. Confusion caused because of no clear visual interaction.

Conclusion

By making password input fields clear, accessible, and user-friendly, we can reduce frustration while improving security and prioritizing usability benefits for both users and businesses, ensuring a seamless and secure sign-up experience.

Recording 2025-03-24 at 21.01.40 (1).gif

The final design ensures:
✅ Clearly visible password requirements
✅ Option to unmask passwords
✅ A helpful strength meter for guidance
✅ Reduced cognitive load and user frustration

This approach not only enhances security but also fosters trust, making registration effortless while maintaining strong protection for user accounts.

bottom of page