The best use of the site landing box with a specific interactive way to land

The login box has been in existence for a long time for the user is bound to contact every day, for designers is also a rut control, two box plus a button, if suddenly grabbed a designer to ask "What do you think the login box can improve the point", the answer should be a long time silence, of course, including me. "Rather a think into, MO in a think stop", this is a generation of the master of the boxing, also is the truth of doing things, think into the side can have, a thought of the difference between the two, reflected in the Internet applications and services should be more profound.

To get back to the topic, the login box to solve any of the following problems is what I think is the excellent login box (personal thought of the excellent login style, reference to the last section of the text):

1. Input efficiency issues, most of the current user login requires the user to use the traditional keyboard input, here is a problem-keystroke efficiency or called input efficiency. There are many ways to solve the efficiency of input, such as,

Using a consolidated account, many Internet services allow OpenID, Sina, Tencent, Facebook, Twitter ... And so on, such as know to allow the use of Sina Weibo account login, this reduces the user to register or login when the cost of input.

Remember the username and password, which will prevent the user from entering the next time, but it is a tragedy for users to empty cookies or a high level of security-required Internet service.

In the input process to give the user Help, example: Sina Weibo using the mailbox as a login (Figure 1), the user entered the @, will appear input suggestions, input suggestions have a common mailbox suffix to assist input.

Figure 1

In addition, there are some details, such as, after the user entered the user name or password, the focus of the switch back to the user name or password input box, should be the full selection of the input or input focus is in the input text behind? User name and password is correct, only the verification code error in the case what should be done?

Solution: Use OpenID, or make your account OpenID (for domestic giants This is nonsense), allow users to remember the account and password (the default entry to the hook), give users input assistance, remember the user entered the history (can not remember the password) and under the appropriate trigger conditions displayed. PS. This is only part of the section, but also requires the area Web side and mobile end.

2. Input mode problem, in the input user name, whether the user can be clear in the Chinese mode or English mode? When entering a password, can you make it clear which state the Caps Lock is in? input mode to the present has been a nasty problem, or you don't feel it, Think that you can correct this error simply by pressing a few backspace after the input error. Assuming that the user is in the expected input in English is in the Chinese input mode, the user needs to perform more operations, first delete the wrong characters have been entered, and then execute crl+ space, or use the mouse to switch to English mode. In addition, the CAPS LOCK switch in an invisible password state affects the success of the entire login operation (Figure 2)

Figure 2

Solution: Chinese and English input mode ultimately requires input method to solve, unfortunately, at this stage, no PC-side input mode to take into account the user's impact and to solve. The login box can be similar to Figure 2 in the password area to add CAPS LOCK status hint, generally do not need to specifically add the user name input area CAPS LOCK hint, because most user names are not sensitive to case. Another, can consider elegant plaintext display password, such as in "Mobile applications registered new users and users login, the password should not be shown as plaintext?" Described in the article.

3. Turing verification problem, now the regular verification code is also let me infinite egg pain One of the problems, in order to determine whether it is a normal login rather than malicious intrusion or harassment, this is not necessary for real users, so the verification code will only trigger certain conditions at logon and then display the verification code (such as the number of logon errors). Difficult to know the other verification code for users is a heavy pressure, such as I and l of the difficulty of identification, as well as Alipay original letter O and the number 0 problem, but set the verification code again and again to block the user in the service.

If you really can't bypass the verification code this link, whether you can consider to add some practical significance for the verification code, such as Recaptcha:stop Spam, Read Books Project (has been acquired by Google), using the Verification code technology to help the digitization of the classics, The plan will be scanned by the book is not accurate by the optical character Recognition technology (OCR) text displayed in the verification code problem, so that users in the answer to the verification code with the human brain to identify (as shown in Figure 3), kill one stone.

Figure 3 (but this verification code once made me want to smash a computer-_-')

PS. In fact, Chinese recognition is much more difficult than English, why not make a Chinese character of the OCR improvement Program? Using the accuracy of user input verification code to correct OCR of Chinese characters.

Solution: The main solution is to identify the authentication code, like the end of the CAPTCHA agony use the game method to verify. Or like Solvemedia (engagement advertising Technology), embed easily identifiable ads within the validation code. There have been similar companies to do such things, compared to the provision of free services to the site, this is understandable, such as watercress can try to add their own FM Pro ads in the code link, hehe.

4. Feedback, which includes the various feedback required during the user login process, such as:

Input box to select the feedback to clarify the current location of the user.

Input the feedback in the process, the above input efficiency and the point mentioned in the input mode.

Submit validation process feedback, give a loading effect to let the user know is currently in the waiting state, whether to allow cancellation during the commit process?

Verify the feedback after the error, prompts the user which link has been wrong, the password is reserved or empty?

Figure 4

Solution: Clear the various feedback in the process of login, and refine these feedback to make it meaningful and convenient for users to understand. For example, the login box for OS X and icloud will be dithered after an error, prompting validation errors. The proper dynamic is well represented here, and the effect of jitter is consistent with the effect of shaking the human head.

5. Multi-account problems, some applications and services allow multiple accounts, such as desktop-side QQ, Chrome, win operating system and so on. Related to the choice of accounts, the timing of the login. To cite a counter example, Mac side of the QQ, when users open the Mac version of QQ, the first time to display a single account, did not explicitly prompt users to select other accounts or add other accounts of the entrance, resulting in a lot of users can only try to make mistakes after the click of the avatar to choose (Figure 5 left). Ps. MACQQ Open, the default focus on the QQ number input area and select all, this is what to do? If the user logged in, the default focus should be in the password input area Ah, feedback has not seen improved ...-_-'

Figure 5

Solution: The system supports multiple accounts, gives clear enough hints to facilitate the user to switch accounts (Figure 5 right), and as much as possible to choose instead of input, the cost is low, pay attention to select the account after the default location of the cursor (this may also involve remembering the password problem).

6. Forgotten password problem, this is because of a variety of applications and services too much, and most require users to register, users will inevitably forget (using a unified OpenID can solve a large part of the problem). Forgotten passwords can be placed clearly in the login area and can be prompted in subtle ways (Figure 6).

Figure 6

Solution: Here to mention the forgotten password process need to pay attention to the point bar, as far as possible to use security questions and answers, unsafe, the current stage of personal information on the Internet near transparent; Users forget passwords and do not force users to set a new password; For high security requirements of the service to use a variety of ways to reset the password, such as mobile + mail +u Shield + artificial.

7. Accessibility, does the login area meet the barrier-free requirements? Is there any other way to enter the username and password? The design of the verification code is reasonable? Most studies indicate that about 20% of the population has a certain degree of disability, Of course, not all people with disabilities have a disability that makes them use the Internet, but it is still important to share the population.

China is one of the most blind countries in the world, and eye disease is also a major public health problem in China. China has about 6.007 billion blind people, accounting for 18% of the world's blind, and 12 million of those with low binocular vision. The number of blind people in China has already surpassed the number of countries such as Denmark, Finland and Norway. --Net Bank login verification code is alleged to discriminate against 493 people of the blind joint request to correct

Be interested to learn more: Webaim:introduction to Web accessibility

Solution: Adhere to the usability design concept, using existing technology and interactive means: voice input, speech recognition, face recognition, gesture recognition, voice verification (File: Chinese pronunciation captcha.ogg) and so on ...

8. Security issues, digital certificates, secret Card, U shield, etc., corresponding to different levels of security, each have advantages and disadvantages. Another, the login area remembers the password function, the cookie needs to emphasize the design. Many of the layers involve low-level technology, and designers are not talking nonsense here. Individuals tend to use mobile devices to solve security problems.

There are a lot of long-winded, the following talk about their favorite way to login:

1. The use of two-dimensional code scan login, almost avoid the above most problems, and security has a certain guarantee, the use of the user's mobile phone to authenticate, do not require additional user input, there is no password or forgotten password problems. There are some other problems, of course, for example, the cost, the user mobile device needs to support the scanning function, needs the mobile end and the web side or the desktop connected Union, the login needs to perform certain operation, opens the app, enters a function and so on (this also can drive the mobile end APP the day live, the joke).

Figure 7

2. By using a specific interaction method, like bump connected to the Web end (Figure 8), through the mobile phone's gravitational sensing to the "bump", and then the location and impact time and other information uploaded to the server, the server based on the closest point of time and place to determine the phone or computer IP address, to establish a communication pairing. Although it can also be used for user login, but the security is poor, you really want to use this way, you need to improve the relevant process.

Figure 8

The above certainly cannot replace the traditional login method completely, but can be done as a supplement and gain.