UX Best Practices for Designing Signup and Login Forms

Introduction

When you design any app, chances are good you’ll need to design signup and login screens. Not only are these screens ubiquitous, they’re also some of the first screens new users will see when using your app, which makes them great places to invest in user experience. Here are a handful of best practices we follow at Echobind when designing signup and login flows for the apps and websites we design and develop.

Signup

Ask for as little information as possible

The biggest lever you can pull to improve the UX of your signup form is to only ask for information that is essential. It’s tempting to ask users for data that might be useful, but this puts unnecessary burden on the user, erodes trust, and often decreases conversion rates. It helps if you pretend every field in your signup flow must justify its necessity. For each field ask yourself the following questions:

• How will these data be used?
• By whom?
• For what purpose?

If you (or your client) can’t come up with a specific and direct answer to all three of these questions for a field, then that field should not be added to the signup flow.

Show password requirements as help text

Most apps will have requirements for passwords for security reasons. This includes things like minimum character counts, capitalization rules, and special character requirements. If your app has password requirements, it’s best to show these requirements to the user when and where they are relevant (i.e. as help text near the password form field).

If your app has simple password requirements that can fit on a single line, add that line below the label and above the form field.

If your app has multiple password requirements that can’t fit on a single line, add the requirements as bullet points directly below the form field.

Don’t make the user confirm their password, let them see their password

Instead of making the user confirm their password, give them the ability to show or hide it using an icon or text toggle. Making users confirm their password decreases conversion and causes more user corrections. In one case study, the authors were able to increase the conversion rate by 56.3% by removing the confirm password field. In Why the Confirm Password Field Must Die, UX Movement had this to say about the case study:

Once they removed the confirm password field and replaced it with an unmasking option, the number of user corrections decreased. Not only that, but it increased form starts, completions and the conversion rate.

Not bad ROI for such a simple change.

Link to the login screen

For users who already have an account, make it easy to switch to the login screen by providing a link.

Validate once the user clicks submit instead of using live validation

As Adam Silver points out in his article The Problem with Live Validation and What to Do Instead, live validation can cause many problems for users including users not noticing errors as they appear (which sort of defeats the whole purpose of validation). Instead of live validation Adam recommends validating the form only once the user has clicked Submit. This allows the user to clearly see which fields need to be fixed and fix everything at once rather than switching between answering questions and fixing mistakes.

Login

Allow the user to recover their password and put the link somewhere near the password field

People forget passwords all the time. Your login form should make it easy for users to recover it. Put the Forgot your password link near the password field. I generally like to put it below the form field on the left for easy eye tracking.

Allow for social login single sign-on (SSO)

Single sign-on using social accounts is a modern convenience that many users have come to expect. It’s easier than typing out your email and having to remember multiple passwords for different apps. It can also reduce failed login attempts.

To reduce cognitive load for users, we recommend adding no more than 3 social login options. According to the State of Consumer Identity Trends 2023 report, Facebook and Google are the most popular social logins, so adding those is a good bet. You should only add a third option if you have evidence that the majority of your target audience uses another social platform more than Facebook or Google.

Allow for fingerprint authentication and FaceID when possible

Similar to SSO, fingerprint authentication and FaceID give users a convenient alternative to the standard login method. The State of Consumer Identity Trends 2023 report found that passwordless login (e.g. magic links, fingerprint authentication, FaceID, etc.) had the highest user retention of any authentication method. If you have the time and budget, adding alternative login methods, such as social SSO and passwordless login, gives users control over their experience and can increase retention.

Remember what the user has already typed

If a user enters incorrect login credentials, show an error message but do not remove the email and password they entered. The user should not have to re-type their email between password attempts, and the password they entered may just contain a typo that can be easily corrected. Similarly, if the user clicks Forgot password, the reset password screen should remember the email they entered on the login screen.

Link to the signup screen

For users who don’t already have an account, make it easy to switch to the signup screen by providing a link.

Other Tips

Don’t use “sign up” and “sign in” together

Using terms for account creation and login that are too similar to each other, such as “sign up” and “sign in”, can be confusing for users. Instead, use terms that are distinct from each other.

Options include:

• Sign up / log in
• Register / log in
• Register / sign in
• Create account / log in
• Create account / sign in
• Join / log in
• Join / sign in

As a side note, “sign up” is the verb “signup” is the noun. Same for “log in” / “login”.

Don’t autofocus the first form field

As Adam Silver points out in his article The Problem with Automatically Focusing the First Input and What to Do Instead, autofocusing the first input leads to problems for keyboard use, screen readers, and on mobile. The simple solution is to put the user in control and let them focus the first input on their own.

If you have other tips or best practices you follow when designing signup and login forms, let us know on Twitter.