Passwords

As time goes on I find myself increasingly annoyed with login forms. As password managers like 1Password (which is what I use) and Chrome’s password manager (which I also sorta use) become more popular, it’s important for websites to be aware of how users go about logging into their sites.

Let’s walk through some login patterns and why I think they’re not ideal. And then let’s look at some better ways of tackling login. TL;DR; create login forms that are simple, linkable, predictable, and play nicely with password managers.

[…]

I think this may have started with Slack, but I’m seeing other digital products like Notion (which I love by the way) send users a temporary password to their email in order to login. I can appreciate the cleverness of this pattern as it avoids the rigamarole of users having to remember yet another password and building out all the “Forgot password” flow stuff. But.

• This pattern is incredibly tedious. 1. Enter email into login form. 2. Open new tab or switch programs. 3. Open your inbox. 4. Find message from service (if you don’t get distracted by other emails first). 5. Open message. 6. Copy gobbledygook password. 7. Go back to website. 8. Paste in gobbledygook password. 9. Submit login form. Holy shit.
• This doesn’t work at all with password managers, which is incredibly annoying as I want to lean on password managers to, uh, manage my passwords. With the advent of design systems we talk a lot about consistency. But it’s not just about creating consistency within your own ecosystem, it’s about being consistent with the rest of the internet.

[…]

Shopify (another service I love) annoyingly splits its login across three separate screens. Again, I can appreciate the intention here: they’re not trying to overload a user with too much info at once. And while I agree with this pattern for certain contexts (like in an e-commerce flow you typically see billing information, shipping method and address, credit card info, etc chunked out into discrete steps), this is overkill for what’s essentially a three-field form.

• Adds unnecessary steps to login – Again this is a three-field form, but now users have to slog through three screens to log in. This no doubt slows users down.
• Doesn’t work with password managers – While they sort of work, password managers are only able to fill in the one field on the page.

Do

So what should web designers do instead? I think having a boring old predictable login form is just fine. Here’s Harvest:

Simple, concise, predictable. Works with password managers. Good stuff. Here’s some considerations:

• Have a dedicated page for login – Customer support people can direct people to a URL (domain.com/login) rather than having to spell out a bunch of instructions on where to find the login form on the page. Password managers can store that login page and with a click of a button open that page and pre-fill the form.
• Expose all required fields – If you need to enter your last name in order to log in, expose that field!
• Keep all fields on one page – login should be a swift process, not an unnecessary slog through multiple pages.
• Don’t get fancy – There may be something to the whole magic link thing and other inventive login patterns, but I think it’s important to recognize how users are used to logging in across the internet. Lean into that boring, predictable settled science.