Usable: Form Design

Posted Friday, December 18th, 2009 by Heather, in Usability

I know it’s the holidays, and you all are probably only half-focused on your work. So I’m going to keep this month’s Usable short and sweet. I found a really great study on “Label Placement in Forms” by Matt Penzo at UXMatters.com that I wanted to bring to your attention (the idea for which came from Luke Wroblewski’s “Web Application Form Design.”)

Penzo and his colleagues attempted to replicate Wroblewski’s set-up. In doing so, they tested expert users (designers, programmers & usability testers) as well as novice users (the specific numbers of users not provided). They had the test subjects fill out multiple forms and they recorded the “gaze-path” data from the start of movement [assumed] until the submit button was clicked.

They had four scenarios:

1. Left aligned labels to the left of the input fields
2. Right aligned labels to the left of the input fields
3. Left aligned labels above the input fields
4. Bold labels above input fields

The image below shows the mapping of the eye movement for scenario #3—left aligned labels above the input fields.

The findings were much to be expected:
(FYI: A saccade is a fast movement of an eye, head or other part of an animal’s body or device. Saccades are quick, simultaneous movements of both eyes in the same direction.[Wikipedia])

• Left aligned labels had the slowest saccade time: 500ms for all users
• Right aligned labels had faster saccades times: 170ms – expert; 240ms – novice
• Top aligned labels had the fastest saccade times: 50ms – all users [assumed]

It’s important to understand this because the less time a user spends having to visually comprehend what they’re doing, the faster and easier it will be for them to complete the form. Making it more likely for a user to complete the form—crucial for website owners trying to get a lead or complete a sale.

But what about the bold labels atop the input fields? It turns out bold labels left-aligned above input fields had a 80ms saccade time. Yes, bolding the fields increased the saccade time by almost sixty percent. Penzo suggest it is because “there was more visual confusion between the bold text and the heavy adjacent borders of the input fields.”

Before you run out to remove the bold formatting from all of your forms consider this: In the study, the test form had no other visual elements on the page to distract a user. Similarly, there were no required/optional fields to the form. Bold formatting is a conventional way to denote a required field. Note: I did not say the BEST way, just a common way. It’s possible that a form with required/optional fields would have evened the playing field (and saccade time) between plain vs. bold fields. This would be a great thing to test. Would a 30ms difference affect cognition or conversion?

Penzo also concludes, “you might want to style the input fields not to have heavy borders.” It wasn’t just the bold labels that visually hindered users; it was the bold label in conjunction with the heavily bordered field. Don’t assume that changing one element of the problem will instantly create a positive change. Test it.

I definitely recommend reading Penzo’s full article as there is an additional interesting bit about the drop down boxes used in forms and eye tracking.

Sources:

Penzo, Matteo. “Label Placement in Forms.” UXMatters.com. 12 Jul 2006.
Wroblewski, Luke. “Web Application Form Design.” Web Form Design: Filling in the Blanks. Rosenfield Media. 2008. LukeW.com.