5 common mistakes in web design that enrage users
Developing an interactive interface or website is not an easy task. You have to collect everything about your audience, analyze and plan its behavior. New technologies make the research process…

Continue reading →

Frequently asked questions (FAQ) - we are developing an effective FAQ section
As you know, of course, the FAQ (Frequently asked questions) are frequently asked questions that are collected and highlighted on a separate page. Thanks to it, the user will be…

Continue reading →

Web design illustrations are the best examples of use.
If you carefully study any selection of website designs on a particular topic, you will see one trend - illustrations are now in vogue. They are so widespread that we…

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.

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 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.
DO NOT HIDE THE FIELDS
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).

WARNING WITH MAGIC LINKS (MAGIC LINKS)
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!
DO NOT DESTROY THE LOGIN PROCESS IN MULTIPLE STEPS
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…

...

Tips for creating a beautiful one-page portfolio site
Many global web design trends can be applied to one-page pages, but they also have their own unique features. Such projects are quite specific, so it is useful to read…

...

Tips for creating a beautiful one-page portfolio site
Many global web design trends can be applied to one-page pages, but they also have their own unique features. Such projects are quite specific, so it is useful to read…

...

Endless page scrolling: helps or hurts?
The generation of two thousandths is known for its habit of browsing information on websites in a matter of seconds, making the decision to stay or go out. Competing projects…

...