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.
Fitts's Law is a predictive model of human movement, first proposed by Paul Fitts in 1954. At the time, Fitts was examining the human motor system and his findings became extremely applicable to user experience and interface design. The law states that the time it takes to move a pointing device (e.g., a mouse cursor or finger) to a target is a function of the distance to the target and the size of the target. In other words, targets that are closer and larger are easier to click than targets that are farther away and smaller.
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.
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.
Reduce distance
Place frequently-used elements, such as navigation menus, in easy-to-reach areas of the screen. The navigation bar is at the top of the page here, bound by the screen’s edge. This will reduce the time it takes for users to interact with your product and improve overall efficiency.
Use negative space
Surround clickable elements with ample white space to create a visual separation between them and other on-screen elements. This will reduce the risk of accidental clicks and make it easier for users to identify clickable elements. Here we can see on this contact modal that the submit button is surrounded by negative space, specifically horizontally, so that it will reduce accidental clicks on both web and mobile devices.
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:
If you haven't read the first installment in our UX Design Principle series, Hick's Law, click here.
