september 18, 2014 lecture 5liacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-l05.pdf• physical...
TRANSCRIPT
LECTURE 5COMPUTER PERIPHERALS
INTERACTION MODELS
September 18, 2014
human computer interaction 2014, fjv 1
Recapitulation Lecture #4
• Knowledge representation
• Mental Models, definitions
• Mental Models and Design
• Schemata, definitions & examples
• Metaphors, definitions & examples
• Introduction of key principle: Visibility
human computer interaction 2014, fjv 2
Mismatched Metaphore
human computer interaction 2014, fjv 3
Functional ~ Structural
• Physical sectioning of an object
• Reconstructing the sections to 3D object
• Metaphor: section is represented by image:
– Image has a thickness
– All domains in that image have same thickness
– Builds up a model of the object
• Mental Model:
– How does the biologist look at this model
– How does the CS look at this model
4human computer interaction 2014, fjv
Example from the Workbench
human computer interaction 2014, fjv 5
Metaphor Example (1)
• King Harald Blåtand was a legendary 10th
century Viking king who unified Scandinavian
countries (N + DK):
– succeeded people talk to each other
– taken up by ICT industry as metaphor for wireless
technology uniting technology, communication
and consumer electronics.
• Blåtand
6
= Blue tooth
human computer interaction 2014, fjv
• Harald Blåtand (HB) continued policy of his father
• King of Denmark, then Norway
• Brought Christianity
• Tall man with a dark skin
• Old Danish
– Blå = dark skinned
– Tan = great man
– tooth hygiene not known
• Left stones with Old Norge Runes
Metaphor Example (2)
7human computer interaction 2014, fjv
COMPUTER PERIPHERALS FOR
THE GRAPHICAL USER INTERFACE
to be or not to be interactive ...
human computer interaction 2014, fjv 8
Computer consists of Elements
Elements affect the interaction
Internals
• RAM, CPU, Disk(s), Network
– Input devices • Text entry
• Pointing
• Scanner, Camera, Microphone
– Output devices• Screen: small & large, LCD, Projection Displays
• Printer , writing terminal, paper
• Sound: headphone, speaker system
• Haptic feedback device
– Virtual reality• special interaction and display devices
• physical interaction – e.g. sound, haptic, bio-sensing
9human computer interaction 2014, fjv
Text input – QWERTY Keyboard
• Most common text input device
• Allows rapid entry of text by experienced users
• Keypress
– Closes connection, causing a character code to be sent
– Usually connected by cable, but can be wireless
• Standardised layout
– non-alphanumeric keys are placed differently
– accented symbols needed for different scripts
– minor differences between UK and USA keyboards
• QWERTY arrangement not optimal for typing– layout to prevent typewriters jamming!
• Alternative designs allow faster typing but large social base of QWERTY typists produces reluctance to change.
10human computer interaction 2014, fjv
• Alphabetic
– keys arranged in alphabetic order
– not faster for trained typists
– not faster for beginners either!
• Dvorak
– common letters under dominant fingers
– biased towards right hand
– common combinations of letters alternate between hands
– 10-15% improvement in speed and reduction in fatigue
– large social base of QWERTY typists produce market pressures not to change
Alternatives to QWERTY
2 3 4 5 6 7 8 9 0
Q W E R T Y U I
1
O P
S D F H J LA G K
Z X C V B N M , .
SPACE
11human computer interaction 2014, fjv
Qwerty vs. Dvorak
human computer interaction 2014, fjv 12
2 3 4 5 6 7 8 9 0
Q W E R T Y U I
1
O P
S D F H J LA G K
Z X C V B N M , .
SPACE
Error Preventing Keyboard
• Haptic keyboard – errors cost more pressure
• Pressure sensative keyboard
• Uses spelling checker on the fly
• Uses prediction and Bag-of-Words
• Tactile interface
human computer interaction 2014, fjv 13
Demonstration Keyboard
human computer interaction 2014, fjv 14
• Most common pointing device
• Handheld pointing device
– very common
– easy to use
– Metaphor (by accident)
• Two characteristics
– planar movement
– buttons
originally 1 to 3 buttons on top
making a selection,
indicating an option,
initiating drawing etc.)
Mouse
15human computer interaction 2014, fjv
Introduction of Mouse device
• 1967 built by Douglas
Engelbart (Stanford)
• X-Y position indicator for a
display system
• 1970 US patent
• Hand in hand with
development hypertext
• Links should be pointed at
• Quintessential in
development of hypertext
and internet
• Tail = mouse metaphore
16
Archetypal mouse
17
A true prototype …
human computer interaction 2014, fjv
Engelbart’s workstation
18human computer interaction 2014, fjv
Numerical Keypad isn.
...and then, there was the Mouse
human computer interaction 2014, fjv 19
Advanced pointing devices
20
LCD Digitizer: Tablet & Display
human computer interaction 2014, fjv
Advanced pointing devices
21
• LCD Digitizer: Tablet & Display
• Input of Text and Graphics
• Range of additional interactive modes
• Includes handwritten input
• Pen has additional affordances
human computer interaction 2014, fjv
Other TEXT input - Dasher
human computer interaction 2014, fjv 22
• Intelligent processing of vowel-consonant combinations.
• Color is used to indicate different groups of characters/fonts
• Range of applications in different devices
Dasher Demonstration
human computer interaction 2014, fjv 23
Haptic devices
24
Cyber grasp,
force feedback virtual glove
Force feedback device, used in
virtual design, medical
applications.
Wii
Mo
te
human computer interaction 2014, fjv
Demonstration Haptic I/O
human computer interaction 2014, fjv 25
Ubiquitous I/O: Gestures
human computer interaction 2014, fjv 26
27
Interacting with computers
Understanding human–computer interaction
• Understanding the human, i.e. the user
• Motivation, Intention
• Expectation
• i.e. Norman 7 Stages Model
• Understanding the computer, i.e. the elements
• Mapping expectations
Input and Outputdevices, paper, sensors, etc.
Capacity, possibilities?memory, processing,
networks
PARADIGMS, INTERACTION
MODELS, INTERACTION STYLES
Models for Interaction, theory
human computer interaction 2014, fjv 28
Paradigms
An example that serves as pattern or model.
Greek paradeigma = example
Model that forms basis of a theory or
collection of theories.
Paradigms and HCI
• Predominant theoretical frameworks or
scientific world views
– e.g., Aristotelian, Newtonian, Einsteinian
(relativistic) paradigms in physics
• Understanding HCI history is largely about
understanding a series of paradigm shifts
– Not all listed here are necessarily “paradigm”
shifts, but are at least candidates
– History will judge which are true shifts
30human computer interaction 2014, fjv
Interaction Paradigms
• 1950’s
• 1960’s
• 1970’s
• 1980’s
• 1990’s
• 1995’s
• This era
…
31
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous Computing
• Grid Computing
• Cloud Computing
• Multi Modal Computing
human computer interaction 2014, fjv
Paradigm shifts
• Batch processing
• Timesharing
• Networking
• Graphical display
• Microprocessor
• WWW
• Ubiquitous Computing
• Grid Computing
• Multi modal
• Wait on turn, get output
• Wait, intermediate output
• Share resources, own CPU
• Direct manipulation, Visibility
• Personal computing, WIMP
• Globalization information
• Sensor driven, environmental
• CPU driven, includes others
• Multimedia – Small Devices
32human computer interaction 2014, fjv
Multimodality
• A mode is a human communication channel
– PC, Computer
– Internet
– PDA, etc.
• Emphasis on simultaneous use of multiple
channels for input and output
– Multiple Displays
– PDA, Cell Phone, PC
– Sound devices + …
33human computer interaction 2014, fjv
Example Multimodal Interaction
human computer interaction 2014, fjv 34
Interactivity?
Early interaction paradigms: batch processing
– punched card stacks or large data files prepared
– long wait ….
– line printer output … and if it is not right …
Now most computing is interactive
– rapid feedback = VISIBILITY (expected)
– the user in control (most of the time)
– doing rather than thinking …
35human computer interaction 2014, fjv
Important: Styles of Manipulation
• Office-direct manipulation
– user interacts
with artificial world
with artifacts
36
• Industrial – indirect manipulation
– user interactswith real worldthrough interface
• Issues ..
– feedback
– delays
system
interface plant
immediate
feedback
instruments
human computer interaction 2014, fjv
Styles and Paradigms
• Simple paradigm, Single user interface
• Complex paradigm, Multi user interface
• Multi user, GRID
– Industry, science and home apps?
• Multi user, multi modal
– Industry, science and home apps!!
– Think of some examples• Phone – PC
• iPhone
• Intelligent fridge (RFID tag technology)
• Etc..
37human computer interaction 2014, fjv
INTERACTION CONCEPTS
human computer interaction 2014, fjv 38
Concepts of interaction
domain – the area of work under study
e.g. graphic design
goal – what you want to achieve
e.g. create a solid red triangle
task – how you go about doing it
– ultimately in terms of operations or actions
e.g. … select fill tool, click over triangle
Note …
– traditional interaction …
– use of terms differs a lot especially task/goal !!!
39human computer interaction 2014, fjv
Interaction model Norman
• Task language: the language of the user
• Core language: the language of the system
• Seven stages1. user establishes the goal
2. formulates intention
3. specifies actions at interface
4. executes action
5. perceives system state
6. interprets system state
7. evaluates system state with respect to goal
• Norman’s model concentrates on user’s view of the interface, i.e. the user image
40human computer interaction 2014, fjv
Execution/Evaluation loop
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
system
evaluationexecution
goal
41human computer interaction 2014, fjv
Execution/Evaluation loop
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
system
evaluationexecution
goal
42human computer interaction 2014, fjv
Execution/Evaluation loop
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal
system
evaluationexecution
goal
43human computer interaction 2014, fjv
7 Stages of (Inter)Action (Norman, 1986)
44
Goals
EvaluationIntention
InterpretationAction specification
PerceptionExecution
Physical
activity
Mental
activity
Expectation
core language
task language
human computer interaction 2014, fjv
Application of 7 Stages Model
• Hampering Execution (gulf of execution)
– user’s formulation of actions
≠ actions allowed by the system
– interface: reduce the gulf to be effective
• Hampering of Evaluation (gulf of evaluation)
– user’s expectation of changed system state
≠ actual presentation of this state
– gulf should be as small as possible for effective
evaluation
45human computer interaction 2014, fjv
Errors using an interface
• Slip
– understand system and goal
– correct formulation of action
– incorrect action
• Mistake
– may not even have right goal!
• Fixing things?
– Slip : better interface design (screens)
– Mistake: better understanding of system (metaphor)
46human computer interaction 2014, fjv
Interaction framework Abowd & Beale
• Extension of Norman’s 7 stages of interaction
• Abowd & Beale interaction framework has 4 parts
– user
– input
– system
– output
• task language, core language
• Each part has its own unique language
• Interaction ⇒ translation between languages
• Problems in interaction = problems in translation
47
Score
Utask
Ooutput
Iinput
human computer interaction 2014, fjv
Using Abowd & Beale’s model
user intentions→ translated into actions at the interface
→ translated into alterations of system state→ reflected in the output display
→ interpreted by the user
general framework for understanding interaction
– not restricted to electronic computer systems
– identifies all major components involved in interaction
– allows comparative assessment of systems
– an abstraction
48human computer interaction 2014, fjv
Review #5
• Computer Peripherals – Interaction Hardware
• Paradigms , shifts
• Interaction models
– Norman
– Abowd & Beale
• Gulf of Execution
• Gulf of Evaluation
human computer interaction 2014, fjv 49
Interaction Poetry
human computer interaction 2014, fjv 50