CodeinWP CodeinWP

Defining the Click Area

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:

WebProNews' navigation

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.

WebProNews' navigation click area

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:

Design Pro's navigation

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:

Design Pro's navigation click area

Even Dribbble has something similar happening:

Dribbble's navigation

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:

Dribbble's navigation click area

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:

CSS Wizardry's 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?

CSS Wizardry's sidebar click area

But wait — what if it was smaller? Look at the No Starch Press sidebar links:

No Starch Press navigation

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:

Bootstrap's dropdown

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.

Final Words

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.

9 Responses

  1. Zack Perdue says:

    I hate when people make sites that only the text link is clickable especially if its in a wide menu bar.

  2. Arie Putranto says:

    Bordered or not, boxed or not, a main navigation, should cover a whole lot more than the text. But the, again, it depends on the design. If you design a navigation that makes you think that only the text is clickable, perhaps that what might other people say. Likewise, if you make a menu like the one WebProNews did, I’m 83% sure that people will think that the whole button is clickable. That’s UX, that’s how we do it.

  3. > I think it would feel better if the click area was just the text.

    Do you think the same when using a smartphone or tablet?

    > Look at the sidebar links on my own site… even the area to the right of the text links is “hoverable”, though not clickable.

    In general, the clickable area and the area with a hover effect should be exactly the same; otherwise it’s confusing to the user. A hover effect flags that there’d be an interaction; users will be frustrated when their expectations won’t be met.

    You use two different hover effects: color change when clickable, and bullet when the cursor is in that line. I wonder what the latter is good for. It’s rather confusing.

    • > Do you think the same when using a smartphone or tablet?

      Depends on the size of the text. I can tell you for sure that when I’m on a tablet and I accidentally touch an area that I didn’t know was “clickable”, it’s twice as annoying as doing it with a mouse on a desktop computer.

      > You use two different hover effects: color change when clickable, and bullet when the cursor is in that line. I wonder what the latter is good for. It’s rather confusing.

      Agreed. But I’m not all that concerned about it. My users are pretty smart. I just liked the bullet on hover and didn’t like the full block element being clickable, so I did a bizarre compromise. I’ll probably fix it eventually. I certainly wouldn’t do that on a client site or something else more important than my sidebar.

  4. I think you’re right that the clickable area has to be instinctive. The problem with the Dribbble example is that you could reasonably assume that the clickable area in the secondary navigation was just the text, or that it was the same size as in the primary navigation (indicated by the highlighted area around ‘Shots’ in your screengrab), or even conceivably that the whole space is actually buttons so that the clickable area is large. But there is absolutely no reason to guess the clickable area is what it actually is.

    I suspect that the Dribbble example is just an oversight that came about with the layout. It would probably be better to correct it, but it’s not a massive issue. I think it’s better to err on the side of too large than too small.

    With regards to mobile/tablet use, I find it far more a common problem that links are too small to click than wider than I expected. (You should see me prodding away at links on on my iPad and swearing at it).

    All the above being said, there are massive issues with the nav on my own website which I’ve been meaning to fix for ages but somehow have never had the time, so I have no right to criticise…

  5. Scott says:

    I’ve taken to putting padding around links on touch screen devices just to make them more accessable and works quite well…

  6. John says:

    I don’t think that keeping it simple (just text links instead of enlarging the action areas) would be an advantage nowadays. The technology evolved beyond imagination and more and more people access websites via mobile devices (which most of the times are small). So definitely using a larger clickable area would be an advantage for every website out there.

  7. Linda Clark says:

    After reading this post I got something new. I have never thought about this before. Click area is really important in web design. But it can be a topic of debate. Different designers have different needs to fulfil while deciding on click area. It should be finalized by user interaction only. MOckips are the best to do so.

  8. Mike Ward says:

    Getting the click area is so important, I personally hate visiting websites where they make the area too small and also on the other hand way to large. I’m sure this will affect a websites conversion rate and bounce rate. Thanks for the info.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).