Don’t Get Clever with Login Forms

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.

Don’ts

Here are some patterns that I encounter on websites that I think should be avoided.

Don’t put logins in modals

Hertz and a whole bunch of other sites keep their login form in a modal window or a drawer. The problems with this pattern are:

• Extra steps for the user – “1. Click on the menu button, 2. select login, 3. fill out form” rather than visiting a login page (via search, customer support chat, bookmark, password manager, directly, or via the primary navigation) and filling out the form.
• Not being able to link directly to the login, which can be a pain for customer support people (since they have to give a bunch of instructions described above rather than simply providing a link). It also prevents password managers from doing their thing since the modal is hidden. 1Password has an awesome “open and fill” feature allowing you to visit a website and populate the login form with your credentials. This feature doesn’t work with modal login forms.

Don’t hide fields

Delta’s site hides a required “Last Name” field, which I’d assume is to clean up the UI by introducing a bit of progressive disclosure.   The problem is that field is required, and because it’s hidden password managers can’t pre-fill the field. Users have to exit out of another field in order to expose this surprise extra field to fill. It’s just one additional, unnecessary hoop they have to jump through in order to login.

MacOS login screen also buries the password field to “clean up” the UI (and I’d also assume to encourage users to login via TouchID), but that cleanliness leads to (in my view) a more confusing experience.

Don’t get funky with magic links

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.
• It forces users to learn a new convention – Users learn patterns (login, checkout, navigation, etc) by experiencing them again and again in many applications over many years. While I’m not saying we shouldn’t ever innovate, it’s important to recognize users come to your product or service with a lifetime of hard-earned knowledge about how to use the internet. When we try to get too clever we force users to learn new conventions which slows them down (at least initially).

Don’t split login across multiple pages

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:

And here’s WordPress:

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.

This list isn’t exhaustive and I haven’t touched on things like social login or two-factor authentication, so I’d love to hear more from you about other patterns to be avoided or gotchas to look out for.

from Brad Frost http://bit.ly/2GrzKMx