Kalkran.COM

When I was stumbling around this morning, I came across a site which mentioned Fitt's Law:

"The time to acquire a target is a function of the distance to and size of the target."

This means that, when the distance becomes smaller and size becomes larger, then the time taken to acquire a target(link) will decrease. You can apply this to links really neatly. Let's see what I'm talking about:

In which the right navigation is, of course, far easier to navigate. The links you can click on are bigger (and that is obvious thanks to the "underline"), when you hover over a link, you are not obscuring the link text you might want to click and you're also bringing some structure into your webpage.

The CSS

 
#sidebar li a {
display: block;
border-bottom: 1px solid #CCCCCC;
text-decoration: none;
width: 190px;
}
 
#sidebar li a:hover {
background-color: #CCCCCC;
color: #555555;
}

These lines make the links display in a block fashion: You can make them any size you wish, and they'll have a line-break before and after them. They also add a nice border below your links, and make the background darker when you're hovering over them. And lastly, it sets a width, so they'll have a fixed width, acting as the block you can click on.

Let's look at a real-world example

The image shows a 'bad' navigation, the links are really just as big as the text that's enclosed in them. For an example of 'good' (easy) navigation, just look on the right side, that's much easier to navigate. Or look below:

That looks much easier!

The Caveat

If you decide to use this method, make it clear to the user you ARE using bigger links, nothing is more surprising then mousing over, what seems to be, white-space and suddenly hovering over a link! That's why I added the border-bottom, making it easy to spot where the link ends.