Increasing the usability of Firefox’s Back button
30 June, 2011 § 11 Comments
The Back button is one of the most used features of the Firefox chrome. Based on a 117,000-person study ran in 7 days of July 2010, the Back button was used by 95% of users and clicked over 105 times on average.
The design of the standard Firefox theme changed between Firefox 3.6 and Firefox 4 towards a more streamlined user interface. This has brought with it some great usability improvements, but one of the nice usability features of Firefox 3.6 regressed in the new theme. In Firefox 3.6, clicking to the left the Back button would still bring the user back to the previous page they were at.
The behavior in Firefox 3.6 was justified by Fitts’ Law. To quote 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.” The back button sits right next to the edge of the browser. Ideally, this allows a user to quickly move their cursor to the side of the screen and have the cursor stop near the Back button.
If we can push the clickable area of the Back button to the edge of the browser, then we can increase the size of the target enormously.
In Fitts’ Law terms, the amount of time that it takes a user to hit the back button drastically reduces with a subtle change like this.
I have submitted a patch to increase the clickable area of the Back button. I hope to get it landed in time for the Firefox 7 Firefox 8 release train.
Special shoutout: This graphic was made with Snagit, the Swiss Army knife of screen capture tools. Made by TechSmith (my former employer) in mid-Michigan, the product comes with a free 30-day trial.
Update: I was unable to get a quality patch completed in time for the Firefox 7 release. I hope to land this patch in time for the Firefox 8 release (September 2011).
JAWS 
Hmm, actually this is an interesting case. Does Fitt’s law work even though you don’t know about the clickable area? Or will people still aim for the visible area and not press the button before the cursor is within that area? I’m not aware of any studies about that. Might be worth documenting 🙂
Hi Kadir,
That’s a great question. Fitt’s Law will still work even if users don’t know about the clickable area, because it is something that can be learnt over time. A lot of users will run into these scenarios on accident, and may not notice the larger click area. In these cases, it is common to still show a hover state (at least on Windows) when the user is simply over the larger clickable area.
I’ll try to put together a blog post that goes more in depth on this area.
On a related note, the target area for tabs, and esp. app tabs, is smaller than it should be if you ask me. … But while writing this post I see that issue has already been fixed! Amazing!
Great! I’m happy to hear it was fixed so quickly 🙂
[…] 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 […]
I honestly thought it was already like this. I just tried and it was not, so thanks for fixing this!
Thanks Fowl!
All software has little papercuts that just need a bit of polish to take them from good to great. I’m happy that people like yourself are engaged in the community.
I saw a graph of the statistics for Firefox about which features are used the most (new tab, close tab, and back). And since back is quite popular this feature makes sense; however it is still rather odd to me to have a larger clickable area than the button itself. But alright; seems like it should be useful!
This is one of those features that when talked about sounds funny because it’s not noticed in most scenarios. However, many software programs do implement this expansion of clickable regions. For example in Windows 7, the start menu button has a significantly larger click-area compared to the style of the button.
Hey Jared (fellow Michigander and Spartan fan!)
This looks cool – I see how the hit area should allow for sloppy clicks on the highly used back button. However on MacOS I can grab that area (or any part of Firefox, except the tabs) to drag the window. If I’m on a site and I’m ready to complete, say, a long checkout process and want to move the window out of the way for a particular reason I click that area to grab it (it’s part of the browser, right?) and poof! It takes me back a page and I lose all my work! Imagine Google docs… it doesn’t like the back button too well, nor do a lot of Flash-based apps.
Since the back button is DESTRUCTIVE in these cases, are you concerned at all? Have you heard of the Anchor effect and will Fitt’s law trump this? http://en.wikipedia.org/wiki/Anchoring
This feature was only implemented for Windows, since it is not natural for OS X apps to provide affordances like these. In the case of data-loss, it is up to a site to put an onunload event handler in to give users an option before they lose their work.
I hadn’t heard about Anchoring before. I’ll take a look, thanks! Go green!