Fitts' Law: Boost Business Efficiency Through Design Principles

What is Fitts' law?

Fitts' law is a psychological principle based on human movement that describes the relationship between the time it takes a pointing device, such as a mouse pointer, to reach a target and the distance to that target. It was formulated in 1954 by psychologist Paul Fitts (hence the name).

Rooted in the principles of the human motor system, Fitts' Law is particularly relevant in the field of human-computer interaction, like when someone shops on an e-commerce website, texts their friends, or plays a game on their mobile device.

In general, Fitts' law states that the larger the distance to a particular target, such as an "add to cart" button, the longer it takes for someone to reach that target. In addition, the bigger an object, the less time it takes to move to it. Let's use our "add to cart" button as an example.

If your "add to cart" button is at the very bottom of a page, it will take users longer to scroll to it and click it. Meanwhile, if you have a small "add to cart" button, the longer it takes someone to reach it.

In general, Fitts' law states that the time it takes someone to click that button depends on its size and how far away it is.

The equation for Fitts' law is:

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

Where:

• MT is the Movement Time, or how long it takes to move to the target.
• a and b are the constants that are dependent on the characteristics of the user and the overall system.
• D is the distance to the center of the target
• Q is the target width

Let's take a look at an example and say you want to measure the MT of someone clicking a button on your website. The button is the target. Using basic measurements, you may determine the distance (D) away is 500 pixels. The target width (W) is 100 pixels.

Before this point, you should have determined your constants through linear regression using trials. For instance, you can ask users to click the button or target at different distances and of various sizes. Recording how long it takes them allows you to plot the values on the line. The y-intercept is the 'a' constant, while the slope is the 'b' constant.

Based on your trials, you've determined the constants a and be are 200 ms and 100 ms. With these values, you can calculate the movement time:

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

MT = 200 ms + 100 ms/bit * log2 (2(500 pixels)/(100 pixels))

First, we'll simplify the log function: 2*500/100 = 10

Then, you can substitute this value into the formula, giving us:

MT = 200 ms + 100 ms/bit * log₂(10)

Next, calculate the log base 2 of 10, which equals 3.32. You can then substitute this back into the formula:

MT= 200 ms + 100 ms/bit *3.32

Then, multiply and add: MT = 200 ms + 332 ms = 532 ms

What does this tell us? According to Fitts' law, it would take around 532 milliseconds for a user to move to the button under these constants and conditions.

Fitts' law in user interface design

Fitts' law is one of the fundamental principles that guide UI and UX designers in making interfaces more user-friendly, efficient, and effective.
This predictive model provides designers with invaluable insights into how users actually use websites, games, and apps, helping them optimize interface layouts to improve the overall user experience. Implications of Fitts' law in web design include:

Larger targets can be reached faster

Target size drastically affects how long it takes from a user's starting point to reach the target.

According to Fitts' law, a larger target or interactive element, like a button or link, reduces the time it takes to acquire the target, meaning the larger your button, the less time it takes for someone to click it. This is why frequently used buttons like the "Submit" button on a form are made larger than less important ones.

Targets closer to the cursor can be reached faster

The closer a target is to the current cursor position, the faster it can be reached, meaning if you design layouts where certain actions are more frequent, they should be placed closer to the expected position of the cursor. For instance, if you're designing the mobile version of your website, consider how users click buttons with their thumbs. The closer the target is to the user's thumb, the faster they'll reach it.

Utilizing screen edges

Screen edges and corners have infinite width because the cursor stops at the edge. Therefore, these targets are easy to hit, which is why many important interface elements are located at the edges of the screen, such as the start menu on operating systems, navigational menus on websites, scroll bars, search bars, chat icons, and so forth.

Design of menu systems

Fitts' law is also used to design menu systems to ensure the user can quickly navigate through the options. For instance, making options wide and having a short distance between them. It's also why a dropdown menu on websites is typically located at the top and side of the screen.

Toolbars and icon design

Toolbars consist of icons that hold frequently used commands or topics. Fitts' law can enhance the graphical user interface by guiding the placement and size of the icons or buttons within a toolbar to make them easier to click or tap. In addition, Fitts' law prevents designers from packing icons too closely together because it will reduce their sizes, and smaller targets will take longer to hit.

The importance of good UX/UI design for businesses

Good user interface design can greatly enhance your website, allowing it to make a good first impression while encouraging users to take action.

However, design isn't everything. You should remember who you're designing for by using a customer journey builder to ensure you understand how users will interact with your app, website, or another digital product. Then, you can use UX/UI design principles to cater to the needs and preferences of your target audience.

Using Fitts' law means considering that the larger an object is and the closer it is to the user's starting point, the easier it is to reach. Keeping this in mind when designing e-commerce websites, web designers can focus on the interactive elements that drive conversions.

Increased user engagement

Good user interfaces can encourage user engagement. When a site is intuitive and pleasing to use, users are more likely to spend time using it and explore its full range of capabilities.

Increased sales and conversions

Good UX/UI design can increase conversion rates and boost sales, especially because it focuses on interactive elements like links and buttons. By streamlining the path to purchase and making the process intuitive, more users are likely to complete their purchases, contributing to increased revenue.

Improved brand perception

Your website is often the first impression customers have of your business. The quality of your web design can reflect on your brand as a whole. High-quality design enhances user perception of your business, making it seem more professional and trustworthy.

Reduced costs

Investing in good UX/UI design can save businesses money in the long run by reducing the need for extensive revisions, testing, and redesigns down the line. A good user experience on a website, app, or product can also decrease customer support costs by minimizing confusion and error.

Accessibility

Quality UX design also includes designing for accessibility, ensuring that people with varying abilities can use your products. This not only widens your potential user base but also promotes inclusivity.

Other key UX/UI design principles

While Fitts' law is a crucial UX/UI design principle, it's not the only one businesses should consider if they want to have a high-converting website. Other design principles include:

Hick's law

Hick's law states that the more choices and complexity of those choices, the longer it takes for a user to make a decision. This is one reason why landing pages designed for sales have a single call-to-action (CTA). By limiting the number of choices to one, you can drastically shorten the time it takes for a user to take action.

Miller's law

Miller's law is based on cognitive psychology and states that the average number of objects a person can remember is seven. For web designers, this implies that lists, menus, and other options should be limited to around seven items or less. Too many options can be overwhelming for users, making it challenging to navigate the interface and retain information.

Law of proximity

The law of proximity states that objects near each other are perceived as related. The closer an object is to another, the more closely related they appear to users, which can help web designers organize information on all their web pages while guiding the user's eye.

Improve your website with Fitts' law

Fitts' law can help you create an interface that makes users want to take action, whether you're designing a product, app, website, or landing page. By providing customers with a better user experience, you can encourage them to take action, driving sales, revenue, and loyalty.

Use Fitts' law when you design your website with Mailchimp. Use our UX/UI design tools. Then, experiment with button sizes and locations by using A/B testing to find the winning variant. Try Mailchimp's website builder today and start designing better web pages.