Overview
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.
In simple terms, Fitts’s law tells the time to get to a target is proportional to the distance and size of the target. The farther away and smaller the target size, the harder it will be to get to that target. Conversely, the larger the target and closer the distance, the easier it is to get to that target.
A practical example of Fitts law
Let take a practical example. Think you are in your room. And I will tell you to observe 4 objects while you’re standing in your room.
Window
Doorknob
Bird at that far away tree
The ant moving at the corner of the floor
Now, call anyone in your room and point your finger directly at these 4 objects. And see how efficiently they recognize the object you have pointed to. Let’s take the above 4 examples and understand a bit more.
Window: Since the distance of the window is close and the size of the window is large, there is a high chance your partner will tell you have been pointing to the window.
Doorknob: As you point to the doorknob, remember the distance is similar to the distance of the window, but the size of the doorknob is way smaller compared to the window. Your partner might have trouble telling the exact object you’re pointing at.
Bird at that far away tree: Depending on how far the bird and the tree are, as you point towards the bird, your partner will get confused about where you’re pointing. Your partner might confuse with the tree or other objects instead of the bird as the bird is sitting far away and the size of the object (bird) is also small.
The ant moving at the corner of the floor: When you point to this tiny ant, there is a very little chance your partner will tell which object (ant) you have been pointing to. Since the size of the ant is small and it's quite far away the difficulty increases.
When we see the difficulty, rate it from 1(easy) to 5(difficult).
Window: Very easy to spot: 1 rating
Doorknob: easy to spot: 2 rating
Bird on a tree: difficult to spot: 4 rating
Ant on the corner: very difficult to spot: 5 rating
This is how practically Fitts law can be seen. Now you should have got a good understanding of how the distance and size of the object play a big role in pointing a target.
Movement and Fitts Law
A movement during a single Fitts's law task can be split into two phases:
Initial movement: A fast but imprecise movement towards the target
Final movement: Slower but more precise movement in order to acquire the target
The first phase is defined by the distance to the target. In this phase, the distance can be closed quickly while still being imprecise. The second movement tries to perform a slow and controlled precise movement to actually hit the target.
As you move towards your target, the initial movement phase will be a rapid and high-velocity movement. This is done to reach as fast as you can to your target.
Remember the above bird on the tree example. Your eye will move rapidly towards the entire tree. Your whole body is motioned to move and adjust according to the position of the tree.
Next is the final movement phase or deceleration. Here, you will try to scan the object and find what you’re looking for. This is done in order to precisely find your target.
Back to the bird example. You will now carefully try to scan the tree to find your target (bird). Your eye will be the only moving part that tries and focus on the target.
Fitts law and User Interface Design
Fitts law plays a major role when it comes to UX design. When you consider the whole screen size, the placement of buttons and interactive elements can be anywhere on the screen. Adding on, the user’s cursor can start from anywhere on the screen. We need to find the balance between the size of the clickable objects and the distance from the center it is placed.
Let’s look into some examples to understand Fitts law a little better:
1. Toolbar
We like to put toolbars on the top, bottom, and sides of the screen because of the screen boundary created by the edges of the screen. These targets are almost easily targetable since they are impossible to go past. You could move your mouse as hard as you wanted to into the boundaries of the screen, and never get past the first pixel on the screen
2. Target Area
Here the red area represents the area where the user is able to click that particular action. There is an outer boundary with a black line. As you can see, in the first figure a "Join Now" has a smaller red area while the second figure b "Join Now" has the entire area covered. When the user wants to click onto this particular action, figure b will be the more efficient one as he has a wider area to click.
Narrowing down the clickable area utilizes more time for the user to focus precisely on the target area. If we are able to keep the target area wider, the user has more space to click through.
This is the main reason you must have seen bigger icons and text in particular browsers and applications. And the other advantage we give is the breathing space to the buttons when we increase the area.
3. Close Proximity
Another application of Fitts law is proximity. The closer you arrange clickable icons and texts, the more difficult it becomes for the user to select his particular target.
In the above example, you can see how close proximity numbering can be difficult in selecting the exact number. When we have adequate spacing between numbers, the user can find his target without getting confused with the adjacent icons/objects.
This particular example of google search results shows how spacing plays an important role in User Experience Design.
4. Pop-up Menus
Pop-up menus are better suited than dropdowns for immediate action as the user doesn’t have to move his cursor anywhere else to do the same action. This significantly helps the user to interact with the same UI without spending time on moving the cursor-travel time.
Using dropdown increases the time the user has to take his cursor dragging down and finding the target area. And if the list of drop-downs is more, then it becomes a hurdle to find the required one.
5. Linear menus
Whenever the options you want to select are arranged in a linear fashion, then you would have to move your pointer all the way through the linear option to finally land on your particular selection. This movement sometimes becomes inaccurate and requires more effort. More effort to select means more time which can be a problem depending upon the scenario.
Conclusion
If you have got an idea of what Fitts law is so far, you might be wondering, then bigger will be better, right? Theoretically, bigger can be better. But when you see it practically, it should not be that big that it covers most portion of the screen and should not be so tiny that it's not visible itself. Designers need to find the balance between the size, shape, distance of the actionable icons/buttons they will be designing. One of the main criteria they need to focus is on usability scenarios.
You need to club Fitts law with other laws such as gestalts principles, symmetry, responsiveness design, etc. to create a more effective design. As always, you need to test your design with the actual users and see if the design has the intended impact on the users.
Sources: