1Fall 2004 6.831 UI Design and Implementation 1Lecture 8: Design Principles2Fall 2004 6.831 UI Design and Implementation 2UI Hall of Fame or Shame?• Three ways to print in Microsoft Office– File/Print menu item– Print toolbar button– Ctrl-P keyboard shortcutThere are three ways to print in Microsoft Office applications: a menu command, a toolbar button, and a keyboard shortcut. That’s OK, because we want to provide shortcuts for experienced users (flexibility & efficiency).Unfortunately, the three commands don’t all do the same thing:•File/Print brings up the Print dialog•The Print toolbar button prints immediately using the latest print settings•Ctrl-P brings up the Print dialogSo there are three commands named Print that do different things (internal inconsistency).But the toolbar button’s behavior is useful! There should be an easy way to just print. Why? Flexibility and efficiency. Most of the time, for most users, for most copies of a document, you only want to print it one way. You don’t need to specify the printer (most people have only 1), you don’t need to pick color or grayscale or duplex or paper source. The default settings, or the last settings you chose for this particular document, should work. Don’t ask me all those questions, just give me a printout! That’s what the toolbar button is trying to do.But the fact that all three are simply named Print is disturbing. Furthermore, there’s a natural hierarchy among these shortcuts, starting with the menu item, which is clearly labeled knowledge in the world; then the toolbar button, which is always visible, faster to reach than the menu item, less descriptive than a label, but still allows you to recognize rather than recall; and finally the keyboard shortcut, which is mnemonic (Ctrl-P for Print) but requires knowledge in the head.The print-now command is unnaturally mapped on this hierarchy. It’s mapped to the medium-shortcut toolbar button, but not to the extreme-shortcut Ctrl-P. As a result, I (for one) hesitate to use either of the printshortcuts, because I’m frequently surprised by what it does.3Fall 2004 6.831 UI Design and Implementation 3Hall of Fame or Shame?Let’s look at another example. Appliance remote controls are known for being complicated --- some of them bristle with tiny buttons, all alike. The Tivo remote shown here is noteworthy for its simplicity and careful attention to good UI design principles:•simplicity! Doesn’t have a million buttons on it. Most features are controlled by onscreen software. The remote only needs a pointing device and essential shortcuts.•important buttons are large (Fitts’s Law) and have unique shapes (consistency).•related buttons are placed in natural mapping: e.g., the back/forward buttons. The channel and volume buttons are both mapped vertically – a natural mapping, but it makes the channel and volume buttons very similar to each other as a result. It’s a tradeoff.•the Pause button is large, indicating a good task analysis for the way Tivo is used. Pausing live TV is a big reason people buy Tivos. Why is the Play button small?•great graphic design: a few simple colors used only for highlighting important controls; high contrast makes the labels easy to read•good industrial design as well: the remote is shaped and balanced well for the user’s hand.One downside that many commentators have mentioned: it’s too symmetrical. If you grasp it around the waist without looking, you can’t tell which end to point at the TV, and you may end up fast-forwarding when you meant to rewind.The New York Times had an interesting article (Feb 19, 2004) about the design that went into the remote. Lots of iteration, lots of prototypes:http://www.nytimes.com/2004/02/19/technology/circuits/19remo.html?ex=1392526800&en=450d595187d25d27&ei=5007&partner=USERLAND4Fall 2004 6.831 UI Design and Implementation 4Usability Guidelines (“Heuristics”)• Plenty to choose from– Nielsen’s 10 principles• One version in his book• A more recent version on his website– Tognazzini’s 16 principles– Norman’s rules from Design of Everyday Things– Mac, Windows, Gnome, KDE guidelines• Help designers choose design alternatives• Help evaluators find problems in interfaces (“heuristic evaluation”)Usability guidelines, or heuristics, are rules that distill out the principles of effective user interfaces. There are plenty of sets of guidelines to choose from – sometimes it seems like every usability researcher has their own set of heuristics. Most of these guidelines overlap in important ways, however. The experts don’t disagree about what constitutes good UI. They just disagree about how to organize what we know into a small set of operational rules.For the basis of this lecture, we’ll use Jakob Nielsen’s 10 heuristics, which can be found on his web site. (An older version of the same heuristics, with different names but similar content, can be found in his Usability Engineering book, one of the recommended books for this course.) Another good list is Tog’s First Principles (find it in Google), 16 principles from Bruce Tognazzini that include affordances and Fitts’s Law. In the last lecture, we talked about some design guidelines proposed by Norman: visibility, affordances, constraints, feedback, and so on.Platform-specific guidelines are also important and useful to follow. Platform guidelines tend to be very specific, e.g. you should have a File menu, and there command called Exit on it (not Quit, not Leave, not Go Away). Following platform guidelines ensures consistency among different applications running on the same platform, which is valuable for novice and frequent users alike. However, platform guidelines are relatively limited in scope, offering solutions for only a few of the design decisions in a typical UI.Heuristics can be used in two ways: during design, to choose among different alternatives; and during evaluation, to find and justify problems in interfaces.5Fall 2004 6.831 UI Design and Implementation 5Guidelines From Earlier Lectures• User-centered design– Know your users– Understand their tasks• Fitts’s Law– Size and proximity of controls should relate to their importance– Tiny controls are hard to hit– Screen edges are precious• Memory– Use chunking to simplify information presentation– Minimize working memory• Color guidelines– Don’t depend
View Full Document
Unlocking...