Simple but Crucial User Interfaces in the World Wide Web: Introducing 20 Guidelines for Usable Web Form Design

Most websites use interactive online forms as the main contact point between users and website owners (e.g. companies, governmental institutions, ect.). Therefore, a proper design of such forms is crucial to allow smooth information exchange. It can be decisive on the success or failure of an online transaction. Users mostly visit a website with an intention that is related to the content of that site (e.g. purchasing an article, gathering information). Hence, they do not visit a website with the intention or goal of filling in a web form. Let us illustrate this with an online shopping example: Once users have chosen the items that they wish to buy, they want to finish their shopping as quickly, easily and safely as possible. But to successfully complete the shopping process users have to provide some personal data such as shipping address or credit card information. In the users perception, an online form may be perceived as a hurdle. There is evidence that unusable web forms lead to customers aborting the transaction prematurely, resulting in loss of profit (Wroblewski, 2008). To prevent such dropouts from the buying process, a revision of the form is necessary. A successful redesign of a suboptimal online form may result in an increased completion rate in the range of 10%-40% (Wroblewski, 2008). For instance, the eBay User Experience and Design Group reported that a redesign of the eBay registration form made a significant contribution to eBay’s business and user success (Herman, 2004). The World Wide Web contains a wide range of different web form design solutions for similar interface aspects and problems. Exemplarily, Figure 1 shows four different ways of implementing and communicating format restrictions to users. It can be seen, that even website developers of major companies choose very different ways to solve the same problems. This raises several important questions: Are these solutions equivalent or are there ways that lead to superior web forms in terms of an enhanced usability? Would it not be advantageous to use similar solutions for similar problems, so that predictability for users can be increased? Are there different solutions that may be used depending on the developer’s intentions? In the last years a growing body of research and guidelines have been published on how to make online forms more usable. They answer to a certain extent the questions mentioned

[1]  Geert Loosveldt,et al.  An Evaluation of the Effect of Response Formats on Data Quality in Web Surveys , 2002 .

[2]  Jolene D. Smyth,et al.  Helping Respondents Get It Right the First Time: The Influence of Words, Symbols, and Graphics in Web Surveys , 2007 .

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

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

[5]  Allen Newell,et al.  The keystroke-level model for user performance time with interactive systems , 1980, CACM.

[6]  Jesse James Garrett The Elements of User Experience , 2012 .

[7]  Benjamin Healey,et al.  Drop Downs and Scroll Mice: The Effect of Response Option Format and Input Mechanism Employed on Data Quality in Web Surveys , 2007 .

[8]  Jeng-Yi Tzeng,et al.  Toward a more civilized design: studying the effects of computers that apologize , 2004, Int. J. Hum. Comput. Stud..

[9]  Jeff Herman A process for creating the business case for user experience projects , 2004, CHI EA '04.

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

[11]  M. Traugott,et al.  Web survey design and administration. , 2001, Public opinion quarterly.

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

[13]  Martin R. Gibbs,et al.  Mediating intimacy: designing technologies to support strong-tie relationships , 2005, CHI.

[14]  Caroline Jarrett Label placement in forms: what's best? , 2008 .

[15]  Javier A. Bargas-Avila,et al.  Online Form Validation: Don't Show Errors Right Away , 2003, INTERACT.

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

[17]  P MoranThomas,et al.  The keystroke-level model for user performance time with interactive systems , 1980 .

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