Thursday, November 20, 2008

Best Practice for Web Forms - Label and Field Alignment and Eye-tracking Data

Web Forms Best Practices for Label and Field Alignment

The following is quoted from slide 26 of Best Practices for Form Design Based on Eye-tracking Data from a July 2006 study by Matteo Penzo.

Left-aligned labels

* Easily associated labels with the proper input fields * Excessive distances between label inputs forces users to take more time

Right-aligned labels

* Reduced overall number of fixations by nearly half * Form completion times were cut nearly in half

Top-aligned labels

* Permitted users to capture both labels & inputs with a single eye movement * Fastest completion times So the moral of that study to me is that top aligned is best for quick completion times, which would seem most of the time to be the goal. However, LukeW's three best practices are: * For reduced completion times & familiar data input: top-aligned (labels) * When vertical screen space is a constraint: right-aligned (labels) * For unfamiliar, or advanced data entry: left-aligned (labels)

No comments: