Correction of errors in large forms
I present to you the translation of the article “Idea: Error-fields only” from the Baymard Institute . The article proposed an idea of how to improve the process of filling in long forms.
Forms with fields that require proper filling are terrible. Imagine, you just finished filling out 20 fields, clicking “Send”, and the same page returns to you. And all just because you incorrectly filled one single field.
')
When the user receives the same page (+ error messages), he has the impression that he is not at all close to the end of the form filling, when in fact he has filled out 90% of the fields correctly.
I remember well the sighs of despair during our last usability testing each time a test subject found form filling errors. This disappointment was partly due to the fact that they returned to the same page, which has the same huge number of fields (correctly filled out or not), which makes it difficult to find erroneously filled fields. Perhaps the most important point is that the user does not see his progress in filling out the form, already filling in a huge number of fields.
Let's take a look at the usual form with an error.
Error in the order form on the Dell site - a decent implementation with an error message at the top of the page and near the incorrectly filled field
With this implementation, if everything works correctly, you will receive a whole page with all 20 fields and an error message at the beginning of the page indicating that several fields are filled incorrectly (ideally with anchor links to these fields). Then you scroll down the page, find an incorrectly filled field among all the others, read the message describing the cause of the error, correct the contents of the field, check the whole form again with an example of errors and, finally, scroll down the page again to click the "Continue" button. Obviously, this is a bad practice, inconvenient to the user and complicating the process of error correction.
What if we do not return correctly filled fields? What if we return only fields that need correction? Thus, instead of reloading the entire page with 20 fields, when the error is only in the “Phone” and “E-mail” fields, we will return only 2 of these fields (of course, with a message explaining the essence of the error).
When we return only fields with errors, the picture changes a lot. The user receives a page with only a few fields requiring correction. You can also display correctly completed information for confirmation.
A simple sketch of what the same page looks like when we display only incorrectly filled fields.
This approach makes the process of correcting errors in the forms more digestible: it is immediately clear with which fields difficulties arose, which is especially useful in large forms.
Now the user should simply correct the errors and click the "Continue" button. No page scrolling, searching for incorrectly filled fields, returning the same page - instead, we have a small page explaining exactly what needs to be fixed and what to do next.
What do you think about this?
Forms with fields that require proper filling are terrible. Imagine, you just finished filling out 20 fields, clicking “Send”, and the same page returns to you. And all just because you incorrectly filled one single field.
')
When the user receives the same page (+ error messages), he has the impression that he is not at all close to the end of the form filling, when in fact he has filled out 90% of the fields correctly.
I remember well the sighs of despair during our last usability testing each time a test subject found form filling errors. This disappointment was partly due to the fact that they returned to the same page, which has the same huge number of fields (correctly filled out or not), which makes it difficult to find erroneously filled fields. Perhaps the most important point is that the user does not see his progress in filling out the form, already filling in a huge number of fields.
Common scheme
Let's take a look at the usual form with an error.
Error in the order form on the Dell site - a decent implementation with an error message at the top of the page and near the incorrectly filled field
With this implementation, if everything works correctly, you will receive a whole page with all 20 fields and an error message at the beginning of the page indicating that several fields are filled incorrectly (ideally with anchor links to these fields). Then you scroll down the page, find an incorrectly filled field among all the others, read the message describing the cause of the error, correct the contents of the field, check the whole form again with an example of errors and, finally, scroll down the page again to click the "Continue" button. Obviously, this is a bad practice, inconvenient to the user and complicating the process of error correction.
We return only fields with errors.
What if we do not return correctly filled fields? What if we return only fields that need correction? Thus, instead of reloading the entire page with 20 fields, when the error is only in the “Phone” and “E-mail” fields, we will return only 2 of these fields (of course, with a message explaining the essence of the error).
When we return only fields with errors, the picture changes a lot. The user receives a page with only a few fields requiring correction. You can also display correctly completed information for confirmation.
A simple sketch of what the same page looks like when we display only incorrectly filled fields.
This approach makes the process of correcting errors in the forms more digestible: it is immediately clear with which fields difficulties arose, which is especially useful in large forms.
Now the user should simply correct the errors and click the "Continue" button. No page scrolling, searching for incorrectly filled fields, returning the same page - instead, we have a small page explaining exactly what needs to be fixed and what to do next.
What do you think about this?
Source: https://habr.com/ru/post/141809/
All Articles