Eyetracking Web Forms

by July 14, 2006

Design research is quickly becoming the theme of the month here on Functioning Form. Following my discussions with Steve Portigal about ethnography and an analysis of granular bucket testing, Matteo Penzo has published an informative article on UXmatters that analyzes my Web Application Form Design article with eyetracking software.

Overall Matteo’s results mapped very closely to the pros and cons of the different form layouts I described, but there were a few notable differences.

For example, the eyetracking data indicated that top or right aligned input fields resulted a lower number of eye fixations and reduced completion times than left aligned labels. Which maps well to my findings in the usability lab and on live site testing. But because the forms tested in the eyetracking study were short (only four input fields) and all of them were required, a few common scenarios may have been left untested.

When they first encounter an unfamiliar form, users often scan the input field labels to determine if: they’ve found the right form and to see if they have access to the information required to complete the form. In this scenario, right aligned input labels can reduce the effectiveness of scanning what’s required to complete a form because of the left rag of the text. This is more of an issue in long forms vs. short ones and a good example of how context can determine which form layout is right for your application.

Applications with lots of different forms may opt for left aligned input fields to enable content scanning at the cost of slightly longer completion times. Likewise, long forms with many optional input fields may utilize left-aligned labels to enable users to quickly find the few input fields they actually need to fill in. Editing just one or two fields in a form is a frequent use case and an easily scannable list of input labels can help users quickly find a specific input.

The other key distinction between my cumulative findings and Matteo’s eyetracking analysis was the effectiveness of bold labels in vertically aligned forms. Here again, context is key. When there are more visual elements on a Web page and/or a form is long or contains lots of different inputs (radio buttons, checkboxes, multiple drop downs), the bold labels work well to separate the form fields. This is especially true with groups of input fields like multiple checkboxes or multiple radio buttons.

In Matteo’s study the bold labels actually began to compete with the form fields for visual attention because they have a more equal visual weight. The normal (non-bold) font contrasted more with the input fields thereby providing a notable distinction between label and field. Whether you use bold labels or not, the key is to provide enough visual contrast between input label and input field to enable scannability and distinction.