So yeah, this is old news. People have, for years, been making the target area for links as big as possible to make them easier for users to click. Hell there’s even a law based on this knowledge, but today I’m only going to share a nifty little trick whereby you don’t just make the hit area bigger, but make it bigger than it appears.

First off, head over to http://suzannahaworth.com/.

I use this technique on the ‘Tweet this’ link at the end of each article. Now before you scroll down and hover that link, notice that we have something that is probably built like this:

<element>
  If you liked this article, <link>please Tweet it</link>.
</element>

Or so you’d think… What we actually have is this:

<link>
  If you liked this article, <element>please Tweet it</element>.
</link>

Can you see where this is heading? Good!

The actual code is this:

<p id="tweet-this">
  <a href="http://twitter.com/share?text=I&amp;rsquo;m+reading+&amp;lsquo;Crosby Beach&amp;rsquo;&amp;via=suzehaworth&amp;url=http://suzannahaworth.com/2010/12/crosby-beach/">
    If you liked this article, <strong>please Tweet it</strong>.
  </a>
</p>

So what we do here is have the whole content of that paragraph as a link—everything is clickable. Then we remove all the styles from that link so that it looks like it’s not a link at all. Anything we set to appear at a{ ... } we effectively remove so that it simply looks like ordinary text. The (abridged) CSS for a{ ... } and the undoing of this is:

/* Define generic link styles here */
a{
  font-family:Calibri, Arial, Verdana, sans-serif;
  font-weight:bold;
  color:#347832;
  text-decoration:none;
}
a:hover,a:active,a:focus{
  text-decoration:underline;
}
a:active,a:focus{
  position:relative;
  top:1px;
}

#tweet-this a{
  display:block;
  padding:20px;
  /* Here we undo certain styles applied above */
  font-family:Cambria, Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
  color:#555;
}
#tweet-this a:hover{
  /* Undo the hover state of the link */
  text-decoration:none;
}
#tweet-this strong{
  /* Make this strong look just like the a */
  font-family:Calibri, Arial, Verdana, sans-serif;
  font-weight:bold;
  color:#347832;
}
#tweet-this a:hover strong{
  /* Make this strong look just like the a on hover */
  text-decoration:underline;
}

So here we’re maintaining our specific call to action of ‘please Tweet it’ by styling that as though it’s a link, but in actual fact our link is far bigger. The user sees the specific call-to-action, goes to click it, only to find that it is in fact far larger than it appears, thus easier to click.

Now in this example it would do no harm to just have the whole lot look like a link. We don’t really need to spoof calls-to-actions and hit-areas here but it’s quite a nice feature.

A better example

A better example I unfortunately can’t share just yet as it appears on a site I built that hasn’t gone live. What I can do however is replicate it for you…

The PSD I was handed contained a section where the text was For a detailed quote for your project, please contact us » and its obvious choice of markup was:

<p>For a detailed quote for your project, please <a>contact us</a></p>

That was until I remembered the technique I’d used on Suze’s site. I could keep the ‘contact us’ call-to-action, but also make it a lot easier for the user to click by using a full-size hit-area.

Demo

I’ve made a (very crude) replica of that for you which you can pick through the source a little more freely.

So there it is, creating larger hit-areas on very specific calls to action.

The shampoo lid

Imagine the scenario, you’re a girl with long hair and you’re washing it in the shower. Your hair is in your eyes, and covered in shampoo. Opening your eyes would lead to some serious stinging! You reach down and below you, by your feet, you have two identical bottles—except they’re not identical… One has its lid on the top and the the other has its lid on the bottom. As long as you’ve learnt which one’s which, as my girlfriend clearly has, you know without having to open your eyes which bottle you have hold of. This is a really ingenious piece of usability, yet so so simple.

The vacuum cleaner

Another great bit of usability I saw was in Suzanna’s vacuum cleaner. It has a retractable cable which rests inside the body of the cleaner when it’s being stored. When pulling the cable out to plug it in, when you are roughly a metre away from reaching its furthest limit of extension, you see a yellow marker on it. This indicates that something must be about to happen, and then when you pull that extra metre out, there is a red marker to signify that this is a far as the cable will extend. This means that there’s no chance of accidentally pulling the cable out too far and damaging it if under the impression that there’s more wire in there. Simple, but so helpful.

The lesson?

A lot of the time, the best way to make something usable is to imagine yourself using it—what would you want out of it? Because nine times out-of ten someone else would appreciate that feature too.