ZooiblogFitts’s Law
- Mathias Bynens
- Rob
- Benjamin
- SteveC
When I redesigned the Zooiblog, there was one thing I just had to use. It was Dave Shea’s take on Fitts’s Law.
How and why
Fitts’s Law: The time to acquire a target is a function of the distance to and size of the target. Easy. The bigger the button, the easier it is to click it. Child’s play.
Now, this may prove easy on <h1>s and navigation (see above), but Dave Shea stated that it is too hard to do so in body text. I think he’s wrong. But later on that. For now, why Fitts’s Law?
People usually want to click links fast. But if the target area is too small, that gets pretty tough. The way to eliminate this problem is to use a larger padding. And as you can see in the navigation, that works. The links are more buttons now. It’s not a big effort to click a link. That’s Fitts’s Law. Easy.
How
As I said, increasing the padding on anchors is a great help. But what about body text? The lines will make ugly jumps and are out of order if not every line has a link in it.
The solution is very easy, though. I use fairly high line-heights, 1.6em to 1.3em font-size. This allows me to add 4 pixels of padding on top and bottom of the link while still retaining the regular line-height. And Fitts’s Law works: the links are bigger. Try it, it’ll prove easier than the regular “small” link.
Conclusion
Of course, this will not apply to people with smaller line-heights, but since higher line-heights improves readability (to a certain height, of course), this is a two-in-one. So keep this in mind when redesigning. People with bad motoric skills will love you.
