Introduction
Forms are ubiquitous and a major way in which websites can become interactive. But they tend to receive little design attention – and much of that is spent arguing about details. This talk looks at one of those details: the question of where labels should be placed.
Labels above fields?
In a much-quoted 2006 article [1], Mario Penzo reported on some eye-tracking experiments that explored the question of where to place the labels compared to the fields on forms. His conclusion was that placing the labels immediately above the fields reduced the ‘saccades’ (the jumps that the eyes make when reading) and therefore made filling in the form quicker for users.
His second-best option was to place the labels to the left of the fields and right-justify them: this also reduces the saccades, but not as much as placing the labels above the fields. Penzo clearly states: “our ad-hoc test setup didn’t resemble real-world conditions”. But that has not prevented many web designers taking his conclusions as ‘the right way to do labels’. So what real-world conditions did he ignore?
Labels are not just letters
Labels on fields are not arbitrary collections of letters. They are actually questions, albeit often very abbreviated ones. The user’s work in dealing with the form does include the mechanical processes of reading, such as saccades and fixations (the time the eyes dwell on the text to absorb the patterns made by the letters). But it also includes:
- extracting meaning from what is read
- finding an answer to the question
- deciding whether to answer the question
- placing the answer on the form.
If understanding the question is easy, saccade time may be important
Penzo’s labels included these: “Your address” “Your city” “Company you work for” “Number of colleagues”. These are all rather straightforward questions, all of which pose few problems at any stage of the work of dealing with the form. Therefore, it is possible to argue that the saccade time does have an effect in the overall work.
Many forms contain a mixture of easy and hard questions
Penzo’s labels do not make a complete form. It would be usual to see name as well as address, for example. And these contact details often include email address – a detail that many users are reluctant to reveal until they know why it is being asked for. So the short ’email address’ label often requires amplification with a longer explanation.
The consequence of this, and similar real-world problems, is that shorter labels become interspersed with longer ones. If the labels are right-justified, then a mixture of long and short will produce a ragged left margin that is harder to read as there is no predictable spot for the eyes to jump back to – a compromise, therefore, between speed and length of saccade and accuracy of fixation.
This would tend to support Penzo’s recommendation: place the labels above the fields. But before accepting that recommendation, we need to think about how users also use labels in other ways.
Users scan labels to judge the form
As well as using the labels as prompts for answering the questions, users may also look at them for other reasons:
- at the start, to judge the total effort required by the form
- during the completion process, to skip down to the next required field.
Both of these are difficult to do if the labels are above the fields.
Conclusion
Before accepting any simple design recommendation, we need to think about whether it applies to the users, task, and specific design that we are working on. This applies particularly to the placement of labels in forms, where reading time is only one of the influences.
Acknowledgements: The author wishes to thank Ian Roddis, Head of Online Services at The Open University for permission to use eye-tracking data.
References
[1] Penzo, M Label Placement in Forms http://www.uxmatters.com/MT/archives/000107.php, 2006
[2] Jarrett, C., and Gaffney, G. Forms that work: Designing web forms for usability. Morgan Kaufmann/Elsevier, 2008
#forms #formsthatwork