How does this all start and what is it about

In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size. By his law, fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off.

“Fitts’ law states that the amount of time required for a person to move a pointer to a target area is a function of the distance to the target divided by the size of the target.”

Thus, the longer the distance and the smaller the target’s size, the longer it takes.

Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. For example, this law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices) — smaller buttons are more difficult (and time-consuming) to click.

Ideal Fitts law application and Prime pixel

The ideal fitts’ law application would let us know where’s the user cursor is when he lands on the application. This point would be called Prime Pixel, the point where the user would carry out all his tasks from. Determining this point, we could adapt to user and design for him by making all the shortest paths to the actions that we expect the user would take.

Unfortunately, while our browser and applications(example windows apps, desktop games) can utilize the prime pixel but a website cannot. Even if we determine the prime pixel, it would change every time the user moves the cursor. Thinking of ideal Fitts law website, it would make the user nauseate whenever he moves his cursor by moving all the elements in the website.

But, there is good news too. While we can’t determine a prime pixel but we can determine the Likely Prime Pixel by the actions done by the user. So, for example, if a user clicks “login”, the box that appears for the user to do so should be as close to the “login” option as possible, and the “submit” button should be as close to that text box as possible, too.

The web designer’s point of view would be the point sitting in the middle of the screen is the prime pixel. That’s why Google’s search box is in the center of the screen. When you visit Google, you want to find information. So, Google’s designers, knowing the most important possible action is placed where the prime pixel is, let you enter your search terms nice and easily. Imagine if the box were at the corner of the screen; our eyes would find it awkward. Awkwardness means work; working “switches” users off.

The other Pixels to consider too: Magic Pixels

There are four other pixels that matter to Fitts’ Law in web design. We find these in each corner of the screen. They’re called “magic pixels”, and they provide a boundary that doesn’t exist in the real world. There’s nowhere on earth that you can’t move to, but on screen it’s different. You cannot go beyond the corners.

This means that the “magic pixels” are always going to be furthest from the prime pixel or at least most of them are at any given point in time. Thus, they’re the least valuable real estate on the screen. They’re considered to be the least useful places to put anything important when you apply Fitts’ Law.

Combining Fitts law with other design principles can create an eye-catching design and guide the user towards the desired actions with creative features.

How does Fitts Law work?

Fitts’ law is centered around a mathematical equation that is used to illustrate the time it takes to reach a target object. A target object, in the context of User Interface, can be an interactive element such as a submit button, a hyperlink, and an input field in a web form. The idea is the quicker you can reach a target object, the more convenient and easy it is to use.

The equation is as follows:

In the equation above: 1. Time is the amount of time required to complete the movement 2. a and b are empirically determined regression coefficients, which is basically a fancy way of stating they are values gained from direct observation that build a slope. 3. Distance is a measurement from the starting point to the end point (target object) 4. Width is the width of the target object

One of the most important lessons we can take from Fitts’ law is that, while a larger target is clearly easier to click on, it isn’t necessarily the most optimal. This is counter to what many user interfaces do with their oversized user interface components. Bigger items aren’t always more optimal than smaller items in the Fitts’ Law model.

Fitts’ law is a binary logarithm. This means that the predicted results of the usability of an object run along a curve, not a straight line. In web design, this means that a very small object will become significantly easier to click when given a 20% size increase, while a very large object will not share the same boost in usability when given the same 20% boost in size.

Where and how do we use it in Interface design

The user interface can affect the user experience in a number of ways like the size of the target and its distance from the user current position. Here are a few major factors that affect user experience:

Creating Larger Targets

Creating larger targets will facilitate interaction as well as allow you to get the most pixels out of your interface. For example, some websites do not extend the clickable area of a button or link to the entire target. As a result, more precision is required to move the cursor to the respective link, which leads to slower navigation times. Fitts’s Law would suggest utilizing every available pixel to enlarge the clickable area and thus making it a larger target to click.

The downside of large targets is, of course, that they can break the balance in your interface as well as quickly take up screen real estate. However, even if you have plenty of space to spare, you do not have to constantly enlarge your target areas to make them more usable since the predicted usability of the size of a button progresses in a non-linear fashion.

Minimize Movement

If you place the links and buttons users are most likely to access on a regular basis next to each other, rather than distribute them across the interface, you will speed up interaction by reducing the number of pixels the cursor will have to travel. But, Arranging elements strictly according to this formula can cause conflict with other important design principles, such as the principle of grouping and separating different classes of functionality or content. Its purpose is to give your interface a clear and consistent structure as well as increase its discoverability.

Avoiding Muscular Tension

The goal of Fitts’s index of performance (PDF) is to quantify the information capacity of the human motor system. In other words: it aims to rank input methods according to the amount of physical effort they require to execute a certain command.

The benefits of effortless input methods are most obvious when working with cumbersome devices. The most prominent example is vertical touchscreens, which are typically deployed in professional environments to create, visualize and manage large sets of data. When working with vertical screens, keeping your arms in an upright position can quickly tire the deltoid muscles and cause input mistakes or force the user to abandon the interaction. Therefore, avoiding complex and strenuous input techniques can facilitate and prolong the interaction with those devices.

Input methods that are more difficult to perform can sometimes actually prevent mistakes. For example, mobile devices are often carried around in pockets, which can trigger commands by accident. In those situations, high-precision input methods are deployed, which use a higher input difficulty to make sure that a command is not executed accidentally. However, these input methods are also a way of making users aware of the severity of the command.

Usage of Prime Pixels and Magic Pixels

Corners and edges of the screen are especially fast to access. However, the fastest-to-acquire pixel in any situation is simply the pixel at the current cursor position, which has lead to the introduction of the right-click context menu into human-computer interaction.

The benefits of placing items at the corners and edges of the screen are that the screen frame guides and positions the cursor once it reaches that location. The user could basically throw the cursor to a corner or edge to select the respective item without having to readjust the cursor position. The result: the targets will be much easier and faster to click.

the corners and edges of the screen, two potential problems should be mentioned when working with mouse-operated devices. On large screens, the number of pixels the cursor will have to travel can somewhat offset the aforementioned benefits. Also, Web designers will not be able to benefit from this rule because their content (except when in full-screen mode) is run in a browser window. As a result, they cannot take advantage of the edges of the screen and will almost necessarily have to opt for a more compact, centered layout.

However, when working with devices that are not mouse-operated such as touchscreens and style, placing interface elements at the corners and edges of the screen will not only yield any positive results as to speed up interaction. It can even have a detrimental effect. On large screens, it would require users to constantly stretch their arms, which can tire them very quickly. Consequently, frequently accessed tools should be made into freely movable objects on large devices. Thus, users would be able to work more comfortably by placing these tools close to their preferred or prime hand position, which, incidentally, would be very much in line with Fitts’s Law.

Usage of Radial and Linear menus

There are two kinds of context menus: linear menus and radial or pie menus. Consulting Fitts’s Law will reveal that it favors radial menus over linear menus. The reasons: First, the wedge-shaped menu entries offer larger target areas. And second, because the menu has a circular shape, the pixels the cursor has to travel to reach either menu entry are always identical. This consistency allows users to create more efficient muscle memory. By contrast, in linear menus, only the menu entries closest to the initial cursor position are quickly accessible, which is why the most frequently performed actions should have those spots reserved for them.

Empirical studies confirm the theoretical assumptions about radial and linear context menus, stating that seek time and error rates give the former a slight edge over the latter. Yet when the participants were asked purely about their subjective preferences, the pie menu was not favored anymore.

In fact, the pie menu, although favored by Fitts’s Law, does have a few disadvantages that can outweigh its benefits in certain situations.

One issue is that the circular menu shape quickly leads to small target areas when more menu entries are added. One way to deal with this problem is to remove redundant options, in line with Hick’s Law. For example, if menu entries are not only applicable to the selected item, or if they are already accessible somewhere else in the interface, they do not have to be incorporated into the context menu as well.

A second way to manage a large number of options is sub-menus. While this is possible within radial menus, doing so will quickly clutter the screen and make them appear less organized than traditional linear menus. This is related to a very specific advantage of linear over radial menus: linear menus make it easier to express hierarchies via sub-menus as well as to group entries. And finally, the radial menu’s take up more space and create problems.

Conclusion

The perils and problems faced by UX designer for designing the interfaces include considering the balance, combining the measurable and non-measurable dimensions of the usability and user experience to create the best fit for the users. Fitts law would provide the Interface designers a way of dealing with the usability and user experience dimensions in a quantifiable measure using the mathematical equations.

Of course, there are mathematical ways to get the quantifiable measure of every design system. But, interfaces are designed for humans, they also have to be consistent, considerate, inclusive, playful and discoverable qualities that can hardly be measured as easily as clicks or pixels. The stunning accuracy and simplicity of mathematical formulas may sometimes lead designers to favor the measurable over not-so-easily-measurable dimensions. And while mathematical formulas can, indeed, help you enrich user experience, you should treat those formulas as tools, not as principles.

Thanks for Reading !!! What are your thoughts about it ?

Email: sourabh.purwar@gmail.com