Usability Tip: Turn Inline Links Into Padded Blocks for Larger Clickable Areas
There’s a very quick usability trick you can do with the links on your site to make them easier to use. It’s something that I don’t see talked about very much, and a lot of sites don’t implement it. Link padding and blocks — that is, increasing the clickable area of your links to make them easier to click on.
Ryan Singer from 37signals has written a very nice article about padding links a while back — and I want to highlight it and add the block dimension because I think it’s an important trick to know. It’s something which will make an instant difference to usability and it’s also a low hanging fruit — it only takes one or two lines of CSS to do.
Ok, enough chit chat, let’s see an example. Here’s TechCrunch, one of the biggest blogs in the Web 2.0 tech sphere. On the front page, and on inner pages, they have some content links in the sidebar — a box providing links to the most popular or most recent articles published on the site. Here’s what it looks like:
It’s a simple list of links. The links are all inline elements, which means to select a link you have to click on the text itself. Here are the clickable areas highlighted:
But in this context, we can do much better than that. Each link is sitting in it’s own box, which means we can turn those inline links into block links. This will allow us to fill the clickable area across the whole segment of the box. Here’s a clickable area we want:
This would obviously make it much easier to click on each link because the target area is much bigger —you don’t need to focus the cursor on individual bits of text and instead just move it over the box the link sits in. And since I like to eat my own dog food, I have the same kind of thing on this very site in the sidebar on the right which you can see in action under “Recent Posts”.
The implementation is simple, you just need to turn an inline element into a block. To add more whitespace around the link you should also add some padding. Here’s the CSS code:
.your_link {
display: block;
padding: 10px;
}
One nice thing to do is add subtle background color shades when you hover over the link areas to make it clear to the visitor that the link area is clickable, not just the text:
.your_link:hover {
background-color: #F2F2F2
}
Now — in that TechCrunch example above, they also have a date label of when the post was published. That’s just text, not a link — however I think it would make sense to span the link the whole area as I illustrated above. One way to solve this would be to add the date label inside the anchor tags, and use a span around it for custom formatting. Another way could involve adding some negative margins to the date label box and setting it’s z-index below that of the link block. Obviously you’ll need to make sure the bottom link padding is larger to cover that area as well.
A lot of sites tend to overlook this little trick, but as the implementation is only a couple of lines of CSS code I think this is something we should see more often. All the little polishes you add to your site will add up, and your visitors will appreciate them.
What do you think? Do you use padded and/or block links on your sites? Leave a comment below.
4 Sep, 2008
Veerle’s blog does a great job of following this rule (or what should be a rule).
http://veerle.duoh.com/
Take a look at the links in the center column.
4 Sep, 2008
Veerle’s blog is indeed a beautiful example of padded block links Jordan — and they’re utilized pretty much everywhere there where it makes sense, not just in the center column.
5 Sep, 2008
I myself have seen this around and I agree that it is a great tip and I always wondered what it is :D
Something that more accessible people should know about.
Would it work however when you have links in paragraphs and you have links next to each other on two lines? Would the linkable areas run into each other?
5 Sep, 2008
That’s indeed a great trick to improve usability. Whenever I encounter a list of links like that, I implement this technique.
Also, @Jordan, it’s indeed not a rule, but somewhat of a usability law. First time I read about it was here: http://www.1976design.com/blog.....fitts-law/
5 Sep, 2008
The links on techcrunch as you showed may not have been made all box clickable because of SEO reasons. They want to use the keywords as links, and not the “5 minutes ago” too.
5 Sep, 2008
Razvan: Good point about SEO. Some people may not want to mix the anchor with the date and you can still implement this idea without doing so — just add a lot of bottom padding to the anchor and use negative top margins on the date label to pull it under the anchor area. I’m sure there are other ways to do it as well, this is just off the top of my head.
5 Sep, 2008
Thanks for the article. I don’t really have the need for large clickable links, but for large clickable form elements (radio buttons, checkboxes). We’ve been using labels for their extra clickability but I hadn’t thought about making them block-level to increase their effective area. Wrapping the label and and input in a block-level a element that has :hover defined has given just the results we want. Thanks again.
5 Sep, 2008
Please include how to execute HTML. I’m a noob. Thanks.
6 Sep, 2008
Christian: I’m happy you found it useful.
Al: Unfortunately I really don’t know what HTML I can provide to help — all you really need is a basic hyperlink to apply the CSS code to, which is just the foundation of HTML coding. So the CSS above targets a class of anchor (link) called “your_link”. You can of course rename that to anything you want and then label the anchors in your HTML code with the same class like:
This is the link text
The CSS code I provided in the article would go into your stylesheet and will format that class of anchor accordingly. Hope this helps.
A good place to find references and learn HTML and CSS is at W3C Schools: http://www.w3schools.com
6 Sep, 2008
Love the website. You write stuff that is basic, but easily over-looked. Keep up the great work!
6 Sep, 2008
Thanks Sweeped. There are a lot of little touches you can add to interfaces and they all add up to deliver user experience and usability. People who are really passionate about the details are the ones who make great products.
6 Sep, 2008
Ah, but does it work in IE6? =P
6 Sep, 2008
This one does ;) I think…
6 Sep, 2008
Great tip
14 Sep, 2008
That’s quite a neat trick, its amazing how such subtle things and increase usability dramatically.
18 Sep, 2008
[...] nice article from “The Usability post” about turning the simple word-link into a small block element [...]
20 Sep, 2008
Using a similar approach to this, I helped my arthritic grandmother use websites a bit more effectively by writing a unique stylesheet for her browser to make all radio buttons and checkboxes a bit larger and more clickable. Now she does not have to try as hard to be accurate while trying to click them. For her this was difficult to do at her age.
13 Nov, 2008
We recently did a redesign to one of our sites, and added this idea to our product category page.
http://shop.callawaygolf.com/Drivers/
Have to say I love this blog, so many great ideas… keep up the good work.