Ideal authorization form – how not to do it (mistakes and tips)

Recently, we posted a number of useful tips for creating effective registration forms on the site, and today we want to talk about the authorization / login block. Recently, a lot of annoying and too “abstruse” implementations of it have appeared on the net. It s good when designers try to make unusual and beautiful login forms (see our selection), fitting them into the overall concept of a web project, but it s a completely different matter when they overdo it with functionality. Sometimes it gets to the point where popular password managers (in Chrome or from 1Password) just don t work.

In the article you will see examples of login forms with usability problems. This is good food for thought for web developers who don t really understand exactly how their audience uses the site s login tool. In the second part of the article, we will show and tell you how best to implement this task and create simple, linkable, recognizable elements that are understandable to visitors and work perfectly with different password “remember”. The text is an adaptation of this note.

What not to do

Here are some approaches that are far from the most ideal and convenient solutions. They are best avoided.

Logins in modals

• A person has to perform additional actions: press the button in the menu, select the option with login, fill out the form. Instead, you could simply go to the login page manually (by link, from bookmarks) or add processing of the action directly in the site header.
• Also, the modal popup trigger mechanism creates additional difficulties for programs like 1Password – the “Open and Fill” function, which allows you to quickly enter your credentials when you visit the site, most likely will not work.
• Inability to directly redirect the user for authorization. This will be a headache for the customer support team as they will have to issue a bunch of instructions to the user instead of just providing a link.

Don t hide the fields

The initially required Last Name field is hidden on the Delta website, likely to offload the user interface by incremental data disclosure. The trick is that when a required element in the login form becomes invisible, there is no way for password managers to pre-fill it… A person needs to leave one field in order to gain access to another “super secret” that will immediately appear. As a result, you get one more (extra) step in your algorithm of actions.

By the way, on the MacOS welcome screen, the password entry line is also invisible, probably in order to “clear” the interface (or is it an incentive to log in via TouchID). However, in the end, such “cleanliness” only leads to more confusion (especially for beginners).

Be careful with magic links

It can be assumed that it all started with the Slack service, but now many websites provide users with a “temporary password”, for example, Notion. It s easy to guess what the trick of this move is – red tape with registration means that people have to remember two values ​​instead of one and will use the “Forgot password” link, but:

• This approach is incredibly tedious. Visitors to the web resource will have to: enter an email address; open a new tab or turn on the program in order to enter the mailbox; find a message from the support service (without being distracted by other letters); open a letter and copy a password that looks like an abracadabra; go back to the website, enter the crazy character set, and finally fill out the login form. Hell!
• It causes particular irritation incompatibility with password managers / memories, but today many rely on them. With the advent of design systems, it is often said about a consistent, logical approach, but this is not only about within its ecosystem – the product must be compatible with the rest of the global web.
• This option forces you to learn new principles of working on the Internet… Over the years, users have to deal with various “notions” and innovations in web design / development over and over again. The introduction of innovations, of course, is necessary, but one important fact should be taken into account – people visiting your site already have an accumulated knowledge base on the use of popular Internet technologies and services. Some developers, who are overly smart, force their target audience to learn something new, which slows down the work (at least at first). What for? It s just an authorization!

Don t split the login process into multiple steps

Shopify s implementation is split into three (!) Separate screens. Again, apparently, site developers try not to overload users with a lot of information. In some cases, this technique is indeed rational, for example, in e-commerce and online store designs, where the logical steps of placing an order are separated: forming a basket, choosing a delivery method / address, entering payment data, etc. But you must admit that solving a simple trivial problem in three stages is already too much. Disadvantages of the method:

• Unnecessary extra steps at login… You have to view three screens instead of one. This undoubtedly slows things down.
• Doesn t support password managers… Programs / applications have the ability to fill in fields on one page only.

What is recommended to do

If we talk about effective approaches, then in fact, there is nothing more beautiful than the “boring” and recognizable classic form of authorization. For example, like Harvest:

Another example is the WordPress system:

A clean, concise, recognizable interface that works correctly with both 1Password and Chrome s built-in features.

As for the recommendations. They essentially mean that you should avoid the problematic solutions outlined above, namely:

• Create a custom login page… This way, the support staff will be able to direct people to the page URL (domain.com/login), saving them from having to give a bunch of instructions. Password managers will be able to save the URL, and if necessary, open it with a single click of a button, after filling in all the data. If you are making a form as a site element on every web page, then place it in the most visible place.
• Do not hide required fields… When you need to enter a surname / age, etc. to enter, make this line visible initially.
• Place all fields on one page… A quick login process shouldn t turn into tedious flipping through multiple screens.
• Do not overdo it. Perhaps, in all these “magic” links and other ingenious solutions, there really is something. But at the same time, it is important to take into account how the Internet audience (and in particular your target audience) is used to using this or that tool. It is probably wiser to rely on a boring, recognizable, well-established approach.

Of course, this list of negative decisions and wishes cannot be called exhaustive. Many other login form features have not been touched on here, such as social login or two-factor authentication. Perhaps we will talk about this in the future. In the meantime, write your additions / thoughts on this topic in the comments.