Fitts Law
Fitts’ Law, initially developed by Paul Fitts, is a term related to UI and UX Design describing how movement time to a target (link, button, etc.), with a pointer (mouse, finger, etc.), is a function of the distance to the target as well as the size of the target. Where poor functionality was once attributed solely to human error, Fitts first recognized this was also due to poor design.
Fitts determined that larger targets with minimal spacing allow for better usability in design. However, caution should be exercised when limiting spacing, as clutter can lead to poor functionality. When designing a UI, it is crucial to recognize the user’s workflow on a page and strategically place targets based on the predicted pointer placement. The larger the target, the better it is for usability, reducing user errors. Clustering commonly used items and menus should be considered for optimal UX.
Example
The gif below depicts a basic demonstration of Fitts’ Law. The varying sizes and placement of targets illustrate the differing levels of user accuracy in acquiring each target as well as the speed of acquiring each target.
Notice how smaller targets with large spacing decreased the accuracy and speed of acquiring each target, while larger targets with minimal spacing increased accuracy and speed. Despite the largest and overlapping target set showing the highest accuracy and speed, this would not be considered good design practice, as the targets are cluttered and could lead to poor usability. The goal is to find the optimal size and spacing so that targets are easily distinguishable from one another.
Resources
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn UI and UX Design on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Introduction to UI and UX Design
Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.Beginner Friendly2 hours