Label placement with Web form elements

2006-08-06 03:56:00

Amy Hoy's talk at OSCON 2006 reminded me of a really nice study I saw on UXMatters on that provides some emperical data to back up the 'common wisdom' for placement of labels for elements in Web forms.

The study uses eye-tracking data to measure how much eye movement and cognitive processing time was needed for three different ways of placing labels relative to their form elements.

From best to worst:

  1. Left-aligned labels placed above the form element. "Placing a label right over its input field permitted users to capture both elements with a single eye movement."
  2. Right-aligned labels placed to the left of the form element. "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."
  3. Left-aligned labels placed to the left of the form element. "Excessive distances between some labels and their input fields forced users unnecessarily to take more time to interact visually with the form."

So, this is some objective data that shows that putting labels in a left-aligned position right above their elements really does allow users to process the form the most efficiently.

Of course design is all about compromise, so you should also consider whether that's going to make your form prohibitively long vertically. Design, design -- always with the tradeoff thing.


This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.


Previous posts

All previous posts ยป

This blog is a GeddyJS application.