Caroline's Corner: Label Placement in Forms

For ages, I've longed to do some eyetracking experiments on how users look at forms. And recently, I've been delighted to see the next best thing: excellent work by Matteo Penzo and his team.

EXPERIENCED USERS LOOK FOR THE SEARCH BOX TO TYPE INTO
Matteo's first article, Evaluating the Usability of Search Forms Using Eyetracking: A Practical Approach, reported on experiments where they tracked the eye movements of users interacting with search forms. Matteo found that:

'Form labels help rookie and intermediate users, who look for such labels when trying to locate a site’s search interface. These users expect input field labels to be at the left of the search form. Pro users don’t need and won’t use these labels, which are simply invisible to them.'

His point about form labels confirmed something
that I'd suspected for years, and happened again recently in a usability test. The prototype site that I was testing had a link to search instead of a search box, and user after user (all 'pro users' in Matteo's classification) simply didn't find it when they wanted it. They were looking for 'the box for me to type into' and the search link didn't do it for them. It wasn't a major usability failure because, as pro users, they all scanned around the page until they tracked it down. But it definitely caused them a break in the flow of the task.

DROP-DOWNS ARE EYE CATCHING
Matteo found that drop-downs tend to grab users' attention: 'Drop-down lists are very eye catching form elements. You should always consider very carefully whether you should include a drop-down list in a search form. Use a drop-down list only if no alternative element would serve its purpose as well. Maintain adequate distance between the drop-down list and other elements in the search form. In general, if you want to create a simple search form that is easy to use for even novice users, avoid using drop-down lists in the form, because they tend to cognitively overload users.'

It's interesting to find another argument that urges caution in the use of drop-downs. A few years ago, I co-authored an article on whether to use a drop-down on forms in general. At that time, drop-downs were widely touted as the simplest method of input for users, and were used somewhat indiscriminately. Since then, web form designers have become somewhat more skilled and thoughtful and it's been a while since I've seen a real drop-down horror story (although I'm always keen to add to my library of examples).

RESEARCH ON THE PLACEMENT OF LABELS
Matteo's second article, Label Placement in Forms, looked at a made-up form with just four fields. He tested a form with the fields: "Your address", "Your city", "Company you work for" and "Number of colleagues", in both cases placing the labels to the left of the fields and comparing the effects of left-aligning and right-aligning the labels. Then he tried placing the labels above the fields, this time on a form that asked for "Name", "Surname", "Age" and "City" and tested two conditions: ordinary text for the labels and bold. He found that placing the labels above the fields reduced the "saccade time", the time taken for the eyes to move from the label to the input box and vice versa.

SHOULD WE ACCEPT THE CONCLUSIONS?
Now, I think all this is very interesting and I'm glad that Matteo is working on it. But I'm a touch cautious about applying all his conclusions without thinking them through a bit more. For example, he advocates placing labels above the fields because that condition was the quickest - but as 'Steve' points out in his comment on the article, the labels are slightly easier to understand for the form where the labels were placed above the fields.

Then, as Luke Wroblewski also points out, the (necessarily) stripped-down forms used in these experiments eliminate some of the tasks that users have to undertake with forms. Some examples: deciding whether to fill it in at all, or turning away from the form to look for data elsewhere.

And placing labels above the fields doesn't work for every form. It adds visual length - and that in itself might be enough to turn users away from completing a form. And if the labels are just one or two words - that's fine, they'll fit in quite neatly above the fields. But what if the labels need to be longer? Just one example: sometimes it's necessary to use a fully-formed question in order to justify the request for data to the user.

MY CURRENT RECOMMENDATIONS
I applaud Matteo for working in this area and I hope he continues to do it and to publish. But for the moment, I'm sticking to my current recommendations for placing labels. First of all, a definition: "simple data" is data that:

- the user has conveniently in their head,
- the user willing to put into the form, and
- can be requested using a label of one or two words.

1. If the form asks only for simple data and is short, opt for right-aligned labels placed to the left of the field or left-aligned labels placed above the fields.

2. Left-aligned labels placed above the fields may be more convenient if your form needs to be translated, as the variable space can be helpful for allowing additional space for the expansion you'll get when you translate from English to many other languages.

3. If the form is long but only asks for simple data, opt for right-aligned labels placed to the left of the field.

4. If the form asks for anything other than simple data, or you're not sure whether users will consider the data to be simple or not, then opt for left-aligned labels placed to the left of the field.

And let's see what Matteo's next round of experiments tells us. Meanwhile, I urge you to read his articles and the interesting discussions that follow them.

If you have any comments or suggestions about this article then please contact Caroline at: Caroline.Jarrett@Effortmark.co.uk

Caroline Jarrett is a usability consultant specialising in forms, questionnaires and data capture.

© 2006 Caroline Jarrett, all rights reserved.

Associated Link: Effortmark

All change at the top for System Concepts
Source: System Concepts Ltd, 3 July 2009
 
Leslie Fountain has been promoted to joint Managing Director of leading usability consultancy System Concepts.

Life in UCD immortalised in fiction: you couldn't make it up
Source: UN, 2 July 2009
 
Sarah Herman's fictitious book on life in a user-centred design company has hit the shelves and The Guardian's book pages...

Interfaces Magazine - Issue 79: The Education Issue
Source: Interaction Group, 1 July 2009
 
The latest issue of Interfaces is now available as a free download from the Interaction Website.

Two new Behavioural research Tools from Noldus
Source: UN, 30 June 2009
 
Tool updates make on-site behavioural data collection easier.

Cell Phones that Listen and Learn
Source: MIT Technology Review, 29 June 2009
 
New software tracks a user's behavior by monitoring everyday sounds.

Top Six Don’ts for Usability Testing
Source: FutureNow Inc., 27 June 2009
 
Six tips for creating quality usability tests to ensure useful feedback from testers.

Usability: ‘Lovely software. But I can’t work it’
Source: FT.com, 26 June 2009
 
In a recent survey by Global Graphics, 77 per cent of office workers estimate they lose up to one hour a week because business software is difficult to use.

And what do you do?
Source: Dexo Design, 25 June 2009
 
How do you describe your job role? Here are the results of a recent 'Preferred UX/UI Title' Poll.

Most Doctors cite Usability as critical to Electronic Health Record Adoption
Source: TMCNet, 24 June 2009
 
It's all about 'meaningful use'.

Glossy monitors look good but can hurt
Source: QUT, 23 June 2009
 
A new advisory cites research which suggests high gloss monitors make users sit awkwardly.