Have you ever been browsing a web site on your smart phone or tablet and found that on some sites, the links are so tiny and so tightly packed, that it’s near impossible to click the right one?

I have definitely been there and it’s equally frustrating each time. As the use of smart phones and tablets increases, so does the importance of having big enough target areas to interact with. But it’s not only important for mobile browsing. The truth is that it benefits desktop users as well.

Fitts’s Law

Fitts’s Law is a classic rule of thumb in Interaction Design. The law can be expressed in a fairly complex mathematical way but in a nutshell it states that the larger and closer a target is, the easier and faster it is to click it.


It’s not exactly Rocket Science, but still it highlights the importance of having, not only big enough targets, but also to position them intelligently.

If you want to know more about Fitts’s Law there’s an excellent explanation over at Particle Tree.

Designing for Touch

For touch devices, such as smart phones and tablets, a big enough touch target is even more important than on desktop. While a mouse pointer is a precision instrument with a click area of just 1 x 1 pixel, a human finger is more of a sledge hammer. The avarage size of the pad of a human index finger is 1.6 to 2 cm which translates to about 45-57 pixels on a screen.

You’ve probably experienced the frustration yourself when trying to click small links that are tightly packed on a smart phone. It can be really hard to hit the right target and that’s not the experience you want people to have with your web site.

Image credit: sochacki.info

Recommended touch target sizes

Apple iOS Human Interface Guidelines state that a touch target should be at least 44 x 44 points large. (The reason they’re using points instead of pixels is that points can be used for both standard and retina displays).

Microsoft’s Windows Phone UI Design and Interaction Guide suggest that the size of the touch target should be 34 pixels with an absolute minimum of 26 pixel. And Nokia’s Developer Guidelines state that the touch target should be at least 1 x 1 cm.

I actually I think that Nokia has the best guidelines since it states its minimum dimensions in cm. I mean 44 pixels can be very different on different screens and devices. Just think about the iPad and the iPad Mini. They both have the same amount of pixels but a click area of 44×44 pixels will be a lot smaller on the iPad Mini.

What you don’t have in size you can make up in space

Another interesting aspect of this is that if you absolutely do need to have relatively small touch targets you can partly compensate that by increasing the space between the targets. By doing that you limit the chance of missed targets.

The rule is: The smaller the target, the bigger the gap.

If you absolutely need small click targets you can save the day by increasing the space between them

In Practice

Enough already, I think you get why it’s important to have big enough click/touch targets. The question is, how is it done in practice?

The first thing to recognize is that the clickable area could be well outside the visible area of the object.

Regular links

For links in a list, the easiest way to increase the clickable area, is to increase the padding. Instead of having a padding on the list-item you should have it on the link itself. In this example I simply add a 10 pixel padding to a link. Watch how that dramatically increases its clickable area (The faint red background indicates the clickable area).

li a {
  padding: 10px;
}

Checkboxes and Radiobuttons

For checkboxes and radiobuttons, which are often really small, the trick is to put them inside a label and add a generous padding to it. By connecting the checkbox and the label via the id and the for attributes, the entire area of the label is clickable and toggles the checkbox.

HTML

<label for="foo">
  <input type="checkbox" name="foo" id="foo" value="bar" />
  A padded checkbox
</label>

CSS

label {
  display: block
  padding: 10px;
}

Without this special treatment the click area is just the visible part of the checkbox while in the enhanced version the entire label is clickable. In this case this little tweak resulted in an over 50 times larger click area.

Summary

In this new brave world of multi-device experiences it’s more important than ever to cater for touch as well as mouse input. An easy way to do this is to provide big enough click targets. It’ll benefit not just user of touch devices but also desktop users.

This article shows a few simple techniques to do this. Of course there’s also other elements that these could be applied to but I leave it up to you to do that.

References

Online

Note: This article is a rewrite of the article Make Click Areas Comfortably Large that I’ve previously published on Code Crafting Blueprints.