Fitts’ Law and Text Links
Published August 22nd, 2004 in Techniques & TutorialsA recent post on mezzoblue talking about Fitts’ Law has sparked a bit of research for me. Fitts’ Law, says basically:
The time to acquire a target is a function of the distance to and size of the target.
In the mezzoblue post, Dave Shea complains that Fitts’ Law cannot be applied to links within body copy without creating gaps. I employ just such a technique, though I wasn’t previously aware of Fitts’ Law. I mentioned the technique in a comment on mezzoblue and got some great feedback from others that inspired me to make some changes. Following is a recap of what I’ve learned and my conclusions.
Why?
- Fitts’ Law is beneficial from an accessibilty standpoint and a usability standpont
- small links suck
- why not?
Goals
This should start with a set of goals, so:
- Increased link target area
- No gaps in text
- use css and no extra markup
The Technique
update: 8/23/2004
The examples below use 2 extra spans to make it possible to visualize the technique (using background-color) in the same way that Opera renders it. This is necessary because of an Opera quirk that causes it to render each line in a block of text higher in the stack level than the previous line. In effect, this covers the bottom padding that we create for links. As mentioned below, this issue has been resolved.
With those requirements in mind and some experimentation I found that a {position: relative;} allowed the links to have padding extending over the surrounding text without creating line-spacing gaps, but horizontal gaps between body text and the link did occur [example 1]. As links tend to be wider than they are tall, increasing the horizontal target size is less effective than increasing the vertical size, ergo horizontal padding is unnecessary. Removing the horizontal padding, of course, removes the horizontal gaps. At this point I had the following: a {position: relative; padding: 10px 0 10px 0;} [example 2].
I posted this to mezzoblue (feeling rather heady) and got back a reply from Lachlan Hunt pointing out that this technique makes it nearly impossible for readers to select a piece of text beginning or ending either directly above or directly below a link. While I am not terribly concerned with facilitating copying and pasting from my site (it should also be noted that a larger block of text could be copyed and the excess deleted after pasting), I was convinced that I should decrease the size of the padding. While experimenting with this I noticed that the link target area seemed to extend higher above the link than it did below the link (which I believe to be because of the weighting of type toward the baseline, which is exaggerated in this case by the underline on links). Now I had: a {position: relative; padding: 7px 0 9px 0;} [example 3]. Now users had approximately half of the line of text above and below available for text selection, and half for link target.
Some of you may have caught this sooner than I, but the next obvious step was to de-pixelize this solution. This technique is a great accessibility tool, but with pixel padding, it didn’t scale with the text. I changed the styling to a {position: relative; padding: .4em 0 .55em 0;} [example 4]. You should test these values with your line-height and font. To make the clickable area visible, apply a background color to the link and then wrap the text before the link in a span and the text after the link in a different span and apply a second background color to each of those. The examples above are styled in this way.
Add the style z-index: 1;, per Lachlan’s recommendation and we have: a {position: relative; padding: .4em 0 .55em 0; z-index: 1;} [example 5]. This fixes the Opera quirk described above.
Caveats
- This technique works as desired in IE6 Win and Gecko, update: and Opera - Thanks Lachlan
but Opera 7 covers the padding below the link, meaning some of the benefit is lost.I would be interested in hearing about other browsers. - In link-rich text, it may not be clear which link a user is above. This technique should always be used with an appropriate
a:hoverstyle. - If you use background colors or images for your links, this technique may not be for you. Sorry, Dave.
- Selecting and copying text, as mentioned above, may be hindered slightly.
Thanks
Thanks to all at mezzoblue who inspired, assisted with, or complimented this technique.
Update
As mentioned in the comments for this post, Lachlan Hunt has made some suggestions for changing this technique. One of his changes is mandatory, as it solves the Opera issue. The other is an interesting alternative that makes text selection easier, and makes “sticky links” rather than a larger link target to start with. I like it and depending on your goals and site design, it may work better. Here are the changes:
a {z-index:1;}This solves the Opera issue and has no down-side. This should be incorporated into the technique, and has been in the original post above.- the second technique involves removing the padding from
aand adding it toa:hover, thereby making a link its original size until moused-over. I would call it a sticky link. See Lachlan’s page for more details.
Thanks Lachlan, for the great ideas.
20 Responses to “Fitts’ Law and Text Links”
- 1 Trackback on Aug 23rd, 2004 at 2:21 pm
- 2 Pingback on Sep 13th, 2004 at 2:24 pm
- 3 Pingback on Mar 20th, 2006 at 11:35 am
Hi David, it’s me again with more comments on your technique. I produced some of my own examples that I believe address all of the caveats of your examples.
http://www.lachy.id.au/dev/css/examples/2004/08/fittslaw
Let me know what you think.
Hi, Opera seems to ignore padding-bottom: isn’t it?
Jeena,
Opera actually renders the padding, but covers it with the line of text below. For instance, a link on the bottom line of a paragraph will still have clickable padding below. This problem has been solved. Use
z-indexto solve it. See the updates that I made to the post for more detail.Of course, if you have adjacent links above or below each other, it can actually make choosing the correct link more difficult.
It’s also a good idea to increase your line-height. This way the link will not cover as much text above or below. Also, adding the behavior to a:hover is pointless. It does not help you acquire the target easier because you’re already on it when the hover is triggered.
thanks for the idea and the technique!
I think it could be very useful for the anxious visitors :)
This idea of presenting links is great from the usability point of view. Good stuff.
Hi - Good ideas over here! See my comment and illustration on http://home.hetnet.nl/~francky-m/Francky’s_testpage_fitts_law.htm . Succes all for better usability!
Aaaugh! I could kick myself! Years ago I wrote an article describing how inline padding works horizontally, but just kind of overflows vertically, as per the specs. It never occured to me that this could expand inline link targets, altho NOW it is brutally obvious.
I’m so good at killing bugs, but I can hardly ever make these cognitive leaps. Nice going David, sure glad everyone is not as dense as me.
Pleasure to have you here, Big John. That’s funny. I guess it makes sense that this is something you would have run across in your work. I was rather late to the standards party, and PIE has been a great resource. Thanks.
Fitts’ law is appropriate for navigation and tool button elements, but I’m not sure it’s appropriate at all for normal web text links. The point is to prevent user error in those cases where the user is likely to make an error by clicking where they didn’t want to click. Such an error is thousands of times more likely when the user is attempting to click something where they have some degree of confidence already about where the link is, where they are relying on their subconscious and motor memory to find the correct place to click — typically with navigations and toolbars. Text links, which are usually of the sort where the user clicks them very deliberately and consciously, don’t have nearly this degree of risk associated with them.
In fact, the potential conflicts with other text links in the lines above and below, the barrier to selecting and copying text, and the simple divergence from normal web standard practices would indicate that the negatives outweigh the positives. It’s like putting ALT tags on every image on your site, including the background textures, the rounded corners, and the decorative curly cues — you might mean well, but the effect really doesn’t help.
This is why I hate calling heuristic guidelines “laws” — it tends to make people try to conform to letter of the law to the point of defeating the spirit of the law itself.
I suspect you agree with this in your gut, insofar as you do not use this technique on your own site. Trust your gut! :-)
Christopher, I don’t agree.
You make valid points, but exaggerate the negatives.
While more beneficial in the areas you mention, I think it is intuitively obvious that anything a user has to hit with a mouse benefits from increased area.
The technique, like any technique, should be adapted to users’ needs and the site’s design. If you are worried about overlap with other links or text, increase line height and/or use a smaller amount of padding. Alternatively (and this is what I now prefer to do), you can have a small (no overlap) amount of padding applied to
aelements and increase it (a little overlap) ona:hover.As for not using the technique on my site: you may have noticed this site looks a lot like a lot of other wordpress sites. It is using the excellent K2 template from Michael Heilemann and Chris J. Davis. I’ll have to speak to them about including the technique. You will notice that I use the technique on my professional site.
Quick question/comment…
The size of the original link doesn’t actually get larger until you hover over the original link. How is this making it easier to click since you still have to get in the original space.
example:
A link to be clicked is 10 x 20. It will expand to 20 x 40 when hovered. But you still have to get your mouse into that original 10 x 20…. How does expanding it to a larger target help, especially since you have already reached the target?
@Brian: Using the technique described on this page, the size of the link is in fact larger even before hover. However, I will address your question, as I like to use the technique with
:hover. It helps because a moving mouse cursor (or the hand that controls it) has momentum. Making the area larger on:hovermakes it harder to overshoot. You don’t get as much benefit, but it is still helpful.Thanks for sharing this idea.
What I tend to do when trying to reach a link is dash the mouse quickly to the area of the screen where the link is, then slowly adjust to the right place. The first quick movement may go over the link, but it generally overshoots further than the increased hover area, and the slower, more percise movement tend not to roll over and overshoot the link (either get very close to the link but not enough to active hover or hit the target).
This function is still useful, but only by getting used to the availability of this increased hover area, I no longer have to be so percise. I’m just not sure of its usefulness when found on occasional websites.
****
Just out of interest, say you had two links placed on adjacent lines one on top of the other e.g. (perhaps in a paragraph or side menu)
link1
link2
The user will still benefit from having a larger link area on hover; however, say you hovered over link1 before link2, does link2’s hover activate when directly over it or will you still be in link1’s hover area? (if you get my drift.) And if not has anyone managed to overcome this?
It sounds like a useful technique. One thing though, as far as people who have problems using a mouse (or other ‘pointing device’) is that it might be even more useful if web designers were to make more use of a:focus, so that links were clearer for keyboard users. This is overlooked by loads of webmasters, including quite a few who really ought to know better. Opera of course, has got it all sorted out and links are perfectly clear for keyboard users.
Thanks both David and Lachlan! Useful article.