How To Improve The Usability Of Password Fields
Learn what you need to design user-friendly password fields
--
Password fields are a necessity if you’re designing a login or sign-up form for your application.
As common as these types of fields are, they can be frustrating to interact with when poorly designed.
I was recently tasked with improving the usability of the login page on one of our apps at my job.
To learn more about how to implement these components in a user-friendly way, I spent some time researching.
From my research, I created a set of mockups that the development team has since implemented across our app ecosystem.
In this article, I have put together everything I’ve learned from my research into password fields.
By reading this article and applying what you learn from it, you will dramatically improve the usability of password fields in your own designs.
The Components Of A Password Field
Let’s start by looking at the components that make up a password field.
As with most form fields, a password field is made up of the following:
- A label that describes the field — Password.
- The input field itself is where the user enters their password.
You may also see:
- Confirm Password — An exact duplicate of the password field. By typing your password out twice you’ll be sure you’ve typed the right password and are less likely to forget it. Read this article to learn about why this field must die.
- Password Hints + Tooltips — If you’re on a sign-up screen and the password field has specific requirements, a tooltip or info panel is displayed so the user can view this information.
- Validation — If the password is entered incorrectly, a validation message appears next to the password field. You may also see an icon appear and the input itself should turn red in color to indicate there is an issue.
- Forgot Password link — Though this is not linked to the password field itself, a forgot password link is usually located next to this…
