The Ergonomics of online forms

December 2016



The forms are a particular style of interaction where information is gathered via specific fields identified by labels ...

The use of online forms make it possible to search for information in bibliographic or commercial databases, subscribe to mailing lists / discussion, filling out purchase orders ...

Here are some recommendations that will avoid major mistakes while building up your online form.

Advantages


In general, the forms are self-explanatory: what should be done (the semantics) and how (syntax) are explicit. Thus, there is virtually no pre-learning interaction. The interaction relies on recognition rather than recall of semantics and syntax which makes it particularly suited for use by the general public.

Moreover, the forms provide a context that explains the meaning of a title. How do I know for example if a title such as "Address:" need to enter the street number, street name or full address (with city and postal code) except by the presence of other headings such as "number", "postcode", "city". Forms, compared to the way question and answer thus this contextualization.

A good form allows the user to know precisely what information it should take and if so, how to enter it in the appropriate fields.

Forms must be readable

  • The separation of groups by spaces, lines, colors or other visual cues facilitates location:
  • Line breaks should be integrated every 5 items, for better readability
  • The number of screens for frequent users and systems should be slow down.
  • The items (related to or dependent one another ) must be submitted on the same screen.
  • After validation of the form, you must confirm the information that have been seized by an explicit message and not display a new page without informing the user that the information were seized were taken into account.

Processing a form


This example focuses on designers. It illustrates the process of a form based on a single Web page (where information is requested on several pages, it is necessary to implement other mechanisms, including summarizing the information entered before submission).
  • 1 / The user completes the form and submit.
  • 2 / The required fields and format of the data are controlled at the browser. The first control, even if not exhaustive, avoids exchanges with the Web server. If errors are detected, the form is submitted indicating the erroneous fields and repositioning the default cursor on the field with an error.
  • 3 / The data is sent to the server and re-checked. This re-verification is very important because it ensures data integrity of the database and filter attempts of hacking or destruction of data.
  • 4 / The system must then check that the data has actually been written. If the system does not save data after a certain number of attempts, an error page is sent to the user, even if this scenario should never happen.
  • 5 / A confirmation message (e-mail) is sent with a summary of information entered to avoid the risk that the user has not viewed his confirmation. The mail is an asynchronous system to inform the user. In addition, it will appreciate to keep its message in the trace of its registration.
  • 6 / A Web page with confirmation of the summary of information entered is returned to the Web browser of the visitor.

Conclusion


The application of these recommendations is to increase the ergonomic quality of your forms by improved guidance of users, the minimization of their actions, a better compatibility between the form and their habits and their tasks and better error handling, etc.. All this should translate into an easier, more satisfying and with reduced risk of errors.

More Info


Related :

This document entitled « The Ergonomics of online forms » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.