The ideal form of authorization – how to do it is not necessary
Recently, we posted a number of useful tips on 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 network. It’s good when designers try to make unusual and beautiful forms of login (see our selection), fitting them into the general concept of a web project, but it’s completely different when they go overboard with functionality. Sometimes it comes to the point that popular password managers (in Chrome or from 1Password) simply do not work.
In the article you will see examples of authorization forms with problems in usability. This is good food for thought for web developers who do not really understand how their audience uses the login tool on the site. In the second part of the article, we will show and tell you how to best implement this task and create simple, connected, recognizable elements that are understandable to visitors and work perfectly with different “password remembers”. The text is an adaptation of this note.
WHAT NOT TO DO
Here are a few approaches that are far from the most ideal and convenient solutions. They are best avoided.
LOGINS IN MODAL WINDOWS
Login form in modal window
A person has to perform additional actions: press the button in the menu, select the option with login, fill out the form. Instead, you simply could go to the login page manually (via a link, from bookmarks) or add action processing directly in the header of the site.
In addition, the mechanism for triggering a modal pop-up window creates additional difficulties for programs of the 1Password type – the “Open and Fill” function, which allows you to quickly enter your credentials when visiting the site, most likely will not work.
Inability to directly redirect the user to authorization. This will be a headache for customer support specialists, as they will have to give the user a bunch of instructions, instead of just providing a link.
DO NOT HIDE FIELDS
Hiding fields in login form
Initially, the required Last Name field on the Delta website is hidden, probably in order to offload the user interface through phased disclosure of data. The trick is that when a required element in the login form becomes invisible, password managers have no way 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 welcome screen for MacOS, the password entry line is also invisible, probably in order to “clear” the interface (or is it an incentive to log into the system via TouchID). However, in the end, such “purity” leads only to more confusion (especially for beginners).
WARNING WITH MAGIC LINKS
Login Form Links
We can assume that it all started with the Slack service, but now many websites provide users with a “temporary password”, for example, Notion. It is easy to guess what the trick of this move is – red tape with registration implies that people should remember two values instead of one and will use the link “Forgot password”, but:
This approach is incredibly boring. Visitors to a web resource will have to: enter an email address; open a new tab or enable the program in order to enter the mailbox; find a message from the support service (without being distracted by other letters); open the letter and copy the password, similar to abracadabra; return to the website where you enter the delusional character set and finally fill out the login form. Hell!
Particular irritation is caused by incompatibility with password managers / memorizers, and today many rely on them. With the advent of design engineering systems, they often began to talk about a consistent logical approach, however, it is not only within the limits of their ecosystem that we are talking about – the product must be compatible with the rest of the global web.
This option forces you to learn new principles of work on the Internet. For many years, users have to deal with a variety of “notions” and innovations in web design / development over and over again. The introduction of innovations is certainly necessary, but one important fact should be taken into account – people who visit your site already have a lot of knowledge on using popular Internet technologies and services. Some developers, amateurs beyond measure smart, force their target audience to learn something new that slows down the work (at least at first). What for? This is simply authorization!
DO NOT BREAK THE LOGIN PROCESS IN SEVERAL STEPS
Login in a few steps
The implementation of the Shopify service is divided into three (!) Separate screens. Again, apparently, the developers of the site try not to immediately overload users with a lot of information.
