SBD: Interaction Design Chris North cs3724: HCI

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

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

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

Example Task goal: Give great idea to Pres. Steger

3 Interaction Styles Direct manipulation Command language Menus & Forms

Example: File Management % rm myfile.txt % _

Direct Manipulation Examples: Drag-n-drop file icons

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

Video Games

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

Direct Manipulation Good: Bad:

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?

Command Language Examples: Unix, DOS

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

Command Language Good: Bad:

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

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

Natural Language?

Menus & Forms Examples: App pull-down menus

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

Menu Guidelines 2 level look ahead Meaningless labels?

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

Menus Good: Bad:

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?

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

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

Cruise Control Users: Tasks: Current systems: