Fitts's Law and CTA Button Optimization

What is Fitts's Law? The Science of Pointing

Fitts's Law is a model of human movement that predicts the time required to move to a target area. In simple terms: The time it takes to click on a target depends on how far away it is and how big it is.

It's faster to hit a large target that's close to you, and it's slower to hit a small target that's far away. This might sound obvious, but this principle has profound implications for how we design user interfaces.

Let's start with a quick video from the Nielsen Norman Group that defines the law and its core design takeaways.

The mathematical formula behind Fitts's Law looks like this:

You don't need to memorize or calculate this, but understanding the variables is key for a designer:

• $T$ = Time to acquire the target
• $D$ = Distance from the starting point to the target
• $W$ = Width (size) of the target
• $a$ and $b$ are constants

The crucial insight here is that as designers, we have direct control over $D$ (Distance) and $W$ (Width). By optimizing these two "levers," we can minimize $T$ (Time), making our interfaces more efficient.

The Two Levers of Fitts's Law: Size and Placement

Let's break down how to use these two levers to design better CTA buttons.

1. Target Size (Controlling the 'W' Variable)

The law is clear: bigger targets are easier and faster to hit. This is especially important on mobile devices, where our "pointer" is an imprecise finger, not a pixel-perfect mouse cursor.

Best Practices for Target Size:

• Meet Minimums: Industry guidelines provide a great starting point.
  • Apple's Human Interface Guidelines recommend a minimum target size of 44 x 44 points.
  • Google's Material Design suggests 48 x 48 density-independent pixels.
  • Keeping your primary CTAs at or above these minimums is crucial for usability, especially on touchscreens.
• Expand the Hitbox: A button's clickable area (its "hitbox") can be larger than its visual appearance. You can use invisible padding in your design to make a visually small icon or button meet the 44x44pt minimum, satisfying Fitts's Law without cluttering the interface.

2. Target Placement (Controlling the 'D' Variable)

Placing a target closer to the user's starting point or area of focus dramatically reduces interaction time.

Best Practices for Placement:

• Proximity to Context: Place interactive elements close to the objects they relate to. A "Submit" button should be right below the last form field, not at the top of the page. This minimizes the distance the user has to travel after completing the form.

• The Mobile Thumb Zone: On mobile, the "distance" is measured from where the user's thumb naturally rests. The screen is divided into easy-to-reach ("natural"), requires-a-stretch, and hard-to-reach zones. Primary CTAs should always be placed in the "natural" zone.

Let's see how popular apps use these thumb zones.

• Magic Pixels (Desktop): On a desktop interface, the four corners and four edges of the screen are "magic" because a user can't overshoot them with their mouse. They can fling the mouse to an edge or corner without needing to slow down and aim. This makes them the fastest targets to acquire. This is why the Windows Start button is in a corner and the macOS menu bar is flush with the top edge.

The Flip Side: Using Fitts's Law for Defensive Design

Sometimes, you want to make an action harder to perform to prevent mistakes. This is particularly true for destructive actions like "Delete Account" or "Discard Draft." Here, you apply Fitts's Law in reverse:

1. Increase the Distance: Place the destructive action far away from common, positive actions. For example, the "Send" button in an email composer should be far from the "Discard" icon.
2. Decrease the Size: Make the target smaller (e.g., a text link instead of a large button) to force the user to slow down, aim carefully, and consciously confirm their intent.

Your Turn: CTA Audit in Figma

Now, let's put this into practice. You'll analyze a real-world mobile screen and evaluate its primary CTA using Fitts's Law.

Your Task (20-25 minutes):

1. Find an Example: Go to a website like Mobbin or Behance and find a screenshot of a mobile app screen that has a clear primary call-to-action (e.g., an e-commerce product page with an "Add to Bag" button, a booking app with a "Book Now" button, etc.).
2. Set Up Your Figma File:
   • Create a new Figma file.
   • Paste the screenshot of the app screen you found.
   • You can also copy and paste the thumb zone map from this lesson into your file to use as a visual reference.
3. Audit the CTA: Using the text tool, add annotations to your screenshot evaluating the primary CTA button against Fitts's Law. Answer these questions:
   • Size: Does the button appear to be at least 44x44pt? Is it large enough to be tapped easily without precise aim?
   • Placement: Where is the button located? Is it in the green "natural" thumb zone? Or does it require the user to stretch?
   • Spacing: Is there sufficient empty space around the button to prevent accidental taps on other elements?
4. Propose Improvements (if necessary):
   • If you identified issues, create a simple wireframe next to the screenshot showing your proposed changes.
   • You might make the button larger, move it to the bottom of the screen, or change its shape.
   • Add a brief note explaining why your changes would improve the user experience, using the language of Fitts's Law (e.g., "Moved the CTA to the bottom navigation bar to reduce the distance 'D' from the thumb's resting position...").

This exercise directly mirrors the kind of analysis you'll perform for clients, connecting a core UX principle to a concrete design recommendation.

Conclusion

Today we've moved from the cognitive realm of Hick's Law to the physical realm of Fitts's Law. You now have a powerful, evidence-based framework for designing interactive elements that feel effortless to use.

Key Takeaways:

• Fitts's Law: The time to click a target is determined by its size and distance. Our job as designers is to minimize this time for primary actions.
• Optimize Your Levers: Make primary CTAs large (at least 44x44pt) and place them close to the user's point of interaction.
• Mobile is Different: On mobile, "close" means placing CTAs within the natural thumb zone at the bottom/center of the screen.
• Defensive Design: Intentionally make destructive actions smaller and farther away to prevent user errors.

Preview of the Next Lesson:
We've seen how psychological principles like Hick's Law and Fitts's Law can be used to create better, more user-friendly experiences. However, these same principles can also be manipulated for business gain at the user's expense. In our next lesson, we will explore the concept of dark patterns, learning to recognize them and understand their ethical implications.