Introduction

Preparing for the redesign and revision of the wufoo.com site, I spent some time re-exploring the basics of human-computer interaction, hoping to incorporate something new that has accumulated over decades of research into creating simple interfaces. The first thing that surprised me on this path was that the material on this topic was extremely compressed and clearly focused on mathematicians, since it was written in the language of the academic elite. We can assume that if they wanted to make an impression (especially on designers), they could write documents that are easier to read.
Recalling the school, I noted that only during the study of physics did mathematics acquire some meaning for me. Instead of abstract functions, I needed graphics. Reflecting in this vein, I thought that it would be nice to give a vivid interpretation of Fitts’s law, the cornerstone of designing human-machine interfaces, and explain both its concept and why these ideas are a little more complex than many

Mathematics of the obvious

Published in 1954, Fitts' law is an effective method for modeling a specific, and at the same time very common, situation arising in the development of interfaces. This situation includes an object controlled by a person (whether physical, in the form of a finger, or virtual, like a mouse cursor) and a target located somewhere else. This situation is illustrated by the first diagram:

Mathematically, Fitts law can be written as:

T = a + b log2 (D / W + 1)

where T is the average time taken to perform an action, a is the device start / stop time, b is a value depending on the typical speed of the device, D is the distance from the starting point to the center of the object, W is the width of the object measured along the axis of movement.
Mainly, this means that the time spent on achieving the goal is a function of the distance and size of the goal. At first glance, this seems obvious: the farther we are from the target and the smaller it is in size, the more time it will take for positioning. Tom Stafford develops this thought:

“Although the basic message is obvious (big things are easier to choose), the exact mathematical characteristic is impressive because it includes a logarithmic function, which means that the relationship between size and reaction time is such that a small increase in the size of small objects makes them easier to distinguish ( whereas small resizing of large objects does not matter anymore). The same applies to the distance to the goal "

Turning to the real world, it can be said that it is much easier to point out a coin than on a freckle, but to show it on a house or on a residential complex is almost no difference. Thus, when you will once again optimize your web site according to the Fitts law, remember that if the link is already rather big, then its further increase the speed of access to it will not increase. However, even a small increase in the size of small links already matters.

The law of Fitts concerns lines!

Wanting to learn a practical lesson from Fitts's equation, interface designers derived several rules for the practical application of one of the few laws of human-computer interaction. One of the rules is called
')

Goal size rule

It combines ideas that lead to Fitts’s law and Hick’s law (which will be dealt with another time) to the statement that the size of a button should be proportional to the frequency of its use. Bruce Tognazzini, interface guru from Apple, even developed a great quiz to explain how Fitts' law can be used to develop rules that drastically improve operating system interfaces.
Before you go and blindly apply these rules in your applications, I would like to remind you that Fitts law describes a very specific situation. It is repelled by the assumption that the movement from the starting point is clear and directional, and this implies a strictly defined and direct trajectory (starting with a high initial speed, as if there were no other targets, and you knew exactly where you need to). I also saw that many people think that Fitts law describes the following situation:

However, in the above equation there is no value corresponding to the height of the target, only width is included in it! Thus, since we started talking about the limitations of the Fitts law with reference to interfaces, one can say that it describes a one-dimensional situation. In the original experiments Fitts studied the performance of a person when performing horizontal movements to the target. Both the amplitude of movements and the width of the final area were measured along the same axes, which means that the model describing the law looks more like this:

Thus, by building size optimization according to the Fitts law, it can be assumed that the vertical and diagonal movements are described by the same equations. It turns out that the ease with which you can point to a separate goal, in fact, depends on the relative position of the starting point and the goal.

In the above example, the cursor on the right, due to the greater width, is technically in a more favorable situation for hitting the target than in the situation on the left. Note that the Fitts law will also work well for round purposes, since the distance to the center will be the same for all angles. However, the law becomes less precise for rectangular and more complex objects. In the following example, we will make two attempts to optimize the reference area by increasing the size of the rectangle.

In the first case, we increased the width of the target rectangle, and in the second - the height. As you can see, for this starting point, not all increases in size had the effect of making it easier to hit the target, which can be significant for web designers working with CSS and Box Model.

Physical and virtual positioning

Since the publication of the work of Fitts, hundreds of derivative experiments have been performed. One interesting piece of work was done in 1996 by Evan Graham and Christine McKenzie, which analyzed the difference between positioning objects in the real and virtual world. It shows that the movement from the starting point to the target area can be divided into two parts: the initial high-speed phase, and the deceleration phase.

In this study, the authors concluded that the first phase is affected mainly by the distance to the target. Neither the scale of the image, nor the size of the object will accelerate the approach to the goal (links of larger size will not increase the speed of movement). The only phase that affects the time for selecting small objects at equal distances is the deceleration phase. And now interesting:
“The distinction between virtual and physical imaging manifests itself only in the second phase of the movement, when visual management of slowing down to small targets is a virtual task that takes longer than a physical one”
Simply put, the links and buttons on the screen are easier to click with your finger, not the mouse. And the problem with the mouse rests not on its ability to hit the target, but on our ability to accurately slow down. Apple, all your hope for multitouch monitors.

Infinite border rule

It follows from this that computer monitors have a very interesting side effect from the Fitts target selection model, since they have something called “edges.” Jeff Atwood, author of The Coding Fear book, really explained it almost superbly in his last year’s article Fitts Law and infinite width.
Since the pointing device can go arbitrarily far in any direction, targets along the edges of the screen are in fact targets with infinite width, as shown below.

For the operating system and any full-screen application, these boundaries are usually considered the most valuable place, since technically they are the most accessible. Not only because they have infinite width, but also because they do not require a braking phase from the user when they are reached. That is why it is so incredibly simple and intuitive to assign actions like navigating between windows to the corners of the screen (as done in Compiz Fusion - approx. Lane. )

Unfortunately, web applications lack the advantages that the Rule of Infinite Borders gives. Having a restriction in the form of the need to run in a browser window with borders, the location of buttons and links along edges and corners is not of particular interest from the point of view of the Fitts law, unless the browser is running in full-screen mode, which is more typical, perhaps, only for web kiosks .

It also explains why the interfaces of web-based operating systems will never be as good as those that take advantage of the entire area of ​​the monitor.

Fitts still taxis!

A few of the above limitations of the Fitts Act are not a reason to throw it out the window. I just wanted to show that the discussions around him have not subsided to this day, like 50 years ago. And since it cannot technically accurately describe most situations in the field of interfaces - people do not always confidently move toward a goal, we don’t use direct trajectories, there are usually several targets that can lead to confusion and so on - it does not seem that much more accurate models that take into account many other factors could change the fundamental truths underlying the Fitts law.

"It was shown that the Fitts law is applicable to many cases, including various limbs (arms, legs, eye detectors), manipulators, physical environments (including underwater) and user groups (young, old, people with slow reaction and even under the influence of drugs) "

In conclusion, the main idea that I would like designers to take out is that the task of developing application design is so complex and rich includes so many variables that it is necessary to be wary of the comprehensive application of the Fitts law. With the increase in the size of monitors, the increasing popularity of ways to increase mouse acceleration, as well as scrolling technologies on large screens, it will be interesting to see how software developers can benefit from this and increase the ability to quickly overcome large distances.