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 🙂
JAWS 
I want my Firefox buttons super-wide. How do I do it?
Generally, you’ll probably want to create a userchrome.css file. You can probably find some pretty good information about userchrome.css files on developer.mozilla.org
Specifically, you’ll probably want to add some padding to the .toolbarbutton-1 class. Have fun experimenting 🙂
Thanks! That worked a treat through the Stylish extension. All I had to do was insert the XUL namespace prefix from the Stylish new style dialog. I actually set the width not padding but probably either would work. I knew this wasn’t too hard but although it was easy many years ago, I couldn’t get DOM Inspector to tell me the XUL tag, id or classname from browser.xul when I looked for it recently.
Thanks for your help and this post. I never knew my instinct that larger buttons for me to throw my mouse at would be faster had a name. Now I do, Fitts law.
You’re welcome! I’m glad to help and I’m happy that you’ve learned about Fitts’ Law now 🙂
Buttons on edges of screens are sooo annoying.
I ended up disabling my edge of screen actions since they were triggered too easily by those.
Still gets in the way with multiple monitors or synergy2 though.
Can you tell me more about how you disabled edge of screen actions? I’m curious what software allows/enabled that.
I agree that edge of screen actions aren’t the best with multiple monitors. Would you find it better if the cursor was “sticky” near the edge of screen on multiple monitors?
Why was this taken out from Firefox 4 (if I recall correctly, FF 3.6 had this feature), to bring this functionality back with splendor *four* versions later?
Hey thanks for the question! I wasn’t on the team at the time, but I think it was just a casual oversight.
Firefox 8 _sounds_ like it is a long way off, but it will probably be released in November-ish. If you start using the Aurora[1] builds, you will be able to get your hands on this change in about 6 weeks, or earlier if you use nightly[2] 😉
[1] https://www.mozilla.com/en-US/firefox/channel/
[2] https://nightly.mozilla.org/
Hmm, the back button in my Firefox 6 on Ubuntu still works if I click the far-left edge. Perhaps this change is Windows-specific?
Hey thanks for the question Jeremy. I should have been more clear, this patch in fact was a Windows-specific patch.
I’m happy to hear that it’s working great for you on Ubuntu 😀
Other things where this kind of thing comes into play (if I think about it a bit, the screen edge actually acts as a massive target-size expander if the target’s bumped up against it).
Mac OS X’s menu bar (whether it’s an overall improvement or not is a source of some contention of course).
GNOME 3’s Activities button (and if your pointer hits the top-left pixel, it triggers without a click)
Windows 7’s taskbar, with its nice big icons and pop-ups for individual windows.
OS X’s dock, similarly, and the zoom trick’s quite clever (and of course predates the Windows 7 taskbar).
Stuff that doesn’t do it:
Windows XP’s task bar, when it’s more than one row high the start button’s clickable area only exists on the top row and below it is wasted, empty, very sad blank space. Everybody say ‘aaah’.
Yes! The screen size does act as a massive target-size expander when the target is bumped up against it.
You’ve found some great examples. Some other ones are scroll bars on maximized windows.
These properties are great to add to commonly accessed functionality. It is a shame when features that deserve it don’t get it.
[…] exactly a year ago I wrote about applying Fitts’ Law to commonly used buttons. Fitts’ Law is pretty well known among user experience professionals and front-end developers […]
[…] first large bug in week 1 that I fixed applied Fitts’ Law to the back button. Part of this fix ended up tweaking the opacity of the disabled buttons in our toolbar. I still […]