The best solution for the “register/login” function of the website

A well-designed sign-up form is very important if there is user sign-up/sign-in functionality on the website. A poorly designed sign-up form can lead to an increase in bounce rates, not only a reduction in the number of registered members, but also user churn and dissatisfaction. In fact, it is worth thinking about whether most websites need to add registration/login functions.

If it is not necessary, please do not set the “Registration/Login” function

Before preparing to add registration/login functionality, you should consider whether you really need to do so. From a user experience standpoint, requiring signup/login is not a good idea.

The best sign up form is no sign up form!

Many shopping websites in foreign countries will have functions for tourists (non-registered users) to purchase and check out. According to relevant surveys, it is found that forcing users to register an account to make purchases is the most important reason for abandoning shopping carts. Therefore, before the website opens the “register/login” function, it is best to think clearly whether the user will give up continuing to browse the website because of such a setting.

In addition, as laws related to internet or data privacy become better, every password and data item stored creates a privacy and security “data debt”, with associated costs and liabilities for the website.

If you must use the registration/login function, you need to be clearly prompted

Make clear instructions on how to create an account on the site, for example, use the “Sign In” link or “Sign In” button at the top right of the page, and avoid vague icons or vague wording. Tips for making login obvious: “The icon may not be clear, but the “Login  button or text link is obvious.”

Sign up form as simple as possible

When registering, ask for as little as possible. Collect other user data (such as name, address, gender, age, etc.) only when needed and when the user sees a clear benefit in providing that data, as no one wants to expose their personal information or privacy at will. (The picture above in this article is the best registration example)

Also, keep in mind that every piece of data stored incurs cost and liability.

Once the user has entered their contact details (Email or mobile number), a confirmation code is sent to them, and the account creation continues after the user responds. This is a common signup pattern: users are used to it. Note: If it is not necessary, it is recommended to use Email instead of mobile phone number. After all, mobile phone number will still make users suspicious, and spam text messages or harassing calls always make people feel a little worried.

Try to use WeChat, QQ, Weibo, Alipay and other third-party login methods. The advantage of this is that the website does not need to worry about the security of user data, and at the same time, it also avoids the trouble of users entering various information and remembering accounts and passwords.

Do not prohibit password pasting

Some websites don’t allow pasting text into password input, but users realize that pasting is prohibited only after trying to paste the password, so disabling password pasting cannot avoid clipboard vulnerabilities. Investigations have shown that prohibiting password sticking annoys users.

Never store or transmit passwords in plain text

Make sure your passwords are encrypted and hashed – don’t try to invent your own hashing algorithm!

Provide convenient and fast password reset or change function

Make it clear to users where and how to update their account passwords. On some sites, this is very difficult. It should also make it easy for users to forget their passwords and reset them.

To protect the safety of the site and users, it is especially important to help users change their passwords if they discover they have been compromised. A well-known URL for changing passwords ( /.well-known/change-password) can be added to help users easily change passwords, redirecting the URL to the password management page. This feature is now implemented in Safari, Chrome, and will soon be available in other browsers.

It should also make it easy for users to delete/log out of their accounts if needed.

Avoid usernames as much as possible

Don’t expect users to remember the username for a long time, it is better to use the email or mobile phone number as the login account. On the backend, a unique ID should be generated for each user account, and on the frontend, the username can be ditched entirely.

Helps the browser’s built-in password manager to store passwords

Can help third-party and built-in browser password managers suggest and store passwords so users don’t need to remember or manually enter passwords. The password manager works great in all major browsers and syncs across devices.

When writing signup forms, it becomes very important to use the correct automatic values. For registration forms, use values ​​such as autocomplete="new-password"autocomplete="email"autocomplete="tel".

You should also use the appropriate typeproperties to provide the correct keyboard on mobile devices and enable basic built-in validation through the browser.

Leave a Comment