Introduction

In preparation for the redesign and revision of wufoo.com , 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 along the way was that the material on this topic was extremely concise and clearly oriented to mathematicians, as it was written in the language of the academic elite. It can be assumed that if they wanted to impress (especially the designers), they could write documents that are easier to understand.
Remembering the school, I noted that only during the study of physics, mathematics acquired some meaning for me. Instead of abstract functions, I needed graphics. Thinking in this vein, I thought it would be nice to give a clear interpretation of Fitts' law, the cornerstone of the design of human-machine interfaces, and explain both its concept and why these ideas are a little more complex than many would like

Math obvious

The Fitts law, published in 1954, is an effective method for modeling a specific and, at the same time, very common situation that arises when developing 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, the Fitts law can be written as follows:

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

where T is the average time taken to complete the action, a is the device start / stop time, b is the value depending on the typical speed of the device, D is the distance from the start point to the center of the object, W is the width of the object measured along the axis of movement.
This mainly means that the time taken to reach 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 to position. Tom Stafford develops this idea:

“Although the main 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 the size and reaction time is such that a small increase in the size of small objects makes it easier to distinguish ( whereas a small resizing of large objects no longer matters). The same goes for the distance to the goal. ”

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

Fitts law applies to lines!

Wanting to learn a practical lesson from the Fitts equation, interface designers have deduced 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 the ideas leading Fitts' law and Hick's law (which will be discussed another time) to the statement that the size of the button should be proportional to the frequency of its use. Bruce Tognazzini, Apple's interface guru, has 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 based on the assumption that the movement from the starting point is clear and directional, and this implies a strictly defined and direct trajectory (starting at a high initial speed, as if there were no other targets, and you knew exactly where you needed it). 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, it includes only the width! Thus, since we started talking about the limitations of the Fitts law with respect to interfaces, we can say that it describes a one-dimensional situation. In Fitts' original experiments, human performance was studied when performing horizontal movements toward a target. Both the amplitude of the movements and the width of the final region were measured along the same axes, which means that the model describing the law most likely looks like this:

Thus, when constructing size optimization according to the Fitts law, it can be assumed that 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 start point and the goal.

In the above example, the cursor on the right, due to its wider width, is technically in a more favorable situation for hitting the target than in the situation on the left. Note that Fitts' law will also work well for round purposes, since the distance to the center will be the same for any angle. However, the law becomes less accurate for rectangular and more complex objects. In the following example, we will make two attempts to optimize the link 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 size increases have an effect in the form of an easier hit on the target, which can be significant for web designers working using CSS and Box Model.

Physical and virtual positioning

Since the publication of Fitts' work, hundreds of derivative experiments have been performed. One interesting work was carried out in 1996 by Evan Graham and Christine Mackenzie, which analyzed the difference between the positioning of 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 primarily by the distance to the target. Neither the image scale nor the size of the object will accelerate the approach to the target (links of a larger size will not increase the speed of movement). The only phase that affects the time it takes to select small objects at equal distances is the deceleration phase. And now for the interesting part:
“The difference between virtual and physical displays only appears in the second phase of movement, when the visual control of slowing down to small targets is a virtual task that takes more time than physical”
Simply put, it’s easier to click on the links and buttons on the screen with your finger, not with the mouse. And the problem with the mouse rests not in its ability to hit the target, but in our ability to slow down for sure. Apple, your monitors with multi-touch are all hope.

Infinite border rule

It follows that computer monitors give a very interesting side effect from the Fitts targeting model, because they have something called edges. Jeff Atwood, author of The Horror of Coding, really explained it almost perfectly in his last year article, Fitts' Law and the Infinite Width.
Since the pointing device can go arbitrarily far in any direction, the targets at the edges of the screen are actually 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, because 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's why it's so incredibly simple and intuitive to assign actions like navigating between windows to the corners of the screen (as is done in Compiz Fusion - approx. Per. )

Unfortunately, web applications lack the benefits of the Rule of Endless Boundaries. Having the limitation of the need to launch in a browser window with borders, the location of buttons and links at the edges and corners is not of particular interest from the point of view of Fitts law, unless the browser is launched in full screen mode, which is more typical, perhaps, only for web kiosks .

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

Fitts still steers!

Some of the aforementioned limitations of Fitts' law are absolutely no reason to throw him 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 he cannot technically accurately describe most situations in the field of interfaces - people do not always confidently move towards the goal, we do not use direct paths, there are usually several goals, which can lead to confusion, and so on - it does not seem to be much more accurate models that take into account many other factors could change the fundamental truths underlying Fitts' law.

“The Fitts law has been shown to apply to a variety of cases, including various limbs (arms, legs, gaze detectors), manipulators, physical environments (including underwater), and user groups (young, old, people with slow reactions and even drug exposure) "

In conclusion, the main idea that I would like designers to bring out is that the task of developing application design is so complex and rich, includes so many variables that you should be careful about the comprehensive application of Fitts' law. With the increasing size of monitors, the growing 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 long distances.