May 23, 2014 at 11:02Our checklist for website forms
This is the second part of our checklists. In the first, we looked at the filter requirements in detail . Unlike filters, custom form requirements are more universal. However, it took us several heated discussions to develop a more or less uniform format. A video from HolyWarModeOn talks about typical usability errors in projects. Immediately under the video, look for a detailed checklist for forms on the site.
□ Saving the form.
□ The form is saved in web forms (admin panels) or SQL tables.
□ Change of shipping address.
□ E-mail to which data from a web form comes can be changed in the administrative panel.
□ Relevance of the dispatch address.
□ The real e-mail of the person responsible for processing applications is registered.
Why so. The situation is typical of everyday technical support: the owner of an
online store vomits and mosques - there are no requests from customers. We open the admin panel, look: the address svetochek1988@mail.ru is entered, where all the requests go. There is no point in explaining further.
□ Submitting the form.
□ Data from the completed form is sent to the administrator by e-mail.
□ Sending a notification to the user.
□ Optional. The user receives a notification to his e-mail about the successfully received application and the subsequent actions that are required of him.
□ Placeholders for fields are provided.
□ If the field names are not signed, then a prompt is displayed inside the fields, which disappears when entering text.
Why so. Users need instructions, and designers and designers need a compact way to provide information.
Example: Uniplast .
□ The autocomplete attribute is registered for fields that support this value.
The autocomplete attribute substitutes data previously entered by the user into the field if the function is not disabled in the browser.
Why so. The faster a user fills out a form, the higher the likelihood that he will submit it.
Example: Labyrinth .
□ The correct operation of multi-step forms.
□ The navigation next to the form shows the current stage and the number of steps remaining.
Why so. The unknown scares visitors and reduces the likelihood of a complete filling of the bulk form. A positive example is Asos. The form indicates five steps, but in fact the registration is five times faster - the main functions of the site are available immediately after filling in the first registration screen.
Example: Asos .
Comment. On some projects, we refused standard registration in favor of authorization through social networks.
Example: Restlook .
□ Multi-step forms work correctly when navigating using the Forward and Back buttons in the browser.
□ For numerical values from a certain range, limiters for the minimum and maximum number of characters are prescribed.
□ Check this for dates, times, and other similar characteristics.
Why so. A simple safety net against entering outright lies or the appearance of errors due to carelessness - the date of birth in the future or the time of delivery earlier than the time of the application.
□ Accept attribute is specified for fields that assume file uploading, which determines the type of uploaded documents.
Why so. If the accept attribute is specified, when choosing from the hard disk, the user sees only the appropriate file types for downloading - for example, doc and txt. This excludes sending documents in a format that is not suitable for processing.
□ For fields whose validation passes through the regular expression, the pattern attribute is registered.
Validation is the verification of user input for compliance with system requirements. The information is verified by checking with a regular expression specified in a special format.
For example, the regular expression [0-9] {5,10} for a password means that it can only consist of numbers, and its length ranges from five to ten characters. If the pattern attribute is registered for the field, then the form is not submitted until the data is entered correctly.
□ The required data format that the user must enter is obvious to him.
Why so.The user must understand what is expected of him when entering data. To do this, brief explanations like “Password consists of at least 8 characters and includes numbers and Latin letters” are intended.
□ Instructions are available on the input format in human language.
Why so. An obvious and understandable hint allows you to quickly understand the causes of the error and not feel dumb when filling out the form fields.
Example: LitRes .
□ The user does not see the regular expression as a hint for action.
Why so. The tooltip for the index field, which is a regular expression [0-9], is uninformative. The phrase "The index consists of numbers from 0 to 9" is much clearer to the user.
□ Error messages are understandable to ordinary users and logical.
Example: ZimZum . It is important . A typical error is a regular expression in a message about an incorrect form filling.
□ The form asks the user only the necessary data.
Open the form, visually make sure that only the necessary minimum information is required.
Why is it important. Volumetric forms kill conversion. Registration, purchase or feedback should be as simple as possible so as not to confuse users.
Example: Selfprint . □ If all fields are required, asterisks are not displayed next to their names - the * symbol. Open the form and see this visually. Descriptive text about the mandatory completion of all fields is desirable. □ For an authorized user, all data known about the visitor is automatically substituted in the form fields.
Make sure visually that the information specified by the user in the profile is automatically displayed in the form fields requesting this data.
□ When entering a bulk message, a multi-line text field changes its height or a scrollbar appears on the right side to view all the content.
Open the form with a multi-line text field, enter as many characters as possible.
Why so. Many users reread what they write before submitting. You need to give them the opportunity to use the scroll bar or view the entire message in the extended field instead of moving around the text using the keyboard arrows.
Example: Fur-Expo .
□ The correct TYPE attribute is specified in the form fields, telling the browser the type of form elements.
□ Types of dates, time, phones, ranges, url, e-mail, numbers are correctly indicated.
□ While sending the form on the slow channel, the user cannot change the data in it.
Important. Valid for ajax forms.
Why so. At a low connection speed, the ajax form is not sent immediately, for some time remaining on the screen with all the information entered. The user should not change his mind and change all the data at this moment. More precisely, he can change his mind, but he no longer realizes his idea: it needs to be blocked from changes until a response is received from the server.
It is advisable to visually show that the form is locked. One option is the preloader:
□ The prompts and errors are made with an animated effect.
Comment. This setting is design dependent and optional.
Next, there are three controversial stories that need to be addressed with the manager at the design stage.
□ The button for sending data is inactive until the checkbox “Agree to the rules”, “User agreement” is activated.
Example: Ebazaar .
□ The send data button is inactive until all the data entered has passed the positive validation.
Open the form with input fields, enter incorrect data, check if the button is active.
It is important. In some cases, incorrectness is a relative concept. Substrate Substitute - Phone Number Validationin the form of feedback. In short, turn it off.
□ If the data does not pass the positive validation, an information message is displayed when the cursor is on the button for sending data.
Open the form, enter incorrect data, hover over the send data button, check if a message is displayed.
The list can be printed - use it for usability testing. The same thing in a Google doc .
Importance: Extra High
□ Saving the form.
□ The form is saved in web forms (admin panels) or SQL tables.
□ Change of shipping address.
□ E-mail to which data from a web form comes can be changed in the administrative panel.
Importance: High
□ Relevance of the dispatch address.
□ The real e-mail of the person responsible for processing applications is registered.
Why so. The situation is typical of everyday technical support: the owner of an
online store vomits and mosques - there are no requests from customers. We open the admin panel, look: the address svetochek1988@mail.ru is entered, where all the requests go. There is no point in explaining further.
□ Submitting the form.
□ Data from the completed form is sent to the administrator by e-mail.
□ Sending a notification to the user.
□ Optional. The user receives a notification to his e-mail about the successfully received application and the subsequent actions that are required of him.
Navigation
□ Placeholders for fields are provided.
□ If the field names are not signed, then a prompt is displayed inside the fields, which disappears when entering text.
Why so. Users need instructions, and designers and designers need a compact way to provide information.
Example: Uniplast .
□ The autocomplete attribute is registered for fields that support this value.
The autocomplete attribute substitutes data previously entered by the user into the field if the function is not disabled in the browser.
Why so. The faster a user fills out a form, the higher the likelihood that he will submit it.
Example: Labyrinth .
□ The correct operation of multi-step forms.
□ The navigation next to the form shows the current stage and the number of steps remaining.
Why so. The unknown scares visitors and reduces the likelihood of a complete filling of the bulk form. A positive example is Asos. The form indicates five steps, but in fact the registration is five times faster - the main functions of the site are available immediately after filling in the first registration screen.
Example: Asos .
Comment. On some projects, we refused standard registration in favor of authorization through social networks.
Example: Restlook .
□ Multi-step forms work correctly when navigating using the Forward and Back buttons in the browser.
Validation
□ For numerical values from a certain range, limiters for the minimum and maximum number of characters are prescribed.
□ Check this for dates, times, and other similar characteristics.
Why so. A simple safety net against entering outright lies or the appearance of errors due to carelessness - the date of birth in the future or the time of delivery earlier than the time of the application.
□ Accept attribute is specified for fields that assume file uploading, which determines the type of uploaded documents.
Why so. If the accept attribute is specified, when choosing from the hard disk, the user sees only the appropriate file types for downloading - for example, doc and txt. This excludes sending documents in a format that is not suitable for processing.
□ For fields whose validation passes through the regular expression, the pattern attribute is registered.
Validation is the verification of user input for compliance with system requirements. The information is verified by checking with a regular expression specified in a special format.
For example, the regular expression [0-9] {5,10} for a password means that it can only consist of numbers, and its length ranges from five to ten characters. If the pattern attribute is registered for the field, then the form is not submitted until the data is entered correctly.
□ The required data format that the user must enter is obvious to him.
Why so.The user must understand what is expected of him when entering data. To do this, brief explanations like “Password consists of at least 8 characters and includes numbers and Latin letters” are intended.
□ Instructions are available on the input format in human language.
Why so. An obvious and understandable hint allows you to quickly understand the causes of the error and not feel dumb when filling out the form fields.
Example: LitRes .
□ The user does not see the regular expression as a hint for action.
Why so. The tooltip for the index field, which is a regular expression [0-9], is uninformative. The phrase "The index consists of numbers from 0 to 9" is much clearer to the user.
□ Error messages are understandable to ordinary users and logical.
Example: ZimZum . It is important . A typical error is a regular expression in a message about an incorrect form filling.
Other
□ The form asks the user only the necessary data.
Open the form, visually make sure that only the necessary minimum information is required.
Why is it important. Volumetric forms kill conversion. Registration, purchase or feedback should be as simple as possible so as not to confuse users.
Example: Selfprint . □ If all fields are required, asterisks are not displayed next to their names - the * symbol. Open the form and see this visually. Descriptive text about the mandatory completion of all fields is desirable. □ For an authorized user, all data known about the visitor is automatically substituted in the form fields.
Make sure visually that the information specified by the user in the profile is automatically displayed in the form fields requesting this data.
□ When entering a bulk message, a multi-line text field changes its height or a scrollbar appears on the right side to view all the content.
Open the form with a multi-line text field, enter as many characters as possible.
Why so. Many users reread what they write before submitting. You need to give them the opportunity to use the scroll bar or view the entire message in the extended field instead of moving around the text using the keyboard arrows.
Example: Fur-Expo .
□ The correct TYPE attribute is specified in the form fields, telling the browser the type of form elements.
□ Types of dates, time, phones, ranges, url, e-mail, numbers are correctly indicated.
□ While sending the form on the slow channel, the user cannot change the data in it.
Important. Valid for ajax forms.
Why so. At a low connection speed, the ajax form is not sent immediately, for some time remaining on the screen with all the information entered. The user should not change his mind and change all the data at this moment. More precisely, he can change his mind, but he no longer realizes his idea: it needs to be blocked from changes until a response is received from the server.
It is advisable to visually show that the form is locked. One option is the preloader:
Importance: Low
□ The prompts and errors are made with an animated effect.
Comment. This setting is design dependent and optional.
Next, there are three controversial stories that need to be addressed with the manager at the design stage.
□ The button for sending data is inactive until the checkbox “Agree to the rules”, “User agreement” is activated.
Example: Ebazaar .
□ The send data button is inactive until all the data entered has passed the positive validation.
Open the form with input fields, enter incorrect data, check if the button is active.
It is important. In some cases, incorrectness is a relative concept. Substrate Substitute - Phone Number Validationin the form of feedback. In short, turn it off.
□ If the data does not pass the positive validation, an information message is displayed when the cursor is on the button for sending data.
Open the form, enter incorrect data, hover over the send data button, check if a message is displayed.
The list can be printed - use it for usability testing. The same thing in a Google doc .