Usability testing of web forms

Web form – is a set of fields, lists and radio buttons after completing and sending which, users gain access to the particular site functionality or information and perform certain actions or leave personal data on the resource.

Since users interact with different forms quite often, the crucial moment for internet resources is the usability of filling out these forms. There are many approaches to create feedback between users and web form during its completion. For example, after invalid filling in form fields, a user should receive a message indicating mistakes made and tips for correcting them. 

Errors can be displayed to users in two ways:

• after submit validation (validation after submitting data);
• inline validation (integrated validation/after losing the focus). 

After submit validation is common enough, but it is not the best option. Using this method, a user fills in all form fields and sends data to the server by clicking the submit button. Then, data is validated on the server, and only after that the result is shown on the user screen in the form of an error message. In this case, the form completion process can take more time than the user expects. One will need to correct all mistakes made and send the form again, but there is no guarantee that the user will not make them again.

You have to be seriously interested in the resource to not leave it to find the more convenient and fast one. In today's world, when there is a significant amount of analogues for most resources, a user will find a better option quite fast. 

Therefore it is better to use inline validation in order to prevent the above-mentioned course of events. This kind of validation allows the user to receive the error messages immediately after filling in the fields, making it possible to quickly correct the user's mistakes. 

The messages can be displayed differently in the form:

• with the green checkbox – when the field is filled in correctly;
• with the red cross with the proper filling tip – in the case of wrong filling in;
• highlighting the field without errors in green;
• highlighting the field with an error in red;
• as error text messages with tips under incorrectly filled fields;
• as pop-up windows, etc.

Most experts agree that inline validation positively impacts users' impression of interaction with a resource. The studies on the effectiveness of inline validation and after submit validation show the following results:

• the success rate of form filling increased by 22%;
• the number of made mistakes dropped by 22%;
• the product satisfaction rate rose by 31%;
• the number of eye fixations decreased by 47%;
• the number of users who claim the form filling was worth the efforts increased by 22%.

The degree of form usability on the site is affected by the format used by users when inputting data in the field. Thus, there are two types of validation policies:

• strict validation policy;
• moderate validation policy.

In the case of strict validation, users should input data strictly following the template. It allows entering more precise data in the form fields and preventing errors, which is especially great for the fields with important information. A clear example is the telephone field - the system does not allow entering more than 9 numbers, and 2 of them should be a code of the existing mobile operator. 

Despite the benefits of this validation policy, such as simplifying code writing and accelerating the system work, it significantly reduces the degree of form usability. Users have to adapt to specific templates, which many people may consider difficult and incomprehensible.

In the case of moderate validation, users can input data in any convenient format, and the system already converts the data into the required one. For instance, users are not tied to parenthesis in the mentioned phone number field. This method ensures a high usability level but is subjected to many risks related to its realization. For implementing data transformations, additional resources are required because there is a high risk of not considering some entering data options and making a mistake in the code.

Usability testing of using form validation 

When testing usability forms, one should pay special attention to some practical rules, which help efficiently test the usability level of using form validation. 

1. Checking the short explanation texts (hint texts) 

These hint texts make users understand why they should enter specific information and which format to use. They help to fill in the form quickly and correctly. For example, «Make sure the entered information matches your credit card data».

2. Error messages

A user must receive the error message regardless of the validation type used. Another important moment is that the entered data should not be changed even after submitting the form and receiving the error message. If the form refreshes data during the verification, there is a high possibility that the user will not complete the form again. It is also worth remembering such significant characteristics of clear error messages as conciseness and simplicity of explanations. 

3. Tactfulness in error messages

Error messages should be tactful, concise and do not include negative words. A user must be informed about both incorrect input data and the correct one. For especially important fields, there should be displayed not only an error message but also a tip on how to better fill in the field. Such tips might be shown in the form of a link to a page of another resource.

4. Excessive exactingness

There is quite an unpleasant situation for users when data can be entered only in a predetermined format, and any other option is excluded. An example would be the date of birth field, where two formats of the year input should be allowed («92» or «1992»), and the same with the following symbols «.» and «/» between numbers. A good option in the phone number field will be the absence of the requirement for inputting such characters as «+», parenthesis, hyphens, etc. It is better to give users a choice to enter the data as it is convenient.

Preventive measures to ensure a high level of usability forms

In addition to usability form testing, you should remember the preventive measures to ensure a high level of usability and prevent user errors. 

1. Following the common rules

The form should have a generally accepted view familiar to users. This way, it will be easier for them to navigate through the form. Thus, they will have some idea of what data will be requested, in which order the fields will be located, how the values must be entered and what they should be, etc.

2. Showing the password

A fully masked password field is often a source of problems during filling it in as users cannot see what they enter. Consequently, they make more mistakes, completely refusing to fill out the form or enter easier passwords that negatively affect security. A good solution would be to show the last entered character in the password.

3. Using placeholders

Placeholders help save space in a form, especially if it is a large form and it has little space for field inscriptions. But they also have some flaws: The fields with placeholders are sometimes perceived as already completed. Another disadvantage is that you can forget what to enter as a placeholder will disappear after putting the cursor into a field.

4. Dropdown lists

Dropdown lists help reduce the number of fields with possible mistakes. They suggest already made options, and all users have to do is choose the necessary one.

Usability web form testing has an important meaning in the testing process because the product's friendliness, comprehensibility, and ease of use are among the main characteristics of quality software for the user. By making the form convenient, friendly and as simple as possible, one can gain the trust and increase the number of users satisfied with the product.