Text fields: ergonomics and design

From the translator . Probably every Internet user faced the following problem: after a long introduction of information into text fields (for example, when registering on any site), the system gives an error message, and everything has to be re-entered. Having experienced serious difficulties with registration, many visitors simply refuse to use the services offered on the site. For commercial web projects, this also means loss of profits. How to make the process of filling text forms as simple and convenient as possible? This will be discussed in an article written by specialists from the French company Usaddict.
Filling in text fields is one of the important and delicate aspects of working with websites. There are often cases when users refuse to register on the site, because they do not understand exactly how to properly fill out the registration form. Accounting for the ergonomic aspects of this element of the interface will help make the site more convenient and attractive to users.



Input Validation
')
There is nothing more unpleasant than receiving an error message immediately after the completion of a lengthy and laborious process of filling in text forms. It is good if inside the fields (or, for example, to the right of them) there are instructions for filling. But it often happens that as a result of placing the instructions and samples, the page is overloaded with unnecessary elements; the user is unlikely to have the desire (and there is hardly enough patience) to read the text in small print before filling out each field. To solve this problem, you can provide automatic validation of the filling based on JavaScript technologies.

Such verification is necessary if the field is a mandatory procedure. It is also necessary when the field must be filled in according to a strictly defined pattern (addresses, telephone numbers, passwords, etc.).

As a rule, the check is carried out as follows: when the completion of one field is completed and the transition to another is completed, a message appears on the screen about the existing shortcomings. So it is implemented, for example, on the online photo processing site Picnik.Com :



Another way is that the test is conducted in real time, and the user receives a corresponding warning as soon as he makes a mistake (for example, he enters an invalid character or exceeds the number of characters allowed in the text box). The warning is usually carried out in two ways. The first way is to display an error message without explanation (currently
this happens very rarely). The second method is used more often and is that the screen displays specific information about the error committed (too long user name, incorrect password, use of invalid words and symbols, etc.). The check function also allows you to prevent possible errors. So, when filling in the registration form on the website of the online tool for maintaining the task list Remember the milk, you can get information about the adopted password format immediately after switching to the appropriate field:



As soon as the user begins to enter the password during registration, he immediately receives information that the password must contain at least 5 characters.

The process of registering on the LiveStream online video site is similarly organized:



Recommendations

• The preferred option is to check the correctness of filling "on the fly": the user receives information about the error at the time of filling a specific field and spends much less time and effort to correct.
• Upon completion of filling in each field, it is necessary to inform the user about the compliance / non-conformity of the forms and samples adopted for the standard.

Explain the causes of nonconformities.

A common practice is to display information about the correct filling in green and on the wrong filling in red. Information can be presented in the form of a text message or in the form of graphic symbols. It is highly desirable that separate signs are used to indicate correct and incorrect input: users suffering from color vision impairments may simply not distinguish between red and green.

As examples, consider the registration form on the sites Brightkite (a service for online text messaging) and PopScreen (video service):





On both sites, an indication of an error is carried out both in a graphic (special icons, color change) and verbal (text message about the nature of the error) manner.

On some sites (for example, on the gaming service Thumbslap) information is displayed on the progress of validation of data entry:



Recommendations

• It is desirable to display on the screen information that the entered data is checked. This will allow the user to quickly correct errors.
• Error messages are best presented as a combination of text messages and icons. Using the capabilities of color design will also allow the user to react to the message faster.
• In the messages about the correctness / incorrectness of filling out forms, you should use simple and understandable for all potential users words and symbols.
• It is advisable to give instructions on the site to fill out the form.