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.

Clickable area of the Close and Start buttons is shown in this graphic.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.

  1. 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.
  2. 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.
  3. 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 :)

Tagged: , , , ,

§ 14 Responses to Applying Fitts’ Law to Commonly Used Buttons

  • pd says:

    I want my Firefox buttons super-wide. How do I do it?

    • msujaws says:

      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 :)

  • pd says:

    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.

    • msujaws says:

      You’re welcome! I’m glad to help and I’m happy that you’ve learned about Fitts’ Law now :)

  • nemo says:

    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.

    • msujaws says:

      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?

  • Karlosak says:

    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?

  • Jeremy Bicha says:

    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?

    • msujaws says:

      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 :D

  • Matt W says:

    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’.

    • msujaws says:

      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 [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Applying Fitts’ Law to Commonly Used Buttons at JAWS.

meta

Follow

Get every new post delivered to your Inbox.

Join 1,004 other followers