SBD: Interaction Design Chris North CS 3724: HCI

“Design Space” Identify key design decision (dimension of the design space) Enumerate possible design solutions (values of the dimension) Claims analysis Choose best alternative, based on scenario & claims Use claims to track design rationale throughout

Design space Some design dimensions are orthogonal Independent decisions Morphological box E.g. visual representation of entities within docs vs. representation of entity search hits Some are hierarchical if you choose design X, then there are sub-decisions within design X E.g. visual representation of entities within docs; if you choose color scale, then color of font or background? E.g. representation of entity search hits; if you choose to use a Google Hits List design, then there will be decisions about how to order the Hits List (by date, # occurances, …)

Information Structure What is the data schema? Information objects, relationships E.g project: –Relationship between docs and entities? Documents contain entities? Entities contain documents? Links between documents and entities? –Attributes of an entity? Type # occurences Date of 1 st occurrence …

e.g. project Representation of entity search hits Google hits list Entity profile Web-ring (prev doc, next doc) Tree structure, windows explorer Representation of entities within a doc none Blue hyperlink, like a web page Color scale (of # of hits), like a heat map –Font color –Background color Size coding (of # of hits), like a tag cloud …

e.g. project

Hall of Fame/Shame Presentations

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

Three 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 Games Powerpoint slide sorter, word Media player, files Keyboard

Video Games

Direct Manipulation Principles 1.Visual representation of objects and actions 2.Rapid, incremental, reversible actions 3.Pointing and directly selecting 4.Immediate, continuous feedback “Just do it” - B. Shneiderman

Direct Manipulation Good: Bad:

Direct Manipulation Good: see what your doing, wysiwig Back, undo, avoid errors Learning time good, natural, metaphors, novices High subjective satisfaction, enjoyment Bad: No 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, parameters Huge learning brick wall, memory, intimidating 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 Limited options Just a pointer? Multi-selection?

Combined Strategies Word Cut-n-Paste: Drag-n-drop Ctrl-x, ctrl-v 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: New ideas:

Cruise Control Users: Drivers, age >=16, long distance, foot is tired, speeding tickets in the past? Commuter? Tasks: get somewhere quickly, not get ticket. Maintain speed limit. Gas mileage. –Want to go a certain speed –Want to maintain current speed –Want to adjust speeds, … according to what? Current systems: Menu: hold, +, - New ideas: speech commands, say speed, advanced commands, ‘cop’ macro Direct Manip: manipulate the speedometer, Visual feedback cruise dial

Project Step 3 – Design Due 2 weeks: get started early! Design space Dimensions of the design space Alternative designs Claims analysis Formative evaluation Wizard of Oz Refinements Final design: Scenarios Representations

Homework #3 Due Thurs Download KidPad software Design a zoomable visualization