The Interaction. Overview Interaction Models understand human-computer communication Ergonomics...
-
Upload
constance-richards -
Category
Documents
-
view
224 -
download
0
Transcript of The Interaction. Overview Interaction Models understand human-computer communication Ergonomics...
![Page 1: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/1.jpg)
The Interaction
PASCA – PIO
GUNADARMA UNIVERSITY
DEC 2012
![Page 2: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/2.jpg)
OverviewInteraction Models
understand human-computer communication
Ergonomics
Physical characteristics of interaction
Context
Social
Organizational
![Page 3: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/3.jpg)
Task AnalysisDomain - area of expertise
e.g. web site design
Concepts - important aspects
e.g. HTML, Java, JPEG, editor, browser
Task - operation within domain
e.g. design a web page
Intention - specific action toward goal
e.g. insert a picture here
![Page 4: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/4.jpg)
![Page 5: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/5.jpg)
The human action cycle is a psychological model which describes the steps humans take when they interact with computer systems The three stages of the human action cycle (goal formation, execution and evaluation). The model is divided into three stages of seven steps in total, and is (approximately) as follows: Goal formation stage
1. Goal formation. Execution stage
2. Translation of goals into a set of (unordered) tasks required to achieve the goal. 3. Sequencing the tasks to create the action sequence. 4. Executing the action sequence.
Evaluation stage5. Perceiving the results after having executed the action sequence. 6. Interpreting the actual outcomes based on the expected outcomes.
7. Comparing what happened with what the user wished to happen.
![Page 6: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/6.jpg)
The Execution-Evaluation Cycle
Execution
• Establish the goal
• Form the intention
• Specify the action sequence
• Execute the action
Evaluation
• Perceive the system state
• Interpret the system state
• Evaluate the system state
![Page 7: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/7.jpg)
Pressing a Button
Goal: See what’s underneath a window
Intention: Click the minimize button
Sequence: Find, move, click
Execute: Move hand, press finger down
Perceive: Open eyes, look
Interpret: Button pressed, window smaller
Evaluate: Mission accomplished
![Page 8: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/8.jpg)
Problems
Gulf of Execution
How do I do X?
Actions allowed by system should correspond to those intended by user
Gulf of Evaluation
What just happened?
Distance between physical presentation and the expectation of the user
![Page 9: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/9.jpg)
Interface
Interaction Framework
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
![Page 10: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/10.jpg)
Turning on the Lights
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
![Page 11: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/11.jpg)
Turning on the Lights
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
switches
wiring flip
lights
circuit
power photons
![Page 12: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/12.jpg)
Social Context
Ergonomics
DialogDesign
ScreenDesign
The Framework and HCI
S UO
I
![Page 13: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/13.jpg)
The Ergonomics of Arrangement
Functional
Related contols and displays grouped
Multiple device remote controls
Sequential
Controls and displays grouped by task order
Real menus
Frequency
Frequently used controls easier to access
![Page 14: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/14.jpg)
Physical Ergonomics
How comfortable is the user?
Position - fatigue
Temperature - concentration
Lighting - eyestrain or glare
Noise - hearing loss
Time - exposure
Color - eyestrain, color blindness
![Page 15: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/15.jpg)
Social Context
How does social context affect interaction?
Others - desire to impress, competition, fear of failure
Motivation - fear, allegiance, ambition, self-satisfaction
Inadequate systems cause frustration, lack of motivation
![Page 16: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/16.jpg)
Interaction Styles
What is the nature of the interface?
Command line
Menus
Natural language
Query dialog
Forms
WIMP (Window, Icon, Menu, Pointer)
![Page 17: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/17.jpg)
Command LineFirst interactive dialog style
Direct - no parsing through choices
Flexible - options, iteration
Memory - commands must be memorized
Consistent, meaningful names
vocabulary of the user
Slow learning curve
![Page 18: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/18.jpg)
Menus
Shows available choices
Faster learning curve
Familiar from dining out
Indirect - parse through all options
Text or graphics
Keyboard or mouse
Press the Windows key
![Page 19: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/19.jpg)
Natural Language
Most attractive at first glance
Ambiguous sentences
The man hit the boy with the stick
Who is holding the stick
Ambiguous words
Cumbersome
Fast learning curve
Invoke the stupid paper clip
![Page 20: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/20.jpg)
Query Dialog
Questions and Answer
Multiple choice, true/false or codes
Fast learning curve
Restricted domains
E.g. setting up an O/S
Save the presentation to HTML
![Page 21: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/21.jpg)
Forms
Familiarity with paper forms
Slots to fill information in
Some slots blank
Easy movement (e.g. tab key, mouse)
Fast learning curve
Direct
Add student to rolodex
![Page 22: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/22.jpg)
WIMP
Windows
Icons
Menus
Pointers
Also…
Buttons
Pallettes
Dialog Boxes
![Page 23: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/23.jpg)
Windows
Multiple simultaneous tasks on screen
Layout policies
Tiling - adjacent windows
Cascading - overlapping windows
Scrollbars - displayed portion of contents
Decorations
title
minimize, maximize, close buttons
![Page 24: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/24.jpg)
Icons
Simple pictoral representations
Minimized windows
System elements
Garbage can
Floppy disk
Folder
Globe
![Page 25: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/25.jpg)
Pointers
Manifestation of the mouse on the screen
Basically a moving icon
shape indicates mode
arrow
hourglass
cross hairs
hot spot - pixel that pointer pointing at
![Page 26: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/26.jpg)
Menus
Ordered lists of operations
Selected item is highlighted
Cascading sub-menus
Menu bar
horizontal menu
cascading vertical sub-menus
Popup menus
![Page 27: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/27.jpg)
More menusPinned menus
Keep popular items on the screen
Indicated with a thumbtack icon
Keyboard accelerators
Function keys, alt-keys
Efficient expert operation
Pie menus
![Page 28: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/28.jpg)
Menu OrganizationHow are menu items organized
Importance
Frequency
Separate opposite functionality
Hick’s Law, describes the time it takes for a person to make a decision as a result of the possible choices he or she has.
Time to decide = .15 lg(choices+1) seconds
![Page 29: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/29.jpg)
![Page 30: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/30.jpg)
Buttons
One item menus
Individual buttons
Push button - invokes a command
Toggle button - changes state when clicked
Button groups
Radio buttons - only one selected
Check boxes - any combination
![Page 31: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/31.jpg)
Toolbars
Collections of small buttons
Functionally a menu of icons
Customizable
Trouble recognizing icons
place text next to/instead of icon
tool tips - text that appears when pointer still
Palettes - indicate mode
![Page 32: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/32.jpg)
Dialog Boxes
Interactive communication
Task oriented
Wizards
Alerts
Exclusive
On top
![Page 33: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/33.jpg)
Screen Design and Layout
What goes where
Presenting information
Aesthetics vs. utility
Knowing what to do
Culture
![Page 34: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/34.jpg)
Presenting Information
How is data best organized geometrically
Sorting
alphanumerically
size
first name/last name
Alignment
decimal point
![Page 35: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/35.jpg)
Aesthetics vs. Utility
How fancy can my interface be?
Foreground/Background
Background should not be distracting
High contrast
Counter
gap between foreground elements
User interest, novelty
Sales - the demo factor
![Page 36: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/36.jpg)
Knowing What to Do
How can we make the interface obvious to the user?
Style guides
Consistency
Familiarity
Affordances
handles lift
buttons push
![Page 37: The Interaction. Overview Interaction Models understand human-computer communication Ergonomics Physical characteristics of interaction Context Social.](https://reader036.fdocuments.us/reader036/viewer/2022062314/56649ccc5503460f94995f5d/html5/thumbnails/37.jpg)
Culture
Not everyone is Western
Internationalization
Resources - allow customization
language
color
Icon meanings
meaning of check marks vs. x marks