People become users of your product even before they create an account with it. This process begins with registration. Registration and login pages are an important part of the product that affects the conversion of users. Bad login forms cut off visitors' paths and negatively affect their further experience, right down to leaving. When designing these screens, designers need to be careful to ensure that visitors don't have obstacles in the way.
Most often, people experience problems filling out many required fields, finding a unique name, and coming up with a complex password. Because of these difficulties users choose insecure passwords and complex nicknames, end up using one password for many services, and spend time restoring access.
Usually users don’t want to register without a purpose - in order to start using a product they need value, and to get it, they need a simple registration process. The form should have a clear proposal for a solution to the problem. Add a call to action to the title of the form, and add a description of the action that the user will take to the submit button. Instead of a neutral "Submit form" it is better to use "Create account", “Get started,” "Login to your account", or "Get our product". Users will clearly understand what they will receive upon registration and what will happen when they click on the submit button.
Login via social networks
The fastest way to create a new account is to allow login using social networks. Then people will not waste time filling out many fields and remembering passwords. Signing in with Google, Facebook or Twitter is a common pattern for millions of users. This method significantly increases conversion.
Clear and simple forms
To make it as easy as possible for the user to log in, the login and registration form should be obvious and clearly visible on the page. It is better not to place other elements on the page that can distract from filling.
It is important to visually distinguish registration from login. Users can confuse these patterns and leave the site if the forms are the same. Therefore, you should make the buttons "Register" and "Login" different: change their design and language. For example, "Sign in" and "Sign up" look too similar, use "Log in", "Registration", "Create account". This will reduce the likelihood that users will accidentally try to log in through the registration form.
If the form has a lot of fields, it is better to display the milestones or percentage of completion. Users need to understand how much they still have left. When registering, show that the entered information is reliably protected, so visitors will be calmer.
Until all the required input data is filled in, the submit button may be disabled and greyed out from clicking. This is one way to visually check the data before submitting it.
If for some reason the user has left the page, it is good practice to save their data locally and substitute it when they return. If something goes wrong, they don't have to re-enter all the information.
Working with fields
So, now it is clear that it’s best when the login and registration forms are separate pages, on which there is nothing superfluous that would interfere with the user. But it will be even better if the fields themselves in the form help fill it out.
In order for the user to immediately focus on the first field (preferably when this field is email), it is worth setting automatic focus on it: the field will be highlighted and immediately available for input. This saves time and effort and allows you to start filling right away. The user will need to take one step less, and this already increases the chances of completing the registration.
The registration form should be as simple as possible. If it is not possible to use a social login, you should strive to reduce the required fields. All you have to do is ask for an email address and offer to create a password. It is definitely not worth asking for information that is not essential at this stage. For example, gender or date of birth can be asked to fill in later.
Also, don't force me to create a unique name for the account. All common nicknames will probably be taken, and the user will have to take time to come up with a new one and remember it. If you really need a name, try using the default email address or phone number for it.
If possible, you should combine several fields of the same type into one. For example, First Name and Last Name can easily be one field, just like the day and year of birth. This removes the visual and cognitive load and makes the shape look much simpler.
It is good when each field looks in accordance with the data that the user enters. You cannot enter letters and other symbols in the field with a phone number, and for dates you can use a drop-down calendar. Help users avoid form-filling errors with field masks, placeholders, and tooltips. The process will become as simple and efficient as possible.
The fields should visually indicate their state: whether it is active or unavailable, successfully filled in or with an error. Make them consistent across the form and understandable to the user. We wrote more about states earlier in the Building a useful UI Kit article.
Data validation should occur as you fill out any of the fields, and not after submitting the entire form. This will give the user an instant response to the input data, which will improve the UX. Successfully completed fields should be encouraged, and error messages should help solve the problem, not blame users.
Passwords are one of the headaches for people. They are hard to come up with (when security requires a capital letter, number, and non-alphabetic characters). It is impossible to remember them and to restore them for a long time.
It is best when there is no password and the user can log in with one email. The most popular modern ways are to use fingerprint data in smartphones or send "Magic Link" to mail.
But if you can't do without a password, you need to make the process as simple as possible. Don't ask to fill in your password twice. People often just blindly copy it without remembering it. Instead, you should be able to show the contents of the field using the "Show password" checkbox. Also report if the Caps Lock key is on so users are less likely to make typos.
If there are security requirements for the password, they should also be shown when filling out the field. A small signature on the strength of the password will help you come up with a better password before submitting the form.
Sometimes users forget their data. Make the recovery process as fast and painless as possible. Don't forget to add the "I forgot my password" link to help the user reset it. To do this, they will need an email or a phone number. There should not be any secret questions, sending personal documents or other additional checks.
It's important for people to start using your product as early as possible. If, after registering, you ask for confirmation by email, you disorient the user, prevent them from achieving their original goal, and reduce their satisfaction from interacting with the product.
Switching between apps is bad UX practice. You cannot deny users access now, but check later, within a few hours or days. Or simplify it as much as possible by sending a short code via SMS.
To make it always convenient for users to return, you should prompt for their data. For example, Facebook offers to sign in to your account simply by clicking on your avatar on the login page.
A good registration form is a complex system with many custom scripts. To improve the UX of the product at this stage, the designer needs to think about all the details of the user process and the needs of the business. A well-designed form will increase the number of new users and reduce customer abandonment.