Applying Fitts’ Law to Commonly Used Buttons
11 July, 2011 § 14 Comments
In a previous post, I covered my work on improving the usability of the Back button in Firefox. Starting with Firefox 8, clicking on the area between the edge of the window and the Back button will fire a Back-navigation event.
The idea behind a change like this comes from Fitts’ Law. From Wikipedia, Fitts’ Law “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.”
All operating systems that I have used stop users from moving the mouse off the screen (outside of the virtual desktop space). This means that if a user hurriedly moves their mouse across the screen, it will stop on the pixel that borders the edge. By adding an action to this area, the area becomes a very easy to hit target for users.
Taking advantage of this feature is not unique to Firefox. There are many individual parts of the Windows user interface that exhibit this same usability trick.
- When a window is maximized, the Close button is positioned in the top-right corner of the desktop. Visually, there is four pixels of padding between the button and the right edge of the screen. However, clicking in the padding will still close the window.
- The Start button is located in the bottom-left corner of the screen. There is eight pixels of padding between the button and the left edge of the screen. Clicking in this padding will launch the Start menu.
- Windows 7 introduced a button in the bottom right of the screen that is used to show the desktop. There is no padding between the button and the edge of the screen.
I was not part of the decisions to place these button in these positions, however I strongly believe that Fitts’ Law played a role in their location.
These are just a few of the many ways that Fitts’ Law can be found in user interface design. See if you can find others that I didn’t mention :)