Applying Fitts’ law

Note: the changes seen here won’t be apparent if you are using Internet Explorer. The reason why will take too long to explain, but you should think about switching to a better browser anyway. See if the Get Firefox and Browse Happy sites help you.

Fitts’ law is may appear blindingly obvious at first, but a lot of people aren’t using it as much as possible: doing so makes for the easiest possible navigation of your site, and it’s easy to see many opportunities for implementation.

What’s Fitts’ law?

For those of you that haven’t heard of Fitts’ law, Here it is in its formal form:

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

Basically, that means that (in terms of interface design) if you want a user to click a target, it’s far easier to hit that target if the target is big and close than small and far away. Most (web) interface designers concentrate on the size: distance is something dictated by resolutions and browser sizes. So, I suppose an alternate name for this post would by ‘Why I made my navigation links bigger’.

Applying it

One of the most used targets in terms of your average website has to be the navigational links: they’re needed all the time by any user wishing to go from one section of the website to another. Hence, applying Fitts’ law here (as Dave Shea has) would make for massive reductions in target acquisition time. As my navigation previously consisted of little targets: plain text links, I saw this as an area for improvement, and stretched the targets.

As I wanted the links to appear at the bottom of the target, I used a bit of CSS, and pulled the top of the li elements right off the top of the screen (relative positioning), then to make sure the links would be at the bottom of the li boxes, I gave each of the a elements enough top padding so that the text would sit at the bottom again. Now the size of the a box was huge, and went around 200px off the top of the screen.

The effect of this is that no matter how much you enlarge the text (within reason: my definition of ‘reason’ is normally 300%, but this actually works far beyond that) you can hit the navigation links anywhere between the bottom of the text and the top of the screen. I also gave the links a background colour and some border on hover to illustrate this fact.

Less talk, more code!

In case you’re interested, here’s the CSS I used to achieve this effect.

ul#nav {
	padding: 0;
	position: absolute;
	top: 0;
	margin: 0;
	height: 1px;
ul#nav li {
	list-style-type: none;
	float: left;
	margin: 0 10px 0 0;
	padding: 200px 0 0 0;
	position: relative;
	top: -200px;
ul#nav li a {
	display: block;
	padding: 70px 5px 4px;
	border-bottom: none;
ul#nav li a:hover {
	padding: 0 5px 3px;
	background-color: #f6f6f6;
	border-top: 70px solid #f6f6f6;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #b00;
	margin: 0 -1px

As a final note: no, I have no idea why the ‘Feeds’ link has no right border on hover with Firefox. I did some poking around in the DOM Inspector, and come to the conclusion that I don’t care enough to dig further. If anyone knows why this is happening, I’d love to know.