OK, I don't like long introductions, so here's a list of some of the most important UX tips for creating usable signup and login forms. It is based on my experience reviewing hundreds of beginner designer login flows as a result of my courses Learn UI Design and Learn UX Design.
Let's get this party started. The following are some pointers to assist an Interaction Designer in creating better registration and login forms.
The last thing users want to do is sign up. Users are generally unwilling to sign up unless they see value in doing so. Filling out the form's value proposition must be clearly defined. Keep the message short and to the point. LinkedIn is an excellent example of this. The value proposition is defined by changing messages.
When a user arrives on the website, make it clear where they can Register or Login, especially if Login is the primary call to action.
If login is the most important task on the website, display the login section first, rather than just the sign in or sign up links, as Facebook and Twitter do.
Not everyone can tell the difference between Sign in and Sign up right away. Mint is an example of how to display the two in different ways (refer above screenshot).
GoDaddy takes a slightly different approach, providing visual differences in button styles, clearly defined headers, and a description of the action.
Users can easily login to your website or app using an existing social account, such as Facebook or Twitter, with Social Login. This feature appeals to users because it eliminates the need to remember another password. Read my previous blog to learn about the benefits and drawbacks of using a social login.
Do not prompt the user to create a username unless absolutely necessary. By default, try to use their email address or phone number as their username. Users do not wish to consider another name. It is easier to remember their email addresses and phone numbers than a new name.
Pre-populate the ISD code based on geo-location or cookie information during mobile registration or login. Provide the option for the user to change the ISD code if necessary.
Provide a Sign-in option on the Create Account page and a Sign up link on the Existing User page to allow users to flip in case they accidentally reached the section.
The form's first input field will be auto-focused. This is only possible on the desktop. This saves the user the time and effort of having to click on the input field. The input field should be highlighted.
Allow users to keep themselves signed in for easier and quicker logins on their personal devices.
Users should be remembered and information should be pre-populated.
Labels should be top aligned. In material design, floating labels that are short and clear in action are used. For labels, use sentence case or title case, but keep the language consistent.
Placeholders should not be used as labels. Placeholders should convey a meaningful conversation, such as input format or description.
Allow the user to view the password if he so desires. This allows the user to correct any typos in their password. Assure that the password is masked by default. If the user wants to see the password, provide a checkbox or toggle.
Inform users if the caps lock is activated while typing a password.
Complex passwords are difficult to crack. Display password strength to allow the user to determine the complexity of the entered password and change it to the desired level of complexity. Display the password policy in an appropriate location so that the user creates the correct password the first time.
Display appropriate and well-defined error messages. Avoid using generic error messages that leave the user guessing.
Passwords are frequently forgotten by users. Make sure to include a “Forgot password” link to assist the user in resetting his password. Before allowing the user to reset his or her password, ensure that he or she has been authenticated. Some common authentication methods include sending an email or OTP to a registered email address or mobile number, asking recovery questions, and calling a registered mobile number.