How to balance the ease of use and security of the login interface

Whether it is a web designer or a UI designer, the design of the login and registration page is the work that must have been done. The design of the login interface is difficult, easy to say is not so easy to do, to the security and availability to find the interface between the balance point, or need considerable experience to support. Today's article from the gosquared team, they are in the login interface design meticulous, it is worth learning oh ~

For every design detail of gosquared, we are very much in the heart. The latest login interface revision, the new dual authentication mechanism to make the user account more secure, at the same time, we also take this opportunity to gradually improve the user login experience.

The user experience of elevating the login interface is not as simple as it seems. When you make the login interface more beautiful, intuitive, fast and easy to use, you also need to make the process not so simple, not hackers or other malicious people easily invade.

Next, let's take a look at the decisions made in this revision. If you want to experience our revised details, please sign up for a gosquared account and log in!

　　Easy and effortless.

Usually, we open the login interface, not to view the login form itself, but to log in to the account. The form itself is merely a means of obtaining personal information, not an end. From this point of view, the login experience should be easy and effortless, all design should try to reduce interference, cut off obstacles, make it easier for you to complete the task of logging on, without any unnecessary operations.

Because of the dual authentication mechanism, the login process is much more complicated than before. Compared to traditional login methods that require only mailboxes and passwords, now the login is not a simple input decision to login or not, the new steps to make the login into a few steps of the new process: Clear account whether there is a dual-authentication related settings, and the user chose which authentication method. In many processes, you should also include the use of standby devices/contacts, as well as emergency standby code. All of these factors must be fully taken into account, but they cannot be a burden on the login, making the user feel laborious.

　Placeholders and labels

How the placeholder is displayed in the form is a tricky thing to choose from. From a design point of view, the placeholder is very good. But it's not easy to use, especially when it comes to accessibility and automatic filling of forms. If you use HTML to implement a placeholder, the placeholder disappears when the user enters, and the result is that some user forgets what he really wants to enter at the moment. What's even more troubling is that if your browser automatically fills in the previous message, you'll never see this place placeholder.

By detecting whether the form content is manually entered or automatically populated, we managed to circumvent the problem before, and when the content is automatically populated by the browser, there will be a label stating the input, and if it is manual input, the label will not be displayed. However, later we found that users liked to have tag reminders before submitting, to make sure they entered the right content, which meant that they wanted the label to remain in the process.

So, we finally thought of an elegant solution, using a separate element to label the placeholder, and when the user entered, the placeholder label was automatically moved out of the input box:

Of course, on mobile devices, space is limited, so placeholder labels can move in this way:

Of course, there are some interesting challenges that need to be addressed in order for these designs to be implemented perfectly.

Embarrassing security features

When we first used code to control these tags and placeholders, it was not complicated: the contents were detected whenever the contents of the form were changed, and if the contents were empty, the placeholder labels were displayed in the form, and if they were not empty, they were moved out. When the page is just loaded, the system will automatically detect several times to detect whether the browser has autofill content.

But even so, there are still problems. A security feature in the Chrome browser, called Passwordautofillagent::P Asswordvaluegatekeeper, is unique in that it does not populate the form with previously saved account and password fields. Even though they seem to be filled in (of course, the user usually does not want the browser to fill in the content and then submit it), only when the user and the page to interact (that is, the submission of content), the browser in the form can detect the content is filled. So, this design of the browser makes our tags appear in this form:

So in order to avoid these problems, the main solution is to detect whether the input is consistent with the-webkit-autofill selector and whether the input content exists or not. Although it does not look good, it works very well.

　A more liquid interface

Each step to the page redirect is a 2008 web designer to do things, so that the design may be better compatibility, but also more foolproof, but gosquared app no longer support such features.

The new Gosquared login interface is fascinating because it has more mobility, smoother performance, and natural state transitions.

Validation and recommendations

As we have said in previous articles, the previous design is very easy to log into the mailbox and the user name, until the submission of the system to receive the reminder, the password or account entered the wrong number.

MailCheck such a mailbox name error correction tool, can correct most of the email address input error, greatly reduce the login input error rate. We added this component to the previous release and it is now serving the new version.

Return of the login button

In the previous version of the design, we have drastically reduced the other unimportant elements of the interface, which ultimately makes the login interface with only two input boxes, and no other visual elements, after all, in today, after entering the account password to press the ENTER key to log in is a natural thing, there is no login button seems to affect little.

However, when we look at the actual user operation, we realize that many users would rather click on the button to submit the form than to hit the ENTER key. This also prompted us to eventually return to the login button in the new edition.

Wait, why is the login slowing down?

When we click on the "Login" button, we usually wait a few seconds before entering the login interface. Even if we do a lot of optimization, users still need to spend a few seconds waiting time to just log in, there is a reason for this: security. When the user submits their account password, the backend server needs to spend a huge amount of operations to determine that they are correct, here we can not describe the specific mechanism, but this is to prevent someone in the way of brute force hack into the system.

Of course, it is precisely because of this slow process, we do not want to let users face as if stuck to the login interface, we need to design, with visual feedback to tell the user "your form has been submitted, everything is normal, you just need to wait a moment can go in!"

So we've added a progress bar to show users how long it is expected to log in, which gives them a clear expectation of the length of the login. However, the time based progress bar itself is very monotonous and not necessarily accurate, so we end up using a very subtle animation as an alternative.

Conclusion

The user experience and UI design are not the same thing, they will change over time and the region constantly adjust. I hope you will enjoy the improvement of the gosquared login interface, and hope that our improvement process can give some enlightenment to our peers.