The Interaction. Overview Interaction Models understand human-computer communication Ergonomics...
-
Upload
constance-richards -
Category
Documents
-
view
230 -
download
0
Transcript of The Interaction. Overview Interaction Models understand human-computer communication Ergonomics...
The Interaction
PASCA – PIO
GUNADARMA UNIVERSITY
DEC 2012
OverviewInteraction Models
understand human-computer communication
Ergonomics
Physical characteristics of interaction
Context
Social
Organizational
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
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.
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
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
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
Interface
Interaction Framework
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
Turning on the Lights
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
Turning on the Lights
SCore
UTask
OOutput
IInput
articulationperformance
presentation observation
switches
wiring flip
lights
circuit
power photons
Social Context
Ergonomics
DialogDesign
ScreenDesign
The Framework and HCI
S UO
I
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
Physical Ergonomics
How comfortable is the user?
Position - fatigue
Temperature - concentration
Lighting - eyestrain or glare
Noise - hearing loss
Time - exposure
Color - eyestrain, color blindness
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
Interaction Styles
What is the nature of the interface?
Command line
Menus
Natural language
Query dialog
Forms
WIMP (Window, Icon, Menu, Pointer)
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
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
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
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
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
WIMP
Windows
Icons
Menus
Pointers
Also…
Buttons
Pallettes
Dialog Boxes
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
Icons
Simple pictoral representations
Minimized windows
System elements
Garbage can
Floppy disk
Folder
Globe
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
Menus
Ordered lists of operations
Selected item is highlighted
Cascading sub-menus
Menu bar
horizontal menu
cascading vertical sub-menus
Popup menus
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
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
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
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
Dialog Boxes
Interactive communication
Task oriented
Wizards
Alerts
Exclusive
On top
Screen Design and Layout
What goes where
Presenting information
Aesthetics vs. utility
Knowing what to do
Culture
Presenting Information
How is data best organized geometrically
Sorting
alphanumerically
size
first name/last name
Alignment
decimal point
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
Knowing What to Do
How can we make the interface obvious to the user?
Style guides
Consistency
Familiarity
Affordances
handles lift
buttons push
Culture
Not everyone is Western
Internationalization
Resources - allow customization
language
color
Icon meanings
meaning of check marks vs. x marks