Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Fitts' Law

August 19, 2004

Taking a page from the book of HCI specialists, mezzoblue v5 makes liberal use of large link target areas for the sake of easier use.

First introduced to me by Kevin Cheng, Fitts’ Law states:

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

On the web that means the bigger your link area, the better. It also roughly means that grouping elements likely to be used together is a smart idea, but the target area is what I’m interested in at the moment.

Once stated, it’s a fairly obvious and intuitive principle that’s all too often overlooked. The new header of mezzoblue puts the idea to work. Instead of maddeningly small target areas that surround only the link text itself:

Too-small target areas

I’ve adjusted the link boundary area to fill as much logical space as possible and create non-visible, clickable haloes around each link:

Much larger target areas

While it might have been possible to expand each even further into the boundaries surrounding it, the key word is ‘logical’ — the ability to click an area with no apparent link is more confusing than useful.

A larger clickable area means less precise mouse movement is required to focus on the link. Without impacting the design in any way (the halo is non-visible after all) the usability of the header improves. While the main goal is increased usability in this case, there are positive implications for accessibility as well. Those with motor skill disabilities may have difficulty using a mouse; larger areas to click makes the act easier, which makes a big difference to them.

A personal example: Windows XP comes with a utility called MouseKeys that allow those who are uncomfortable with a mouse to control a cursor with the keyboard instead. It’s frustrating and inaccurate, but I’m forced to use it when on my PC due to the testing setup here.

My PC keyboard navigation skills have always been sharp, but MouseKeys are tough to operate efficiently; the cursor is either too fast or too slow. Smaller areas are much trickier to hover so larger links are helpful and appreciated, especially for important elements like primary navigation.

Though I’m using CSS to apply Fitts, the two sometimes collide. Secondary navigation on this site which appears in the red contextual bar underneath the header could use more space for instance, but the background image used for the faint shadow effect requires precise clipping. (Throwing in an extra <span> element could work around this if I were so inclined.) And I don’t see a comfortable way to apply the principle to links within body copy, since a larger link area would shift the type baseline and cause ugly gaps between lines of text.

This application of Fitts is just a preliminary stab, there is definitely room for improvement. More reading on Fitt’s Law.


Reader Comments

David says:
August 19, 01h

I half-agree with James. Visual feedback is very important in HCI. Users can’t tell they’ve acquired their target when they point to the area above the links because the feedback is too subtle. Sure, the cursor changes and the link text changes (slightly) but the feedback on the site logo is much more noticeable (yet, to your credit, remains stylish).

Fitt’s Law is important but no HCI law should be used in isolation. Fitt’s Law + Visual Feedback is more than the sum of the two. I’m an HCI major btw, so even if I can talk about HCI my design skills suck. I suggest some sort of highlighting across the entire link area, or a border around it but it’s up to you to make it look good as well as be effective.

August 19, 02h

Take Paul’s, James’s and David’s comments together and you have it.

Fitts’ Law is a good HCI model for web designers to understand, but it’s important to remember that it’s only valid if the user actually knows how big the click target is. In the case of Mezzoblue, the user has to guess, because there is no defined target area. Visual feedback isn’t part of Fitts’ Law, but it’s also important to consider.

August 19, 02h

Oh and FYI, HCI usually means Human Computer Interaction, not Human Computer Interface as appears in the introduction.

August 19, 03h

This was a very interesting article Dave, I like the idea of using big links, though I think it would be much more effective if the links were actually visibly larger.

Also, I think you should apply this principle the the the red bar (“selectionbar” as it’s id calls it) At the moment, having the large red background, but still having to hover directly over the text is slightly confusing.

Dave P wrote:
“…explain the thinking behind the check box titled “remember me, or forget me”… do they [screen readers] pronounce it “Check box: remember me or forget me link”. Is “Remember Details? (_click here to forget_)” too uncool for you?”

I don’t understand your problem with the remember me text, it makes perfect sense, although it may be more logical to take the forget me link out of the label. Using _click here_ for link text is never correct because it unneccessarily describes the mechanics of operating a link, and assumes the user is using a mouse, which is not always the case as Dave pointed out in this article by the use of keyboard navigation. If the user doesn’t know how to operate a link, they probably wouldn’t have even made it to the site, so _click here_ is quite useless.

August 19, 03h

Just wanted to make a quick comment that up until this article I was unaware that the navigation had a larger clickable area than what is visually noticeable. I had to scroll to the top while reading the article to confirm what exactly was clickable. Heh.

Philippe says:
August 19, 05h

Something that is often overlooked, and very useful for keyboard users, is increasing the visibility of links when the link area is focussed. Using a:focus helps in this, in a similar way as a:hover helps highlighting a link.

August 19, 06h

I’m the kind of guy who hears someone relate a problem and try to solve it. And in your article, Dave, you were wishing that there was a way to increase the target area for links in the body copy.

So I got to pondering this, and wondered: what if you added a bunch of transparent gifs to the page, all linked, and absolutely positioned them over each ‘real’ link in the article? These images would have a much larger acquisition area, because you can make them any size you want, really.

The trouble with this approach is simply the difficulty (or the time it takes) to compute where each gif should be positioned to, and the size they need to be.

That said, I’d rather kick out this idea and see if anyone else has some insight into it that I don’t. Maybe there’s a way for either the server or the browser to make these determinations.

Another thought is to add some kind of large “Article links” button that reveals a list of the links in the body copy. If they are structured as a list, you can, again, do anything you want, using CSS, to make the targets as big as needed. A compromise? Maybe not. I think of all the articles or books I read in print, and remember that citations appeared as end notes or footnotes, not inline with the copy, and maybe there’s some precedent for doing the same thing here.

8
sLIVER says:
August 19, 06h

I agree about the nav links at the top. They just need something in the background during mouse-over to establish better defined link-targets.

Kewl site revision! Looking foward to stopping by!

cmcooper says:
August 19, 07h

Fitts’ Law applies “where applicable”. Body copy is simply a place where you are bound by circumstance.

August 19, 07h

Good stuff - I always expect the entire main logo on a website to be clickable anyway, but the larger click area for the navigation is a welcome addition.

As an aside, I notice that you indicate which area the user is in with a darker block above the relevant link (which also accentuates the larger click area), but you don’t do this for the ‘home’ link. Did you leave it out intentionally?

August 19, 08h

Fitts’ Law is fun to quote when windows fanatics try to tell you how much Mac OS X sucks because the buttons are so big. “Its a waste of pixels,” they say. “I have faster target aqcuisition,” I say. “Is this conversation over, because I have something productive to do,” says me.

August 19, 08h

Yes, Fitt’s law is very important, just as Gom’s and Hick’s laws. And I happy to see that at least some web-designers use them.

BTW: Your improvements does not work in IE…

Dave S. says:
August 19, 08h

“Your improvements does not work in IE…”

Whoops, that’s what happens when you miss one little display:inline. Thanks, they should work now.

August 19, 08h

I agree with the bigger links. It makes it much easier to navigate. I use big links on my site too.

One little thing I noticed other than the larger clickable region not working in IE is that the cursor doesn’t change to a pointer over your sitenav in IE. Granted your audience most likely is web people who should know better than to use IE. I didn’t know if you intentionally did this or it was an oversight.

I love the large contentnav regions on the homepage. One other little thing is I expected the contentnav links on the secondary pages to fill the orangeish block vertically. I would have thought it more consistent to make the contentnav links function the same as the sitenav links (entire colored section above and below the text being clickable is what I am talking about).

August 19, 08h

Sorry, I didn’t know it, but you fixed the pointer issue while I was typing my previous comment so you can disregard that part of it.

Paul says:
August 19, 09h

Just found the site, and I’m having fun catching up. One small point about Fitt’s law is that it works best if the area to click is obvious as well as large. So while you have large targets in your navbar, I still *initially* have to work to aim at the text until I learn that there’s actually a bigger target there.

Having said that you’re still way ahead of my site!

Mike D. says:
August 19, 09h

Dave W.:

Even though I’m a bleeding heart Mac guy and I hate Windows, the critics are absolutely right when they say that Fitts’ Law is largely lost on OS X.

The most glaring example is in the design of the dock and the menubar. What are the four easiest places on the screen to click on? The four corners. You can even do it with your eyes closed. Okay, now move your mouse to the upper left corner in OS X and click. Does it pull up the Apple menu? Nope. Try the same thing in the upper right corner. Does it pull up the Date/Time menu? Nope again. The Windows equivalent is the taskbar (a MUCH better designed navigation aid than the dock and probably the only thing I really love about Windows). Move your mouse to the lower left corner of the screen in Windows and click. What happens? The Start menu pops up and your entire machine is available to you.

The dock largely ignores these principles and positions itself in a constantly shifting area along one edge of your screen. Let’s say you have the dock positioned on the bottom of your screen and you have five program icons stored in there. Let’s say Photoshop is on the left and it’s about 500 pixels from the left corner of your screen. Now start opening up documents and applications. Now your dock has 15 items in it and the Photoshop icon is more like 40 pixels from the left corner. Bad, bad, bad.

Anyway, I know this post is about the web and not OS X so I’ll shut up now. I just hope PowerOn Software finally ports their great utility GoMac to OS X so I can get rid of this damned dock and use the taskbar again. For now, I just rely on LaunchBar.

Dave S. says:
August 19, 10h

Mike D.,

“Move your mouse to the lower left corner of the screen in Windows and click.”

Up until XP, that was pretty useless too. The new big green button is a marked improvement over the two pixels of margin surrounding the old Start button.

“Okay, now move your mouse to the upper left corner in OS X and click.”

I thought of writing an article about this a while ago, maybe I should have. If you configure Exposé so that the corners trigger it, it’s a heck of an application of Fitts. Switching between open windows/documents is even easier than hitting F9/F10, and it’s amazing what a difference it makes. (It’s not perfect since accidental triggering is a bit too easy, and it takes a while to get used to.) You won’t mind so much about the Apple menu/clock.

Anyway, a lot of things could be better in both OS’s. Back to the web.

Tom says:
August 19, 10h

Hear hear for Fitt’s! That Tog column was what introduced me to this concept a couple years ago and I find it is largely ignored, particularly on complex sites - where designers feel the need to cram in as much as possible.

I’ve since always tried to keep that in mind and it has served me well. One place in particular that I find UI folks ignore this in: Search and form buttons.

Too often you get this tiny little ‘go’ button that is about the size of your mouse arrow - maddening!

P.S. The new site is excellent!

Tom

Dave P says:
August 19, 10h

“Up until XP, nothing. The new big green button is a marked improvement over the two pixels of margin surrounding the old Start button.”

Just to point out that this is an XP enhancment all around, since even in “classic” mode the start button margin is clickable.

August 19, 10h

In response to Dave’s and Robert Hahn’s wish for increased link area inline, there is a solution. Styling your ‘s position:relative and applying padding will give the desired result. One caveat - horizontal padding will create extra spacing in your line of text. The vertical padding works.

I have this technique in place on my blog (www.dbenton.com/go/) and I keep my horizontal padding to a minimum and rely mostly on the vertical. I use padding: 10px 3px 10px 3px;

I have only recently added this. It works in IE6 and Firefox. No other browsers have been tested, so let me know.

Also, a couple of folks mentioned that they hadn’t realized the link area had grown. I did (the gradient above the current section tipped me off), but I had to check, it was not intuitively clear at a glance. Useful, but only if the user has a good memory.

August 19, 10h

Ha, it’s late! The above “Styling your ‘s position:relative”

Should read: “Styling your A elements position:relative”

Sorry for the superfluous post.

August 19, 11h

David Benton, that’s an interesting technique, however it can interfere with a user wanting to select a piece of text to copy on the line above or below that is covered by the link region. This technique may help, but if your going to do it, you need to increase the line-height so it doesn’t overlap lines above and below as much.

August 19, 12h

Yes it is working now.

As long as we are on the subject of Fitt’s there is one major flaw when calculating fitt’s - it does not take into account if the target area is wider than it is tall (like application menus) or if it is taller than it is wide (like your menu). Or to be more precise - it does take this into account, but the people using fitt’s does not. The target size is define as a one-dimensional object (e.g. a circle), whereas a web object is an 2-dimensional object (usually a rectangle).

People who calculate fitt’s usually set the target area to the width of the object - which will yield incorrect results if you acquire the target vertically. Fitt’s law need to be enhanced with 2D space or even better an “angle of attack” within a 2D space.

Another thing to remember when calculating effeciency is that Fitt’s law cannot be used by itself. Fitt’s law is only a measurement of the how long it takes to acquire or modifying an object, not the actual activation of the object (GOMS), not the time it takes to initiate the move (GOMS), nor the time it takes to decide which object to manipulate (Hick’s law).

It does not matter if we make all the buttons big, if we cannot decide which one to click on - or if we have to activate it by right-double-clicking :)

25
James says:
August 19, 12h

I’m really unconvinced by your argument about the “logical space” for a link. The title image works because it highlights when you hover over it, but you don’t carry that metaphor over to the links in the top right. If you did, it would be obvious which you were selecting, even if you extended the region into the visually distinct area.

I wouldn’t describe the darker blue area as an illogical area to click, because it’s not less logical than the blank bit: perhaps I’m tired of the web, but I had to check other browsers just to make sure I wasn’t missing some crazy menu stuff due to a rendering problem in the nightly build of my current browser.

Since I’m writing a comment, I might as well ask you to explain the thinking behind the check box titled “remember me, or forget me”, if there was any. Does that actually work for screen-readers, or do they pronounce it “Check box: remember me or forget me link”. Is “Remember Details? (_click here to forget_)” too uncool for you?

August 20, 02h

Microsoft actually has taken user interface design and fitts law very seriously, and for quite some time! check out the MSDN section on this at http://msdn.microsoft.com/nhp/default.asp?contentid=28000443&frame=true. As you can see, Microsoft knows all about fitts law. An this site also has useful little pointers for other interface design issues, mostly though to do with application design.

And heres the another big crux of the law.

Any Target that is positioned on the boundry, is very easy to target. The reason being that only direction is needed, as distance is irrelevant. The pointer cannot move beyond the bounderies can it! Also, when Fitts is applied to hand movement, it was disscovered that targeting a object (for a right handed person) away from the body, and to the right is easiest to achieve.

And who ever said that macs employ Fitts law better that windows? That little x in the corner of each window. Beacuse of its posistion, it is almost infinitly posible to target. As well as the new start button in the opposite corner. Macs however require the user to target an object at the bottom in the middle somewhere? I don’t want to choose sides, but I think windows has one up over macs on this disscusion

August 20, 08h

Lachlan, have you been trying to plagiarize my site again?

Just kidding. You have a good point. I was trying to figure out what drawbacks there might be, but this hadn’t occured to me.

I just did some testing and I can still copy text above or below a link. It decreases the area where it is possible to select text, but the overlap doesn’t completely cover the lines above and below. Again this is IE6 and Firefox tested only.

I’m not willing to increase the line-height as much as would be necessary, but I think I will decrease vertical padding to 7px. I can handle a little bit of overlap, as I don’t believe there to be a lot of cutting & pasting from my site and I’m not concerned about facilitating it.

Ok, 7px vertical padding is in place and I’ve removed the horizontal padding altogether, making the effect subtler. The link now overlaps about half of the lines directly above and below it. Text selection is a bit easier.

Adrian says:
August 20, 08h

You know, that’s very interesting. I’ve never even thought about it until now, but that can even be useful for everybody.

I’ve on numerous occasions clicked on the wrong link or whatever because I was in a hurry and the target area was fairly small. This should be a secondary concern though for the masses, and a primary concern for the control challenged people out there.

Major props go to you for even trying to accomodate it.

August 20, 10h

The skip links that appear when navigating the links are cool… although, you do need to take out the ‘skip to sidebar’ link when there is no sidebar.

How to get bigger links in body copy? Heres what I use:
a{ padding: 2px; margin:-2px;}

How does MacOS employ Fitts law better than other OSes? The application menu is always at the top of the screen and so only needs direction to use. Other OSes keep the application menu with the application window, which means you have to target it with more accuracy and it is therefore slower to use. As for closing windows…use the keyboard, it’s way faster.

August 20, 11h

Thanks for the tip on Fitt’s Law, it’s nice to have a name for the linking convention. One thing I’ve noticed lately is a tendency of CSS designers to employ large link spaces. Many of the sites linked through CSS Vault have large link areas for main navigation. Check out: http://skinnyj.com/ and http://www.redhatwine.com/ for two recent notables.

I’ve been seeing large link design for a while now, and it has bled into my own design work, (http://tunedesigngroup.com). I initially liked the look of the big links, but the access issues are even more reason to like it.

I wonder how many designers are doing it for look and how many are conscious of Fitt’s Law. I would guess more are interested in the layout, but on the other hand I’m seeing this on well built CSS/XHTML pages, so maybe they’ve been aware all along.

August 21, 04h

David Benton wrote:
“Lachlan, have you been trying to plagiarize my site again?”

David, don’t worry. Although, I do plagiarize nearly everything I read ;-), I was actually only intending for anyone wishing to quote your words as I have done here, giving due credit, of course.

Robert Hahn, wouldn’t that just defeat the purpose if the body copy was placed above the link, thus reducing the size of the link essentially back to it’s original size?

However, it wouldn’t work the way you suggested anyway because of the way the stacking context works. What you wanted was to set:

a { position: relative; z-index: -1; }

but it doesn’t work, especially if you have a non-transparent background on the containing block, because the text get’s hidden, though the clickable area still covers up the text. I think the best way is to just set the padding so that it covers the text above and below as minimially as possible, and/or increase the line-height so it doesn’t overlap any text; or you can just hope that any user wishing to “plagiarize” your work, can get around it by starting selection outside the link region

August 21, 05h

Correction, that technique I just wrote does work, although it seems that Mozilla allows the link to still cover the text above and to the left, but text covers the link below and to the right. However, Opera get’s it correct and reduces the size of the clickable region, as I described, to it’s original size.

August 21, 07h

David Benton,

thanks for the tip. I checked out your site to see it in action — it’s extremely slick, and I’ll consider rolling into my own site.

Lachlan Hunt,

good catch on the selecting text issue. How do you think things would change if we set a z-index value of 900 for the copy, and 800 for the link? would that help? (I guess I should just try it, but it’s Saturday and I’m feeling lazy.)

-rh

34
Ludvig says:
August 21, 10h

What about a follow up on Hick’s law?

Anyway, here’s some reading on Fitt’s and Hick’s law(s):
http://en.wikipedia.org/wiki/Fitts%27_law
http://en.wikipedia.org/wiki/Hick%27s_law

And a bit more general, Topics in human-computer interaction:
http://en.wikipedia.org/wiki/Topics_in_human-computer_interaction

August 22, 02h

They were interesting examples, though as you pointed out, there were several caveats. I had a think about it, and came up with a potential solution that addresses all of them.

http://www.lachy.id.au/dev/css/examples/2004/08/fittslaw

Let me know what you think.

August 22, 12h

http://www.dbenton.com/go/chronicles/2004/08/22/fitts-law-and-text-links/

I have compiled my thoughts and recommendations for body copy Fitts’ links on my blog. I have taken into consideration Dave, Lachlan, Robert, and Terrence’s thoughts and come up with what I think is a best method. I have also listed limitations of the technique.

I’d be especially interested in hearing your thoughts and having the technique tested in some more browsers (anyone with a Mac out there?)

Thanks, y’all.

August 23, 02h

Cool! I forgot that I had mentioned that to you. I’m really glad you wrote this up as the comments clearly indicate that you’ve sparked some interest and educated a few more people on it. I love the redesign.

August 23, 06h

I hope that no further clarifications will be necessary, but I need to make a couple after reading Lachlan’s alternate method.

He said:
“David should have applied the background to the p element but for some reason, he thought he need to use span.”

I thought this because it is true. Test the method in Opera. The spans are used to correctly show the way that rendering engines (Opera specifically) treat the text in the examples; they are not necessary in the Real World. Opera treats each line as you described the spans to be treated - above because they occur later in the document. Therefore, if the background were applied to the P, the link would appear to extend down below the line, but it would not be clickable there.

Setting a positive z-index does indeed solve this problem. Thanks, Lachlan. Could’ve sworn I’d tried that. I believe this to be a hack for an Opera non-compliance. By my reading of the spec, all text in a P should remain on the same plane. An element placed inside that P (a child element) should not be above part of the text and below another part.


Lachlan said:
“Used :hover styles to indicate the selected link.”

As the caveat said, this technique should always be used with an appropriate a:hover style. Why is it still a caveat? Because we’ve begun to encroach upon designers’ rights, and they may not want to do as we say.

Lachlan said:
“Backgrounds can be used because the padding does not cover surrounding text until the link is hovered.”

Yes and no. That addresses one of my concerns. The other involves placement of a background image, which will be altered by setting position:relative and by increasing the size of the containing block. I’ll leave the possible issues as an excersise for the reader. Also, we are again limiting designers and they may revolt.

So, caveats 2 and 3 stand. Lachlan’s solution for 1 works (thanks for that, btw), but he misunderstood the example (not an opera user, I take it). 4 is fixed, but I was never worried about that one. If you are this method is for you.

The target area in Lachlan’s method is not increased until mouse over, so I’d like to hear from Mr Fitt or someone with more expertise regarding larger target area vs sticky links (esentially what the Lachlan technique provides).

Finally, I really like this method, Lachlan. I like the stickiness of the links - it feels like an accessibilty tool (and I like accessibility). I’ll update my page with these new ideas and add a link to you page. This has been fun.

39
Lars says:
August 23, 10h

There is an astonishingly easy solution for your problem with the size of body copy links:

Simply enlarge your tiny body copy font size and the area of clickable link will also enlarge.

Mark says:
September 07, 04h

“And I don’t see a comfortable way to apply the principle to links within body copy, since a larger link area would shift the type baseline and cause ugly gaps between lines of text.”

Using my preferred font size for your body text rather than yours would help… ;-)

Dave S. says:
September 07, 06h

“Using my preferred font size for your body text rather than yours would help…”

Only if your preferred font size is bigger than mine. Proportionately speaking, that wouldn’t help at all.

Oh, and, no.

Francky-M says:
October 16, 06h

Good stuff: like this kind of discussions! I agree with the visual feedback-item: to see that you are on a text-link (by bg-color and changing txt-color) gives contrast with normal text and makes it a lot easier to see where you are (and to decide to click or not).
Made an illustration on http://home.hetnet.nl/~francky-m/Francky’s_testpage_fitts_law.htm
with testing results for different browsers (see over there).

Btw, an other way to use Fitts’Law is to make a link for going back (in text or image) as much as possible in the same position as the link to get there. For instance: the language-flag on http://www.cosbo-amsterdam.nl/test/simpel/index.html gives a quick return for Dutch people who just want to have a glance at the English summary. (It is a test-site, the rest isn’t working to much!)

Good luck, Francky-M