New useful tips for internet-forms design
27 December 2006 | admin | Design
I came across a very interesting article today - Label Placement in Forms. Authors share the results of a survey they conducted using equipment for tracking eye movements. During the experiment users were asked to fill in 4 forms with the same boxes but different label placement (left alignment, right alignment, label above the box and bold label above the box).
Test 1. Left alignment
If the intervals between labels and boxes are too big it increases time user spends on dealing with the form.In this model of label placement a single spasmodic eye movement from label to the box was registered. It means, that users easily perceived a tie between the label and the box. But this movement lasted an average 500 msec, which is quite a lot and means considerable cognitive load.
Test 2. Right alignment
The number of eye fixations, if compared to the left alignment reduced almost by half, which in its turn meant a considerable decrease of cognitive load, necessary to fill this form out.
There was barely any spasmodic eye movements, if any, and they were very short, from 170 to 240 msec.
Test 3. A label above the box.
As you can see, users perceived both the label and the box at first sight (without spasmodic movements).It was also noticed that if the label is very well known to users (First Name, Last name, for instance) they didn’t separate it from the box and didn’t fix their eyes on it – they perceived it together with the box.
Test 4. Bold label above the box.
The author decided to check the variant with a bold label over the box as well. The duration of spasmodic movements proved to be almost 60 % higher in comparison with normal labels (80 msec against 50 msec). The author concluded that it might be a result of a visual conflict between bold label and box frame. Conclusions
Authors of the survey come to the following conclusions:
• Label position. The best place is above the box. The reason for that is that user doesn’t have to look at the label and the box separately. The authors recommend to be especially careful about visual division of a current input box and a label for the next box.
• Label alignment. Left alignment demands a great cognitive load from the user and consequently increases time, spent on dealing with the form. If you decided to put the label next to the box it’s better to align it to the right.
• Bold labels. Reading of bold labels is slightly more difficult than of normal ones. If you decided to use bold, it might make sense to lighten the box frames
• Dropdown lists. A dropdown list attracts the most attention no matter where in form it is located. It might make sense to put them after all other important boxes not to distract the user from work.
• Comboboxes labels. To make sure that users know which information you expect to get from them it’s better to add it to combobox options and make it default.
- Internet forms design (Luke Wroblewski).
- Introduction into usability testing with the help of eye movement tracking equipment (Matteo Penzo)