User-Friendly Locations of Error Messages in Web Forms: An Eye Tracking Study

Error messages presented to users are one of the most important elements of Web forms. Error messages are embedded in different parts of the forms available on the Internet and presented in various formats. One of the measures of a user-friendly error message design is the ability to easily capture users’ attention and facilitate fast error correction. In this empirical study, I tested four different locations of error messages frequently used in Web forms on 32 participants. In addition, I analysed the participants’ interactions with error messages through their eye movements. The results of the study showed that the participants spotted the error message fastest when it was displayed on the right side of the erroneous input field. When error messages displayed further the input field users have less saccades to and fixations on error messages compared to those located near to this field, suggesting that less effort has been spent to understand the given message. However, group mean dif-ferences were not statistically significant for form completion time, error recognition time, the number of saccades, and error correction time.

[1]  Alexandre N. Tuch,et al.  Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design , 2010 .

[2]  Matthew Linderman,et al.  Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points , 2004 .

[3]  Alexandre N. Tuch,et al.  Is beautiful really usable? Toward understanding the relation between usability, aesthetics, and affect in HCI , 2012, Comput. Hum. Behav..

[4]  Caroline Jarrett,et al.  Forms that Work: Designing Web Forms for Usability , 2008 .

[5]  Peter J. Brown,et al.  Error messages: the neglected area of the man/machine interface , 1983, CACM.

[6]  A Feasibility Evaluation of a Web-Based Demographic Survey , 2001 .

[7]  Alexandre N. Tuch,et al.  Designing usable web forms: empirical evaluation of web form improvement guidelines , 2014, CHI.

[8]  Alexandre N. Tuch,et al.  Working towards Usable Forms on the World Wide Web: Optimizing Date Entry Input Fields , 2011, Adv. Hum. Comput. Interact..

[9]  Andreas Girgensohn,et al.  Seamless Integration of Interactive Forms into the Web , 1997, Comput. Networks.

[10]  Klaus Opwis,et al.  Error prevention in online forms: Use color instead of asterisks to mark required-fields , 2009, Interact. Comput..

[11]  Thomas S. Tullis,et al.  Designating required vs. optional input fields , 1997, CHI Extended Abstracts.

[12]  Yann-Gaël Guéhéneuc,et al.  A systematic literature review on the usage of eye-tracking in software engineering , 2015, Inf. Softw. Technol..

[13]  Johannes Harms,et al.  Research Goals for Evolving the 'Form' User Interface Metaphor towards More Interactivity , 2013, SouthCHI.

[14]  Klaus Opwis,et al.  Enhancing online forms: Use format specifications for fields with format restrictions to help respondents , 2011, Interact. Comput..

[15]  Michalis Nik Xenos,et al.  Effortless tool-based evaluation of web form filling tasks using keystroke level model and fitts law , 2013, CHI Extended Abstracts.

[16]  Caitlin Rinn,et al.  Using eye-tracking and form completion data to optimize form instructions , 2014, 2014 IEEE International Professional Communication Conference (IPCC).

[17]  Jonathan Strohl,et al.  Creating Forms and Disclosures that Work: Using Eye Tracking to Improve the User Experience , 2015, HCI.

[18]  Torab Torabi,et al.  A Process Improvement Approach to Improve Web Form Design and Usability , 2007, 18th International Workshop on Database and Expert Systems Applications (DEXA 2007).

[19]  Michalis Nik Xenos,et al.  KLM Form Analyzer: Automated Evaluation of Web Form Filling Tasks Using Human Performance Models , 2013, INTERACT.

[20]  Jared M. Spool,et al.  Web Form Design : Filling in The Blanks , 2012 .

[21]  Alexandre N. Tuch,et al.  Empirical evaluation of 20 web form optimization guidelines , 2013, CHI Extended Abstracts.

[22]  Alexandre N. Tuch,et al.  User-friendly locations of error messages in web forms: Put them on the right side of the erroneous input field , 2012, Interact. Comput..

[23]  William P. Mockovak,et al.  Comparing the Effectiveness of Alternative Approaches for Displaying Edit-Error Messages in Web Forms September 2005 , 2009 .

[24]  Tom McEwan,et al.  Using eye-tracking to evaluate label alignment in online forms , 2008, NordiCHI.

[25]  Klaus Opwis,et al.  Usable error message presentation in the World Wide Web: Do not show errors right away , 2007, Interact. Comput..