1Fall 2004 6.831 UI Design and Implementation 1Lecture 8: Design PrinciplesFall 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 shortcutFall 2004 6.831 UI Design and Implementation 3Hall of Fame or Shame?Fall 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”)2Fall 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 solely on color distinctions (color blindness)– Avoid red on blue text (chromatic aberration)– Avoid small blue details• Norman’s principles of direct manipulation– Affordances– Natural mapping– Visibility– FeedbackFall 2004 6.831 UI Design and Implementation 61. Match the Real World• Use common words, not techie jargon– But use domain-specific terms where appropriate• Don’t put limits on user-defined names• Allow aliases/synonyms in command languages• Metaphors are useful but may misleadSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 72. Consistency and Standards• Principle of Least Surprise– Similar things should look and act similar– Different things should look different• Other properties– Size, location, color, wording, ordering, …• Command/argument order– Prefix vs. postfix• Follow platform standardsSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 8Kinds of Consistency• Internal• External• Metaphorical3Fall 2004 6.831 UI Design and Implementation 9Case Against Consistency (Grudin)• Inconsistency is appropriate when context and task demand it– Arrow keys• But if all else is equal, consistency wins– QWERTY vs. DvorakFall 2004 6.831 UI Design and Implementation 103. Help and Documentation• Users don’t read manuals– Prefer to spend time working toward their task goals, not learning about your system• But manuals and online help are vital– Usually when user is frustrated or in crisis• Help should be:– Searchable– Context-sensitive– Task-oriented– Concrete– ShortFall 2004 6.831 UI Design and Implementation 114. User Control and Freedom• Provide undo• Long operations should be cancelable• All dialogs should have a cancel buttonSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 125. Visibility of System Status• Keep user informed of system state– Cursor change– Selection highlight– Status bar– Don’t overdo it…• Response time– < 0.1 s: seems instantaneous– 0.1-1 s: user notices, but no feedback needed– 1-5 s: display busy cursor – > 1-5 s: display progress barSource: Interface Hall of Shame4Fall 2004 6.831 UI Design and Implementation 136. Flexibility and Efficiency• Provide easily-learned shortcuts for frequent operations– Keyboard accelerators– Command abbreviations– Styles– Bookmarks– HistorySource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 147. Error Prevention• Selection is less error-prone than typing– But don’t go overboard…• Disable illegal commandsSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 15Description Error• Intended action is replaced by another action with many features in common– Pouring orange juice into your cereal– Putting the wrong lid on a bowl– Throwing shirt into toilet instead of hamper– Going to Kendall Square instead of Kenmore Square• Avoid actions with very similar descriptions– Long rows of identical switches– Adjacent menu items that look similarFall 2004 6.831 UI Design and Implementation 16Capture Error• A sequence of actions is replaced by another sequence that starts the same way– Leave your house and find yourself walking to school instead of where you meant to go– Vi :wq command• Avoid habitual action sequences with common prefixes5Fall 2004 6.831 UI Design and Implementation 17Mode Error• Modes: states in which actions have different meanings– Vi’s insert mode vs. command mode– Caps Lock– Drawing palette• Avoiding mode errors– Eliminate modes– Visibility of mode– Spring-loaded or temporary modes– Disjoint action sets in different modesFall 2004 6.831 UI Design and Implementation 188. Recognition, Not Recall• Use menus, not command languages• Use combo boxes, not textboxes• Use generic commands where possible (Open, Save, Copy Paste)• All needed information should be visibleSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 199. Error Reporting, Diagnosis, Recovery• Be precise; restate user’s input– Not “Cannot open file”, but “Cannot open file named paper.doc”• Give constructive help– why error occurred and how to fix it• Be polite and nonblaming– Not “fatal error”, not “illegal”• Hide technical details (stack trace) until requestedSource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 2010. Aesthetic and Minimalist Design• “Less is More”– Omit extraneous info, graphics, features6Fall 2004 6.831 UI Design and Implementation 2110. Aesthetic and Minimalist Design• Good graphic design– Few, well-chosen colors and fonts– Group with whitespace– Align controls sensibly• Use concise language– Choose labels carefullySource: Interface Hall of ShameFall 2004 6.831 UI Design and Implementation 22Chunking the Heuristics Further• Meet expectations1. Match the real world2. Consistency & standards3. Help & documentation• User is the boss4. User control & freedom5. Visibility of system status6. Flexibility & efficiency• Handle errors7. Error prevention8. Recognition, not recall9. Error reporting, diagnosis, and recovery• Keep it simple10. Aesthetic &
View Full Document
Unlocking...