This Blog was also published on UXPlanet.org.
Following are some of the tips that could help an Interaction Designer create better registration and login forms.
- Define the value proposition: Sign up is the last thing users want to do. Generally, users are not willing to sign up until they see value in doing so. Clearly defining the value proposition of filling out the form. Have the message crisp and sharp. Linkedin is a good example of this. They have changing messages defining the value proposition.
- Clearly show where to login in: When a user arrives on the website, clearly show the user, where to Register or Login, specially when Login is the primary call to action.
- Show input field: If login should be the priority task on the website, show the login section upfront, instead of just the sign in or sign up links, like the way Facebook and Twitter does.
- Differentiate Sign in and Sign up: Not everyone can quickly figure out the difference between Sign in and Sign up. Display the two differently, Mint is an example (refer above screenshot).
GoDaddy handles this a little differently by providing visual differences in the button styles, clearly defined headers as well as description of the action.
- Allow Social Login: Social Login allows users to easily login to your website or app with an existing social account, like Facebook or Twitter. This attracts the users as this feature eliminates the need to remember another password. Read my previous blog to understand the advantages and disadvantages of using a social login.
- Email or mobile number instead of Username: Do not ask the user to create a username until it is really required. Try to use email id or mobile number as their username by default. Users do not want to think of another name. It is easier to remember their email id and mobile numbers than another new name.
- ISD code with mobile login In case of mobile registration or login, pre populate the ISD code base on geo-location or cookie information. Also provide option for user to change the ISD code if required.
- Sign in and Sign up option: Provide a Sign in option on Create Account page and Sign up link on Existing User page to enable users to flip in case a user has reached the section by mistake.
- Focus on first field: Auto focus on the first input field in the form. This is possible only on desktop. This saves user the time and effort of clicking on the input field. Highlight the input field.
- Keep users signed in: Provide an option for users to keep themselves signed in for easier and faster logins on their personal devices.
- Remember returning users: Remember users and pre-populate information.
- Labels:Use top aligned labels. Material design uses floating labels, which are short and clear in action. Use sentence case or title case for labels but maintain consistent language.
- Placeholders:Do not use placeholders as labels. Placeholders should convey a meaningful conversation, such as the format of input or description of input.
- Show password to user: Allow user to see the password if he wishes to. This helps user to correct mis-typing their password. Ensure that by default the password id masked. Provide a checkbox or toggle to show password if user wishes to.
- Alert if Caps Lock is on: Let users know if caps lock is on while typing password
- Password strength: Complex passwords are hard to hack. Show password strength to enable user to know the complexity of the entered password and change the password according to the desired level of complexity. Show the password policy at appropriate place, for user to make the right password the first time.
- Error messages:Show appropriate and clearly defined error messages. Do not use generic error messages, which leaves a user guessing.
- Authentication for password recovery: Users tend to forget their passwords. Ensure to provide “Forgot password” link to help user recover his password. Ensure the user is authenticated before allowing him/her to reset password. Some of the common authentication methods are, by sending email or OTP to registered email id or mobile number, recovery questions and authentication by call to registered mobile number.