8 Login Screen Best Practices for Your Website or App

Let’s be honest: The login screen won’t be the most impressive or groundbreaking part of your website. And since you’ve spent so much time designing the rest of your site, it’s easy to overlook. I wouldn’t blame you — nobody praises a web app for its login page.

But, that doesn’t mean it should be ignored. The login screen is still part of the user experience and contributes to how users feel about your website.

A smooth login experience gets users onto your site without friction, but a poor design can be off-putting and leave a bad impression before they’ve even signed in. That’s why a well-crafted login page is so important.

Plus, every gated website needs a login page, so we’ve seen enough to know what works and what doesn’t. In this guide, we’ll share eight design best practices along with design examples to keep your login screens friction-free.

1. Aim for simplicity.

Of course, your login screen isn’t why users come to your site — you want them to move through it as quickly as possible. The best way to ensure this is to keep things as simple as possible.

Upon landing on the page, it should be immediately clear to users what information they need to provide to login and where they should put this information. In the majority of cases, one or two form fields and a “log in” button are enough. You could also split your email and password fields onto separate screens.

In addition, you’ll probably want to add a link to an account creation page for new users who land on your login page by accident, and a password reset link (more on that later). For example, here’s the login page for Defy performance products:

Image Source

What we like about this example: Defy has only the essentials in its login screen, with bold contrasting colors leaving no ambiguity about what actions the user needs to take.

Keep your login screen to one page — requiring users to progress through multiple page loads is never a good thing, especially when it’s unnecessary. You could even present your login area as a modal of the current page instead of its own dedicated page, shown below on Canva’s website:

Image Source

What we like about this example: By presenting the login screen as a modal on top of its homepage design, Canva trims off valuable time from the login experience.

2. Use website branding.

Your login page isn’t just a means to sign into your website — it’s also an opportunity to invite users back.

Think of the users who are returning to your website after a long time away, or users who have remained signed in for months and are finally seeing this screen again. We want them to feel welcome and, more importantly, know that they’re actually in the right place.

So, carry your website’s branding into your login page. Avoid a generic look by including brand colors, and consider adding some friendly microcopy. You could even include a product update or marketing materials like on Calendly’s login screen:

Image Source

What we like about this example: Calendly’s page is clean and straightforward, while retaining enough familiar brand characteristics to keep an inviting feel in line with the product’s tone.

3. Ask for email.

Usernames used to be a standard for online accounts, but that’s not the case anymore. Web apps and services have been making the switch over to emails for a while, and we recommend your login page does the same.

The primary reason for this is convenience — emails are much easier for users to remember. Visitors already need to remember a password to sign into your site, so avoid making them remember an extra username if you can. This can be seen on the Asana login page below. Alternatively, let them sign up with a phone number.

Image Source

What we like about this example: This login page is fairly generic, but makes the user’s options clear. The email address field is plainly visible, with the password field hidden on the next screen.

Of course, if the nature of your website requires usernames (e.g., a forum site or websites that allow multiple accounts per user), you need to allow them at sign-in. However, these are exceptions to the rule.

4. Make passwords safe and easy.

Password entry can appear simple on the surface, but there are several things to consider for good UX.

Namely, should you show or mask the password when the user types it in? On one hand, letting them see it will prevent typos, failed logins, and frustration. On the other, users may not want their passwords on display if they’re using a computer in public.

The consensus seems to be this: Mask the password field by default, but allow users to show the inputted text if they want to. The HubSpot login page does this well:

Image Source

What we like about this example: By default, the user’s password is protected from onlookers, but they have the option to show their password if, for instance, they think they made a typo.

Besides password masking, here are some other functions of your password input to keep in mind:

• Can users paste a password into this input? We recommend allowing this.
• Can the input be auto-filled by a password manager? Again, this is recommended.
• Will you allow two-factor authentication? 2FA is becoming increasingly common for web applications, especially those storing sensitive information.
• What happens when a user submits the wrong credentials? How many tries will you give them? Your password field should indicate when a password is wrong and have protections against brute force attacks (entering many passwords in an attempt to guess the right one).

Finally, consider offering alternatives to passwords that allow for easier logins. On mobile, you can replace a password with a fingerprint ID or facial recognition. Ikea’s website has another option: Instead of a password, the website emails you a login code.

Image Source

What we like about this example: Providing a login code instead of a password means one less password for users to store or remember. The tradeoff here is requiring users to open their email and retrieve the code.

5. Provide help if they forget their passwords.

Some users are going to forget their passwords, so a quick and convenient password recovery feature is a must on your login screen.

The password recovery button doesn’t have to be prominent. A small but clear text link will work, which can send a password reset link to their email or phone. Or, clicking this button could provide password reset instructions. Whatever the steps are, make the process a small speed bump rather than a full roadblock.

The copy on your button is important too. Humans aren’t perfect (and far from perfect when it comes to passwords), so avoid being condescending here. Patagonia does this nicely:

Image Source

What we like about this example: Asking a user if they need help with their password can be perceived as friendlier than something like “I forgot my password.” Ultimately, refer to your brand’s voice and tone guidelines for what to write.

6. Allow sign-in from an external account.

Single sign-on (SSO) technology allows users to authenticate themselves on one website using credentials from another website. SSO has been a game-changer, and you should consider allowing users to sign in with an alternative account. It’s faster and doesn’t require an additional password.

Which external accounts you allow is a tougher call. Given its popularity, a “sign in with Google” option is usually a good call. You can also include one or more social sign-ons from sites like Facebook, LinkedIn, or Twitter.

While including multiple SSO options is convenient, providing too many options can have the opposite effect on users and increase friction. Pick one to four external sign-on options based on what websites you know are popular with your audience.

Importantly, SSO isn’t a replacement for email sign-in. Users may avoid signing on with an external account — they may not have these accounts, or would rather just keep their accounts separate. Always allow users to sign in with email if they prefer. Note how Airbnb handles external sign-on:

Image Source

What we like about this example: This login modal lets users sign in with email, Facebook, Google, or Apple — four options that are likely popular with the typical Airbnb user.

7. Separate login and sign-up.

Logging in and signing up are two different user flows: A user signs up only once and logs in every time afterward. Your login screen should be for return visitors only. If this is their first time on your site, provide a way for them to access your sign-up page from your login page.

Login and sign-up user flows are often different and are therefore placed on different pages. Alternatively, you could combine your login and sign-up screens into one, as is the case with the Airbnb example above. Or, you could separate them with tabs, like how the Partake Foods website does it:

Image Source

What we like about this example: Partake Foods puts its links to “sign in” and “sign up” next to each other. This way, it’s clear which one the user is doing, and easy to switch to the page they need.

8. Make it accessible.

Finally, your login page is the gateway to your site, so make it one that all users can pass through. If it isn’t web-accessible, you’re limiting access to a large portion of your users that rely on assistive technology and well-structured web pages.

As is true with all your pages, make sure that users can tab through elements on your login page, that HTML is coded semantically, that form fields and buttons are labeled properly, that color contrast is sufficient, and that the page works with JavaScript turned off.

The simpler your page, the easier it will be to achieve web accessibility compliance. Take the New York Times login: a simple login screen that retains both style and accessibility.

Image Source

What we like about this example: This login page keeps high color contrast, a simple layout, and well-coded HTML.

Must-Haves for Login Screens

When considering the overall user experience of a website or application, every detail matters and your login screen is no exception. Whether a user is logging into your site for the first time in a while or the first time ever, the process should be seamless.

Since we see login screens all the time, it’s easy to take their careful designs for granted. However, poor login experiences will stand out to visitors, so putting in the extra effort to get it right will be worth it for your users and for your bottom line.