I’m always excited to read or hear information that challenges conventional wisdom, so I really liked this article that arrived in my RSS reader this morning: Label Placement in Forms. In it, results and recommendations of a web form eyetracking study are given.
Eyetracking records the movements of users’ eyes as they use a website, giving designers a clear picture of where people focus their attention, and for how long. It all has to do with something called a saccade – the small, rapid movements our eyes are continuously making. If the duration of a saccade is long (over 500 milliseconds), it indicates that more mental processing is required. Since the motto of good web designers is “Don’t Make Me Think
The surprising results of this study have to do with what’s usually an afterthought on most websites: the position of form labels. Most of the time you’ll see a label to the left of a text box, sometimes above it. It turns out that changing the location makes a huge impact on the length of saccades and the amount of thinking needed.
To read the results, you just need to know that each eye movement is numbered in order, connected to the following one with a line, and is bigger or smaller depending on its length.
Notice the sharp decrease in the number of saccades and their durations between the first example and the following two. This means more information is being obtained in smaller amounts of time, which translates into increased ease-of-use and faster completion times.
This eyetracking stuff has been around for a few years now. It’s really cool, and gives us usability data that’s almost impossible to get otherwise. It’s still pretty expensive though, since special equipment is necessary to properly record the eye movements. I’m guessing this will continue to get better and cheaper over time, hopefully soon. I’d just love to be able to get this same data by using a built-in iSight camera or a cheap webcam mounted above a monitor.