1Fall 2005 6.831 UI Design and Implementation 1 2Fall 2005 6.831 UI Design and Implementation 2Today’s candidate for the User Interface Hall of Fame is tabbed browsing, a feature found in almost all web browsers (Mozilla, Firefox, Safari, Konqueror, Opera) except Internet Explorer (although version 7 will finally have it). With tabbed browsing, multiple browser windows are grouped into a single top-level window and accessed by a row of tabs. You can open a hyperlink in a new tab by choosing that option from the right-click menu.Tabbed browsing neatly solves a scaling problem in the Windows taskbar. If you accumulate several top-level Internet Explorer windows, they cease to be separately clickable buttons in the taskbar and merge together into a single Internet Explorer button with a popup menu. So your browser windows become less visible and less efficient to reach.Tabbed browsing solves that by creating effectively a separate task bar specialized to the web browser. But it’s even better than that: you can open multiple top-level browser windows, each with its own set of tabs. Each browser window can then be dedicated to a particular task, e.g. apartment hunting, airfare searching, programming documentation, web surfing. It’s an easy and natural way for you to create task-specific groupings of your browser windows. That’s what the Windows task bar tries to do when it groups windows from the same application together into a single popup menu, but that simplistic approach doesn’t work at all because the Web is such a general-purpose platform. So tabbed browsing clearly wins on task analysis.Another neat feature of tabbed browsing, at least in Mozilla, is that you can bookmark a set of tabs so you can recover them again later – a nice shortcut for task-oriented users.What are the downsides of tabbed browsing? For one thing, you can’t compare the contents of one tab with another. External windows would let you do this by resizing and repositioning the windows. Another problem is that, at least in Mozilla, tab groups can’t be easily rearranged– moved to other windows, dragged out to start a new window.3Fall 2005 6.831 UI Design and Implementation 3Another problem is that tabs don’t really scale up either – you can’t have more than 5-10 without shrinking their labels so much that they’re unreadable. Some designers have tried using multiple rows of tabs, but this turns out to be a horrible idea. Here’s the Microsoft Word 6 option dialog. Clicking on a tab in a back row (like Spelling) has to move the whole row forward in order to maintain the tabbing metaphor. This is disorienting for two reasons: first, because the tab you clicked on has leaped out from under the mouse; and second, because other tabs you might have visited before are now in totally different places. Some plausible solutions to these problems were proposed in class – e.g., color-coding each row of tabs, or moving the front rows of tabs below the page. Animation might help too. All these ideas might reduce disorientation, but they involve tradeoffs like added visual complexity, greater demands on screen real estate, or having to move the page contents in addition to the tabs. And none of them prevent the tabs from jumping around, which is a basic problem with the approach.As a rule of thumb, only one row of tabs really works, and the number of tabs you can fit in one row is constrained by the screen width and the tab label width. Most tabbing controls can scroll the tabs left to right, but scrolling tabs is definitely slower than picking from a popup menu.In fact, the Windows task bar actually scales better than tabbing does, because it doesn’t have to struggle to maintain a metaphor. The Windows task bar is just a row of buttons. Expanding the task bar to show two rows of buttons puts no strain on its usability, since the buttons don’t have to jump around. Alas, you couldn’t simply replace tabs with buttons in the dialog box shown here. (Why not?) Tabbed browsing probably couldn’t use buttons either, without some careful graphic design to distinguish them from bookmark buttons.4Fall 2005 6.831 UI Design and Implementation 4Here’s how Eclipse 3.0 tries to address the tab scaling problem: it shows a few tabs, and the rest are found in a pulldown menu on the right end of the tab bar.This menu has a couple of interesting features. First, it offers incremental search: typing into the first line of the menu will narrow the menu to tabs with matching titles. If you have a very large number of tabs, this could be a great shortcut. But it doesn’t communicate its presence very well. I’ve been using Eclipse 3.0 for months, and I only noticed this feature when I started carefully exploring the tab interface.Second, the menu tries to distinguish between the visible tabs and the hidden tabs using boldface. Quick, before studying the names of the tabs carefully -- which do you think is which? Was that a good decision?Picking an item from the menu will make it appear as a tab – replacing one of the tabs that’s currently showing. Which tab will get replaced? It’s not immediately clear.The key problem with this pulldown menu is that it completely disregards the natural, spatial mapping that tabs provide. The menu’s order is unrelated to the order of the visible tabs; instead, the menu is alphabetical, but the tabs themselves are listed in order of recent use. If you choose a hidden tab, it replaces the least recently used visible tab. LRU is a great policy for caches. Is it appropriate for frequently-accessed menus? No, because it interferes with users’ spatial memory.5Fall 2005 6.831 UI Design and Implementation 5 Human information processing Perception Motor skills Memory Decision making Attention VisionThis course is about building effective human-computer interfaces. Just as it helps to understand the properties of the computer system you’re programming for – its processor speed, memory size, hard disk, operating system, and the interaction between these components – it’s going to be important for us to understand some
View Full Document
Unlocking...