1. SBD: Interaction Design Chris North cs3724: HCI

2. Problem scenarios summative evaluation Information scenarios claims about current practice analysis of stakeholders, field studies Usability specifications Activity scenarios Interaction scenarios iterative analysis of usability claims and re-design metaphors, information technology, HCI theory, guidelines formative evaluation DESIGN ANALYZE PROTOTYPE & EVALUATE

3. Interaction Design Specify the action sequences for planning and achieving one or more task goals 1.System goals 2.Action plans 3.Execution Output: Storyboards Activity design scenarios: transform current activities to use new design ideas Information design scenarios: Elaborate to include visual presentation details Interaction design scenarios: Elaborate to include physical actions and system responses

4. Storyboard

5. Execution Action plan System goal Last month’s budget... ? Interpretation Perception Making sense GULF OF EVALUATION GULF OF EXECUTION Stages of Action in HCI focus of information design focus of interaction design Human- computer “communication” Task goal

6. Example Task goal: Give great idea to Pres. Steger

7. 3 Interaction Styles Direct manipulation Command language Menus & Forms

8. Example: File Management % rm myfile.txt % _

9. Direct Manipulation Examples: Drag-n-drop file icons visualization Keyboard Games Powerpoint slide sorter, word Media player, files

10. Video Games

11. Direct Manipulation Principles Visual representation Rapid, incremental, reversible actions Pointing and directly selecting Immediate feedback “Just do it”

12. Direct Manipulation Good: see what your doing, wysiwig Back, undo Learning time good, natural, metaphors Bad: wildcards, macros Slow for Experts Limited options Difficult implementation?

13. Command Language Examples: Unix, DOS matlab autoCAD Emacs, word shortcuts, vi programming

14. Command Language Good: fast for experts Fast performance, no graphics Customizable, macros Piping, scripts, Bad: complexity, arguments Huge learning brick wall Requires fast typing Indirect referring to stuff, hard to select Requires knowing the names

15. Speech Input and Output Speech I/O inherently linear, relatively slow –trades off with familiarity, naturalness –restricted vocabulary, commands Speech recognition accuracy still limited –depends on speaker, amount of training up front Synthetic speech output quality also limited –biggest challenge is prosody (intonation contours) –digitized natural speech snippets –useful for alerts, warnings (why?) Biggest benefit: parallel processing, multi-modal –also critical for hands-busy, heads-up tasks

16. Natural Language?

17. Menus & Forms Examples: App pull-down menus Dialog boxes task bar Desktop Start menu Restaurant menus Web pages Phone menus

18. Menu Guidelines 2 level look ahead Meaningless labels?

19. Menu Guidelines Broad-shallow vs. narrow-deep Depth = log branchingFactor numPages Usability: max depth  3-4

20. Menus Good: fast for novice Customizable Fast learn time Recognition instead of recall Bad: slow for expert labeling is critical, consistency Limit options Just a pointer?

21. Combined Strategies Word Cut-n-Paste: Drag-n-drop Ctrl-x, ctrl-p Edit menu

22. Execution Action plan System goal Last month’s budget... ? Interpretation Perception Making sense GULF OF EVALUATION GULF OF EXECUTION Stages of Action in HCI focus of information design focus of interaction design Human- computer “communication” Task goal

23. Going from users’ task concept to system concept: the cognitive distance between two models –mental model held by users tells them what to do –this must make connection with designers’ model that is conveyed and supported by the user interface The closer the match, the easier to find and pursue a relevant goal Constructing a System Goal cognitive distance

24. Bridging the Gulf Direct manipulation Command language C:\>

25. Bridging the Gulf Menus & Forms

26. Action Planning Plan analysis of required action sequences –like HTA, goals decomposed into subgoals, steps, etc. –includes choices and decision rules as relevant –examine what plan knowledge is expected of the user –look for arbitrary sequences, overall complexity, consistency, interference from one plan to another Ex: action plan for indenting paragraph?

27. 1. Select text 3. Set indentation 1. Specify text selection start 2. Specify text selection end 3. Select Format menu 4. Select Paragraph option 5. Set Special to FirstLine 6. Type value for FirstLine 7. Accept new settings 2. Open Paragraph settings

28. Action Execution Physical actions of dragging, clicking, typing, etc. –design goal is to minimize, make things “hang together” as movements, not just plans Crucial role of input device—just like icons, etc., different devices have different affordances: keyboard? mouse? joystick? trackball? data glove?

29. Feedback Feedforward

30. Slips versus Mistakes Mistake = incorrect plan Slip = incorrect execution

31. Supporting Error Correction Forward/backward delete, click to de-select –usually not a question of design, built into UI platform –but what does “Back” on a browser get you? Common design problem is providing for Undo –predicting, supporting right level of reversibility –what are the issues here?

32. Optimizing Execution Sequences Feedback and good defaults are essential! –especially in long, costly, or tedious transactions Consider implications of longterm use –focus on actions for frequent choices, fast-paths –BUT, be careful to note when you are violating overall consistency, or favoring one task at expense of other important or common tasks Customization: users define their own sequences –e.g., mapping commands to key combinations –can be critical when supporting users with special needs

33. Giving Control to the User Humans are good at—and expect support for–doing multiple things at once –working in parallel or “stacking” then reinitiating a task –internal rather than external locus of control –when computer drags them along, it’s unpleasant! BUT, what does this mean for interaction design?

34. Multi-threaded Interaction Multiple windows, each holds one thread –tradeoffs between tiled versus overlapping? –implies good support for window management Avoid modal dialogs unless they have task purpose –e.g., a preemptive dialog box that must be dismissed –when should you deliberately include modal dialog? Crucial role of status information –users must be able to tell when they return to a window what they have done so far, what is possible now, etc. –scenario-based design of “picking up the pieces”

35. Cruise Control Users: Tasks: Current systems: