User-friendly locations of error messages in web forms: Put them on the right side of the erroneous input field

Designing usable web forms

“…Powerful and flexible technologies have added varying levels of interactivity to the World Wide Web. Despite this evolution, web forms -which offer rather limited and unilateral ways of interaction [14] -remain one of the core interaction elements between users and website owners [29]. These forms are used for registration, subscription services, customer feedback, checkout, to initiate transactions between users and companies, or as data input forms to search or share information [31].…”

“…It was shown, for instance, that the placement of error messages impacts efficiency, effectiveness and satisfaction. Locations near the erroneous input field lead to better performance than error messages at the top and the bottom of the formplacements that have been shown to be the most wide spread in the Internet [29].…”

“…These include topics such as error message improvement [2,5,29], error prevention [6,26], improvement of various form interaction elements [3,4,10,11], improvement for different devices [27], or accessibility improvement [23]. Some publications present empirical data, whereas others are based on best practices of experts in the fields of Human-Computer Interaction and User Experience [18,19,31].…”

Empirical evaluation of 20 web form optimization guidelines

“…Despite this evolution, web forms remain one of the core interaction elements between users and website owners [15]. Web forms are used as registration forms to subscribe to services and communities, checkout forms to initiate transactions between users and companies, or data input forms to search or share information [16].…”

“…These include topics such as error message optimization [15], error prevention [6,14], optimization of form interaction elements [4,5,7,8], optimization for different devices [11], or accessibility optimization [13].…”