1 Feb, 2022

Simple Practices for Better Login Forms

Table of contents

Contributors

Denislav Jeliazkov
Founder @uilearn

Subscribe to our newsletter

Share

The login form is the entrance of your house, it should be warm, welcoming and easy to enter, and never mistaken with the entrance of the basement.

When you fix your logins you will encourage users to log in more frequently, sadly the majority of login forms aren’t user-friendly.

 

Don’t use Sign Up and Sign In at the same time

Just by reading it gets confusing, now imagine your customer in a crowded subway trying to log in to your product. Most likely they will hit the wrong one, simply because it will require them extra cognitive effort to tell the buttons apart because the labels are extremely similar.

What are good pairings:

  • Sign up and Log In
  • Sign In and Create Account
  • Log In and Get Started
  • Register and Log In

You can go the extra mile and say Try for Free as it gives more information than a general sign-up label.

 

Social logins shouldn’t fight each other

Try and use the same styling to the social login buttons, although even brand has their own color represent it only in their logo. This will help customers identify their preferred method and login faster.

Keep into consideration the number of social logins. Offering too many choices makes it harder for people to decide which one actually to use. They need to think and evaluate which social media they trust the most. I’d recommend using between 2 and 4 as the sweet spot.

 

Disable submit button

It’s super easy for people to accidentally submit the form with the wrong credentials. This can lock your account and it will be frustrating for your customers.

Disabling the submit button prevents errors from displaying on accidental submissions. The fewer errors a customer sees, the smoother their progress will be.

People have a limited login attempt before they get locked out, so we should as ourselves is it fair to count accidental submissions as failed logins?

 

Make your fields flexible

People’s email address is the most common login pattern, however, allowing themselves to login with a username or a phone number can make the experience easier.

This is especially valid on mobile as the typing experience is not what people like to do, or if a person doesn’t remember the email they used, but remember their username.

The flexible ID will save them time and effort.

 

Don’t keep people away

After a user gets locked out from their account don’t force them to sit and wait for the period to expire. There is a high chance they will never return. Imagine needing your bank account and you get your verification code wrong and need to wait 30 minutes to get access to your account.

Time is the most valuable thing in our lives, keep the lockout period down to a minimum and if possible instead of a lockout ask them to reset their password.

Keep it simple

The perfect login is only a few design practices away. The simpler your login is, the easier it is for users to log in. The login isn’t the most important page, but it’s one that users will visit a lot. Treat the login like the entrance of your house and give them a warm welcome.

Lastest blog posts

Top 3 Mistakes holding you back from becoming a great product designer