8 UI/UX tips about password design

Clément Jacquelin
5 min readNov 10, 2021

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.

--

--