Mastering Fitts‘s Law to Radically Simplify Your UX

You may not realize it, but every time you use a computer or smartphone, a 65-year-old law of human motion is governing your interactions. It‘s called Fitts‘s Law, and it fundamentally shapes the way we design user interfaces and experiences today.

Despite its age, Fitts‘s Law remains one of the most important concepts in UX design. As we‘ll explore, it has significant implications for the size and placement of click targets, buttons, menus, and other interactive elements.

By understanding and applying Fitts‘s Law, designers can dramatically simplify and improve the interfaces they create. In this in-depth guide, we‘ll cover everything you need to know, including:

  • The history and basics of Fitts‘s Law
  • How it impacts UX and UI design
  • Examples of Fitts‘s Law in action
  • Tips for applying it to your own projects
  • Limitations and the future of the law

We have a lot of ground to cover, so let‘s dive right in!

What Is Fitts‘s Law?

First published by psychologist Paul Fitts in 1954, Fitts‘s Law is a mathematical model of human motion, specifically of rapid, aimed movement. It predicts that the time required to quickly move to a target area, such as by pointing or clicking, is a function of the ratio between the distance to the target and the size of the target.

In essence, Fitts found that the smaller and further away a target is, the more difficult it is to hit accurately. Conversely, the larger and closer the target is, the easier it is to reach quickly.

This has obvious implications for user interfaces, where we are frequently clicking or tapping on elements like buttons, links, form fields, and menu items. The size and positioning of these elements will directly impact their usability, based on Fitts‘s Law.

Diagram of Fitts's Law

In mathematical terms, Fitts‘s Law can be stated as:

MT = a + b * log2(2D/W)

Where:

  • MT is the amount of time required to move to the target
  • a and b are constants empirically determined through regression
  • D is the distance from the starting point to the center of the target
  • W is the width of the target

While designers generally don‘t need to worry about the exact math, understanding the relationships of size, distance, and time is crucial. As we‘ll see, it gives us a scientific basis for making decisions in our interfaces.

Origins and History of Fitts‘s Law

Fitts‘s original research was actually done in the context of military hardware design in the 1940s. He was looking at the optimal size and positions of controls in fighter plane cockpits.

Fitts set up an experiment where participants had to quickly tap two metal plates alternately with a stylus. He varied the size of the plates and the distance between them, and timed the results. Publishing his findings in 1954, he showed a clear logarithmic relationship between target size, distance, and selection time.

Fitts's original experiment apparatus

This research was later expanded on by others in the field of human-computer interaction, and Fitts‘s Law began being applied to digital interfaces in the 1970s and 80s. Fundamentally, a mouse or touchscreen is not that different from Fitts‘s original stylus tapping rig – the same human motion principles apply.

Since then, Fitts‘s Law has been extensively studied and empirically validated in the context of UX design. It is now widely understood and applied by designers looking to create efficient, easy-to-use interfaces.

Implications for User Interface Design

So how exactly does Fitts‘s Law translate into UI and UX design? Let‘s break it down into a few key principles:

1. Size Matters

The larger an element is, the easier it is to click or tap. This means that key actions and frequent selections should have relatively large click targets.

For example, a primary call-to-action button to sign up or purchase should be bigger than a secondary action like viewing terms of service. A close or cancel button should be large enough to easily hit without overshooting.

Example of a large, easy-to-hit CTA button

On the flipside, making something small or even hidden, like an unsubscribe or delete button, can discourage accidental clicks.

Be careful of making elements too large, however. Huge buttons can look clunky and limit the information density of the page. There are also diminishing returns to scale – once a click target is big enough, further increasing its size has minimal benefit to usability.

2. Proximity and Grouping

Following Fitts‘s Law, elements that are frequently accessed together should be grouped close to each other. This minimizes the distance, and therefore time, to move between them.

For example, the buttons to reply, forward, or delete an email are usually clustered near each other and the email itself. Same with common text formatting options like bold, italic, and underline.

Example of grouped email action buttons

Grouping also provides helpful visual organization to an interface. Related elements should be clustered so users see the relationships between them.

Fitts‘s Law also indicates that edges and corners are uniquely accessible. Since screen edges constrain cursor movement, it‘s easier to fling the mouse to the edge without overshooting. This is why you frequently see high-level navigation and common actions like logout placed at the very top or bottom of a screen.

3. Clickable Area vs Visual Size

It‘s important to note that the actual clickable area may be different than the visual size of an element. A small icon could have an enlarged clickable zone around it, making it an effectively larger target.

Example of a small icon with a larger clickable area

This is a useful technique to increase usability while maintaining a certain aesthetic. For example, a close button with a small X icon could have a much larger transparent click area around it.

However, be careful not to make clickable areas too big beyond their visual bounds. Users shouldn‘t be surprised by what they can click on – if it doesn‘t look like a button or link, don‘t make it act like one.

Examples of Fitts‘s Law in Action

Now that we understand some key principles, let‘s look at a few real-world examples of Fitts‘s Law based design in interfaces and experiences you likely use every day:

Apple‘s Bottom Navigation

Example of Apple bottom navigation bar

Take a look at the navigation bar at the bottom of iOS. The buttons are large, easy targets clustered together at the very bottom of the screen. Frequently used apps like Phone or Safari get pride of placement.

Placing these common actions at the bottom edge makes them extremely fast to access. Your thumb falls naturally to that spot, and the edge of the screen prevents overshooting. It‘s Fitts‘s Law perfectly applied to enable rapid, intuitive tapping on the most used apps and functions.

Google‘s Search Results

Example of Google search result click targets

When you do a Google search, you‘ll notice that not just the text, but the entire area of each result is clickable. Even the white space around the text will select that result.

This creates a very large click target, making it extremely easy to quickly choose a result without precise mouse movement. Since clicking results is the core action on the page, Google wants to make that as easy and efficient as possible by leveraging Fitts‘s Law.

Video Game Reload Buttons

Example of a large reload button in a first person shooter game

In fast-paced video games, especially first person shooters, quickly reloading your weapon is often a matter of virtual life and death. That‘s why the reload button is usually very large and placed in a corner of the screen.

This makes it very easy to hit rapidly in the heat of battle, minimizing time and aiming required. Accidental reloads are much less punishing than failing to reload, so making the button big is an advantageous tradeoff. Fitts‘s Law saves virtual lives!

Tips for Applying Fitts‘s Law

So how can you start leveraging Fitts‘s Law in your own designs? Here are a few tips:

  1. Size buttons based on importance and frequency. Commonly used actions, especially a primary CTA, should have the largest click targets. Less frequent or dangerous options should be smaller targets.
  2. Group common actions together. Cluster related buttons and links near each other and the content they affect.
  3. Leverage edges and corners. Place frequent actions at screen edges, especially the bottom corners that are easy to quickly flick to.
  4. Enlarge clickable areas when appropriate. Make the effective click target larger than the visual button where it won‘t be surprising or confusing.
  5. Test with real users. Fitts‘s Law provides guidelines, but isn‘t a substitute for actual usability testing and iteration. Validate that your sizing and placement decisions are delivering on efficiency and ease-of-use.

Limitations and Caveats

While incredibly robust and useful, Fitts‘s Law does have some limitations to consider:

  • It doesn‘t account for other aspects of an element‘s visual design like color, contrast, or whitespace that can affect its prominence and discoverability.
  • It assumes that each element has an equal probability of being a target. In reality, some buttons are far more likely to be clicked than others.
  • It breaks down a bit for very small elements like radio buttons or checkboxes, which have a fixed minimum size.
  • It doesn‘t factor in the content or meaning of an element. Sometimes a small, harder to click button might be appropriate for its function.

So while Fitts‘s Law is a powerful guide, it‘s not an iron-clad rule. It‘s one of many factors to balance in interaction design, alongside aesthetics, content hierarchy, and business goals.

Most importantly, Fitts‘s Law is not a replacement for user-centered design practices. Observing real users, gathering data, and iteratively improving is still the gold standard. Use Fitts‘s Law to inform hypotheses and design decisions, but always validate with actual user behavior.

The Future of Fitts‘s Law

As technology evolves, will Fitts‘s 65-year old model still hold up? While the fundamental principles are likely to remain relevant, the specifics of how we apply Fitts‘s Law may change with new interaction paradigms.

For example, voice interfaces and conversational UIs don‘t have traditional click targets. How does Fitts‘s Law translate to auditory "target acquisition"? Is it about minimizing syllables to common actions? Placing key phrases at the beginning or end of a sentence?

Gesture and 3D interfaces also complicate matters. Is the "size" of a target based on its actual spatial dimensions or angular size relative to the user? How does distance translate in a VR environment?

Example of a VR interface with 3D buttons

These are open questions that UX designers and researchers are actively exploring. Fitts‘s Law is a starting point, not an endpoint, for understanding human-computer interaction. As interfaces evolve, so too must our models for efficient usability.

In Conclusion

Fitts‘s Law is a powerful tool in the UX designer‘s toolbox. By understanding the relationship between size, distance, and efficiency, we can make informed decisions about sizing and placing interactive elements.

Used well, Fitts‘s Law can help make interfaces more efficient, easy, and even delightful to use. It eliminates friction and allows users to fluidly flow through their tasks.

Of course, Fitts‘s Law isn‘t a panacea. It‘s one principle to balance alongside many others. But by understanding its implications, we can design experiences that are grounded in the realities of human cognition and motor function.

The next time you‘re considering the size and placement of a button, remember Fitts. His pioneering work still matters – and clicking "Publish" on this article will be all the easier for it!