A login form is similar to the front door of a house. It should be warm and inviting, and it should never be confused for another door. You'll encourage users to log in more frequently if your logins look like this. Unfortunately, today's login forms aren't particularly user-friendly.
Logins have become more difficult as a result of the rise of use social login buttons and stricter security. Users frequently confuse these for signup forms and have difficulty logging in as a result. They're also frequently crowded with distracting items. The UX guidelines listed below help how to simplify login, clear up any ambiguity and simplify account login.
How to Simplify Login
1. Don't use the terms "sign-in" and "sign up" interchangeably. Make the button labels distinct.
Users may become perplexed if they see two buttons labeled "Sign in" and "Sign up," and mistakenly select the wrong one. Because the labels are so similar, it takes extra mental effort to identify the buttons apart.
Differentiate the labels to make each one stand out. Pair "Sign up" with "Log in" if you're using it. "Sign in" should be paired with "Create account" or "Join."
Even better, the label should describe the user's actions within the context of their assignment. "Try it free," for example, informs users that they are joining up for a free trial. This label is more detailed, resulting in more clicks, than a generic "Sign up" label.
2. Don't use the same design for the login and signup forms. Use contextual cues to distinguish them.
Did you aware that some people will type their login credentials into a signup form by accident? This error arises when the signup form resembles the login form too closely. But the login and signup forms are different. The shapes, like the labels, should not have the same appearance.
Users can still make this error even if the page titles are different. This is due to the fact that most people log in based on habit and reaction. They start typing as soon as they see a text field.
The label "Tell us about yourself" replaces "Sign up for an account" and indicates that users must give personal information. They'll realize they're in the wrong context if they're trying to log in.
3. Keep "Forgot Password" away from the field. Put it at the footer of the login page.
Putting a fire extinguisher next to the password box is like putting a fire extinguisher next to the front entrance. It's crucial to stay safe, but assistive technology shouldn't be a source of distraction or clutter. When you can put it in the login footer, it's unnecessary to include a "Forgot password" next to the form. Users will only see it if they require it, not if they do not.
4. Don't place "Sign up" at the top of the page. Put it at the footer of the login page.
When users stumble on the erroneous form, the "Sign up" link can also be used as a helpful aid. It should not be near the top of the page, as this will draw attention away from more important parts. Put a link to "Forgot password" in the login footer. When users require assistance, they will look near the bottom of the page for those help links. The majority of the time, consumers will not require assistance. When they don't need assistance, don't throw it in their face.
5. Don't put social login buttons in direct competition with one another. On white buttons, use colorful logos.
When many social login buttons are grouped together, it can be difficult to distinguish between them. When all of the buttons are different colors and competing with one other, this happens. Instead of a colored button backdrop, use a colored logo on a white background to reduce noise. Users will be able to identify their preferred social login by looking for a more identifiable indication.
6. Limit the number of social logins you use. Allow no more than four people.
The issue with providing too many social login options is that consumers may forget which one they used on your site. This may lead to them selecting the incorrect option while logging in. If they forget, limiting the number of possibilities makes it easier for them to find it out.
Too many options make it difficult for them to choose which one to employ. They must devote time to determining which social networking site they trust the most.
7. Don't put too much emphasis on social login buttons. On clicking, they'll be revealed.
Is social media or email the primary method of logging in? Determine the way your users like it and stick with it. If they choose to log in via social media, reveal the email login form when they click. If most people prefer email login, make the social login buttons visible when they are clicked.
Do not make both ways public at the same time. Users' attentional resources are limited. Distraction, loudness, and clutter result from displaying too many visual elements. When users click a progressive disclosure button, the secondary login method is shown. To satisfy the majority of users, this keeps the focus on the primary login method.
8. Don't check the "Remember me" box. Use one that says "Log me out after."
I have a hard time remembering to check the "Remember me" option. As a result, each time they visit, they must re-enter their login credentials. In time-sensitive situations, this can be costly. You save the trouble of repetitive logins by remembering the user's credentials by default.
The "Log me out after" checkbox can be selected by users who log in from a public or shared computer. They can rest assured that their session will end when they close the browser. Because they are more aware of their privacy, these users are less likely to forget to check the box.