Two related eyetracking studies in the excellent UXMatters magazine examined alternative approaches to the specific design of online forms. In general, three issues were considered:

— the position of the input field labels
— weight of the input label text
— the effect of dropdown menus in connection with the input field

Although somewhat informal, the studies and their results are very straightforward and intuitive. Design approaches were deemed to be more effective if they were easier and quicker for users to understand and complete. Both studies are worth a full read, but here are a couple of my takeaways:

— Dropdowns increased the cognitive clutter of the form field and some users needed more time and visual “trips” between the label, the field, and the dropdown to understand what was happening. In other words: use dropdowns sparingly if your goal is a more intuitive and faster task completion.

— Designs performed better when the field labels were closer to the fields themselves. Labels that were left-justified against the input field were easier to read and understand because, I suppose, there was less distance between the label the input field where you begin typing. I dislike the appearance of this design on aesthetic grounds, but it seems to be a more effective and streamlined approach. Labels above the fields performed even better.

— Word of the day: “saccade” These are quick movements of both eyes that are one of the key units of measurement in eyetracking. Longer saccades — i.e. measured in time or in pixels across the screen — can indicate design problems.

The initial study focused on search boxes. A more recent follow-up dealt with form field design in general.

This entry was posted on Wednesday, July 12th, 2006 at 4:01 pm and is filed under User Interface Design, Interesting Studies.