Fitt’s law, a fundamental principle of human-computer interaction

Have you ever wondered why some websites are easier to use than others? Why do some buttons seem more inviting and intuitive than others? How can you design a website that maximizes user satisfaction and engagement?

The answer lies in understanding and applying Fitt’s law, a fundamental principle of human-computer interaction and ergonomics. Fitt’s law states that the time required for a person to move a pointer (such as a mouse cursor or a finger) to a target area (such as a button or a link) is a function of the distance to the target and the size of the target. In other words, the closer and larger the target, the faster and easier it is to reach.

Fitt’s law was first proposed by psychologist Paul Fitts in 1954, based on his experiments with human motor skills. He found that fast movements and small targets result in greater error rates, due to the trade-off between speed and accuracy. He also developed a mathematical formula to quantify the difficulty of a pointing task, called the index of difficulty (ID). The ID is calculated by dividing the distance to the target (D) by the width of the target (W), and then taking the logarithm of that ratio. The higher the ID, the harder the task.

Fitt’s law has been widely applied in user experience (UX) and user interface (UI) design, as it helps designers optimize the size and placement of interactive elements on a website. By following Fitt’s law, designers can reduce the interaction cost for users, which is the amount of physical and mental effort required to perform a task. A lower interaction cost leads to higher usability, efficiency, and satisfaction.

In this article, we will explore how Fitt’s law can be used to improve web design, and look at three real examples of websites that apply this principle effectively.

How to use Fitt’s law in web design

Fitt’s law can be used as a guideline for designing web pages that are easy to navigate and interact with. Here are some general tips on how to use Fitt’s law in web design:

• Make important buttons and links large and prominent. This will reduce the time and effort required for users to click on them, and also increase their visibility and affordance (the quality of an object that suggests how it can be used).
• Place frequently used buttons and links close to the user’s attention area or pointer position. This will minimize the distance that users have to move their cursor or finger, and also reduce the cognitive load of searching for them.
• Use negative space (or white space) to create contrast and hierarchy. This will help users distinguish between different elements on a web page, and also make them easier to target.
• Avoid cluttering your web page with too many elements or options. This will increase the complexity and difficulty of your interface, and also overwhelm and confuse your users.
• Test your web design with real users and measure their performance and feedback. This will help you validate your design decisions and identify any usability issues or improvements.

Three real examples of Fitt’s law in web design

Let’s look at three real examples of websites that use Fitt’s law effectively in their web design.

Example 1: Google

Google is one of the most popular and widely used websites in the world, and its simple and minimalist design reflects its adherence to Fitt’s law. Google puts its main feature, the search field, in the center of the screen, making it easy to access and focus on. The search field is also large enough to accommodate most queries, reducing the need for scrolling or editing. The menu options are placed in the upper corners of the screen, close to where most users would position their cursor or finger. The menu options are also grouped into categories, such as apps, images, videos, etc., making them easier to target and select.

Example 2: Netflix

Netflix is another example of a website that uses Fitt’s law well in its web design. Netflix provides users with a large collection of movies and shows to watch online, and its interface is designed to help users find and enjoy their content easily. Netflix uses large thumbnails to display its content, making them more attractive and clickable. The thumbnails are also arranged in horizontal rows that can be scrolled sideways, reducing the vertical distance that users have to move their pointer or finger. The navigation bar is placed at the top of the screen, close to where most users would start their browsing session. The navigation bar is also divided into sections, such as home, TV shows, movies, etc., making them easier to target and select.

Conclusions

Fitt’s law is a fundamental principle of human-computer interaction and ergonomics that can help web designers create more usable and satisfying interfaces. Fitt’s law states that the time required for a person to move a pointer to a target area is a function of the distance to the target and the size of the target. By following Fitt’s law, web designers can optimize the size and placement of interactive elements on a website, and reduce the interaction cost for users. Fitt’s law can be applied to any website that involves pointing tasks, such as clicking on buttons, links, menus, etc. In this article, we have seen three real examples of websites that use Fitt’s law effectively in their web design: Google and Netflix.

We hope that this article has helped you understand and appreciate the importance of Fitt’s law in web design, and inspired you to apply it in your own projects.

Bibliography

1 P. M. Fitts, “The information capacity of the human motor system in controlling the amplitude of movement,” Journal of Experimental Psychology, vol. 47, no. 6, pp. 381-391, 1954.

2 R. W. Soukoreff and I. S. MacKenzie, “Towards a standard for pointing device evaluation: perspectives on 27 years of Fitts’ law research in HCI,” International Journal of Human-Computer Studies, vol. 61, no. 6, pp. 751-789, 2004.

3 J. Nielsen, “Fitts’ Law: Modeling Movement Time in HCI,” Nielsen Norman Group, [Online]. Available: 8. [Accessed 26 October 2023].

4 S. Kurniawan and P. Zaphiris, “Research-derived web design guidelines for older people,” in Proceedings of the 7th international ACM SIGACCESS conference on Computers and accessibility - Assets '05, Baltimore, MD, USA, 2005.