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 1st 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

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-computer

interaction

Taskgoal

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

• 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

Systemgoal

Last month’sbudget... ?

Interpretation

PerceptionMakingsense

GULF OFEVALUATION

GULF OFEXECUTION

Stages of Action in HCIInformationdesign

Interactiondesign

Human-computer

interaction

Taskgoal

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