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

Continue reading →

How to create a website that increases your brand awareness
If you want your site to become successful, just good design will not be enough: it should first of all reflect the personality of your brand. When developing a design,…

Continue reading →

Effective split-screen design methods
One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout…

Continue reading →

The ideal form of authorization – no need to do

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 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 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 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).

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 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 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.

Typography for web.
There are many books and articles on typography, but only a few of them reveal issues of choice and combination of fonts. In view of the opening opportunities and prospects…

...

6 Tips for Creating One-Page Websites
One-page websites are becoming popular and fashionable now - there is no doubt about it, although they are not suitable for every topic or organization. However, if everything is done…

...

Social networks for a designer career
Today's topic, as you already understood, will be related to the use of social media by design workers and not only. Moreover, unlike the article about useful social networks, the…

...

Ready design: good or bad?
Three years ago, when the logo / website design was created only on order, the ordinary brand manager could not have thought that soon IncSping (now Brandstack), Inkd, 99designs, StockLogos…

...