With the multiplication of saas (service as a software) these last years and the security problems linked to the fact of having an identical password for each service, I find myself using the « Forgot password » page much more often than before.
If this can be corrected beforehand thanks to password managers such as 1Password or LastPass, with the « no password » methods implemented by tools like Slack or the social login here are a few UI/UX tips to apply to the design of your « Login » and « Forgot password » pages.
Users who try to log in, create a new password or reset their password will be eternally grateful to you.
1. Add a button to hint the password
The first thing to do to avoid mistakes is to offer your users the possibility to see the characters they just typed in the password field. This feature is often represented by an « eye » icon on the right of the field.
It’s simple, basic, as my favorite singer would say but it’s not always available.
For those who know the browser console (press F12 now and enter a wonderful world) you can simply change the type= »password » of the password field to type= »text » and see what you have written.
2. Show if the Caps Lock key is on
Tell your users if the Caps Lock key is enabled when they type their password.
But don’t worry if it’s not, there is no need to display the text « Caps Lock is Off ». Few users will see the message and act accordingly.
3. Show if the Num Lock key is on
The same UI/UX design practice can be applied with the Num Lock key
4. Limit password conditions and display them
Display precise explanations when creating the password, don’t hide them in an tooltip to bring them out only when your user makes an error. Save him time and frustration. A real time validation is also a real plus.
5. Show the conditions required when creating the password
Remember… It was 6 months ago, to create his password you asked your user to add:
- At least 1 uppercase
- At least 1 number
- At least 8 character
- And the last 3 digits of his credit card (Wait, what? Did you really ask that?)
A security measure, a fashion effect, a copy cat because the competitor was doing the same or a useless waste of time? It doesn’t matter, you did it. And today he doesn’t remember these constraints that you imposed. So if he makes a mistake while login, make his life easier and remind him. Remind him the conditions required days, weeks, months or years ago, I promise you it will help him.
6. Delete the password confirmation field
If you follow the previous steps, especially the one that allows the user to see what they are writing, then the password confirmation field that was a safety feature (a long time ago in a galaxy far, far away) to avoid errors becomes obsolete. It’s already a pain to type the password once, don’t make it twice.
7. Fill the email field on the forgot password page
The process when your user realizes he have forgotten their password often looks like this:
- Comes to the login page
- Types in his credentials
- Receives an error message
- Realizes that he does not remember his login information
- Clicks on the link « Forgot your password »
And that’s where the magic happens, because at this point in the user’s journey, you already know their email address. Yep. They just typed it in a few seconds ago. All you need do to is to fill it on the present page so that they don’t have to write the same things over and over again. Remember in design every second saved matter.
8. Suggest creating a new password rather than automatically generating a new one
Who’s going to remember your long, complicated machine-generated password? Spoiler Alert: no one. Whether it is for security reasons or to let the user use his password manager, it’s better to let the user create a new password rather than randomly generate one in the email they will receive from you.
TLDR:
Here is 8 UI Tips to make the life of your user easier on your login and password lost pages. Remember, less friction is more conversion. You don’t want to spend time fighting with bad interface, neither does your user.
- Add a button to hint the password
- Show if the Caps Lock key is on
- Show if the Num Lock key is on
- Limit password creation conditions and display them
- Show the conditions required when creating the password
- Do not add a password confirmation field
- Pre-fill the email field on the forgot password page
- Suggest creating a new password rather than automatically generating a new one
👋🏻 Thanks for reading me, this article was originaly posted on Jimmy Lollipop.
Oldest comments (10)
Hey! I really liked your article and as a Web Designer I will use it in the future. Also, I'm the founder of Abstract Inc. and we're building projects in different direction like writing. There're already over 50k views. If you're interested then add me at Discord: MarkFusion#2903 or wherever you want :)
Thanks for your support Mark!
Love the feedback from other designer.
Yeah, so are you interested in writing articles with us by name of our Organization? If you don't fully understand what I'm offering then as I said earlier we can discuss about it at Discord (MarkFusion#2903)
Really good information but #7 is debatable. What if the user isn't able to log in due to a mistyped email address?
That's a good point.
We can't say "You're password is right but not your email" so... he will see is wrong email refilled in the password lost page and he can re-check it here before sending a reset link.
Great article! Will definitely remember this as a reference point!
Thanks! 💪🏻
That's pure gold.
Thanks :)
Very usefull! Merci 😄