Among the minor tweaks we introduced with the new Basecamp project switcher are some larger link targets at the top of the screen. Since then I’ve been paying extra attention to link target size. Here are a couple examples of generous link targets for inspiration.
Threadless has featured large link targets on its main navigation for a long time. Here’s what the nav looks like:
As a user, when you glance at this nav, you might imagine the specific pixel areas that you need to target like this:
But when you move your mouse toward the nav, you’ll be pleased to discover the actual link targets are much larger:
The end result is a feeling of comfort. It’s just really easy to click the links. It feels like the links are working with you instead of against you.
Flor does the same thing with their links. Here’s the navigation:
Here are the targets you might aim for:
And here are the actual targets:
You might have noticed both of these sites use images for their navigation links. The same effect is easy to achieve with HTML links. Just use padding where you might have had whitespace.
Normally you might have white space between your links like this:
<div class="nav"> <a href=""http://www.37signals.com/svn/posts/http://www.37signals.com/svn/posts/>First link</a> <a href="">Second link</a> </div>
Instead, use clickable padding on the anchors to create space between them:
<style> div.nav a { padding: 5px; } </style> <div class="nav"> <a href=""http://www.37signals.com/svn/posts/http://www.37signals.com/svn/posts/>First link</a><a href="">Second link</a> </div> Note how the anchors touch each other with no white space in the second example.
We do this in quite a few places in our apps and think it’s one of those small things that makes a big difference.