Design Guidelines (cont.)

1. Design Guidelines (cont.) Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 18, 1999

2. Usability Goals Chignell Dix et al. • Usefulness • Effectiveness • Learnability • Likability • Learnability • Flexibility • Robustness Shneiderman • Learnability • Efficiency • Low error rate • Memorability • Satisfaction These are not at entirely comparable levels of granularity.

3. Design Guidelinesin more detail Dix et al. Shneiderman (8 design rules) • Consistency • Shortcuts (for experts) • Feedback • Closure • Error prevention • Easy reversal of actions • User control • Low memory burden • Learnability • predictability • visibility • familiarity • generalizability • consistency • Flexibility • customibility • Robustness • recoverability • responsiveness • task conformance

4. Guideline Mania • Lots of things to worry about • Which are most critical depend on the application • Some are easier to evaluate

5. Today • More on design guidelines • Revisit screen layout later • In order to discuss • Consistency, Feedback, Error reduction • we will back up and discuss ... • High-level interaction models • Norman’s action model • Foley and van Dam’s four-level model

6. Norman’s Action Cycle • Human action has two aspects • execution and evaluation • Execution: doing something • Evaluation: comparison of what happened to what was desired

7. Norman’s Action Cycle • Execution has three stages: • Start with a goal • Translate into an intention • Translate into a sequence of actions • Now execute the actions • Evaluation has three stages: • Perceive world • Interpret what was perceived • Compare with respect to original intentions

8. Action Cycle Goals Execution Evaluation The World

9. Action Cycle Goals Evaluation Evaluation of interpretations Interpreting the perception Perceiving the state of the world Execution Intention to act Sequence of actions Execution of seq uence of actions The World

10. Gulf of Evaluation • The amount of effort a person must exert to interpret • the physical state of the system • how well the expectations and intentions have been met • Want a small gulf!

11. Gulf of Execution • The difference between the intentions of the users and what the system allows them to do • How directly can the actions be accomplished? • threading movie projector vs. VCR • with computer interfaces? • Want a small gulf!

12. Four-level model • A way of thinking of different aspects of the interface • Designers are to work from top to bottom • Conceptual level • Semantic level • Syntactic level • Lexical level

13. Four-level model • Conceptual level • The user’s mental model of the interactive system. • Example • line editors vs. screen editors

14. Four-level model • Semantic level • The meanings conveyed by the user’s input and by the computer’s output • Example • the meaning of the delete paragraph command • the meanings of the copy and paste commands

15. Four-level model • Syntactic level • How the units that convey the semantics are assembled in order to instruct the computer to perform a task • Example • the command format: first keyword type, then actual keyword • find pa einstein and tw relativity • first the user selects the paragraph to copy, then issues the copy command, then selects the location for the paste operation, then issues the paste command

16. Four-level model • Lexical level • The precise mechanisms with which the user specifies the syntactic level. • Example • Control-D means backspace • clicking within the form places the curser in the form • select an object by placing the cursor over the object and dragging across the object.

17. Consistency • Consistency: be systematic • lexical • syntactic • semantic levels • Makes things easier to remember • Aids in generalizability • Helps reduce potential for error

18. Lexical Consistency • Coding consistent with common usage • red = bad, green = good (*) • left = less, right = more • Consistent abbreviation rules • equal length or first set of unambiguous chars. • Mnemonic names rather than codes • Devices used same way in all phases • character delete key is always the same Adapted from slide by James Landay

19. Syntactic Consistency • Error messages placed at same (logical) place • Always give command first -- or last • Menu items always at same place in menu (muscle memory) Adapted from slide by James Landay

20. Semantic Consistency • Global commands always available • Help • Abort (command underway) • Undo (completed command) • Operations valid on all reasonable objects • if object of class “X” can be deleted, so can object of class “Y” Adapted from slide by James Landay

21. Inconsistency • CMS - XEDIT Editor • in once context, D10 means “down 10 lines” • in another context it means “delete 10 lines” • Current selection in graphics editor • create a new object, it becomes CS • duplicate an object, the original remains CS • Macintosh dragging file operations? • folder on same disk vs. folder on different disk • file to trashcan vs. disk to trashcan Adapted from slide by James Landay

22. Inconsistency • Don’t always be consistent (Grudin) • inconsistency at one level may be consistent at another • moving icon to file cabinet, mailbox, or trash causes icon to disappear (Xerox Star) • choices for when dragging file icon to printer icon: • delete the icon (and thus the file) • disappears “in” the printer from where it can be retrieved • return icon to original location Adapted from slide by James Landay

23. Provide Feedback • Feedback: give each action an immediate and obvious effect • Feedback in terms of • lexical • syntactic • semantic levels • Importance of visibility for feedback • less burden on memory • help user monitor current state Adapted from slide by James Landay

24. Lexical Feedback • Feedback on lexical level: • Cursor movement • Keyboard echo • Selection highlighting Adapted from slide by James Landay

25. Syntactic Feedback • Feedback on Syntactic level • help systems that indicate which words have help available while the user is typing • menus that gray-out operations that are not available given the current state

26. Semantic Feedback • Feedback on Semantic Level • command understood • restate command • Command underway (intermediate FB) • count-down or progress bars • Command completed • prompt for next command • All three are not always necessary Adapted from slide by James Landay

27. Visibility of Feedback • Placement • Where the eyes are • insertion point • screen cursor • Visibility instead of memory • why not display title of current song on CD players? • why not show name of tv show when channel is switched? Adapted from slide by James Landay

28. Audio Feedback • On physical artifacts • click when bolt is secured • rattle of unsecured car door • sound of a well-working zipper • vaccuum cleaner increase in pitch as the bag fills • examples on computer systems? • What are the potential problems? • annoying • media lab videotape discussed “peripheral” or “ambient” interfaces • non-private

29. Errors • Need to design for human capabilities and traits • Human speech is riddled with “errors” • Reduce Gulfs of Execution and Evaluation!

30. Designing for Error Norman on designing for error: • Understand the causes of error and design to minimize these causes • Make it possible to reverse actions • Make it hard to do non-reversable actions • Make it easy to discover the errors that do occur • Change attitute towards errors: • A user is attempting to do a task, getting there by imperfectapproximations; actions are approximations to what is actually desired.

31. Error Types • Forgetting • lock keys in car, don’t save file • Modes • car in drive vs. reverse • digital watch in stopwatch mode rather than normal display mode • Association • looking at room number, dial that instead of phone number

32. Error Types • Capture errors • (commonly done action captures the current intentions) • Sunday, driving to store, end up at work • Counting papers, from 1 … 9, 10, jack, queen, king • Discrimination • hang up phone on wrong receiver • read 0 instead of O

33. Reducing Errors • Design in constraints • Can’t activate toaster unless it is plugged in • Can’t exit program without saving files • Grey out inappropriate commands • Flexibility vs. Robustness tradeoff • Reminding devices • place keys on papers, book by door

34. Error Correction • Lexical • typing mistakes (automatic in MS Word) • Syntactic • re-specify just the parameter in error, or • restart at beginning of command • Semantic • abort operation underway • undo previous command(s) Adapted from slide by James Landay

35. Error Correction • Things not to do • Accusatory error messages • Lots of simultaneous conflicting warning messages • Rely on a statement somewhere in the manual of what is correct and incorrect

36. Why are Guidelines Insufficient? • Too specific and/or too general • may be huge! • Standard does not address all issues • Mac standard UI could be all dialog boxes and menus Adapted from slide by James Landay

37. Summary • UIs are hard to design • Guidelines can give us general principles to follow • Guidelines fail in that they can be hard to apply • too specific or too general • especially true for style guides Adapted from slide by James Landay