Post #485

Link presentation and Fitts' Law

7th September 2004, lunch time | Comments (24)

A few weeks ago Dave Shea posted an article about Fitts’ Law, which states that:

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

This means that the larger the target, and the shorter the distance you have to move to get to that target, the quicker it’ll be to acquire.

Dave had taken that idea into account when producing his latest site design, and it’s something that I tried to incorporate into my recent work as well.

Beautiful big links

One thing I’ve grown used to when browsing my blog is the idea that I don’t always have to directly mouse over linked text in order to interact with a link. For an example of what I mean, run your mouse down the list of links in the right-hand column of this page. Regardless of the length of text contained in the link, the actual <a> spans the full width of the column.

This image should demonstrate that:

Screenshot showing a section of the sidebar from this site
Nice, wide, links are easy to use

This approach not only makes the physical act of selecting links easier, but it also allows me to hover over a link without obscuring the text it contains (and as an additional perk the horizontal lines provide a nice, structured, visual effect).

So by applying a few simple CSS rules I’m rewarded with four benefits:

  1. quicker and easier link selection;
  2. the ability to hover over a link without obscuring the text it contains;
  3. the visual separation of each link from the many others that surround it;
  4. and finally, the subtle addition of visual structure to the whole page.

What are these simple CSS rules?

The CSS needed to get this kind of thing working is easy as pie. Here’s a simplified example of the code I use to style my right-hand column menus:

  1. ul li a {
  2. border-bottom: 1px solid #eee;
  3. display: block;
  4. text-decoration: none;
  5. width: 190px;
  6. }
  7. Download this code: 485a.txt

A real-world example

I thought it might be helpful for you to see some kind of real-world before-and-after example of this technique. Herr Bowman just happened to be logged on to iChat while I was writing this post, so after getting his permission I put together two simple animations to demonstrate how things would look and behave if he switched to using this technique in his sidebar.


On the left is Doug’s original sidebar. On the right I’ve highlighted the target area of each link, in yellow. If you click on the image you can view an animation of this menu being moused over.

Screenshot showing the original menu
Doug’s original sidebar

The above graphic should illustrate that each link’s target area only covers the enclosed text, and nothing more; so if you want to select a link, or hover over it to get the title popup, you’re going to have to aim fairly carefully, move the mouse around a bit, and also cover-up the text with your cursor.


Here’s an altered version of the sidebar, where the links have had border-bottom: 1px dotted #adb0b8; display: block; text-decoration: none; width: 152px; applied to them. Again, I’ve altered the image so you can see that the target area for each link, and you should notice that these areas are much greater than in the first example. (As before, click on the image to view an animation of the menu being moused over.)

Screenshot showing the altered menu
The altered sidebar

While the aesthetics will come down to personal taste, there’s no doubting that as Fitts’ Law goes, this second menu is more effective than Doug’s original version. That’s not to say that Doug made a mistake, or that his menu is ineffective (far from it), just that this second version was built with a different focus in mind than the original.

What we don’t want

Having said that increasing a link’s target area is a good thing, I should add in a caveat: it’s only a good thing if that’s what the user expects.

Occasionally I come across a site that uses display: block; width: ##px; for links, but which fails to convey the extra large target area in an obvious manner. I’ll be moving my mouse through some apparently unclaimed whitespace when suddenly, and much to my surprise, a link:hover activates. It’s not whoops-there-go-my-underpants surprising, but it’s the sort of thing that makes a user stop and wonder what happened; and as designers I’d suggest that’s something we should be avoiding.

Why designers make this mistake

The normal visual clue a user looks for to determine the extent of a link (i.e. its clickable area) is either an underline, an enclosing box, or some kind of background color.

Examples of link presentation from various sites
Examples of link presentation

Most sidebar links will just use an underline (text-decoration: underline;), but unfortunately the underline doesn’t play well with this presentation technique.

To demonstrate this fact, I’ve put a screen shot below. Both links have display: block; width: 200px; applied, but while the first one uses the default underline (text-decoration: underline;) the second has had a bottom border applied to it instead (border-bottom: 1px solid #111; text-decoration: none;):

Original links

I’ve then highlighted the clickable area for each link in yellow:

Links with clickable areas highlighted

You can see the clickable areas are exactly the same size, but while the second one has a visual clue as to the scope of this area, the first one gives us no hint at all. Designers who don’t understand this issue but who still use display: block; width: ##px; run the risk of confusing their users.

Doug’s not a wally

Like everything else on his site, Doug’s choice not to use this technique in his sidebars was no doubt carefully thought out, and I’m in no way suggesting he’s wrong to not use it (he does in fact use it in his primary navigation, just not his sidebar navigation). What I am saying is that I like the benefits it brings to my blog, and that I noticeably miss it whenever I visit someone else’s site.

Use it, or don’t use it, the choice is obviously yours, I just thought I’d jot down a few thoughts on the matter for those who aren’t aware of the technique. I hope someone finds it useful.

Jump up to the start of the post

Comments (24)

Jump down to the comment form ↓

  1. MaThIbUs:

    Your latest redesign inspired me to use this technique on my site as well. This stuff rocks. Thank you.

    Posted 17 minutes after the fact
  2. Rob Mientjes:

    Good write-up. I love to use display: block; since it's just nice to make all links equal width and it's more accessible, it even works when I'm drunk! :op

    But there's one drawback. I discovered one rendering bug in FF/Win when using display:block, content and background, which irritates me. I made a test case[1], please contact me if you have other browsers borking.

    Sorry Dunst, for being off-topic, but if we're at it, I just might bring this under attention too. It's damn ugly for those of us still having to live with Windows.


    Posted 49 minutes after the fact
    Inspired: ↓ MaThIbUs
  3. Chris Pederick:

    "It’s not whoops-there-go-my-underpants surprising..."

    Hehe...nice write-up, Dunstan.

    Posted 58 minutes after the fact
  4. Jonathan M. Hollin:

    I've used this technique on my website since the beginning. I wasn't concerned so much with Fitt's Law (although the larger "active" area is nice) as I was with aesthetics... I think mouse-over effects that are unbalanced look awful - and I wanted to have mouse-over highlights on my menus.

    Good write-up Dunstan.

    Posted 1 hour, 6 minutes after the fact
  5. Chris Messina:

    Actually, you beat me to the punch here, Dunstan. I have a very similar blog post simmering in my head (for my non-existant blog) called "The Theory of the Big Red Button Interface". You basically said everything I was going to say, so now I'll just link to you.

    Thanks for doing the leg work! ;)

    Posted 1 hour, 11 minutes after the fact
  6. Wim:

    Great presentation of an excellent idea !

    BTW: I love the way you use an ordered list to display the code sample. With the last list item being a txt download link. Great idea !

    Posted 1 hour, 24 minutes after the fact
  7. Scott:

    The only trouble I have with this is when a links name is too long and breaks a line. :

    Posted 1 hour, 26 minutes after the fact
    Inspired: ↓ Waylman
  8. Christopher:

    Great article. Fantastic work getting the word "underpants" into a post about usability. the inherent humour of underpants should never be overlooked.

    I hadn't even been thinking about Fitt's when I designed my site, thanks fro jogging my memory.

    Posted 1 hour, 52 minutes after the fact
  9. Vinu:

    That's a very cool idea. Although the effect is rather subtle, I think it really does make a difference in a visitor being conscious of a link due to its expanded target area. I will soon have to incorporate this into my blog :).

    Posted 2 hours, 19 minutes after the fact
  10. Peter Asquith:

    Well, I suppose, if the underpants Fitts wear wear them! And, as such, I've just updated my navigation with a "display: block;" to force the link width. Excellent article, thank you.

    Posted 2 hours, 41 minutes after the fact
  11. Geoff:

    Thx for this entry dunstan, I already used this technique without really think about it. It is indeed something useful to mention this helps navigation, I'll try to remember it for my further projects...

    Posted 15 hours, 40 minutes after the fact
  12. Shade:

    Interesting... This may help us develop the new magnablog designs. I completely agree with what you've said. Brava.


    Posted 17 hours, 13 minutes after the fact
  13. MaThIbUs:

    I'm on FF 0.9 on Windows XP Professional, and I don't notice any flickering stuff... which is a good thing, I guess.

    Posted 18 hours, 2 minutes after the fact
    Inspired by: ↑ Rob Mientjes
    Inspired: ↓ Rob Mientjes
  14. Rob Mientjes:

    It is a good thing. I just figured, when only this specific combination fails to work like it should, it has to be a bug. You're not the only one reacting, and to make things clear to the rest: maybe it's me, maybe it's a strange setting, but don't worry - it probably really IS me. So thanks to all of you who mailed me, it's not needed anymore. I'll work it out.

    Shade, you idea-stealing dawg! :op

    Posted 18 hours, 6 minutes after the fact
    Inspired by: ↑ MaThIbUs
  15. Waylman:

    Actually Scott, this is better when a line wraps. with underline, both lines of the link text are underlined. However, with border-bottom, we only get a line under the last line of the link. This way, the lines separate each link (do you know how many times I thought I was clicking on a different link only to find it was the second line of a wrapped link - very annoying) and the entire area between each line is click-able as Dunstan points out.

    Dunstan, excellent write-up. You just reminded me I have not done that with my soon to launch redesign. Guess I'll have to get on that right away.

    PS: love the spell-checker!

    Posted 18 hours, 28 minutes after the fact
    Inspired by: ↑ Scott
    Inspired: ↓ Peter Parkes
  16. Turnip:

    A good post Dunstan. It's certainly something I will think about in the future.

    I fully agree that bigger buttons are better (within reason), but I have to say that I'm not totally crazy on the presentation that you've used. As usual you've made it look pretty slick yourself, but in general I would say that a long underline looks ugly, and slightly illogical (people don't tend to write a title on a page and then draw a line across from side to side, they just underline the text). I'd be more inclined to go for something more "button like", although in a long list of links that would look stupid, so your way is probably better for that.

    I guess it all depends on the situation.

    Posted 19 hours, 46 minutes after the fact
    Inspired: ↓ Peter Parkes
  17. Michael Pierce:

    Thanks for posting this tip; I use the same approach on my site. It bugs the begeebers out of me when sites visually indicate a block around a link, but don't expand the link to use the entire block! Not that I’m any great web developer, just a picky user.

    With Doug’s list, however, I wouldn’t because he doesn’t visually indicate a block around each link. So, by just underlining each link, I expect to have to hover over the text itself.

    Thanks again for the nice post; just hope more people apply it, when appropriate…my mouse finger could use a break! ;-)

    Posted 19 hours, 53 minutes after the fact
  18. Peter Parkes:

    "the horizontal lines provide a nice, structured, visual effect"

    I'm a big fan of the subtle button-like effect created by the borders. The fact that the border of the link extends to the entire width of the column triggers a little 'block element' alert in my mind, and so I don't end up trying to click an intermediate line in a wrapped link. But maybe that's just me.

    Posted 23 hours, 26 minutes after the fact
    Inspired by: ↑ Waylman, ↑ Turnip
  19. Mark Tranchant:

    Nice write-up, and something I've been doing for a long time on my site anyway, without formalizing it into a law.

    If you choose not to venture into the Dark Side of pixel sizing, there is an additional caveat.

    My menu bar is 9em wide, and the <a> elements are declared thus:

    .mbox ul li a { display: block; width: 100%; }
    body>.mbox ul li a { width: auto; }

    That sets the width to 100% for IE, and "auto" for real browsers. Seems to work just fine.

    Posted 1 day, 11 hours after the fact
  20. Prashant:

    Thanks for the great tip Dunstan.

    I'm using it on my blogroll.

    Posted 2 days, 4 hours after the fact
  21. Joe Clay:

    Been there, done that. Seriously though, it's nice to know other people have actually thought this through!

    Posted 2 days, 12 hours after the fact
  22. Conor Hastings:

    Thanks dunstan, I just implemented this on my blog

    Posted 1 week, 1 day after the fact
  23. Luke Shingles:

    Just make sure you don't make the click target too big or you'll annoy people who like to autoscroll. Middle click is autoscroll as well as open link in new tab for most people.

    Posted 2 weeks, 3 days after the fact
  24. Ryan:

    I've been meaning to add this ability to my site for a while now. The challenge I had was how to make this work for links you don't know the width of. Because I use tables of various sizes for the data results, I accomplished this simply with:

    td a { display:block; }

    Hopefully this will help people using tables for data.

    A challenge though:
    I can't figure out how to make the entire row switch background though - because there are at least 2 links per <tr>. Any thoughts?

    Posted 3 weeks, 4 days after the fact

Jump up to the start of the post

Add your comment

I'm sorry, but comments can no longer be posted to this blog.