Don’t be smart with login forms. Bad and good login patterns

Over time, I get more and more annoyed with login forms. As password managers like 1Password (which I use) and the Chrome password manager (which I also use) become more popular, it s important that designers are aware of how users visit their sites.

Let s take a look at some of the authorization patterns and why I think they are not ideal. And then let s take a look at the best ways to solve this problem. Create login forms that are simple, consistent, predictable, and work well with password managers.

Do not do it

Here are some of the patterns I come across on websites that I think should be avoided.

Don t put login forms in modals

Hertz and a number of other sites put a login form in a modal or navigation drawer. Problems with this pattern:

• Additional steps for the user – “one. Press the menu button, 2. select a login, 3. fill in the form. ” Instead of visiting the login page (via search, customer support chat, bookmarks, password manager, directly or via the main navigation) and fill out a form.
• Inability to give a direct link to the login form can be a problem for customer support (as they have to give a bunch of instructions above instead of just linking). It also prevents password managers from doing their thing, since the modal is hidden. 1Password has an amazing open-and-fill feature that lets you visit the website and fill out a login form with your credentials. This feature does not work with login forms located in modal windows.

Don t hide the fields

The Delta site hides the required Last Name field, I believe, in order to “clean up” the interface by adding progressive disclosure. The problem is that the field is required, and password managers can t prepopulate the hidden field… Users must exit another field to open this additional field for completion. This is an unnecessary obstacle that they have to go through in order to enter the system.

The macOS login screen also hides the password field to “clean up” the user interface (and I think to encourage users to log in with TouchID), but this “cleanliness” leads (in my opinion) to a more confusing experience.

Don t get carried away by magic links

I think it may have started with Slack, but I see other digital products like Notion (which I like, by the way) send users a temporary password to their email. I can appreciate the cunning of this pattern, as it saves users from the gimmick with remembering one more password and builds the “Forgot password” scenario. But…

• This pattern is incredibly tiring. 1. Enter your email address in the login form. 2. Open a new tab or switch programs. 3. Open your mailbox. 4. Find a letter from the service (if you are not distracted by other letters). 5. Open the letter. 6. Copy the password. 7. Return to the site. 8. Paste the password into the form. 9. Submit the authorization form.
• It doesn t work with password managers at allwhich is incredibly annoying since I want to use password managers. With the advent of design systems, we talk a lot about consistency. But it s not just about building consistency in your own ecosystem, it s about interoperability with the rest of the internet.
• This forces users to learn a new pattern. – users learn patterns (login, navigation, etc.) by encountering them over and over again in many applications over the years. While I’m not saying we shouldn’t innovate, it’s important to understand that users come to your product or service with hard-won knowledge of how to use the Internet. When we try to be smart, we force users to learn new patterns that slow them down (at least initially).

Don t split the login form into multiple pages

Shopify (another service I love) annoyingly splits its signup across three separate screens. My guess is that they are trying not to overwhelm the user with too much information. And while I agree with this pattern for certain contexts (for example, when buying from an online store, you usually see information broken down into separate stages: about invoice, delivery method and address, credit card information, etc.), this is unnecessary. , because in fact we have a form with three fields.

• Adds unnecessary steps to login… Again, this is a three-field form, but now users have to go through three screens to log in. This, no doubt, slows them down.
• Doesn t work with password managers – password managers can only fill in one field per page.

Do

So what should web designers do? I think to leave the boring old predictable login form. For example, the Harvest website:

And here is WordPress:

Simple, concise, predictable. Works with password managers.

Here are some guidelines:

• Highlight a separate login page… Support staff will be able to direct people to a URL (domain.com/login) instead of giving a bunch of instructions on where to find the login form on the page. Password managers will be able to save this login page and, at the click of a button, open it and pre-fill the form.
• Disclose all required fields – if you need to enter your last name to enter, open this field!
• Keep all form fields on one page – Login to the system should be fast.
• Do not be wise – it is important to understand how users are used to logging into the Internet. Build on this boring, predictable, well-established knowledge.

This list is not exhaustive, and I have not touched on things like social media logins or two-factor authentication, so I would love to hear more from you about other patterns to avoid.