Blog: Bits and Pieces
Description: A place for thoughts, news, and other miscellanea.
Created by ezrakatz on Sun 01 of Mar, 2009 16:25 EST
Last post Tue 19 of May, 2009 15:28 EST
(1 Posts | 6212 Visits | Activity=2.00)
By ezrakatz on Sun 01 of Mar, 2009 17:20 EST

Safari 4, Improving the User Interface

There has been a lot of talk lately about the new user interface for Safari 4. Apple Insider does a great job of showing off some of the new features. Also, in Apple's tradition of overstating the mundane, they have posted a detailed list of Safari's 150 features. The most noticeable change is the placement of the tab bar on top of the window taking over the title bar.


A screenshot of the current tabbed interface

There are several functions that this new "hybrid" title/tab bar needs to achieve, and Apple implements several of them well. Adding and deleting tabs is obvious. It is very clear which tab is open. Moving and selecting tabs, however, are not intuitive, creating significant usability issues.

When you click and drag on a title bar in OS X, the standard behavior is for that window to jump to the front of other windows and move with the mouse. A tab is essentially a nested window, so users expect it to behave in a similar way. In the previous version of Safari, tabs worked a similar way. Clicking and dragging a tab would bring the page up front and move the tab. When you click and drag on a tab in the hybrid bar, however, it moves the entire window and does not select the tab. This is inconsistent with the behaviors OS X users expect. Apple tries to merge the metaphor of windows and tabs, but by doing this they introduce unneeded ambiguity.


The "grab-button" on the corner of tabs is redundant

Apple attempts to address the ambiguity of combining two interface elements by adding a grab-button to the corner of each tab. Clicking and dragging this button achieves the expected behavior for tabs and windows (i.e. of bringing the content up front and moving the element). The grab-button, however, is redundant. If a user wants to move a tab, the most intuitive thing is to click anywhere on the tab and drag. The button is also a small target, making it tricky to click for someone with a disability.

One final issue that adds confusion to the window/tab ambiguity is how the leftmost tab merges with the close, minimize, and maximize buttons of the window. There is nothing special about this leftmost tab, and combining it with the window controls is confusing as seen below.


Which X should I press?

As Alistair Holt points out on, this new arrangement of tabs goes against Apple's human interface guidelines. Why has Apple decided to go against its own guidelines? With all of the problems this arrangement creates, there is one distinct advantage: it saves space. One of my favorite things about Safari is how Apple has minimized the space on the screen used for controls. In some configurations of Internet Explorer, there are up to four different layers of toolbars that take up 20-30% of the screen. The Safari window elements are small and positioned so that the maximum about of space can be devoted to the website you are viewing. This new hybrid title/tab bar, though space-saving, could use some adjustment to create a more consistent user experience.


My suggested improvements to the tabbed interface.

Above is a sketch of how I would improve Apple's solution. Basically, once a tab is added, the title bar shrinks to the left and remains active. New tabs are nested to the right. Clicking and dragging a tab selects and moves it (no grab-buttons needed). To move the window, a user clicks and drags the reduced title bar. This solution saves space, while maintaining consistent behavior with other interface elements.