Skip to main content

Fitts law and CTA, how are they related in the context of UI design?

· 4 min read
D Balaji
D Balaji
Lead Design Technologist

CTA and its relation to Fitts law

CTA, i.e. Call To Action is the goal of every website. The design of the website can help the business owner achieve their CTA. Fitts’ Law is the basis for predicting user behavior on a website, if done correctly helps businesses to achieve their CTA. Let's dive and analyze Fitts Law in short.

Understanding Fitts Law with a story.​

To put it in simple words, Fitts published his theory in 1954 on the subject "human mechanics and aimed movement". The human action of pointing or predicting the target could be predicted using mathematics.

Fitts’ Law states that the bigger an object is and the closer it is to us, the easier it will be for us to reach it.

games and its relation to Fitts law

Let's understand fits law with a story. As a kid, I used to play the game Cricket. I was an average bowler. Bowling means you have to aim at the target, which is the stumps, and throw the ball correctly at them.

When the distance between the bowler and stumps increases (which happens because it's not the standard form of cricket), the chances of hitting the stumps are reduced. Mathematically there is a relation between the distance, target, and the ability of the bowler to achieve his goal. That's exactly what Fitts law is about.

Let's revisit Fitts law,

Fitts’ Law states that the bigger an object is and the closer it is to us, the easier it will be for us to reach it.

Fitts law and the web CTA (Call To Action)​

Let's relate the Fitts law to the elements on the web.

We have buttons on the web which enable the user to take action. Like the "Add to Cart", "Checkout" & "Make Payment" buttons.

Let's talk about the "Add to Cart" button.

  • The add-to-cart should be near the product description.

  • The add-to-cart should be big enough for the user to aim or point his mouse at the button.

When the distance of the "Add to Cart" is close to the subject and the size of the CTA button is big, then according to Fitts law we can better conversions.

The real-world examples of Fitts law​

  • Offline shopping and design of the physical stores.

offline shopping and its relation to Fitts law

  • Computer screens, the important buttons are always bigger like the CTA buttons on the PDP page.

  • Signboards near the flyover. The distance between your eyes and the target is reduced so there are greater chances that the ad gets viewed.

  • Games like cricket. Given a shorter distance between the fielder and the stumps, the fielder has greater chances of making successful run-outs. That's one reason, the fielders in the inner circle are aggressive to make a runout.

Summary​

There are 3 key elements to Fitts law

  • Target
  • Distance
  • Width or size

On the web the

  • Target is the CTA button
  • Distance is the button position/location on the UI.
  • Size of the button to make the button stand out.

The designer should remember Fitts law and make better UI designs. For instance

  • Floating add to cart buttons on the PDP page, so that the button is always visible.
  • Complete payment button near the card information fields instead of bottom right or top right.
  • When the target is to complete the user journey through checkout flow, the designer has to ensure the distance or user flow is not too long.

I recently visited a wizard where I was on step 1 out of 35. I promptly left the landing page. The user did not understand Fitts Law for sure.