Recently, I am starting to be very annoyed by authorization on sites. As password managers become more popular, such as 1Password (which I use) and Chrome password manager (which I use too), it is important for websites to take this fact into account.

Let's take a look at some login patterns that in my opinion are not perfect. And then consider the best practices. TL; DR; These are authorization pages that are simple, predictable, on regular pages and are friends with password managers.

What not to do

Here are some examples I would avoid.

Do not place authorization in modal forms.

Hertz and a bunch of other sites put a modal window entry form. This approach has two problems:

• Additional steps for the user : “1. press the menu button, 2. select login, 3. fill in the form "instead of going to the login page (via search, customer support chat, bookmark, password manager, directly, through the main navigation) and filling out the form.
  
• There is no direct link to the page , which can be a pain for the support service (since they have to give a bunch of instructions described above, and not just send a person to the link). It also interferes with the work of password managers, since the modal window is initially hidden. 1Password has an amazing “Open and Fill” function that allows you to open the site and fill in the login form with your credentials. This feature does not work with modal windows.

Do not hide the fields

The Delta site hides the Last Name field. I understand that to make the interface cleaner by introducing progressive design elements. The problem is that the field is required, and password managers cannot automatically fill it in . Users must first complete and exit another field for this to appear. Just one additional, unnecessary obstacle that a person can enter the system.

The MacOS login screen in the same way hides the password field in order to “clear” the UI (and I also assume to push users to the input via the TouchID), but this cleanliness, in my opinion, can confuse people.

Do not mess with magic links

It may have started with Slack, but now other programs, such as Notion (which I like, by the way), send a temporary password to the system by e-mail. I can appreciate the trick of this template, because it eliminates the suffering of unfortunate users who find it difficult to remember another password, and do not need to create all the necessary infrastructure to recover a forgotten password. But.

• This scheme is incredibly tedious . 1. Enter your email in the login form. 2. Open a new tab or switch the program. 3. Open the mailbox. 4. Find a message from the service (if you are not distracted by other letters). 5. Open the message. 6. Copy the password-abracadabra. 7. Return to the site. 8. Paste there abracadabra. 9. Submit the form. Pancake.
  
• This doesn't work with password managers at all , which is incredibly annoying. In design, we talk a lot about consistency. But we are talking not only about consistency in our own ecosystem, but also with the rest of the Internet, tree-sticks.
  
• This forces users to master new behavior : users have learned certain patterns (input, validation, navigation, etc.), reusing them in many applications for many years. I am not saying that you should never innovate. But it is important to recognize that users come to your product with a load of earned knowledge about how to use the Internet. When we try to get too smart, we force users to learn new patterns, which slows people down (at least from the very beginning).

Do not split the login form into multiple pages.

Shopify (another one of my favorite services) annoyingly splits the login into three separate screens. Again, I can understand the motives: they do not want to immediately overload the user with a large amount of information. I agree with this template in certain cases (for example, the online store usually introduces payment information, delivery method and address, credit card information, etc.) in several steps. But why do this for a form with three fields?

• Unnecessary steps are added to log in : this is still a form with three fields, but now users have to wade through the three screens. Sure, it slows people down.
• Does not work with password managers : password managers can fill only one field per page.

How to do

What do web designers do? I think the boring old login form is beautiful. Here is the Harvest :



But WordPress:



Simple, concise, predictable design. Compatible with password managers. Everything is in place. Here are some considerations:

• Make a separate login page : people from the support will be able to send customers to the URL (domain.com/login), rather than giving a bunch of instructions where to find the login form. Password managers will save this URL, one-click open and automatically fill in the fields.
  
• Show all the required fields : if you need to enter a last name to enter, immediately show this field!
  
• Put all the fields on one page : the entrance should be fast, and not unnecessary gimp, stretched over several pages.
  
• Do not fantasize : maybe that is in these magic links and other inventive entry patterns, but you should take into account the habits of users on the Internet. Rely on this boring, predictable, established practice.

The list is not exhaustive. I have not touched things like social network access or two-factor authentication. Express your observations about other wrong patterns if something happened.