Human Factors: A Practical Approach to Fitts' Law

Fitts' Law for the Software Developer
By Neil A. Alan

There are lots of very talented folks who are designing software interfaces these days. While these designers may be very talented software developers, they do not necessarily have the training they need to be excellent interface designers. Middle school students on up through web application and software application designers are placing buttons and menu items wherever they feel like it. This article is intended to describe Fitts' Law and how it pertains to the interface designs they develop every day.

Why should we spend any time thinking about the placement of buttons, their size and shape? It turns out that scientists have been studying the placement, size and shape of controls since before World War II. The initial discussion about controls centered around the placement of cockpit controls in airplanes. This led to a discussion of the control placement in critical systems like missile silos and nuclear power stations. Even though your software may not be designed to manage nuclear power stations, you should still take a look at Fitts' Law as it relates to your software.

Fitts' Law can be expressed as a formula. Don't get nervous about a complicated formula, I'll explain it in a minute. The formula essentials says that the time (T) it takes to move a pointer from one spot on any screen to another spot on the same screen is defined as a ratio of the Distance (D) between the two spots and the Size (W) of the target destination. For those interested, both a and b are constants in the formula so the only variables that the developer can vary to affect T are D and W.

$T = a + b \log_2 \Bigg(1+\frac{D}{W}\Bigg)$

Fitts' Law

Based on Fitts' Law, the time it will take for a user to move the mouse pointer from one location on the screen to another location screen depends on how far away the two controls are and the size of the destination control.

There is an outstanding demonstration of Fitts' Law that is easy to use and easy to understand. Click on the demonstration link below and then come back to discuss the ramifications.

Click Here to Visit Fitt's Law Demonstration

Based on your new understanding of Fitts' Law, let's take a look at some practical examples of putting Fitts' Law to work for our users.

Here is an example of a commercial software application that is in use as of October 19, 2014. This is a grid view of data for the user to consume and manipulate. On the far left of each row there is a plus sign inside of a box. That box is 11 pixels high by 11 pixels wide. This is the control that the software developer thought would be good for expanding the content that lies within this summary row. On the far right of each row is a link button that is 11 pixels high by 42 pixels wide. This is the control that the software developer thought would be good for updating the content of the data row. What does Fitts' Law say about small targets that are far apart?

A Grid View before Fitts' Law is applied

Fitts' Law says that the time it takes for a mouse pointer to be moved from one location to another location is based on two factors: the distance from start to finish and the size of the target. In this case, the controls are as far apart as possible and the target sizes are ridiculously small. This will increase the amount of time that it will take for the user to manipulate the data. The increased time will make the software more difficult to use and will increase user frustration with the interface.

Now let's look at how we could use Fitts' Law to make this interface easier to use and faster to manipulate. What if the hover event was captured on each row as the mouse moved over the grid view? This could be shown to the user by highlighting the row as the mouse over event took place. This would also make it easier for the user to read the row of data. If the user clicks on the row, an HTML popup window could appear that would give the user a fast and easy way to read the content of the data behind the summary row. The popup window would also give the developer space to present reasonably sized buttons to complete the same functionality that the old software provided in form of tiny link buttons. The new control buttons are 50 pixels high by 100 pixels wide.