Eye tracking study - Forms and label placement / by Cory

eyetrack.jpgUXmatters performed an eye tracking study on forms and label placement. The results conclude that non-bold text above the field and left aligned pose the least amount of eye work, hence a faster and easier user experience. Drop-downs should only be used when necessary and placed below the more important fields. Placing the label as the default option in the drop-down performed better than a label above the drop-down menu. Here are the conclusion bullet points from the study:

  • Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field. Be careful to visually separate the label for the next input field from the previous input field.
  • Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.
  • Bold labels—Reading bold labels is a little bit more difficult for users, so it’s preferable to use plain text labels. However, when using bold labels, you might want to style the input fields not to have heavy borders.
  • Drop-down list boxes—Use them with care, because they’re so eye-catching. Either use them for important data or, when using them for less important data, place them well below more important input fields.
  • Label placement for drop-down list boxes—To ensure users are immediately aware of what you’re asking for, instead of using a separate label, make the default value for a drop-down list box the label. This will work for very long lists of items, because a user already has the purpose of the input field in mind before the default value disappears.