Make click areas bigger for better usability

Quick usability tip for y’all:

Make your click areas bigger.

Click areas are the clickable (or tappable) parts of links and buttons in your app. And they’re probably making your users work harder than they need to.

What do I mean? Let’s look at an example. Here’s the navigation for Rdio’s web app:

Medium confirm email

Rdio’s navigation kinda drives me nuts. Why? Because of the click areas.

Medium confirm email

When the click areas are highlighted, we can see the size of the links are as big as the length of the text. There isn’t a problem for longer text, but look at the Jazz playlist above. That click area is tiny. It makes the playlist unnecessarily difficult to click on.

Why are small click areas a problem?

Fixing your click areas

The good news is most click area problems are simple fixes. Take a look at the navigation for Lab Door:

LabDoor navigation

The design would lead you to believe that the white space area in that white bar is clickable for each link. Now let’s highlight the click areas.

LabDoor navigation with highlighted click areas

When we highlight the click areas, we can see the click areas barely extend past the link text. It’s very easy for someone to accidentally click in the whitespace around the link rather than on the link they wanted to click on. By expanding the click area to fill the white space surrounding each link, we can improve the usability of the navigation.

LabDoor navigation with improved click areas

Design for users that don’t have your full attention and you’ll improve the experience for all users.

Testing your own app

To highlight links like the previous examples, open up the Developer Tools (or Web Inspector) panel on your site and add the following CSS rule:

a {
  background-color: rgba(255,0,0,0.25) !important

Or if you want a quicker way, I’ve whipped up a little bookmarklet that highlights all your links for you. Just drag this link into your bookmarks bar and test away.

Click Area Checker

The bookmarklet only highlights links in red. If you’re interested in making it better, feel free to fork it on Github.