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. Execution Action plan System goal Last month’s budget... ? Interpretation Perception Making sense GULF OF EVALUATION GULF OF EXECUTION Stages of Action in HCI Information design Interaction design Human- computer interaction Task goal

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

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

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

8. Direct Manipulation Examples: Drag-n-drop file icons

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: Bad:

13. 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?

14. Command Language Examples: Unix, DOS

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

16. Command Language Good: Bad:

17. 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

18. 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

19. Natural Language?

20. Menus & Forms Examples: App pull-down menus

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

22. Menu Guidelines 2 level look ahead Meaningless labels?

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

24. Menus Good: Bad:

25. 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?

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

27. Execution Action plan System goal Last month’s budget... ? Interpretation Perception Making sense GULF OF EVALUATION GULF OF EXECUTION Stages of Action in HCI Information design Interaction design Human- computer interaction Task goal

28. Cruise Control Users: Tasks: Current systems: