Common problems to be aware of when designing the registration/Login interface

How to design a user login process for a Web site is a commonplace topic. With the development of the Times, the new user registration, login to the actual process of joining a website has been changing, from simple information to complete the development of a comprehensive registration, and then return from the system registration simple intuitive login experience, the new user's login process has undergone a circuitous process of change. Nowadays, the vast majority of websites have abandoned the complex, cumbersome registration process, the user may encounter obstacles, causing users to dislike and irritability part of the removal, as simple as possible to allow users to complete the registration and login process.

When a user completes the registration, it is possible to selectively provide additional information that may give the user a more customized user experience. For the sake of safety, the vast majority of websites still provide the link of mailbox authentication and even telephone verification, even provide the authentication mechanism of standby secure mailbox.

In short, today we look at the site's new user registration process, this is a system, perfect and have a complete set of rules of the design.

　Login and Registration

As the registration process is optimized and simplified, the login interface and registration interface are now easily confused. The cause of this confusion is more than simplification. First, many websites will choose to design the login and registration interface very similar, even directly to the same interface. Many users inadvertently registered several accounts in a Web site, it is not uncommon.

The problem does not just exist in the process. In Chinese, "Login" and "register" two words are visually obvious differences, but in English, "Sign up" and "Sign in" is also very easy to cause confusion.

Therefore, in order to let users no longer have unnecessary confusion, it is best to design a different interface, and the differentiation of visual and content design, to ensure that users do not misjudge. In this case, the Axureshare login/Registration interface typically outlines how confusing a simplified, repetitive layout is.

　Email address and user name

In the registration process, there is also a particularly noteworthy issue is the user name and the problem of registering mailboxes. When users register, it is best not to let users create unique user names, and use this as the only credential for logging on to the service. The vast majority of users will have at least 2 mailboxes-one for work and one for private use (many people in China may have only one mailbox, QQ mailbox ...). Therefore, the best way is to let users log in with the mailbox, registered users can modify the information after the login, add a secondary mailbox, you can add a user name.

In addition, the mobile end of the rapid development of today, let users use mobile phone number is also a very good program. First, the mobile phone number is unique, as a login account has a convenient and easy to remember features, as a common account exists, easier to use users.

It is worth mentioning that the mobile phone number also conforms to the current two-step authentication security mechanism, the system can be more convenient for users to send authentication code.

　Show process

The progress bar is one of the most important in the user interface, which presents the user with progress, sets goals, and feeds the information to the user. The progress bar gives users a clear idea of how much he has accomplished and how much remains to be done. It is also the progress of the bar, complex to join the link can be segmented, simplified, and more clear.

LinkedIn is quite prominent in this regard, it will complete the user information to quantify, to motivate users to continuously add content to improve personal information.

　　Dynamic effect

Dynamic effect is one of the most common and practical elements at present. Use dynamic to tell users how to fill out the form, the dynamic and behavioral call buttons and other design together, you can let users understand the next step of the operation process.

In Readme.io this site, the owl will change with the operation, when the user input password, will be very cute to cover their eyes. Dynamic and animation to join the page virtually added more interaction, it is more fascinating. Similarly, Shopify in the registration interface, the pop-up tag will be used to help users understand the next step.

　Third-party Login

Although not every user will use a third party account (microblogging, micro-mail, Facebook, Twitter, LinkedIn, etc.) to register/log in to the Web services, but the option to reserve a third party account login is necessary-such a more convenient way to log in.

　Display password

More and more Web sites and apps in the registration process, the password is no longer entered two times, such a situation, registration when the password input error is almost fatal, so provide users with a password display can effectively avoid this problem. You know, at present many registrations are done on the mobile end, the thumb on the screen to enter a password than the input on the keyboard error rate is higher.

More than 82% people have forgotten the site's password, and with the growth of websites, apps and services, this number will only increase and not decrease.

　Alert Caps Lock

When the user enters the password, reminds them whether the keyboard has caps lock, also is worth noticing point. Providing users with text reminders or visual reminders can help avoid multiple input errors and reduce user browsing frustration. Most browsers have integrated CAPS lock reminders, so this problem can be seen only with a little attention. However, when users belong to a password, most of the attention is focused on the input content, so CAPS Lock reminders must be elegant and eye-catching.

　　Avoid anti-pattern design

The existence of design patterns, adapt to the user's habits and interaction rules, so that users can better interface with the operation. The existence of an inverse pattern can also lead to user behavior, but the results of the boot are often uncontrollable or fail to achieve the goal. Common anti-pattern designs are many:

• User input information error when the error, and then delete all the input and content

• Users are still allowed to register with the user when they already have an account

• Added tags that are seemingly clickable but not actually clickable for the user

• Limit user input field length but no reminders at all

　　Remove Verification Code

The removal of the verification code can effectively improve the conversion rate. Although the verification code can be very good to avoid the registration machine, but the verification code for users more frustration, 12306 can be called anti-human Verification code is a good counter example. According to statistics, 38% of users will be the first time to enter the verification code when the error, 15% of users will always be wrong, and this type of users usually in the fifth time after the wrong completely abandoned registration.

REDDIT completely removed the registration link verification code, after the removal of the site's new user enrollment rate of 8% year-on-year growth. Of course, anti-registration machines and robots are still very necessary, if the situation is more serious can choose a more user-friendly verification mechanism to circumvent.

　Conclusion

To improve the conversion rate of new user registration, the vast majority of the user experience to deal with the problem, to understand the user's pain point, in addition to the traditional desktop users to consider the problem, but also to address the new needs of mobile end users. In the good experience and security between the balance point, this is the new user Registration link is the most difficult question.