1Fall 2003 6.893 UI Design and Implementation 1Lecture 8: Computer Prototyping2Fall 2003 6.893 UI Design and Implementation 2UI Hall of Fame or Shame?Today’s candidate for the User Interface Hall of Fame is tabbed browsing, a feature found in almost all web browsers (Mozilla, Safari, Konqueror, Opera) except Internet Explorer. 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 2003 6.893 UI Design and Implementation 3Tabbing Doesn’t ScaleAnother problem is that tabs don’t really scale up either – you can’t have more than 5-10 without shrinking their labels down to unreadability. 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 2003 6.893 UI Design and Implementation 4Today’s Topics• Course evaluation results• Quiz preview• Paper prototype post-mortem• Computer prototyping5Fall 2003 6.893 UI Design and Implementation 5Midterm Course Evaluation Results• Overhead problems• Hall of Fame & Shame• Slides (but not notes) in advanceThanks to everybody who filled in a course evaluation form. Here were some changes we’re making as a result:•The overhead projector is hard to read. We’ll try to fix that by projecting on the front wall instead of the side.•More Fame, less Shame. We’ll also try to streamline the Hall of Fame & Shame, using only one example per class. That will help focus the discussion and keep it from eating away too much time for lecture content.•Slides for each lecture will be available the night before or the morning of the lecture, for students who want to print them out as a note-taking aid. My own notes under each slide (what you’re reading now) won’t be included until after lecture, so if you don’t plan to use these slides for note-taking, don’t waste paper on them.6Fall 2003 6.893 UI Design and Implementation 6Quiz on Wednesday• Topics– Usability– Iterative design– User & task analysis– Model human processor– Color– Conceptual models & metaphor– Affordance, constraint, visibility, feedback– Errors– Nielsen’s heuristics– Heuristic evaluation–Prototyping– Graphic design principles• Everything is fair game– Class discussion, lecture notes, readings, assignments• Closed book exam, 80 minutes7Fall 2003 6.893 UI Design and Implementation 7Paper Prototyping Post-Mortem• Time to make prototype• Materials that worked well or badly• Useful implementation tricks• Parts of UI that are hard to prototype• How it feels to be a user• How it feels to watch a user• Surprises learned from watching usersWe discussed what we learned from paper prototyping. Some of the highlights:•Time. Most people took 4-12 hours to build their paper prototypes. Steve mentioned that his group did some iteration while building the prototype, which adds to the time, but the time like that is well spent. pays off. Some people commented that since the prototype was being graded, they spent more time making it look good than
View Full Document
Unlocking...