SBD Interaction Design Chris North cs 3724 HCI

SBD: Interaction Design Chris North cs 3724: HCI

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

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

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

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 auto. CAD 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 = logbranching. Factor num. Pages • 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

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

Cruise Control • Users: • Tasks: • • Current systems: •