SBD: Interaction Design Chris North CS 3724: HCI.
-
Upload
pamela-andrews -
Category
Documents
-
view
225 -
download
0
Transcript of SBD: Interaction Design Chris North CS 3724: HCI.
![Page 1: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/1.jpg)
SBD:Interaction Design
Chris North
CS 3724: HCI
![Page 2: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/2.jpg)
“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
![Page 3: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/3.jpg)
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, …)
![Page 4: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/4.jpg)
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• …
![Page 5: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/5.jpg)
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• …
![Page 6: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/6.jpg)
e.g. project
![Page 7: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/7.jpg)
Hall of Fame/Shame Presentations
![Page 8: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/8.jpg)
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
![Page 9: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/9.jpg)
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
![Page 10: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/10.jpg)
Execution
Action plan
Systemgoal
Last month’sbudget... ?
Interpretation
PerceptionMakingsense
GULF OFEVALUATION
GULF OFEXECUTION
Stages of Action in HCIInformationdesign
Interactiondesign
Human-computer
interaction
Taskgoal
![Page 11: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/11.jpg)
Example
• Task goal: Give great idea to Pres. Steger
![Page 12: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/12.jpg)
Three Interaction Styles
• Direct manipulation
• Command language
• Menus & Forms
![Page 13: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/13.jpg)
Example: File Management
% rm myfile.txt% _
![Page 14: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/14.jpg)
Direct Manipulation
• Examples:• Drag-n-drop file icons
•
![Page 15: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/15.jpg)
Direct Manipulation
• Examples:• Drag-n-drop file icons
• visualization
• Games
• Powerpoint slide sorter, word
• Media player, files
• Keyboard
![Page 16: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/16.jpg)
Video Games
![Page 17: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/17.jpg)
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
![Page 18: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/18.jpg)
Direct Manipulation
• Good:•
• Bad:•
![Page 19: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/19.jpg)
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?
![Page 20: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/20.jpg)
Command Language
• Examples:• Unix, DOS
•
![Page 21: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/21.jpg)
Command Language
• Examples:• Unix, DOS
• matlab
• autoCAD
• Emacs, word shortcuts, vi
• programming
![Page 22: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/22.jpg)
Command Language
• Good:•
• Bad:•
![Page 23: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/23.jpg)
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
![Page 24: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/24.jpg)
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
![Page 25: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/25.jpg)
Natural Language?
![Page 26: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/26.jpg)
Menus & Forms
• Examples:• App pull-down menus
•
![Page 27: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/27.jpg)
Menus & Forms
• Examples:• App pull-down menus
• Dialog boxes
• task bar
• Desktop
• Start menu
• Restaurant menus
• Web pages
• Phone menus
![Page 28: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/28.jpg)
Menu Guidelines2 level look ahead Meaningless labels?
![Page 29: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/29.jpg)
Menu Guidelines
• Broad-shallow vs. narrow-deep
• Depth = logbranchingFactor numPages
• Usability: max depth 3-4
![Page 30: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/30.jpg)
Menus
• Good:•
• Bad:•
![Page 31: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/31.jpg)
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?
![Page 32: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/32.jpg)
Combined Strategies
• Word Cut-n-Paste:• Drag-n-drop
• Ctrl-x, ctrl-v
• Edit menu
![Page 33: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/33.jpg)
Execution
Action plan
Systemgoal
Last month’sbudget... ?
Interpretation
PerceptionMakingsense
GULF OFEVALUATION
GULF OFEXECUTION
Stages of Action in HCIInformationdesign
Interactiondesign
Human-computer
interaction
Taskgoal
![Page 34: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/34.jpg)
Cruise Control• Users:
•
• Tasks:•
• Current systems:•
• New ideas:•
![Page 35: SBD: Interaction Design Chris North CS 3724: HCI.](https://reader036.fdocuments.net/reader036/viewer/2022062321/56649e615503460f94b5cd60/html5/thumbnails/35.jpg)
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