Making tab closing as easy as click, click, click

The best user interface anticipates actions that you want to perform and never gets in your way. When planning out the new tabbed browsing features for Firefox 4, this principle guided our focus. One of the things we think Google Chrome really nailed is its tab closing behavior: when you close a tab with the mouse, the remaining tabs shift or resize so that the next tab’s close tab button moves right under your cursor. This way, you can click the same spot to close the next tab.

Back in December, Basil Safwat wrote a fantastic piece, full of screenshots, that details these behaviors.

We’re working on implementing this in Firefox, so it will be super easy to close a whole row of tabs without moving your cursor a pixel:

[ YouTube HTML5 (if available) ]

We are also taking it a step further and including support for the tab overflow mode that Firefox has had for a while. No matter how your tabs scroll and move and resize, you can always count on the close button being in the right location when you need to close them:

[ YouTube HTML5 (if available) ]

Finally, let’s talk about a design decision made in Firefox’s earlier days: we placed the tab close buttons on the right side of each tab for all platforms, including OS X. To some people, this seems to break with the design of Apple’s platform, since Safari and OS X windows have close buttons on the left side instead. (It’s also worth noting that several of Apple’s applications have the close button on the right too — iChat, Pages and Automator all do this in various parts of their UI.)

Now imagine if we put the close buttons on the left. With that configuration, when closing the rightmost tab, we would have to shift the remaining tabs to the right to move the next close button to the same place, leaving an awkward gap on the left side of the tab bar. Placing the close button on the right (for left-to-right locales) is the more intuitive choice.

Another important aspect we have found is that favicons on tabs are the primary way people identify and navigate tabs, so we give them prominent placement.

This optimized close/resize behavior is just one of the many improvements to tabbed browsing we’re working on. Be sure to check out other new tabbed browsing features in upcoming Firefox 4 betas!