Fixated on Web Forms

When you’re composing a web form, do you place your labels to the left of the fields, or above? And are your labels left- or right-justified? Bold face? Answer quickly!

For many web developers, label positioning is mostly just a matter of personal taste (or in rare occurrences, specified by a company UI standard). I’ve generally always placed my labels to the left, because it just seems aesthetically pleasing, not to mention space-efficient.

However, a study by Matteo Penzo for UXmatters demonstrates quite ably that if you place each label above the field, and make the field left-justified and not bold, then your forms will be significantly more usable as a result. (The article claims that simply making the labels bold resulted in a 60% increase in the time it took for the user to shift their attention from the label to the input field).

Another interesting conclusion they reached was that drop-down list boxes should be used with care, because (paradoxically, perhaps) they’re so eye-catching. So if they’re used for not-especially-important data, their prominence on the page is disproportionate. Result: measurably reduced usability.

It’s difficult to argue with Matteo’s findings, because he’s used an established, scientific technique called eyetracking, to measure usability by tracking eye movements across a screen or web page.

The technique distinguishes between saccades – rapid movements of the eye, transitioning from one locus of interest to the next – and fixations, where the eye has reached its destination (so to speak) and is now staring, presumably in a slightly vacant fashion, at an area of “interest” such as a banner ad.

According to this article on eyetracking, analyzing the angles between saccades or the distance between two fixations can reveal a lot of information about a user’s thoughts while he/she interacts with a UI. So as you can imagine, eyetracking proves to be most revealing when it’s used to quantitavely measure the usability of a UI.

You can also find lots of interesting news and studies on eyetracking at Eyetrack III.

About the Author

Matt Stephens is a senior architect, programmer and project leader based in Central London. He co-wrote Agile Development with ICONIX Process, Extreme Programming Refactored, and Use Case Driven Object Modeling with UML - Theory and Practice.