Visualizing Fitts’s Law
Date : 2007 10 03 Category : Design & Usability
ParticletreeIn preparation for the redesigns and overhauls we implemented in Wufoo, I took some time to revisit a few HCI (Human-Computer Interaction) fundamentals with the hopes of gleaning something new out of the decades of research dedicated to making interfaces easier to use. One thing that surprised me was how most of the material was pretty dense, heavily geared towards mathematicians it seemed and written in the impenetrable language of the academic elite. You’d think that if they’d really wanted to make an impact (especially on designers), they’d create documents that were a bit easier to digest.
Back in school, I remember that it wasn’t until I started taking classes in physics that calculus made any kind of real sense to me. I just need diagrams to function. In that spirit, I thought it would be nice to go over Fitts’s Law, a staple in the HCI diet, with a few visuals to explain both the concept and why it’s ideas are a bit more complicated than most would have you believe.
Math of the ObviousPublished in 1954, Fitts’s Law is an effective method of modeling the relationship of a very specific, yet common situation in interface design. That situation involves a human-powered appendage at rest (whether it’s physical like your finger or virtual like a mouse cursor) and a target area that’s located somewhere else. Here’s diagram the first:
Mathematically, Fitts’s law is stated as follows:
MT = a + b log2(2A/W)
Basically, that means that the time to acquire a target is a function of the distance to and size of the target. It seems like a no brainer. The farther you are and the smaller the target, the longer it takes to move the cursor and point at said target. However, Tom Stafford said it best:
“Although the basic message is obvious (big things are easier to select) it is the precise mathematical characterization that is exciting, and that this characterization includes a logarithmic function - which means that the shape of the relationship between size and reaction time is curved so that small increases in size for small objects make it much easier to select them (whereas small increases in size for big objects don’t make that much difference). And the same applies for changes in target distance.”
Size and selection times: Fitts’s Law
Just to bring it into the real world, this makes sense since a penny is a lot easier to point at than a freckle and a house is just as easy to point at as an apartment complex. So the next time you optimize your web site based on Fitts’s Law, remember that if you’re link is already huge, making it “huger” will not significantly increase the speed at which one can access it. However, making tiny links a little bigger does make a difference.
Fitts’s Law is Made of Lines!Wanting to find practical lessons from Fitts’s equation, interface designers have derived a few rules of best practice to take advantage of one of the very few laws of human interaction. One rule, The Rule of Target Size, combines ideas behind Fitts’s Law and Hick’s Law (a law I’ll talk about on a later date) to state that the size of a button should be proportional to its expected frequency of use. Bruce “Tog” Tognazzini of Apple interface fame even developed an excellent quiz to explain how Fitts’s Law can be used to develop rules to drastically improve operating system interfaces.
Before you go and follow these rules blindly in your applications, I want to remind you that Fitts’s Law describes a very specific situation. There is an assumption that the movement from the starting position is rapid and aimed, which means it’s always in a straight line and confident (starts with high initial velocity as if there were no other targets and you knew exactly where you needed to go). Mentally, I’ve also seen a lot of people think Fitts’s Law describes the following situation:
However, in the equation above, there’s no variable for height of the target area, only width. And so one of the most talked about limitations of Fitts’s law in HCI circles is that it predicts movement in only one dimension. In Fitts’s original experiments, he actually tested human performance in making only horizontal moves toward a target. Both the amplitude of the move and the width of the terminating region were measured along the same axis, which means the model it describe looks more like this:
Now, if we were to base link size optimizations solely on Fitts’s Law and we assume that vertical and diagonal movement can be described using the same equation, then the ease at which you can point to a specific target actually depends on where your starting position is in relation to your target.
In the example above, the cursor on the right will technically have an easier time selecting the target than the cursor on the left since it will have more “target width” to work with. Notice that Fitt’s Law would work fine for circular targets since the width to the center of the object would be the same from all angles, however, it becomes less accurate for rectangular targets and even more so for irregular objects. In the next example, we see two attempts to optimize the target area of a link by increasing rectangular dimensions.
The second figure increases the width of the target box and the third increases the height. Based on where the mouse cursor starts, not all size increases on a rectangular target result in an easier target acquisition, which could be significant for web designers considering all CSS design is based on the Box Model.
Physical vs Virtual PointingHundreds of derivative experiments have been performed since the publication of Fitts’s findings. One interesting paper I read from 1996 by Evan Graham and Christine MacKenzine, analyzed differences between how well we pointed at objects in real space versus objects on the computer screen. I learned that the movement from the starting point to the target area could be divided into two parts: the initial high velocity phase and a deceleration phase.
In their study, they discovered that the first phase was only affected by the distance away from the target. The scale of the display nor the size of an object didn’t make you approach it more quickly from the start (bigger links don’t make you more eager). The phase that actually affects the time to select a smaller object at the same distance, is in the deceleration phase. Now, here’s the “interesting” part:
“The difference between the virtual and physical display is apparent only in the second movement phase, where visual control of deceleration to the smaller targets in the virtual task took more time than in the physical task.”
Basically, links and buttons on a screen are harder to point out with your mouse than with your finger. Apple, I eagerly wait for the release of some multi-touch monitor goodness.
Rule of the Infinite EdgeIt turns out that computer monitors add a very interesting twist to Fitts’s model of target selection, because they have very interesting properties called edges. Jeff Atwood of Coding Horror actually explained this rather excellently last year in an article on Fitts’s Law and Infinite Width. Because a pointing device can only go so far in any direction, targets at the edge of the screen technically have infinite target widths as illustrated below.
For an operating system and on any full screen application, these edges are usually considered the most valuable real estate since they are technically the most accessible. Not only do they have infinite widths, they also don’t require the user to have a deceleration phase when they approach these targets since the edge of the screen will just stop them. This is also why it’s incredibly fast and intuitive to assign actions like Expose and Dashboard to the corners of a screen.
Unfortunately, web applications do not get to benefit from the Rule of Infinite Edges. Having the limitation of needing to run in a browser window with borders, it’s of little value according to Fitts’s Law for web designers to place buttons and links at the edges and corners unless the browser is running at full screen, which seems to only happen for kiosk applications.
This also might explain why the interfaces of Web Operating Systems will never be as good as those that can take advantage of the entire real estate of the monitor.
Fitts Still Rules!The few limitations of Fitts’s Law that I’ve presented here are not an attempt to have you throw its lessons out the window. My hope is that by illustrating some of the debates, it’ll show you how something as simple as pointing at something is just as relevant and debatable now as it was over 50 years ago. And while it’s technically not an accurate description of most interface situations—humans don’t always move confidently to a target, we don’t move in only straight lines, there are usually several targets that can confuse us and target areas are almost always two dimensional—research that has created a more accurate mathematical model that compensates for 2 and even 3 dimensions, hardware noise, human error and a host of other factors doesn’t seem to change the fundamental truths behind Fitts’s rather versatile equation:
“Fitts’s law has been shown to apply under a variety of conditions, with many different limbs (hands, feet, head-mounted sights, eye gaze), manipulanda (input devices), physical environments (including underwater!), and user populations (young, old, mentally retarded, and drugged participants).”
In the end, the big idea I’d like designers to take away from this article is that the challenge of software application design is so complex and filled with so many variables, that blanket solutions derived from Fitts’s Law should be used cautiously. With the increasing size of monitors, the rising popularity of variables that increase mouse acceleration and technologies that alter how we scroll through large screens, it’ll be interesting see how software designers will take advantage of tools that let us augment our ability to close large distances quickly.
