Unusual ways to simplify the registration and login
There are many ways to design forms of registration and login. Most designers are familiar with conventional techniques. But the understanding and application of some innovative techniques can make your forms easier to fill and more efficient. In this article we will introduce you to new ideas that may come in handy for your next project.
Please note that before using this technique, make sure that the design features allow you to do it. We would like to get your specific examples, which would be confirmed or refuted the usefulness of what we offer below.
Simplification of the registration
The aim of any form of registration - the user must successfully complete it and send it. However, complex and long form is able to turn the admiration of user site in frustration. Here are a few new ideas that make your forms will be easier and faster to complete.
Ask a question about the user name after he is registered
Registration forms generally provide for the establishment name, unique on this site. In order to come up with a name, it is unique for this site, you need time. Instead of bothering people to query the name during the registration process, think about how to do it later. This way, you will not lose your registrations frustrated users, and your users will not create a random name that is easy to forget, only to completely fill out the form below.
Do not ask the user to enter a password more than once
Many registration forms require that the user must enter the password in two different fields. Reasons for this are obvious. Forms hide the passwords so that they could not be seen when printing, for security reasons. And in order to reduce errors and increase the probability of a correct password is entered, it is advisable to enter data twice.
But in reality, this leads to large errors because the user is forced to print more. He does not see that the prints, so it is difficult to be sure that each time he dials the correct password.
It is much more effective to allow the user to print the password only once, but to provide a field in which you can open your password and check its accuracy. This feature can reduce the number of text fields and reduce the effort required for registration.
AutoComplete fields, "City" and "Area" on the index by
If you require a home address of the user, consider AutoComplete fields, "City" and "Scope" on an index of the user. Then the user can quickly fill out a form, because he does not have to spend time and effort to manually select the city and country in the drop-down lists.
Autocomplete field "Country"
The user can define their own country the standard way - choose from the drop-down list. A more convenient way - to use the auto-complete text field. Rather than force the user to scroll through a list of all countries, arranged alphabetically, you can prompt the user to select their country from a small number of countries that are suited to the letters that the user types in the field. Users simply enter a few letters - and he sees his country.
Make it possible to auto-complete billing address of the delivery address
If a user buys a product, it must provide payment information, and information delivery. In most cases this is the same address, so make it possible to auto-complete filling of one another. You can give the link "Information is the same as in the delivery box" payments in the graph. And if you click on it, the information in this column in the graph duplicated payments.
Do not set the option to subscribe to the newsletter by default. Instead, offer a preview
At most sites in the subscription box is initially exposed to ticks. Thus, site owners are hoping to get more subscribers. Maybe this will work. But the subscription did not make sense, if the user simply did not see or did not understand the meaning of options. If he is not interested, he will sooner or later otpishetsya from the list. In the long term, these methods will not help you. If the user will receive a mailing list without their clearly expressed wishes, it will eventually get tired of it.
It would be more interested in effective user subscriptions, or by showing an excerpt from the preview it. In this case, he would know that he was losing, if you do not subscribe. And you too can rest easy knowing that all those who signed up did so because of genuine interest.
Fight spam - instead of using CAPTCHA hide the text box with JavaScript
If you are bombarded with spam, you'll have to add in the form of CAPTCHA. But you can not turn in the CAPTCHA barrier, which repels users. It is proved that traditional versions of CAPTCHA, in which the user is required to reprint the distorted letters, spoil the conversion rates. Not surprisingly, they take out the users.
A simpler version that does not reduce the rates of conversion, - to use a hidden text field are required, which generates client-side Javascript. Spam bots can not interact with the objects of the client Javascript, it can only do men. This method is easier and less intrusive, it will help reduce the amount of spam without affecting rates of conversion. The only problem - it is dependent on JavaScript, which work in some cases may not be the optimal solution. You can also use the so-called " honey plant »(honeypot): in the form of a blank field, using CSS, to hide it from people, but not for bots. When the form is filled out, make sure that the field is left blank. If it had been filled in, you can safely ignore this form, as it was filled with spam-bot.
Simplifying login
The aim of any form of logging in is to allow the user to his account. Some forms of input is obtained, some - less. Here you will learn about non-standard techniques that will help your users to more easily enter into the system.
Allow users to log in using your email address
Remember email is easier than to remember the name of the user. The user name can be trudnozapominaemym and email address are constant, so remember it well. Give users the option Log on as a user by name or by e-mail address. This freedom of action will help save time and save a headache if necessary, to recall a forgotten username.
Ability to log in without leaving the page
Log in - a standard task, and users should be able to login on any page of your site. Therefore, once they do, redirect them back to the current page. With this login will be faster and will allow users to go directly to the case.
Here are a couple ways to do this: drop-down list box or a modal window.
When you open the drop-down list, the user should not depart from the page. He should take a small section of the page so the user can enter easily and quickly.
A modal window also keeps users on the current page, but it opens in the middle of the page, drawing attention directly to the login form. This option allows you to add additional information to the form.
How to insert the login form in AJAX jQuery modal window
A simple guide to jQuery modal window
Auto focus on the first text box
When the user sees a login form, he is ready to enter. Make the process more streamlined by automatically focusing on the first text box. This will save time and effort that could be spent trying to figure out where to click, and directly on the clique. The user can immediately start typing without taking your hands off the keyboard. Auto focus should be on the screen that the user knows that already can start typing.
Suppose that the user sees your password
This option is useful for both subscription and to login. If the user does not see the characters he introduces, he could easily be mistaken. Of course, if his attempt to enter was rejected, he realizes that something has been printed incorrectly, and he will have to type a password before it will print the correct one.
The problem is that the user does not know what kind of character was typed incorrectly, so it can not fix the problem before it submits the form. This creates unnecessary delays and forces the user to print more slowly. This can be avoided if you add a button-box, which allows the user to open a password before it is its frame.
Use the question mark icon for a link to the password recovery
Users should be no problem to find a link to the form of password recovery. Instead of using the link "Forgot your Password", use the simple question mark, which does not require much space and not get lost among the other links. The question mark - a common symbol with a request, so the user will not have doubts, where you can deal with the problems of password.
Make the "Send" button is the same wide, as well as text fields.
Login button, there is also to ensure that users know exactly what action they intend to commit. A small button login is not encouraged to act, forcing the user to doubt.
Wide button gives you more confidence and it's hard not to get into. The button becomes clearer, and the user knows exactly what he does.
Allow users to log in via Facebook, Twitter or OpenID
Many people have registered on Facebook, Twitter or OpenID, so the ability to log in through these services will give a great advantage. Users can instantly take advantage of your site without having to go through the entire login process. Also, they do not have to register under different names on different sites.
Of course, you can go ahead and Facebook Connect pre-populate information to be filled by the user. See the example below: Facebook application for Friend.ly , the only thing the user needs to be done before you start using this service - is to click the "Register". User information is automatically downloaded, but it raises serious concerns about confidentiality issues. Therefore, you may not be used this approach in practice.
Summing-up
Your registration form and login should not complicate the user's life. Time spent filling out these forms, no offsets. The suggested techniques will help to make your forms easy and practical. , Users can quickly register and login to the site. To learn more, see the article you wash Joshua Johnson's " 20 great examples of registration forms ".
There are many ways to design forms of registration and login. Most designers are familiar with conventional techniques. But the understanding and application of some innovative techniques can make your forms easier to fill and more efficient. In this article we will introduce you to new ideas that may come in handy for your next project.
Please note that before using this technique, make sure that the design features allow you to do it. We would like to get your specific examples, which would be confirmed or refuted the usefulness of what we offer below.
Simplification of the registration
The aim of any form of registration - the user must successfully complete it and send it. However, complex and long form is able to turn the admiration of user site in frustration. Here are a few new ideas that make your forms will be easier and faster to complete.
Ask a question about the user name after he is registered
Registration forms generally provide for the establishment name, unique on this site. In order to come up with a name, it is unique for this site, you need time. Instead of bothering people to query the name during the registration process, think about how to do it later. This way, you will not lose your registrations frustrated users, and your users will not create a random name that is easy to forget, only to completely fill out the form below.
Many registration forms require that the user must enter the password in two different fields. Reasons for this are obvious. Forms hide the passwords so that they could not be seen when printing, for security reasons. And in order to reduce errors and increase the probability of a correct password is entered, it is advisable to enter data twice.
But in reality, this leads to large errors because the user is forced to print more. He does not see that the prints, so it is difficult to be sure that each time he dials the correct password.
AutoComplete fields, "City" and "Area" on the index by
If you require a home address of the user, consider AutoComplete fields, "City" and "Scope" on an index of the user. Then the user can quickly fill out a form, because he does not have to spend time and effort to manually select the city and country in the drop-down lists.
The user can define their own country the standard way - choose from the drop-down list. A more convenient way - to use the auto-complete text field. Rather than force the user to scroll through a list of all countries, arranged alphabetically, you can prompt the user to select their country from a small number of countries that are suited to the letters that the user types in the field. Users simply enter a few letters - and he sees his country.
If a user buys a product, it must provide payment information, and information delivery. In most cases this is the same address, so make it possible to auto-complete filling of one another. You can give the link "Information is the same as in the delivery box" payments in the graph. And if you click on it, the information in this column in the graph duplicated payments.
- Copy the billing address and shipping with jQuery
- Copy information from one area to another input with jQuery
At most sites in the subscription box is initially exposed to ticks. Thus, site owners are hoping to get more subscribers. Maybe this will work. But the subscription did not make sense, if the user simply did not see or did not understand the meaning of options. If he is not interested, he will sooner or later otpishetsya from the list. In the long term, these methods will not help you. If the user will receive a mailing list without their clearly expressed wishes, it will eventually get tired of it.
It would be more interested in effective user subscriptions, or by showing an excerpt from the preview it. In this case, he would know that he was losing, if you do not subscribe. And you too can rest easy knowing that all those who signed up did so because of genuine interest.
If you are bombarded with spam, you'll have to add in the form of CAPTCHA. But you can not turn in the CAPTCHA barrier, which repels users. It is proved that traditional versions of CAPTCHA, in which the user is required to reprint the distorted letters, spoil the conversion rates. Not surprisingly, they take out the users.
A simpler version that does not reduce the rates of conversion, - to use a hidden text field are required, which generates client-side Javascript. Spam bots can not interact with the objects of the client Javascript, it can only do men. This method is easier and less intrusive, it will help reduce the amount of spam without affecting rates of conversion. The only problem - it is dependent on JavaScript, which work in some cases may not be the optimal solution. You can also use the so-called " honey plant »(honeypot): in the form of a blank field, using CSS, to hide it from people, but not for bots. When the form is filled out, make sure that the field is left blank. If it had been filled in, you can safely ignore this form, as it was filled with spam-bot.
The aim of any form of logging in is to allow the user to his account. Some forms of input is obtained, some - less. Here you will learn about non-standard techniques that will help your users to more easily enter into the system.
Allow users to log in using your email address
Remember email is easier than to remember the name of the user. The user name can be trudnozapominaemym and email address are constant, so remember it well. Give users the option Log on as a user by name or by e-mail address. This freedom of action will help save time and save a headache if necessary, to recall a forgotten username.
Log in - a standard task, and users should be able to login on any page of your site. Therefore, once they do, redirect them back to the current page. With this login will be faster and will allow users to go directly to the case.
Here are a couple ways to do this: drop-down list box or a modal window.
When you open the drop-down list, the user should not depart from the page. He should take a small section of the page so the user can enter easily and quickly.
- A simple and effective form of logon jQuery in a drop-down list
- Drop-down form of subscription AJAX jQuery
How to insert the login form in AJAX jQuery modal window
A simple guide to jQuery modal window
When the user sees a login form, he is ready to enter. Make the process more streamlined by automatically focusing on the first text box. This will save time and effort that could be spent trying to figure out where to click, and directly on the clique. The user can immediately start typing without taking your hands off the keyboard. Auto focus should be on the screen that the user knows that already can start typing.
This option is useful for both subscription and to login. If the user does not see the characters he introduces, he could easily be mistaken. Of course, if his attempt to enter was rejected, he realizes that something has been printed incorrectly, and he will have to type a password before it will print the correct one.
The problem is that the user does not know what kind of character was typed incorrectly, so it can not fix the problem before it submits the form. This creates unnecessary delays and forces the user to print more slowly. This can be avoided if you add a button-box, which allows the user to open a password before it is its frame.
Users should be no problem to find a link to the form of password recovery. Instead of using the link "Forgot your Password", use the simple question mark, which does not require much space and not get lost among the other links. The question mark - a common symbol with a request, so the user will not have doubts, where you can deal with the problems of password.
Make the "Send" button is the same wide, as well as text fields.
Login button, there is also to ensure that users know exactly what action they intend to commit. A small button login is not encouraged to act, forcing the user to doubt.
Wide button gives you more confidence and it's hard not to get into. The button becomes clearer, and the user knows exactly what he does.
Many people have registered on Facebook, Twitter or OpenID, so the ability to log in through these services will give a great advantage. Users can instantly take advantage of your site without having to go through the entire login process. Also, they do not have to register under different names on different sites.
Your registration form and login should not complicate the user's life. Time spent filling out these forms, no offsets. The suggested techniques will help to make your forms easy and practical. , Users can quickly register and login to the site. To learn more, see the article you wash Joshua Johnson's " 20 great examples of registration forms ".
One of the finest of write-ups there is on the internet today. Kudos to the author for being so well informed. I must give it to their presence of mind and the selection of words. This couldn’t have been written in a much beautiful way. Keep it up. Good on you.
ReplyDelete