App Ui Sign In Design

How to Design Better Login/Signup?

A guide to creating user friendly login and signup screens.

A login form is like the entrance to a house. It should be welcoming, easy to enter, and never mistaken for a different door. When your logins are like this, you'll encourage users to log in more frequently. Unfortunately, most login forms today aren't user-friendly entrances.

If you didn't read the previous article "How to design better forms?" then recommended you to read that first.

However, login and signup forms are so common part of application. So make sure that it isn't an problem to your users. You can follow the following tips for designing a better process.

Use social media for login & signup

Taking into consideration that some people want to create an account as fast as possible, you need to give them plenty of registration options on the sign up page. Your login page should contain an option that lets people sign up on your website using an external account.

This way, they won't need to go through the lengthy registration process to make a purchase or add a comment on your site.

Ask Less or ditch the username field

Ask minimum fields while sign-up, there is no need to ask everything at start.

Also it's not convenient to remember all the passwords and usernames we come up with when we see a signup form. It would much easier for me as a user to sign up with my email as I will remember it.

Use good copy or define the value

Avoid using general terms like 'Sign in', 'Log in'. Instead give the user idea of what to expect when they sign into the application.

Define the value proportion or tell them what value user will get from your application.

Show password option

Password confirmation doesn't help with conversions: it slows down the process and actually increases the chances of misspelling the password. Rather than asking for confirmation, allow your visitors to see what they just typed with an icon that unmasks their password.

Try to minimize errors

You should clearly identify and explain form field errors. Show them in which field the error occurred, and explain the correct way to fill out the field. Give users a hint of what type of input is expected in a particular field.