The ideal form of authorization - how to do not need
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 unit. Recently, a…

Continue reading →

6 main stages of site development
I was recently told in the comments that some posts do not match the format of the blog, which is positioned as a useful resource for web designers. On the…

Continue reading →

The principle of the golden section in the design of sites
A key indicator of the quality of web design is how natural and easy it is perceived by users. When creating a visual site design, it is important to illustrate…

Continue reading →

The ideal form of authorization – how to do not need

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 unit. Recently, a lot of annoying and too “abstruse” of its implementations appear on the network. It is good when designers try to make unusual and beautiful login forms (see our selection), incorporating them into the overall concept of a web project, but it’s quite another thing when they overdo it with functionality. Sometimes it comes to the fact that popular password managers (in Chrome or from 1Password) just 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 exactly how their audience uses the login tool on the site. In the second part of the article, we will show and tell you how best to accomplish this task and create simple, binding, recognizable elements that are clear to visitors and work well with different “memories” passwords. The text is an adaptation of this note.

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

Login form in modal window
A person has to perform additional actions: press the button in the menu, select the option with login, fill in the form. Instead, you could simply go to the login page manually (by link, from bookmarks) or add action processing directly in the header of the site.
In addition, the modal pop-up trigger mechanism creates additional difficulties for programs like 1Password – the “Open and Fill” function, which allows you to quickly enter your credentials when visiting the site, most likely will not work.
The inability to directly redirect the user to authorization. This will be a headache for customer service professionals, because they will have to give the user a bunch of instructions, instead of just providing a link.
Hide login fields
The initially required Last Name field on the Delta website is hidden, probably in order to offload the user interface through phased disclosure of data. The point is that when a required element becomes invisible in the login form, password managers cannot prefill it. A person needs to get out of one field in order to gain access to another “super secret”, which will immediately appear. As a result, you get another (extra) step in your algorithm of actions.

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

Login links
It can be assumed that everything started with the Slack service, but now many websites provide users with a “temporary password”, for example, Notion. It is not hard to guess what the trick of such a move is – red tape with registration means that people should remember two values ​​instead of one and will use the link “Forgot password”, but:

This approach is incredibly tedious. Visitors to the 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 a crazy character set and, finally, fill in the login form. Hell!
Particular irritation causes incompatibility with managers / memory of passwords, and in fact today many rely on them. With the advent of design systems, design has often begun to talk about a consistent logical approach, but it’s not only within its ecosystem that it’s about – the product must be compatible with the rest of the global web.
This option forces to learn new principles of work on the Internet. For many years, users have again and again faced with a variety of “notions” and innovation in web design / development. Introduction of innovations, of course, is necessary, but one important fact should be taken into account – people visiting your site already have accumulated knowledge on the use of popular Internet technologies and services. Some developers, amateurs beyond their control, force their target audience to learn something new that hinders work (at least at first). What for? It’s just an authorization!
Login in several steps
The implementation of the Shopify service is divided into three (!) Separate screens. Again, apparently, site developers are trying not to immediately overload users with a large amount of information.

Ways to navigate users on the site
Imagine that you are traveling by car, but because of traffic jams all main roads are blocked, and you need to turn into an unfamiliar part of the city. For…


Social networks for designer career
Today's topic, as you already understood, will be connected with the use of social media by employees of the sphere of design and not only. Moreover, unlike the article on…


History of pixel art. Past and future
Today we bring to your attention a guest post about pixel graphics from Anna, which maintains a pretty interesting blog of the corresponding “pixel” subject. Pixel art (pixelart, pixel art)…