In 1954, Paul Fitts developed a model of human movement, Fitts’s law, based on rapid, aimed movement. Fitts’s model predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. This law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. In layman’s terms: the closer and larger a target, the faster it is to click on that target.
For user interface design this means:
- Buttons and other elements should be a reasonable size because it is relatively difficult to click on small ones.
- Edges and corners of the computer monitor are particularly easy to acquire with a mouse, touchpad or trackball. Because the pointer remains at the screen edge regardless of how much further the mouse is moved, they can be considered as having infinite width.
- Pop-up menus can usually be opened faster than pull-down menus, since the user avoids travel: the pop-up appears at the current cursor position.
- Pie menu items typically are selected faster and have a lower error rate than linear menu items, for two reasons: because pie menu items are all the same, small distance from the centre of the menu; and because their wedge-shaped target areas (which usually extend to the edge of the screen) are very large.
In the Smashing Magazine post by Anastasios Karafillis, Anastasios derived these design rules from Fitts’s Law:
Create Larger Targets: The larger a target, the faster it is to acquire. For example, extend the “clickable area” of a button or link to the entire target.
The target to the left lets a few pixels of screen real estate go to waste. The target to the right makes itself larger and quicker to click by exploiting every pixel at its disposal.
Minimize Cursor Movement: The closer a target, the faster it is to acquire. Positioning the elements people are most likely to use next to each other will speed up interaction by reducing the amount of pixels the cursor will have to travel. Complemented with Principles of Gestalt Perception, you get logical groupings of elements like this:
Avoid Muscular Tension: Rank input methods according to the amount of physical effort they require to execute a certain command. Example is vertical touch screens which are typically deployed in professional environments to create, visualize and manage large sets of data.
When working with vertical screens, keeping your arms in an upright position can quickly tire the deltoid muscles and cause input mistakes or force the user to abandon the interaction. Therefore, avoiding complex and strenuous input techniques can facilitate and prolong the interaction with those devices.
Exploit The Prime Pixels: Some pixels are faster to acquire than others. For example, Context menus appear at the very pixel you right-click and provide you with context-sensitive options for the selected item. This way you do not have to move the cursor to a possibly distant fixed location in the interface.
Now it is time for a quiz… Bruce “Tog” Tognazzini classic Interaction Design test, A Quiz Designed to Give You Fitts. Good luck and have fun!