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”, 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 is willing to put into the form, and
- can be requested using a label of one or two words.
- 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.
- 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.
- If the form is long but only asks for simple data, opt for right-aligned labels placed to the left of the field.
- 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.
This article first appeared in Usability News
#forms #formsthatwork