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.

1 comment