The dreaded webform

on

Principles and best practice of web forms

Web forms appear on many web pages, from the humble log in form, to the more complex shopping cart application. In many cases the form is the Achilles heel of a websites usability. If the website is designed to guide the user to take an action, often the desired action is filling out the provided form. This places the web form at the crux of utility of the web page. If the form does not get completed, the website has essentially failed in its task. In fact it could be that the poor usability of the web form may be the last interaction the user has with the website, and is how the user will remember the website. With this in mind several best practices on how to improve the completion rate of a web form will be explored.

Remove all non-essential information

It is very tempting to want to gather as much information as possible from the web form. It makes sense that every extra piece can be used to make a better profile, or value added feature. This should be avoided, because as Jakob Nielsen notes a form can cause feelings of information overload. Nielsen suggests that all non essential information be taken out of the form (Nielsen, 2005). This is similar to the visual overload that a site can suffer from if the elements are not carefully considered. One possible way to establish if the information is needed is to go through the form field by field and ask can the service still be provided without this information. If the answer is yes, remove that field.

Align labels for input fields

There is not a consensus about how the labels for input fields should be positioned in online forms. Industry leaders like Luke Wroblewski, author of Web Form Design (2011), notes that claims that the purpose of the form should dictate the type of labels used. In his book Wroblewski (2011) shows some evidence that users can read top aligned forms faster because they help the eye track down the page. Speed is not always the most important factor in filling out a web form. The most important aspect is that they user fills out the entire form correctly and is not confused by the layout. If a left aligned label, helps the user slowdown and fill out the form correctly in a pleasant manner it is advisable to use this alignment.

Group content

Unless the form is extremely simple, such as a login form, the content should be grouped into related sections. It could be argued that many good login forms group information, by removing checkboxes for “remember me” are in a smaller font. Grouping content encourages the user to complete one portion of the form before moving to the next.

Nielsen recommends that the entire form should be on one page. His argument is based on limiting the number of page loads required to finish the form (Nielsen, 2005), this argument may be considered dated, because of new internet speeds but every page load introduces risk and disorients the user so I believe it is good advice. If more than one page is the best option based on programming and information architecture requirements, keep the user informed about how many pages there are and which page they are on (Wroblewski, 2011).

Respond to users input

Forms should change with user entered information. Unlike paper forms, web forms can hide unneeded options based on previously selected choices. The form can also show how complete the form is and how many more steps the user has to take (Wroblewski, 2011). Another recommended best practice is using browser side code to check the form input fields for correct information, this practice is known as validating the form, (Mifsud, 2011). Catching the errors immediately and suggesting how to solve the error is very helpful to the user. It is also important to validate the form on the server side to ensure that the user has not entered malicious code.

Conclusion

Always keep the user in mind when designing web forms. Do not try and gather as much information as possible rather respect how the user will see the form in terms of their time and personal comfort. Provide a clear path to completion of the form so that the user can quickly judge how long filling out the form will take. It is highly recommended (Wroblewski, 2011 & Mifsud, 2011) that all forms provide a “submission successful” page, or in some other action that makes it apparent that the form has been completed successfully. This can be a follow up “thank you” page or opening the next section of the website.

References

Mifsud, J. (2011, November 8). An Extensive Guide To Web Form Usability. Smashing Magazine. http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability

Miller, S., & Jarrett, C. (2001). Should I use a drop-down? Four steps for choosing form elements on the Web. Forms that work: Designing web forms for usability. Retrieved from http://www.formsthatwork.com/files/Articles/dropdown.pdf

Nielsen, J. (2004, February 2). Keep online surveys short. Jakob Nielsen’s Alertbox. Retrieved from http://www.useit.com/alertbox/20040202.html

Nielsen, J. (2005, September 19). Forms vs. Applications. Jakob Nielsen’s Alertbox. Retrieved from http://www.useit.com/alertbox/forms.html

Nielsen, J. (2005, October 3). Top Ten Web Design Mistakes of 2005. Jakob Nielsen’s Alertbox. Retrieved from http://www.useit.com/alertbox/designmistakes.html

Wroblewski, L. (2011). Web Form Design. Sebastopol: Rosenfeld Media.

Leave a Reply

Your email address will not be published.