Using many cases, we have summarized 10 tips to make your login experience better!

Editor's note: How much user experience worth considering is hidden in the seemingly simple login box? These 10 details are the difference between you and a design expert.

Tip 1: More obvious

You shouldn’t make your users hunt around for a login area. The longer they spend searching, the more frustrated they’ll get. The more frustrated they get, the less likely they’ll eventually log in.

A good example of this is the Gmail login page.

You know exactly where you need to log in and what to enter in the input field. In the example above, if you don’t have a Gmail account, it allows you to easily create one by clicking “Create Account”.

A good user experience is to make your login area obvious and make it as easy as possible for your users to log in.

Tip 2: Use a third-party login

Third-party logins are quickly becoming the way users log into their accounts, and for good reason. Creating multiple accounts for different products is time-consuming and confusing. It's hard to remember a bunch of different passwords and usernames.

All of these concerns could be addressed by allowing users to create an account using information from their third-party accounts.

Let's take a look at the following Graphite document and the selection method when logging in to MONO:

There is even a more convenient way to register and log in. You can log in by SMS verification code at the same time as registration:

Some products require users to use their mobile phone numbers to log in via SMS when they click on a third-party registration and login app. From the user's perspective, this is obviously a bad experience, but the thinking is different from the product's perspective. In order to obtain more information from users, the product needs to design the process in this way.

Whether this design process should be used requires a trade-off between the product and the user. Third-party and mobile phone SMS verification code login can improve user experience while improving user efficiency and making the interface more intuitive.

Tip 3: Simpler

Due to different environments, there are few efficient third-party login products on many web sites in China.

For example, if your QQ is not logged in on the computer, even if you choose to log in with a third-party QQ, you still have to take out your mobile phone, open QQ, open the scan function, scan the code to log in, and perform a series of operations.

Or, when you want to log in to Behance, as long as the browser has a record of the previous third-party login, you can directly enter the website by clicking the third-party login without even registering.

You can see the following Tencent and Behance webpage logins:

A good login experience should only have two input fields: account number and password, or two fields: mobile phone number and SMS verification code, and the option to use a third-party login. It is simple and efficient, and provides users with a good experience.

Tip 4: Distinguish between registration and login

If a user comes to your website to register, or wants them to return to the login interface, it is necessary to let the user know clearly where he is and where to go next.

We can help them by using the difference between login fields and registration fields. Let’s take a look at the following dribbble registration screen:

The button to create an account is highlighted by the dribbble theme. New users can register directly on the page, while returning users can use the word "Login" in the top right corner. Do you see the "sign in" field above?

Dribbble uses different colors and layouts to distinguish the registration button from the login entrance, which is clearer.

You can also take a look at the main page of Dribbble. They distinguish between sign in and sign up, and add a micro border to the sign up, so that users can distinguish the difference between the two more quickly.

Tip 5: Skip the Username

It’s really not a good idea to ask users to log in with their usernames. To save users the trouble of remembering their usernames for your product, let them sign up using their email addresses or phone numbers instead.

ins gives users the opportunity to log in with their phone number or email address.

Counterexample:

Whenever possible, allow users to log in with both a mobile phone number and an email address, because users may forget the email address they used to log in to your product, so at this time, users can log in with their mobile phone number.

Tip 6: Password can be displayed

Provide users with a button that can display their passwords to reduce the number of times users enter incorrect passwords. When they make mistakes, they can correct the incorrect fields without having to delete all the fields and start over.

Let's take the following pulse and a moment:

Tip 7: Remember User Information

Is there anything more frustrating than returning to a website or app you’ve logged into before, only to find that you need to enter your account password again?

When your users return to your site, make sure they are logged in, or pre-populate username and password fields for them to make login easier.

Google does a great job of this. Whenever a user needs to log back into YouTube, Gmail, or any other Google brand, their login details are remembered, making the process much simpler.

Ally Bank allows users to check the "Save Username" checkbox, allowing the website to remember the username by default when the user arrives at the website. This is another good way to remember user information. The display form can be diversified and can be controlled according to your own products and user needs.

Tip 8: Easily recover your password

Sometimes your users will forget their login details. When this happens, try to make the recovery process as painless as possible.

The account and password input field of the official account has a remember password checkbox to prevent users from forgetting their username and password, so they don’t have to enter their account and password every time they log in.

Evernote does something clever with their passwords, letting users know how long ago they changed their password.

This little hint can jog the user's memory and help them remember their password.

If users forget their login information, make it clear where to go. If you make frustrating situations less frustrating, your users will love your product for it.

Tip 9: Let users know Caps Lock is on

We’ve all had the experience of frustratingly typing and retyping your password to no avail, only to realize you’ve left your Caps Lock key on the whole time.

You can prevent this from happening by warning your users. Microsoft’s Edge browser also gives users the option to turn on notifications when Caps Lock is turned on while typing.

Tip 10: Login without password

Allow your mobile users to log in without a password. Now many apps, especially financial apps, allow users to log in with fingerprints. Because unlike other apps, they can't keep users logged in all the time, it is more convenient while ensuring security.

I hope the above design techniques and cases can help readers improve the user experience of their products.