Users encounter forms almost every day. Remember when you bought something online or ordered pizza.

Forms are the most effective way to interact with users. And users should be able to fill out the form quickly and without confusion.

Where are the forms used?

- Login / Registration
- Checkout
- Buying tickets
- Newsletter subscription
- Poll
- etc.

Forms analysis

To start, I studied the criteria for evaluating users of forms:

• Estimation of time costs

  At the very beginning, users evaluate the complexity of the form. The more complex it looks, the higher the likelihood that users will not start filling it out.

• Evaluation of efforts

  Will users really understand what you want to get from them? Do users understand what data and documents are required to fill out the form? The more unnecessary actions users need to take, the higher the chance of not filling out or making mistakes when filling out.

Improvement methods

1. Reducing the number of fields.

According to the results of a study by the Baymard Institute, users are ready to fill in no more than 15 fields to achieve the goal, and too long an order process is one of the main reasons for refusing to fill out the form.

Think about which of the fields you could remove from the form or temporarily hide. Perhaps it will be Address 2 or the name of the company. Remember that by collecting the contact information of the user - you can request additional data.

2. Single column layout

Using eye tracking tests, it turned out that users spend more time moving from one column to another. In this case, users often skip fields and make errors when filling out. (more about the study here )

3. Left alignment

For the reason described above - it is not recommended to align the elements of the form in the center.

4. No duplicate fields

Do not ask the user to duplicate the email address and password. Many developers and designers believe that re-entering the mail and password will avoid errors in entering data. But in fact, most users copy the mail or password entered in the field above.

Instead of duplicating the password field, allow you to view the password when you click on a special flag.

5. “Data collection”

If possible, do not separate the fields with the name and surname, date of birth (in separate fields with a day, month, year).

6. Indicator of filling and dividing content into parts

If it is impossible to reduce the number of fields, it is necessary to divide the content into semantic parts, as well as add a progress indicator so that users can evaluate the time required to fill out the entire form.

A special plus will be the ability to save part of the entered data, which will save user data in emergency situations.

7. Optional fields instead of required

In most cases, required fields are marked with a red star (*). But most users are used to the fact that red is for errors. Additionally, some do not understand what a star means.

Once, they asked me: “This is a remark, but I don’t see it here with you.”

In most cases, only a few fields from the entire form are optional. Therefore, it is worth noting them as optional.

8. Using autocomplete

Users will be grateful if you make some elements of the forms with automatic completion, this will also reduce the number of errors.
Items like city, country, phone, email, etc.

9. Masks

In some cases, users are not at all sure which format to enter data in.

To solve this problem, you can use the placeholder (the text displayed on the form before the introduction) or the input mask.

10. The correct field type

In recent years, more and more users are browsing sites from a smartphone. The correct field type allows you to open different keyboards for forms.

For example:
- input type = “text” displays a regular keyboard
- input type = “tel” displays the numeric keypad for dialing
- input type = “number” displays a keyboard with numbers and symbols

11. The Correct Label

Avoid text written in capital letters (Caps Lock). Writing field headings like this reduces the speed of reading and the readability of the text.

12. Keeping order

Follow the order familiar to users. For example, when you fill out the order form, the order will be as follows: full name, phone number, card data. In a normal conversation, it would be strange to first ask the user for a phone, and only after that - his name.

13. Call to action

Make sure users understand which button sends data and which cancels the fill. Make sure the buttons look like buttons, not links. Also do not use the reset buttons. Often, users accidentally hit them and delete all entered information.

If there are two calls to action on the form, for example: “Send” and “Cancel”, you need to add more visual weight to the button that should be pressed first.

Do not neglect highlighting the shape of the field at focus, as this will allow the user not to “get lost” in the shape, even if it is quite large.

14. Error immediately.

Show error before sending data. Make sure that the user understands what mistake he made. Left the field blank? Wrong data format?

Modern methods

1. Geolocation

Add the ability to determine the location of the user after his permission and adding data to the form.

2. Biometric authorization

Have you forgotten the passwords from your accounts? Studies show that over 80% of users forget their passwords. Now, it is not necessary to enter a password, you can enter the site using a fingerprint or face scan.

3. Camera = Scanner

Use the camera as a scanner to receive credit card or document data, recognizing the data automatically and adding them to the fields, while maintaining the ability to edit.

Conclusion:
- Use clear and short names for fields and buttons.
- Errors must be checked in real time.
- Use placeholder text or tooltips.
- Use confirmation to send data.
- Use the autofocus of the selected field.
- Reduce the number of fields