Radio Buttons and Checkboxes, Giving Me the Fitts

Remember Fitts’ Law? That update didn’t go into too much detail, so it might be a little difficult to understand how to apply it. Well, it turns out that radio button and checkboxes are excellent examples of how to apply Fitts’ Law. But, before we dive into those controls, let’s summarize Fitts’ Law.

Fitts’ Law Revisited

Fitts’ Law, while a mathematics formula, is also a general principle. It can be applied to all kinds of things outside of the scope of interface design. In fact, the “law” arose out of a naval officer’s observation of hitting targets. Basically, when something is small, it’s hard to hit. When something is far away, it’s hard to hit. When something is near many other targets, it’s hard to hit. The opposite is also true. Things that are close, large and alone are easy to hit.

Radio Buttons and Checkboxes

Now, the intention behind radio buttons and checkboxes is to add a visual control to text. Where a button is a big rectangle (large enough to hit) and often surrounded by white space (if implemented well), a radio/check is only a small decoration next to text. When activating a radio/check with a click or a touch, the text is intended to be part of the interactive element. This makes the target larger and easier to hit.

Unfortunately, the text or label is often left out of the target area during development. This is especially common in web development when developers have to explicitly add “label for=” to make this work. But, it’s important to do this. As designers, we often use these controls and take this distinction for granted; we expect the label to be part of the target without explicitly identifying it as such. As developers, we often build to spec an overlook this small, but necessary interaction. Frequently, radio/check controls become detached from their labels leaving the user on the losing end of Fitts’ Law. Making sure that the label is there and part of the interactive control is better for the user.