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:
Rdio’s navigation kinda drives me nuts. Why? Because of the click areas.
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?
- Clicking on small things is more work. Smaller click areas require precise mouse movements. Users shouldn’t need the mouse skills of a sniper to use basic functionality of your app.
- The design makes it look clickable. If the navigation is in a row or a column, there’s white space around each item. The click area should take up the space surrounding each item.
- Click feedback is easy to miss. Not everyone waits for the cursor to change before they click on something. Users don’t pay attention to the details when their attention is somewhere else. Distracted, frustrated, busy, or bored. In my own user testing, I’ve seen multiple times when a user thought they clicked on a link and wondered why nothing was happening.
Fixing your click areas
The good news is most click area problems are simple fixes. Take a look at the navigation for Lab Door:
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.
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.
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.
The bookmarklet only highlights links in red. If you’re interested in making it better, feel free to fork it on Github.