Easy Usability: Fitt’s Law

One of the easiest things that you could do to enhance the usability of your site is to properly use the <label /> HTML Tag. Consider the following…

Example Forms

Not so usable form.

Now, compare that with this form:

Target Area Comparison

If you notice, the selections in the first form can only be ticked off by clicking on the actual checkbox, while in the second form the user can click anywhere (on the checkbox itself or on the textual label).

Fitts’ Law

A model that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target.

What this means in our two form example is that because the target area is larger in the second form, it is thus easier to use and enhances the user experience because the user’s task is made easier (pointing to and clicking the item). This is a simplistic example but it corresponds very strongly to many aspects of UI design — the reason why call to action buttons are so large (amongst other properties) is precisely this law.

Code

Really all that’s required to make your forms more usable is to wrap inputs with their labels:

<label for="love">
  <input id="love" type="checkbox"> I love UX Design.</input>
</label>