SBD:Interaction Design

Chris North

cs3724: HCI

Problem scenarios

summativeevaluation

Information scenarios

claims about current practice

analysis ofstakeholders,field studies

Usability specifications

Activityscenarios

Interaction scenarios

iterativeanalysis ofusability claims andre-design

metaphors,informationtechnology,HCI theory,guidelines

formativeevaluation

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

Systemgoal

Last month’sbudget... ?

Interpretation

PerceptionMakingsense

GULF OFEVALUATION

GULF OFEXECUTION

Stages of Action in HCIInformationdesign

Interactiondesign

Human-computerinteraction

Taskgoal

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 Guidelines2 level look ahead Meaningless labels?

Menu Guidelines

• Broad-shallow vs. narrow-deep

• Depth = logbranchingFactor 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

Systemgoal

Last month’sbudget... ?

Interpretation

PerceptionMakingsense

GULF OFEVALUATION

GULF OFEXECUTION

Stages of Action in HCIInformationdesign

Interactiondesign

Human-computerinteraction

Taskgoal

Cruise Control

• Users:

• Tasks:•

• Current systems:

•