UX Design Principle #002: Fitts’s Law
In the field of UX design, certain principles from psychology can greatly impact the overall user experience. These laws help create more intuitive and human-friendly experiences.
UX design focuses on creating efficient, effective, and enjoyable digital experiences. One key principle in UX design is Fitts’s Law. In this article, we’ll explore Fitts’s Law and its practical applications in UX design.
What is Fitts’s Law?
Fitts’s Law is a predictive model of human movement, first proposed by Paul Fitts in 1954. The law states that the time it takes to move a pointing device to a target is proportional to the logarithm of the distance between the starting point and the target, and inversely proportional to the width of the target. This means that targets that are farther away or smaller require more time and effort to click than targets that are closer or larger.
Examples of Fitts’s Law in Practice
Mobile Device Layouts:
App icons on mobile devices are often designed with Fitts’s Law in mind, with frequently-used icons such as the phone or messaging app placed in easy-to-reach locations on the screen. On the iPhone, the bottom bar is a fixed spot for users to place their most often-used apps and takes up a larger space than the average row. This interface structure is an application of Fitts’s Law in action. Additionally, the placement of this bar is easily accessible for touchscreen users as it is closer to where most people’s thumbs sit when they hold a mobile device. This allows users to quickly access the apps they use most frequently without having to make precise movements, scroll through screens, or search for the icon.
Google’s Edges and Corners:
Fitts’s Law applies to the graphical user interface by taking advantage of the natural “pinning” action of the screen’s edges and corners. These corners are referred to as “magic pixels”, they are the screen’s set boundary that we do not have in the physical world. For web users, these areas can be clicked more quickly because their movements are restricted when they reach the outermost points on the screen. Google keeps some high-priority buttons in the corners of the screen so users can easily have their cursor stopped by the two sides of the screen. By fixing the cursor at a point on the periphery of the display, designers can create interfaces that are more efficient and reduce user frustration. This strategy works best for full-screen web design, unfortunately, it is not as user-friendly for mobile devices because users would have to use more effort for their fingers to reach the buttons.
Facebook’s Post Buttons:
Another example of Fitts’s Law can be seen in social media platforms like Facebook, which wants to encourage users to engage with the site by creating and sharing content. To do this, Facebook has made certain buttons and features larger and easier to reach. For instance, the “Create story” button is prominently displayed and designed larger so that it stands outs, making users more likely to notice and click on it. For Facebook, this reduces the “cost” of creating content by making it more convenient and efficient to do so.
Applying Fitts’s Law in UX Design
So, how can designers use Fitts’s Law to improve the UX of their digital products? Here are a few key principles to keep in mind:
Increase target size
Make sure that clickable elements, such as buttons and links, are large enough to be easily clicked. The wireframe above demonstrates how larger buttons can be used to reduce the time and distance required for a user to click on them. In addition to improving efficiency on desktop screens, designing larger buttons can also be helpful for mobile interfaces. With a smaller screen size and touch-based interactions, having larger buttons that are easier to tap can make a big difference in the user experience. This tip will make it easier for users to interact with your product and reduce the likelihood of errors.
If you want to see the rest of our tips for applying Fitts’s Law into your designs, check out Perpetual’s website for the full blog post.
Takeaways
Fitts’s Law is a simple yet powerful principle that can be applied to a wide range of digital products. By considering target size and distance, designers can create more efficient, effective, and enjoyable user experiences. Remember to keep these principles in mind when designing your next digital product, and you’re sure to create an experience that users will love.
If you would like to learn more about Fitts’s Law, please feel free to look at this curated list below:
- https://careerfoundry.com/en/blog/ui-design/what-is-fittss-law/#five-examples-of-fittss-law-in-ui-design
- https://uxplanet.org/breaking-down-fitts-law-for-ux-designers-542cabb48f9
- https://www.nngroup.com/articles/fitts-law/
- https://www.smashingmagazine.com/2022/02/fitts-law-touch-era/
- https://www.interaction-design.org/literature/article/fitts-s-law-the-importance-of-size-and-distance-in-ui-design
If you haven’t read the first installment in our UX Design Principle series, Hick’s Law, click here.
