Master these seven principles to improve user login success rate!

TCC Recommendation: Hello everyone, this is TCC Translation Intelligence Bureau, I am Li Zehui. Login is a very common user operation, I believe that readers often experience various login processes. However, login is not a simple operation process, there are still many things to pay attention to. This article combines various cases to carefully explain the various details of the login process.

Designing a login page may seem simple. I spent quite a bit of time in 2020 designing the login and signup flow for a social media giant, and learned that a lot of thought and testing goes into ensuring a successful and easy onboarding experience for users. Here are the key lessons I learned.

What is Login?

Login is the entry point into an application, website, or service. Help users set up their accounts.

A login flow usually includes a main login page and a fairly complex reset flow that includes "forgot password", reset password and other login methods.

The primary goal of login is to ensure that users are successfully logged into their accounts.

What is a login target?

Let's take a moment to define the term "login target", which is key when making design decisions.

The login goal is the user’s intention for entering the login flow. Expressed in a think-aloud, it could be “I want to log in,” “I want to check my email,” “Take me there,” etc.

When users get to the login page, they may not have the intent to log in. They may think “eh, I don’t care, I’ll do it later” or “this is too much trouble” or “gee, what do I do now?” Forgetting a password, getting stuck part way through, or switching to another page/device can all be signs of a lack of intent to log in.

Retaining or increasing the intent to log in during the login flow is a good goal, and the following guidelines are tailored to this goal.

Designing Familiar Experiences

Designing familiar experiences is not a designer’s favorite design principle, but it is very important to be consistent with the best experiences in the entire ecosystem. For example, using simple, recognized layouts and using well-known terms and copywriting will help users perform familiar operations confidently and easily.

Keeping a universal design also helps the page scale easily to different form factors and devices.

Pinterest has a traditional, centered overlay login page. It has a bright red primary login button and offers Google and Facebook as additional social login options.

Scrolling to the end, there is my summary of popular successful login experiences on the Internet. This brings us to the next question - where is the limit of innovation?

Login is a great opportunity to showcase your brand. Visually, it may use brand colors, brand photos, brand illustrations, and even marketing information. As with most design problems, the key to branding on a login page is balance. The login action should always take center stage. Other elements on the page must be carefully planned and should not take away attention from the login action.

A good rule of thumb is to spend as little time on your landing page as possible. Help them move on and discover the benefits and value in your product as quickly as possible.

Focus on design

A quick recap: the less time a user spends on a login page, the better. With that in mind, the login (or restore) action should command the user’s full attention.

It’s best to place the login form in the center of the page. If you’re going to place it to the side, it’s best to give it a central visual presence.

It’s important for copywriting to indicate what the user needs to do in a certain step! A simple “Enter your password” will do the trick rather than a lengthy explanation. Humor, complex jargon, technical terms, and fancy writing have no place in a login experience.

In the recovery experience, it is effective to break down a complex set of actions into multiple steps. Arrange users to do only one important thing at a time! For example: entering your mobile phone number and entering the verification code sent to your phone are two separate steps.

Facebook keeps the user information on the right side of the page and breaks down the recovery process into steps.

Amazon breaks down its recovery process into multiple steps. It sets up secondary recovery options as expandable sections of “I need more help,” which helps keep the focus on the primary action.

Tips to keep your focus on the main action:

• The login form can be placed on a home page, an overlay page, or a standalone page.
• Use card layout
• Separate operations into primary and secondary operations
• Use a large, eye-catching login button
• Keep the number of secondary operations to a minimum - avoid anything that is not relevant to the core login operation.

Give clear feedback and help users when they fail

At every stage of the login process, users can fail. An incorrect email address, a wrong or forgotten password, network problems, all of these can lead to a sharp drop in login intentions. Therefore, it is extremely important that the login interface responds to the user in the most appropriate way. Clear, timely, and well-written error messages can help a lot.

Error messages contain helpful hints/hints about what you can do in case of failure.

When your password login fails but you have a Gmail ID, Facebook will add a "Log in with Google Account" feature.

Tips to guide users in recovery:

• Encourage users to try suitable alternatives
• Arrange alternative login scenarios after user failure and navigate the user to a separate page
• Show the most helpful login scenarios in the text and be proactive with users when errors occur!

Try to keep login traces

The point is to let users know that the platform recognizes them and provide a welcome-back experience. This helps increase users’ willingness to log in.

How to keep login traces:

• Features like "Remember Me"
• Pre-fill fields collected in the previous step, e.g. pre-fill the email ID collected in the login step when jumping to the recovery flow
• If you use two-step login, it’s a good idea to personalize the login method for your users – are they more comfortable with a phone OTP (one-time verification code) login? Or an email + password? Remembering the login method that the user chose last time can increase their willingness to log in and make the login experience feel natural and comfortable.
• In an enterprise SSO (Single Sign-On), a user may have multiple accounts to log in. In the case where multiple accounts are detected, it is best to present these account options to the user and let them select the account they want to use.

Flexible login options

There is no one-size-fits-all approach to which login methods your platform should offer. It’s best to offer one or two additional methods (besides username+password) so that users have options in case they forget their password. These methods could be phone number-based logins, facial recognition, or the most common social logins like Google, Twitter, LinkedIn, or Facebook. If you’re considering social logins, think about adding the most popular and secure options for your platform.

A word of caution - adding too many login methods will clutter the page and may result in a decrease in login willingness! Limit the additional options to 2 or 3.

Optimize for the most common login methods and clearly differentiate between primary and secondary methods. These options often prove to be a good alternative to needing to reset a password (in case the user forgets it), but are also considered a tedious step. When the situation allows, other login options should be intelligently surfaced and personalized. For example: if the user logs in via email, providing a login option with a one-time link may be effective.

Here’s an example of the Medium login page. While clear and well designed, it does have too many ways to log in. Have to go back to Medium’s designers to find out if this design is good enough for them!

Passwordless logins are gaining popularity fast. Especially for mobile-only apps, phone number-based authentication is becoming the norm. Fingerprint and FaceID are appearing in many places, making authentication processes fast and secure. Find the most suitable (and developable) method for your platform and use it as the primary login option.

Login is a trust-sensitive moment

Logging in involves users entering sensitive personal data like email, password, and phone number — a sensitive moment that defines their relationship with the platform.

The login box represents the brand, and any visual changes must be made slowly — as drastic visual changes may lose user trust.

Logging is also (useful) security - just enough to keep the bad guys out of the system!

While it’s important to reduce the amount of activity that regular users have, it’s also important to present additional authentication if we suspect that the user might be a hacker. This can be a good opportunity to remind users of steps they can take to strengthen the security of their accounts — for example, strong passwords, two-factor authentication, etc.

Determine user types through research

As mentioned before, investing enough time to research users can help increase their willingness to log in! This is very important.

Login is an experience, and your user personas can be varied — everyone could potentially have an account on your platform’s services! Narrow your personas down if possible.

When the situation allows, like me (designing for social media platforms), you can try the following solutions:

• Onboarding Funnel – Work with PMs to identify key points in the onboarding flow where users engage and abandon.
• Landing point — Did the user arrive at the landing page via email? From a search engine result? While they were using the product? In the app? You can use these entry points as clues to surface the most relevant options for the user.
• Known devices – Phones, browsers, and known devices can help provide a welcoming, personalized login experience for users.
• User groups – Segmenting by user characteristics, such as web/mobile, age group, and region, can also help.

Use these cues to increase the user’s willingness to log in when they are not logged in. Take small steps to identify the user and make it easy for the user to accept. This will help you increase your login success rate! This in turn will bring more active users to your platform, and everyone will be a winner.

Case Introduction

Here’s a roundup of my favorite landing pages from around the web, including a few that I visit regularly. Feel free to recommend more!

Google breaks out of the logo-first format and goes for a step-by-step login model, with email and password input in separate steps. This model has security advantages for Google, and also allows them to provide personalized choices to users in the next steps. The page is also minimal, all-white, and focused.

Uber’s login page is simple and focused, allowing users to enter their phone number and proceed to the next step.

Facebook has several login options that they experiment with and A/B test — here’s an example of a right-aligned login box that does a great job of highlighting the point. The space on the left is used to create a positive branding — overall a successful login experience.

Pinterest has a simple centered overlay form with a large input field — always inviting! There’s also a bright red primary login button, and some additional social login options.

While Airbnb does many things well, its login page feels a lot of work, perhaps because of the phone number-based login, or perhaps because of the large number of secondary login options, which results in quite a bit of cognitive load!

LinkedIn does a great job of keeping the login box brief, focused, and centered, with a prominent primary login button.

I’m on the fence about Dropbox’s login page — the illustration is nice, but its color is similar to the color of the interface buttons. This is a case of an additional element being distracting. Personally, I like bold use of illustrations in interfaces, but it’s also important to evaluate the context in which the illustration is used.

Amazon’s login page is a good example of managing user attention, with a big yellow “Continue” button and no distractions on the page, making the login task look quick and easy.

Placing ads on a login page may not be a good idea, but at the same time Yahoo has a distinctive logo in the login box, which has some clever features designed to help users save typing. (See the picture below)

I want to include Figma in the list of great login examples. The page is centered in the overlay, Google Sign In is prominently displayed (maybe Figma’s preferred and promoted login form?), and it’s very simple, almost wireframe-like. The user experience is very good.

Thanks to my product partner Apurva for learning with me. Take small steps to identify users and make them easy to accept. This will increase your user onboarding success rate! And it will also bring more active users to the platform. :) I hope you can get inspiration from this article and apply it to your own product and design work.