✎ Technique: Hit areas

Interactive elements should not be difficult to select or activate when using a mouse or a touchscreen.

Generous sizing and spacing is important, and their implied visual “hit area” should correspond to the control’s active area.

Examples

In these examples, page navigation is provided through “prev” and “next” links. The two controls are separated by 0.5em, ensuring that it’s not easy to accidentally activate the wrong control when the user is interacting by touch or user’s mouse hand is shaky.

Here's how they look:

✓ Good example

For the “prev” control, display: block and padding is applied to the <a> element. As you can see by focusing this control, the entire visual box is clickable: Everything that looks interactive is interactive.

The “next” control has been styled differently. The non-interactive <li> element provides the blue background and the padding. By focusing the link inside it, you can see that the focus outline fits tightly around the link text—a much reduced and deceptively small hit area compared to the “prev” example. Targeting this control could prove difficult.