When you code a button or other clickable element, you need to also define a comfortable click area. Depending on the context and the design, this can sometimes be a challenge. Let’s look at a few examples in a short case study, so we can see the various ways this can be done.
Some navigation bars that I’ve seen are quite paradoxical in the click area they define. Look at the screen shot below showing the main nav bar for WebProNews:
By glancing at it, you would think it’s pretty straightforward: The clickable area for each button should be the entire button. But it’s not. In that example, only the text is clickable, making the nav buttons seem somewhat awkward when hovering over them.
Of course, I don’t expect too much from a website like that. It’s not a bad site for tech news, but the site is pretty spammy and the design is cluttered and ugly.
Let’s look at a better designed site. This one does something quite different. Here’s the main nav from the Design Pro website:
In the case of Design Pro’s nav, when you look at the items, unlike on WebProNews, you only see text links, not buttons. So you expect the click area to be the text and maybe a few pixels around the text. But they’ve added a little more, which may seem a bit awkward, though much better than what WebProNews does:
Even Dribbble has something similar happening:
When you glance at the secondary nav (“Popular”, “Everyone”, etc), it looks like regular text links. But when you hover over them, the clickable area is larger than just the text:
On Design Pro and Dribbble, maybe the designers had their reasons for doing it this way. Certainly it makes the click area easier to find, and since most visitors on Dribbble are return visitors, then there are obviously not going to be any surprises once they get used to that.
But in many cases, I think it would feel better if the click area was just the text. But maybe that’s just me. Or maybe it would feel nicer if there was a hover effect occurring that was the same size as the clickable area (kind of like what Dribbble does on the main nav, or what I do in the footer on this site).
Sometimes it can be tricky, though. Look at the sidebar links on my own site, under the “Cool Stuff…” section. When you hover over the links, they change color and the bullet appears. But even the area to the right of the text links is “hoverable”, though not clickable.
A similar thing happens on Harry Roberts’ website, in the sidebar:
It looks pretty straightforward: Text links with icons. Should the click area for each link be limited to the area from the leftmost part of the icon to the rightmost part of the text?
But wait — what if it was smaller? Look at the No Starch Press sidebar links:
In this case, even though the click area is not invisibly expanded (like on Design Pro, Dribbble, or CSS Wizardry), it seems less usable when it’s just the text links that are clickable.
I think in the case of vertical navigation, the invisible click area works, but in the Design Pro example, I would personally prefer a smaller click area.
As I already pointed out, in cases like this, if there is a hover area that becomes visible when the user hovers over the element, then it would feel nicer.
Showing a visible hover area is often how this is handled in drop-down menus, like the ones on the Twitter Bootstrap components page:
The Bootstrap site and its components are well designed. The clickable elements generally have a nice feel to them, defining a good click area — without the kinds of mysteries and surprises I’ve discussed above.
Designers have their reasons for doing things, so take what I’ve said here with a shaker of salt.
But generally, I think the click area can be defined wrong, and it’s certainly an important consideration when trying to design an interface that users find inviting, intuitive, and free of confusion.