Today we want to go through a very common problem for designers: the UX of Login, Register and Password Recovery. This problem affects a lot the exit page rate and, of course, conversions.
There are two cases that you should consider:
- websites e-commerce, where the user data can be very important;
- website and web apps where user informations can be optional.
The UX of Login and Registration is always painful. Nobody loves registering on a new site by filling forms, check and validate emails, invent new passwords that follow strictly rules.
How many times does it happen where you don’t remember the password used during a registration process? I do forget it a lot of time and need to recover it.
On mobile devices, the user experience of login and registration is more painful than on desktop. That’s because the user has to switch apps in order to confirm the email, or switch keyboard in order to find special characters.
There is a study carried out at University of Munich that shows that, on mobile, people tend to spend double the time to enter a password and, at the same time, they create weaker passwords compared to on the desktop.
Table of Contents
How to Improve Registration UX
1 – Describe the benefits of registration to the user
What do people get by creating an account? What benefits do they get by registering?
Example:
2 – Add alternative methods of registration
It’s a way to be able to register more quickly. You can use social logins or google.
Avoid typing and remembering passwords; it’s a good way to improve this process. Even if there are users that prefer the standard email registration.
3 – The registration form should have only the minimum amount of information
Less is more! From a UX point of view, asking for email and password should be enough.
Avoid asking, at this stage, info like gender, date of birth or other informations that are not essential. You can always ask the user to add more info in the profile page.
4 – Do not repeat fields
Just don’t repeat the fields in a registration form: e.g. two password fields, two email fields, etc.
5 – Do not ask users to confirm their registration through email
This step is very important.
For some companies is very important to validate the users in the platform.
Consider that you can always validate them by sending the email but let them do it later and use the system now with all the functionalities. The validation process via email can be done during the next days.
In the case you must confirm credentials, do so using other services that avoid the user having to switch applications. A good practice is the message validation: the user will receive a code by sms that can be easily typed without switching applications (on mobile) or switching webpage (on desktop).
Switching context is a bad practice in UX. The user can get disoriented which can raise roadblocks that ultimately may prevent them from attaining their original goal.
How to Improve Password UX
Improve password in UX is a topic that I wanted to separate from the others.
Password are really painful in UX.
6 – Don’t use too many security rules
How many times did you get bored by inventing “secure” passwords? How many times could you not use your “most used” password on a website because it doesn’t include a symbol or a number?
I think that security is very important today on websites. Reasearching on over 50 websites I discovered that 90% of them are using only two or three password constraints and they haven’t have password security issues during the last years.
I really recommend the use two or three of the following rules for your website:
- Password must contain numbers;
- Password must contain uppercase letters;
- Password must have at least one @#$ symbol;
- Length must be greater than 8 characters;
- Password should not contain strings;
- Password must not contain repetitions.
Not all of them 🙂
7 – Add the option to show/hide password
Giving this option to the user is very good in UX. The user makes fewer mistakes while they can see what are they typing.
8 – Don’t ask the user to type twice the password
As I said above, in the registration UX section, just don’t repeat fields in a form.
9 – Add a Password Strength Meter
Today there are many simple JS scripts that can be easily added to your website and that can improve the UX of the password field.
With this script the user can see the level of security in real time and with visual helpers (like colours: green, yellow, red).
10 – Show password constraints upfront and update it in real time
Mailchimp has this nice feature. I simply love it.
How to Improve Login UX
Improve the UX of login is the last part of this article.
11 – Use Social Login
This is the same idea of the Social Registration.
12 – Allow people to use fingerprint authentication to login.
With this method you can reduce pain of the login process. It can be done with TouchID, as 80% of the smartphones allows that nowadays.
13 – Add the option to show/hide password
The same idea of what I said above in the registration section.
However, showing the password doesn’t need to be the default option. That’s because the user can feel unsecure.
Our advice is to cover the password with the classic symbol “*”, and let the user decide to show/hide.
14 – Include a Forgot password? link
Rarely used passwords are forgotten, and recovering them should be available on any login process.
This is how the optimal password recovery process should work:
15 – Login without password
Few companies are trying to innovate this process by skipping the insert password field.
How can we do that? Few example:
- With google authenticator: link
- Sms identification number: for example with Twilio
- Give the user an extra option in case they don’t want to type the password: “Magic Link” from Slack is a good examples and you can integrate to your website using Auth0
- Biometric authentication: this is the most innovative piece of this article. For sure it will be the future of UX for Login and Registration. Some examples are: voice recognition, facial scans, fingerprints, eye scans, hand geometry, etc.
Summary
Plan the best user experience for Login and Registration on your website:
- Consider guest checkout if you have an e-commerce;
- Make it very simple and minimal if your business is mobile first;
- Describe the benefits of registration to the user;
- Add social registration and login;
- Forms should have only essential fields;
- Don’t repeat fields;
- Consider different ways to validate the user (email or sms)
- Improve password UX: don’t add too many rules and show them upfront, show/hide option, don’t ask twice the password, add a strength meter;
- Allow alternative login methods without password: biometric and two-factors authentication;
Credits for this article to: Gartner, Nielsen Norman Group, Baymard
Free Extra Resources
Join our FB Exclusive Group to get access to extra resources, it’s FREE.
