At the final stage of conversion, users often have to fill out forms. Visitors encounter them when placing orders or subscriptions, downloading programs, e-books and reports. An effective form stimulates conversion, while an inefficient form can lead to a refusal to purchase, register, etc. From this article you will learn what the form should be on the site.
- Place text above form fields
- There should be no "Cancel" button in the forms.
- Deliver users from the endless clicks on the step knobs
- In the search form, the "Search" button should be located on the left.
- The age confirmation form should be simple
- Long forms should immediately check the correctness of the fields
- Connect the search field and the "Search" button
- Text in the field improves form efficiency
- Captcha stops not only spam robots, but also users
- Make the registration form as simple and convenient as possible.
- Make it possible to check the checkbox by clicking on the text.
- Combine a general site search with a section search
- Tips in forms should appear when you hover the cursor
- Reduce the search form of the nearest branch to one field
- Encourage users to fill out forms
- Forms to enter the site should not be on the main page
- Another reason to put text above form fields
- The recipe for effective forms
Mark optional fields
Most designers use asterisks to indicate required fields. This is not a very good idea. First, stars create visual noise that distracts the user from conversion. Secondly, the user must spend the time to find a message at the bottom of the page about the value of the stars.
Mark optional fields. Enter the word "Optional" or "Optional" directly in the field. This will make the process of filling the form more comfortable for the user.
Place text above form fields
If the text is located to the left or right of the form fields, the user will spend more time filling it out. This is due to the peculiarities of perception: in order to enter the necessary information, a person performs more visual fixations.
When the text is located above the fields of the form, the user perceives the field and the text as a whole. This reduces the number of visual fixations in half and increases the speed of filling the form.
There should be no "Cancel" button in the forms.
The "Cancel", "Cancel", "No" buttons make forms less effective. First, they allow the user to opt out of a purchase, subscription, or registration. Secondly, customers may press these buttons randomly.
The "Cancel" button is only relevant in dialog boxes or process indicators.
Deliver users from the endless clicks on the step knobs
When a visitor uses a step controller, he has to press one of the buttons several times. This creates unnecessary pauses and complicates the user experience with the interface.
Alternative stepper are sliding regulators. The user simply press the mouse button once to move the slider to the desired position.
In the search form, the "Search" button should be located on the left.
Most designers place a "Search" button to the right of the search form. This is not the best solution: the user first evaluates the form, then the button, then returns to the form to enter the desired word, and then returns to the button.
If the button is located on the left, it reduces the number of visual stops to three.
The age confirmation form should be simple
The age confirmation form should not scare the visitor. The user may decide that you need to provide too much personal data:
The extra buttons in the form of confirmation make the form less effective.
The ideal form of age confirmation has one button:
Long forms should immediately check the correctness of the fields
Everyone can make a mistake by filling out the form. When a person makes a mistake or skips a field, the form informs him about it after pressing the confirmation button.
If the form is long enough, the user may not notice one or more error messages. He will have to fill out a form several times. This problem is solved by immediately checking the correctness of the filling.
Connect the search field and the "Search" button
If you leave a blank space between the search field and the Find button, this can lead to perceptual problems.
If the button and the field have different widths, are located too far from each other or are displaced relative to each other, the user does not perceive the search form as a whole. He spends too much time on perception, evaluation and interpretation of the object, which reduces the effectiveness of the form. A good search form looks like this:
Text in the field improves form efficiency
It is said above that the position of the text above the fields of the form is more effective than the left or right of the fields. There is another solution: placing text in the form fields. This approach makes the form more compact and reduces the number of visual fixations. In addition, the user does not need to understand which field the text belongs to.
Captcha stops not only spam robots, but also users
Captcha protects the site from spam bots. However, many users do not fill out the form if the captcha is too complicated. A simple options, for example, captcha-checkbox, ineffective.
Use the captcha slider. This protection works effectively against bots, but does not force people to refuse to fill out forms.
Make the registration form as simple and convenient as possible.
To solve this problem, use the following recommendations:
- Ask the user to come up with a nickname after registration. Finding an unoccupied nick often takes a lot of time, which makes some users refuse to register.
- Let users enter the password once. To do this, use the checkbox to see the written password.
- Use the auto-fill feature for fields with geographic data (country, city).
- Allow users to log in using a nickname or email address.
- Let users log in via their Facebook, Twitter and other social media accounts.
Make it possible to check the checkbox by clicking on the text.
It is inconvenient for users to check the checkbox, as their windows are very small. This problem is easily solved: allow visitors to tick by clicking on the text of the checkbox label.
Combine a general site search with a section search
Allow users to search for information in the whole site or in certain sections or categories of goods. This is true for large online stores, large information resources.
Tips in forms should appear when you hover the cursor
Imagine the situation: the user makes a purchase in your online store, but does not know which payment method to choose. He needs a hint.
Tips should appear when you hover the cursor over the corresponding sign or link. This saves the user from fear of leaving the form and losing the entered information.
Reduce the search form of the nearest branch to one field
Search forms that consist of several fields scare users.
To find the nearest branch, the user must fill in only one field.
Encourage users to fill out forms
This greatly increases the speed of filling and saves users from errors. The tooltip can be directly in the form fields or below them.
Forms to enter the site should not be on the main page
If the login box is in the upper right corner of the page, users can confuse it with the search form.
The exit from the situation can be the "Login" button, after clicking which opens the login form.
Another reason to put text above form fields
If the mobile user fills out a form where the labels are to the left of the fields, the person will have to use a horizontal scroll or turn the gadget over.
This problem is solved by placing the text above the form fields.
The recipe for effective forms
To make the forms on the site work efficiently, reduce the number of fields. Labels should be located above the form fields, as this reduces the number of visual fixations and makes it easier for mobile users to work with the form. Mark optional fields, do not use the "Cancel" button, use the hints. Combine the "Find" button with the search field, place it to the left of the field. Allow users to search the whole site or in separate sections. Make the most convenient checkboxes and captcha.
P.S. This article has another part: "Usability for Dummies. Part 1: what should be the buttons on the site. "