During the process of building the forms that we would test, we tried to respect Luke’s suggestions regarding the relationship between label placement and formatting and the type of form content—well-known data versus unfamiliar data that requires thought. Thus, you’ll find both types of data on each of the pages that we tested. To add some real-world flavor, we paired inputs fields for well-known data with other slightly more difficult form elements such as drop-down list boxes. Moreover, doing so helped us to confirm our previous findings about forms.
Our test subjects comprised both expert users—primarily designers and programmers, but also some usability experts—and novice users. We requested users to complete all of the forms that we presented to them. Our gaze-path recordings were complete once a user clicked the submit button.
Test 1: Left-Aligned Labels to the LefDuring the process of Input Fields
This was the first case we tested, because it’s the most popular format in use on the Web. Not surprisingly, both classes of users performed very well in associating the label with the proper input field.
For all users, we found that there was a single saccade between the label and the input field, which means that users easily perceived the connection between them. However, a medium saccade duration of 500ms (milliseconds) was typical, which is quite long, showing that users were experiencing heavy cognitive loading.
The whitespace between labels and their input fields worked well in visually guiding the users’ gaze path toward the input fields. In fact, there were no fixations over whitespace. However, excessive distances between some labels and their input fields forced users unnecessarily to take more time to interact visually with the form. Figure 1 shows the eyetracking data for this test.
Since we included a drop-down list box in the form, we also had the opportunity to confirm our previous findings about them: that they are the most eye-catching form elements. When facing a simple form on a white page, the first fixation of all users was on the drop-down list box. This form element clearly conveys its meaning and how a user must interact with it, giving it a higher importance in the user’s mind. Moreover, in our first test form, the item selected in the drop-down list showed just a number, with no reiteration of the meaning the label communicated. We found that most test subjects, including the expert users, were forced to recheck the label to remind themselves of the value of the numbers the drop-down list contained.
Test 2: Right-Aligned Labels to the Left of Input Fields
While the meaning of the labels and their placement to the left of the input fields was exactly as in the previous test, the right alignment of the labels reduced the overall number of fixations by nearly half, showing that this layout greatly reduced the cognitive load required for users to complete the task. Also, the form completion times were cut nearly in half.
There was almost no saccadic activity between the labels and their corresponding input fields, both because users very quickly understood the meaning of the input fields and because of the ease of the lateral eye movement.
While we had 500ms saccades with the left-aligned labels, with right-aligned labels, the saccade times between the labels and the input fields were only about 170ms for expert users and 240ms for novice users.
My initial concern with this particular form design was that it would be difficult for users to make the transition between typing their data into an input field and moving their eyes to the beginning of the next label, because its position was unpredictable. Well, I couldn’t have been more wrong. Their diagonal eye movements were very quick, and there was no need for them to reposition the fovea over the initial word, as the eyetracking data in Figure 2 shows.
Most users—both expert and novice—needed to recheck the input field’s corresponding label in this case, too—though the relative brevity of the saccades made this task slightly simpler than in the previous test.