Authorization form on the site
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 too far 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 you should not 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 site header.
In addition, the modal popup window triggering mechanism 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 professionals, as they will have to give the user a bunch of instructions, instead of just providing a link.
Do not hide the 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 another (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 “cleanliness” leads only to more confusion (especially for beginners).
Be careful 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 must 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, but we are talking about it not only within the framework of our ecosystem – 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, fans too smart, make their target audience learn something new that slows down the work (at least at first). What for? This is simply authorization!
Do not break the login process into 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.