Simple is better Making your web forms easy to use pays off

Posted by Javier Bargas-Avila and Mirjam Seckler, User Experience Research at Google

Imagine yourself filling out a long and cumbersome form on a website to register for a service. After several minutes of filling out fields, coming up with a password, and handling captchas, you click the submit button to encounter your form filled with red error messages. Suddenly the “close tab” button seems much more tempting than before.

Despite the rapid evolution of the Internet, web forms, with their limited and unilateral way of interaction, remain one of the core barriers between users and website owners. Any kind of obstacle or difficulty in filling in online forms can lead to increased frustration by the user, resulting in drop-outs and information loss.

In 2010, a set of 20 guidelines to optimize web forms was published by researchers from the University of Basel in Switzerland, including best practices aimed to improve web forms and reduce frustration, errors and drop-outs. For instance, guideline no. 13 states that if answers are required in a specific format, the imposed rule should communicated in advance; or no. 15 that states that forms should never clear already completed fields after an error occurs.

To investigate the impact of applying these rules, we conducted a study and presented our results at CHI 2014: Designing usable web forms: empirical evaluation of web form improvement guidelines. In the study, we examined a sample of high traffic online forms and rated them based on how well they followed the form guidelines outlined by the 2010 publication. We then selected three different online forms of varying qualities (low, medium and high), and improved them by applying the guidelines, with the high quality form needing less modification than the medium and low quality forms. We then tested both the original and improved forms extensively with 65 participants in a controlled lab environment.

In our study, the modified forms showed significant improvements over the original forms in the time users needed to complete a form, an increase in successful first-trial submissions and higher user satisfaction. As expected, the impact was highest when the original form was of low quality, but even high quality forms showed improved metrics.

Furthermore, user interviews with participants in the study revealed which guidelines were most impactful in improving the forms:

• Format specifications (e.g., requiring a minimum password length) should be stated in the form, prior to submission. The application of this guideline had a large positive impact on user performance, subjective user ratings and was also mentioned frequently in user interviews.
• Error messages must be placed next to the erroneous field and designed in a way users are easily able to fix the problem. Doing this reduced form-filling time and increased subjective ratings.
• Most frequently users mentioned that it was key to be able to tell apart optional and mandatory fields.

Example Guideline: State format specification in advance

 Example Guideline :Place error message next to erroneous fields

Example Guideline: Distinguish optional and mandatory fields

Putting field labels above rather than adjacent to the fields in the form led also to improvements in the way users scanned the form. Using eye-tracking technology, our study shows that users needed less number of fixations, less fixation time and fewer saccades before submitting the form for the first time.

Scan path for an original and improved form

From our study, we conclude that optimizing online forms is well worth the resource investment. With easy to implement actions, you can improve your forms, increase the number of successful transactions, and end up with more satisfied users. Google is currently working on implementing these findings on our own forms.

We wish to thank our co-authors at the University of Basel, Switzerland for their collaboration in this work: Silvia Heinz, Klaus Opwis and Alexandre Tuch.

Related Post: