Tabbed Titlebars

Technically speaking, Safari 4 is probably the best browser you can get. No big surprise, of course, since in my opinion Safari 3.x (especially if you use Webkit Nightly Builds) was already the best browser I could find. But Safari 4 has an interesting UI decision in it: tabbed window titlebars.

Safari’s implementation is conceptually very similar to Google’s Chrome browser, but Apple being Apple it’s far more polished, although not perfect.

Logically speaking, tabbed browsers make no sense, and of the different approaches taken, Safari 3.x’s made the least sense (the tabs appeared to be selecting the area above the tab panel, not below).

The fundamental problem is simple: the tab metaphor is supposed to represent selecting from among sections of a set of files or pages using the tabs as reference points. Selecting a tab brings that section to the front and puts the others behind (which isn’t how the real world works, but more convenient). Based on the metaphor, anything not “contained” in the tab is “global” while anything not “contained” in the tab is part of the set of stuff contained “in that tab”.

This basic rule is often violated, but usually its in the forgivable direction of including global stuff in the tab area — this usually simplifies layouts. In browsers, however, the rules are hopelessly bizarre. E.g. the address bar in Firefox is above (outside) the tab selector, but changes when you change tabs.

As I said, Safari 3.x has the silliest tab interface. The tabs are above the web page you’re looking at but visually appear to contain the stuff above the tabs (i.e. bookmarks and the address and search fields), so when you click a tab to select the page it’s related to, it appears that you’re selecting a different set of bookmarks, not a different web page.

Safari 4 has made the window titlebar into a tab selector. One obvious reason not to do this is exemplified by Google’s Chrome — it could look really ugly. But aesthetically Apple has pulled off this design about as well as you could possibly hope. Because the title bar is ordinarily used to move windows around, this is now the default behavior of tabs when clicked and dragged. To move a tab around you use the resize affordance in its top-right — this is a horrible kludge, violating the “if it looks the same it should work the same; it it works different it should look different”. In my opinion Apple needs a new affordance to serve this row, perhaps a two-way or four-way arrow. The tabs now correctly sit above the address field and web page content, but also above the search field and bookmarks.

The new design has some obvious wins: a Safari window now wastes less vertical real estate, and the containment hierarchy is logical.

I believe I’ve said this before, but in my opinion the way tabs work in Google’s Chrome (and now in Safari 4) — modulo fixing the affordance for moving tabs — should be implemented at OS level as a way of handling multiple, docked windows gracefully. Ideally, I could link a Pages document together with Photoshop, say, and tab between them when I needed to find a photo to drag into my document.