New ideas on the design of login forms

The login site has been integrated into the lives of most people. Perhaps the logon operation is too frequent, in this process often occurs such or such a problem, for example, forget the password, username or registered email address.

This experience not only frustrated us, but also adversely affect the business. How bad is it? User Interface engineering A survey of major internet retailers, which showed that 45% of customers were repeatedly registered in these systems, and that 160,000 people had their passwords recovered every day, and once they found the password , 75% of customers will no longer be able to complete their previous payments.

Visitors who are not logged on will not be able to see personalized views and featured content, which greatly reduces the conversion rate and participation of the site. This shows the importance of login operation, therefore, some websites have begun to think of new design ideas to solve these problems.

Is this my account information?

The Gowalla login form (below) is very standard: Enter your username (email address) and password, and then log in. Below also has "forgets the password" and "the novice registers" and so on prompt information. In short, the common login interface should have, a few. (Gowalla has been closed when compiling this manuscript.)

However, Gowalla has made some innovations in the login form, increasing the chances of the user logging in successfully. If a user fails to log on for the first time, such as a user name, email address, or password, it will not only prompt the error, but will also display information such as the account Head and username that you currently want to log in to.

Avatar and username provide intuitive judgment for the user: "This is my account, may have just forgotten the password", or "This is not my account, I am sure the wrong user name or email address." Gowalla also gave a solution to the situation: "This is not my account" or "I forgot my password."

Quick Login

The Quaro also uses a similar validation mechanism, but it is more advanced and displays relevant information before submitting the login form. If you enter an account that does not exist, it prompts you to create a new account immediately.

If you enter an incorrect email address, the user's avatar and name will appear on the right side of the login box. This validation mechanism is similar to Gowalla, except that Quora displays relevant information before submitting the form.

There is another message below the Quaro login box: "Login without password in current browser." If you check this by default, that is, when you log in again, you do not have to enter the password again, just click the Avatar or username next to the login box.

If you are not careful to "X" or "Login to another account", you'll have to re-enter your email address and password. Quaro's one-click login is convenient, but not universal for all sites. To this end, many Web sites are turning to third-party login solutions.

For example, the "single Sign-on Scheme" (single-sign-on), represented by Facebook,twitter,openid, is resolved by reducing the user's login details on different sites (such as user names on different sites, passwords may vary), An account number can be used for many different websites.

This is a faster way to sign in. If you bind a Facebook or Twitter account to a Web site, you can simply click on the "Facebook or Twitter Login" button to sign in. Of course, if you have a Facebook or Twitter account registered. There are 375 million Facebook active users (half of Facebook's total active users) who log on to the site every day, so this is a promising way to do so.

Gowalla also uses this scheme (pictured below). Gowalla users who have been bound to Facebook account simply click on "Facebook Login" and, of course, Facebook has been registered. If a Facebook user has not been registered, clicking on the button will then go to Facebook's registration page before jumping to the Gowalla page.

New Trouble with login operation

However, these new facilitation initiatives have created new problems-there are too many options for third party logins. When a user faces multiple login options for a Web site, the following behavior may occur:

They remember registering the service or binding the account, and logging in quickly. Of course, this is the best case.

Whether or not they are registered with the currently logged on site account, they assume that any third party service account can log on to the current site. Since I can log on to Facebook, I have a Facebook account, and I can certainly log on to the current site.

They forget what kind of service they used before, either scratching their scalp or failing to sign in.

What's worse, if the user remembers the third party service incorrectly, the login binding creates a new account. The website can match the accounts of different services as much as possible, but it is not accurate to determine whether a Facebook account or Twitter account is owned by the same person.

The third-party login scheme solves some problems and creates new problems. To solve these new problems, we turn our eyes to the website Bagcheck design.

Bagcheck's login design is a good solution to the problem of one-click Login input error (username or password). It works by using the results of an instant Search to match an existing account with Bagcheck. When you enter the first few letters of the username, you can quickly find your account, faster than entering the full email address. However, given the possibility of a duplicate name, we still use the email address to log in.

Once you enter your username or email address, the login box will display your registered account.

In fact, Bagcheck's design rejects the traditional form of one-click login because the login button is not displayed by default. However, this approach may also be a try, for the following reasons:

The user is logged in until the login is determined. As a result, users have little need to go through the entire login process. Remember that the less users log in, the fewer problems they will have.

User Login Convenience: Either enter the user name, then select the search results, or enter the full e-mail address, click the login button. Although not a single key login, but the operation is not troublesome.

If you log in to a third party account does not establish a connection with Bagcheck, it is unable to log in. Because the login button will not be displayed until you select a username. This will eliminate the same name of the account, and users do not have to struggle to choose which has been registered or binding account. (especially if no cookies are installed in the browser or computer)

However, this approach may not be very bright in the Bagcheck mobile page. As we all know, typing on mobile devices is inconvenient. Therefore, they put the third party login button in the mobile page of the important display position, so that the user only a little, can achieve login. This also reflects the impact of different devices on the design.

Since the bagcheck of this type of login, we have received many readers ' good feedback and ideas for improving their interactivity. Many people propose to set up default login options for old users through browser cookies. This may be helpful for older users who log in with the same browser, but the problem is that more users are logged on in different browsers or computers. In this case, cookies do not work.

Another common question: Should you be allowed to search for Bagcheck users by user name or e-mail address, because this can reduce security. While this design does in some way reduce the security of the account (compared to the previous login design), it's not that bad compared to websites that require you to log in with an open user name, such as Twitter.

Because the Bagcheck User profile page is open, users can search both Google and Bagcheck. So, if you want to experience it, first make sure that your home page is open, and that you have to be aware of the sensitivity of your personal information.

Thinking about login of email address

Some people are not accustomed to using user name login, so, mail address login is still the mainstream. Google's Identity toolkit and account chooser allow users to use their email addresses to log on to the site, so the issues mentioned in this article are well addressed.

When multiple users log on in the same browser, each account is listed on the sidelines to choose from, which is convenient and easy. You can go to Google to experience some, but also can use Google Toolkit on your own website to achieve.

Details are critical.

Bagcheck and Google rethink the design of the login page from a macro perspective, but not all the innovations for the login page are so comprehensive. Even subtle changes can have a big impact. For example, the accuracy of typing on mobile devices is very low, plus the password is used in the dark text display, which makes mobile device login difficult.

The Fcebook mobile page solves this problem, although it is a minor change, but it is useful. If you enter a password incorrectly at logon, the password field in the input box will display a plaintext password so you can see the password you entered. Facebook also has another way of logging in, using email or phone numbers (pictured below). This is a slight elevation, but it is significant for the experience of mobile pages.

The road is long

The previous example tells us that even the most common interactive behavior (such as login) on a Web page can benefit from new ideas and design improvements. Not all login forms will use the design ideas that are mentioned today, but not necessarily. Please do not stop trying, the road is long, its repair far XI.