Fitt’s Law in UI/UX design
Get the overview of an essential chapter in the Laws of UX
Defenition
“The time to acquire a target is a function of the distance to and size of the target.”
In other words, Fitts’s Law states that the amount of time taken to move to and select a target is a function of the distance to and size of the target.
Origin
In 1954, psychologist Paul Fitts, examining the human motor system, showed that the time required to move to a target depends on the distance to it, yet relates inversely to its size. By his law, fast movements and small targets result in greater error rates, due to the speed-accuracy trade-off. Although multiple variants of Fitts’ law exist, all encompass this idea.
Overview
It is more of common sense. If you want a target to be easy to select, make it big and put it in an easy-to-reach place, or if you want the opposite to make it small and place it in an irrelevant position.
Generally, if you want something to be easy to select it should be a minimum of 44 x 44 CSS pixels according to WCAG guidelines.
iOS recommend 44 x 44 whereas Android recommends 48 x 48 pixels.
This rule can be relevant for both desktop and mobile devices.
Take the login page scenario in the mobile and website as an example, the call to action to ‘Log in’ is in an easy-to-reach location for the user’s thumb (presuming the user is right-handed in this scenario). By making this button easy to reach, it makes it quicker for a user to tap it.
Almost counter-intuitively, the easiest place for a user to move their cursor is on the edge of the screens. This is because our computer screens have edges that our cursors cannot pass and therefore any object at the edge of a screen has infinite size.
An example of this is the dock you can find on a MacBook, which is stuck to the bottom of the screen. This makes it easy to select applications easily and quickly.
Airbnb does a good job of using the edges of the screen on the homepage. Although objects are not placed directly on the edge of the screen, objects which are nearer the edge of the screen will be quicker to select than objects near the center of the screen.
It’s worth mentioning we can also apply Fitts’s law to make things purposefully harder to select. Severe actions such as deleting an account could use a smaller touch target in order to reduce accidental clicks. By adding this small amount of friction, we can help ensure this action is intentional. However, make sure your touch target size still remains accessible!
Key Takeaways
- There are methods we can use to apply Fitts’s Law on both mobile and desktop viewports.
- If you want to make an action more easily selectable, make it larger and position it in a place that's easy to reach.
- Touch targets should be large enough for users to accurately select them.
- Touch targets should have ample spacing between them.
- Touch targets should be placed in areas of an interface that allow them to be easily acquired.
- We can also use Fitts’s Law to purposefully make something harder to select by making it smaller.
Bottomline
Fitts’ law is widely applied in user experience (UX) and user interface (UI) design. For example, this law influenced the convention of making interactive buttons large (especially on finger-operated mobile devices) — smaller buttons are more difficult (and time-consuming) to click. Likewise, the distance between a user’s task/attention area and the task-related button should be kept as short as possible.
Learn more about Color Theory, Color Terminologies, Typography, UX Research Techniques, Dark Mode UI, and Hick’s Law
