NSCETE-LEARNING
PRESENTATIONLISTEN … LEARN… LEAD…
Department of CSE Page 1 of 205 NSCETDepartment of CSE NSCET
COMPUTER SCIENCE & ENGINEERING
IVth YEAR / VIIIth SEMESTER
CS6008 – HUMAN COMPUTER INTERACTION
VIGNESH L S M.E.,AP/CSE
Nadar Saraswathi College of Engineering & Technology,Vadapudupatti,Annanji (po), Theni – 625531.
Department of CSE Page 2 of 205 NSCETDepartment of CSE NSCET
THE HUMANUNIT 01 - UNIT NAME – LECTURE 01
Department of CSE Page 3 of 205 NSCETDepartment of CSE NSCET
the human
• Information i/o …• visual, auditory, haptic, movement
Information stored in memory• sensory, short-term, long-term
Information processed and applied• reasoning, problem solving, skill, error
Emotion influences human capabilities
Each person is different
•
•
•
•
Department of CSE Page 4 of 205 NSCETDepartment of CSE NSCET
Vision
Two stages in vision
• physical reception of stimulus
• processing and interpretation of stimulus
Department of CSE Page 5 of 205 NSCETDepartment of CSE NSCET
The Eye - physical reception
• mechanism for receiving light and transforming it into electricalenergy
light reflects from objects
images are focused upside-down on retina
•
•
•
•
retina contains rods for low light vision and cones for colour vision
ganglion cells (brain!) detect pattern and movement
Department of CSE Page 6 of 205 NSCETDepartment of CSE NSCET
Interpreting the signal
• Size and depth
• visual angle indicates how much of view object occupies(relates to size and distance from eye)
visual acuity is ability to perceive detail (limited)
familiar objects perceived as constant size(in spite of changes in visual angle when far away)
cues like overlapping help perception of size and depth
•
•
•
Department of CSE Page 7 of 205 NSCETDepartment of CSE NSCET
Interpreting the signal (cont)
Brightness subjective reaction to levels of light
affected by luminance of object
measured by just noticeable difference
visual acuity increases with luminance as does flicker
Colour made up of hue, intensity, saturation
cones sensitive to colour wavelengths
blue acuity is lowest
8% males and 1% females colour blind
Department of CSE Page 8 of 205 NSCETDepartment of CSE NSCET
Interpreting the signal (cont)
• The visual system compensates for:• movement
• changes in luminance.
• Context is used to resolve ambiguity
• Optical illusions sometimes occur due to over compensation
Department of CSE Page 9 of 205 NSCETDepartment of CSE NSCET
Optical Illusions
the Ponzo illusion the Muller Lyer illusion
Department of CSE Page 10 of 205 NSCETDepartment of CSE NSCET
Reading
Several stages: visual pattern perceived
decoded using internal representation of language
interpreted using knowledge of syntax, semantics, pragmatics
Reading involves saccades and fixations
Perception occurs during fixations
Word shape is important to recognition
Negative contrast improves reading from computer screen
Department of CSE Page 11 of 205 NSCETDepartment of CSE NSCET
Hearing
Provides information about environment:distances, directions, objects etc.
Physical apparatus: outer ear
middle ear– protects inner and amplifies sound
– transmits sound waves asvibrations to inner ear
chemical transmitters are released and cause impulses in auditory nerve
inner ear –
Sound pitch
loudness
timbre
––
–
sound frequency
amplitude
type or quality
Department of CSE Page 12 of 205 NSCETDepartment of CSE NSCET
Hearing (cont)
Humans can hear frequencies from 20Hz to 15kHz less accurate distinguishing high frequencies than low.
Auditory system filters sounds can attend to sounds over background noise.
for example, the cocktail party phenomenon.
Department of CSE Page 13 of 205 NSCETDepartment of CSE NSCET
Touch
Provides important feedback about environment.
May be key sense for someone who is visually impaired.
Stimulus received via receptors in the skin:
thermoreceptors – heat and cold– pain
– pressure(some instant, some continuous)
nociceptorsmechanoreceptors
Some areas more sensitive than others e.g. fingers.
Kinethesis - awareness of body position affects comfort and performance.
Department of CSE Page 14 of 205 NSCETDepartment of CSE NSCET
Movement
Time taken to respond to stimulus:reaction time + movement time
Movement time dependent on age, fitness etc.
Reaction time - dependent on stimulus type:~ 200ms
~ 150 ms
~ 700ms
visual
auditory
pain
Increasing reaction time decreases accuracy in the unskilledoperator but not in the skilled operator.
Department of CSE Page 15 of 205 NSCETDepartment of CSE NSCET
Movement (cont)
Fitts' Law describes the time taken to hit a screen target:
Mt = a + b log2(D/S + 1)
a and b are empirically determined constants
Mt is movement time
D is Distance
S is Size of target
where:
targets as large as possibledistances as small as possible
Department of CSE Page 16 of 205 NSCETDepartment of CSE NSCET
Memory
There are three types of memory function:
Sensory memories
Short-term memory or working memory
Long-term memory
Selection of stimuli governed by level of arousal.
Department of CSE Page 17 of 205 NSCETDepartment of CSE NSCET
sensory memory
• Buffers for stimuli received through senses• iconic memory: visual stimuli
•
•
echoic memory: aural stimulihaptic memory: tactile stimuli
• Examples• “sparkler” trail
• stereo sound
Continuously overwritten•
Department of CSE Page 18 of 205 NSCETDepartment of CSE NSCET
Short-term memory (STM)
• Scratch-pad for temporary recall
• rapid access ~ 70ms
• rapid decay ~ 200ms
• limited capacity - 7± 2 chunks
Department of CSE Page 19 of 205 NSCETDepartment of CSE NSCET
Examples
212348278493202
0121 414 2626
HEC ATR ANU PTH ETR EET
Department of CSE Page 20 of 205 NSCETDepartment of CSE NSCET
Long-term memory (LTM)
Repository for all our knowledge slow access ~ 1/10 second
slow decay, if any
huge or unlimited capacity
Two types episodic
semantic– serial memory of events
– structured memory of facts,concepts, skills
semantic LTM derived from episodic LTM
Department of CSE Page 21 of 205 NSCETDepartment of CSE NSCET
Long-term memory (cont.)
Semantic memory structure provides access to information
represents relationships between bits of information
supports inference
Model: semantic network inheritance – child nodes inherit properties of parent nodes
relationships between bits of information explicit
supports inference through inheritance
Department of CSE Page 22 of 205 NSCETDepartment of CSE NSCET
LTM - semantic network
Department of CSE Page 23 of 205 NSCETDepartment of CSE NSCET
Models of LTM - Frames
•
•
•
Information organized in data structures
Slots in structure instantiated
Type–subtype relationships
with values for instance of data
Department of CSE Page 24 of 205 NSCETDepartment of CSE NSCET
COLLIE
Fixed
breed of: DOG
type: sheepdog
Default
size: 65 cm
Variable
colour
DOG
Fixed
legs: 4
Default
diet: carniverous
sound: bark
Variable
size:
colour
Models of LTM - Scripts
Model of stereotypical information required to interpret situation
Script has elements that can be instantiated with values for context
Result: dog betterpays
vet richer
examination tableProps:waiting in room
instrumentspaying
Script for a visit to the vet
Entry conditions: dog ill Roles: vet examines
vet open diagnoses
owner has money treatsowner brings dog in
owner poorer takes dog out
Scenes: arriving at reception
medicine examination
Tracks: dog needs medicine
dog needs operation
Department of CSE Department of CSE Page 25 of 205 NSCET NSCET
Models of LTM - Production rules
Representation of procedural knowledge.
Condition/action rulesif condition is matched
then use rule to determine action.
Department of CSE Page 26 of 205 NSCETDepartment of CSE NSCET
IF dog is wagging tail
THEN pat dog
IF dog is growling
THEN run away
LTM - Storage of information
rehearsal information moves from STM to LTM
total time hypothesis amount retained proportional to rehearsal time
distribution of practice effect optimized by spreading learning over time
structure, meaning and familiarity information easier to remember
Department of CSE Page 27 of 205 NSCETDepartment of CSE NSCET
LTM - Forgetting
decay information is lost gradually but very slowly
interference new information replaces old: retroactive interference
old may interfere with new: proactive inhibition
so may not forget at all memory is selective …
… affected by emotion – can subconsciously `choose' to forget
Department of CSE Page 28 of 205 NSCETDepartment of CSE NSCET
LTM - retrieval
recall• information reproduced from memory can be assisted by cues, e.g.
categories, imagery
recognition•
•
information gives knowledge that it has been seen beforeless complex than recall - information is cue
Department of CSE Page 29 of 205 NSCETDepartment of CSE NSCET
Thinking
Reasoning
deduction, induction, abduction
Problem solving
Department of CSE Page 30 of 205 NSCETDepartment of CSE NSCET
Deductive Reasoning
Deduction:derive logically necessary conclusion from given premises.
e.g. If it is Friday then she will go to workIt is Friday
Therefore she will go to work.
Logical conclusion not necessarily true:e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
Department of CSE Page 31 of 205 NSCETDepartment of CSE NSCET
Deduction (cont.)
• When truth and logical validity clash …e.g. Some people are babies
Some babies cry
Inference - Some people cry
Correct?
• People bring world knowledge to bear
Department of CSE Page 32 of 205 NSCETDepartment of CSE NSCET
Inductive Reasoning
Induction: generalize from cases seen to cases unseen
e.g. all elephants we have seen have trunkstherefore all elephants have trunks.
Unreliable: can only prove false not true
… but useful!
Humans not good at usinge.g. Wason's cards.
negative evidence
Department of CSE Page 33 of 205 NSCETDepartment of CSE NSCET
Wason's cards
Is this true?
How many cards do you need to turn over to find out?
…. and which cards?
Department of CSE Page 34 of 205 NSCETDepartment of CSE NSCET
If a card has a vowel on one side it has an even number on the other
K4E7
Abductive reasoning
• reasoning from event to causee.g. Sam drives fast when drunk.
If I see Sam driving fast, assume drunk.
• Unreliable:• can lead to false explanations
Department of CSE Page 35 of 205 NSCETDepartment of CSE NSCET
Problem solving
solution to unfamiliar task usingProcess of findingknowledge.
Several theories.
Gestalt
problem solving both productive and reproductive
productive draws on insight and restructuring of problemattractive but not enough evidence to explain `insight' etc.
move away from behaviourism and led towards information processingtheories
Department of CSE Page 36 of 205 NSCETDepartment of CSE NSCET
Problem solving (cont.)
Problem space theory problem space comprises problem states
problem solving involves generating states using legal operators
heuristics may be employed to select operators e.g. means-ends analysis
operates within human information processing system e.g. STM limits etc.
largely applied to problem solving in well-defined areas e.g. puzzles rather than knowledge intensive areas
Department of CSE Page 37 of 205 NSCETDepartment of CSE NSCET
Problem solving (cont.)
Analogy analogical mapping:
novel problems in new domain?
use knowledge of similar problem from similar domain
analogical mapping difficult if domains are semantically different
Skill acquisition skilled activity characterized by chunking
lot of information is chunked to optimize STM
conceptual rather than superficial grouping of problems
information is structured more effectively
Department of CSE Page 38 of 205 NSCETDepartment of CSE NSCET
Errors and mental models
Types of error
slips
right intention, but failed to do it rightcauses: poor physical skill,inattention etc.
change to aspect of skilled behaviour can cause slip
mistakes
wrong intentioncause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
Department of CSE Page 39 of 205 NSCETDepartment of CSE NSCET
Emotion
• Various theories of how emotion works• James-Lange: emotion is our interpretation of a physiological
response to a stimuli
Cannon: emotion is a psychological response to a stimuli Schacter-Singer: emotion is the result of our evaluation of our physiologicalresponses, in the light of the whole situation we are in
••
• Emotion clearly involves both cognitive and physicalresponses to stimuli
Department of CSE Page 40 of 205 NSCETDepartment of CSE NSCET
Emotion (cont.)
• The biological response to physical stimuli is called affect
• Affect influences how we respond to situations• positive → creative problem solving• negative → narrow thinking
“Negative affect can make it harder to do even easy tasks; positive affect canmake it easier to do difficult tasks”
(Donald Norman)
Department of CSE Page 41 of 205 NSCETDepartment of CSE NSCET
Emotion (cont.)
• Implications for interface design•
•
•
stress will increase the difficulty of problem solvingrelaxed users will be more forgiving of shortcomings in design
aesthetically pleasing and rewarding interfaces will increase positive affect
Department of CSE Page 42 of 205 NSCETDepartment of CSE NSCET
Individual differences
long term– sex, physical and intellectual abilities
short term– effect of stress or fatigue
changing– age
Ask yourself:will design decision exclude section of user population?
Department of CSE Page 43 of 205 NSCETDepartment of CSE NSCET
Psychology and the Design of InteractiveSystem
Some direct applications
e.g. blue acuity is poor blue should not be used for important detail
However, correct application generally requires understanding of context in psychology, and an understanding of particular experimental conditions
A lot of knowledge has been distilled in
guidelines (chap 7)cognitive models (chap 12)
experimental and analytic evaluation techniques (chap 9)
Department of CSE Page 44 of 205 NSCETDepartment of CSE NSCET
COMPUTERTHEUNIT 01 - UNIT NAME – LECTURE 01
Department of CSE Page 45 of 205 NSCETDepartment of CSE NSCET
The Computer
a computer system is made up of various elements
each of these elements affects the interaction
•
•
•
•
•
•
•
input devices – text entry and pointing
output devices – screen (small&large), digital paper
virtual reality – special interaction and display devices
physical interaction – e.g. sound, haptic, bio-sensing
paper – as output (print) and input (scan)
memory – RAM & permanent media, capacity & access
processing – speed of processing, networks
Department of CSE Page 46 of 205 NSCETDepartment of CSE NSCET
Interacting with computers
to understand human–computer interaction… need to understand computers!
what goes indevices, paper,
and out
sensors, etc.
what can it do?memory, processing,
networks
Department of CSE Page 47 of 205 NSCETDepartment of CSE NSCET
A ‘typical’ computer system
? •
•
•
screen, or monitor, on which there are windows
keyboard
mouse/trackpad
• variations•
•
•
desktop
laptop
PDA12-37pm
the devices dictate the styles of interaction that the system supports
If we use different devices, then the interface will support a different style ofinteraction
Department of CSE Page 48 of 205 NSCETDepartment of CSE NSCET
wi ndow 1
wi ndow 2
How many …
• computers in your house?• hands up, …
… none, 1, 2 , 3, more!!
• computers in your pockets?
are you thinking …… PC, laptop, PDA ??
Department of CSE Page 49 of 205 NSCETDepartment of CSE NSCET
How many computers …
in your house? in your pockets?
•
•
•
•
•
PC
TV, VCR, DVD, HiFi, cable/satellite TV microwave, cooker, washingmachine
central heating
security system
PDAphone, camera
smart card, card with magnetic strip? electronic car keyUSB memory
•
•
••
•
try your pockets and bagscan you think of more?
Department of CSE Page 50 of 205 NSCETDepartment of CSE NSCET
Interactivity?
Long ago in a galaxy far away … batch processing•
•
•
punched card stacks or large data files preparedlong wait ….
line printer output
… and if it is not right …
Now most computing is interactive•
•
•
rapid feedbackthe user in control (most of the time)
doing rather than thinking …
Is faster always better?
Department of CSE Page 51 of 205 NSCETDepartment of CSE NSCET
Richer interaction
sensorsand devices
everywhere
Department of CSE Page 52 of 205 NSCETDepartment of CSE NSCET
text entry devices
keyboards (QWERTY et al.)
chord keyboards, phone pads
handwriting, speech
Department of CSE Page 53 of 205 NSCETDepartment of CSE NSCET
Keyboards
•
•
Most common text input device
Allows rapid entry of text by experienced users
• Keypress closes connection, causing a charactersent
code to be
• Usually connected by cable, but can be wireless
Department of CSE Page 54 of 205 NSCETDepartment of CSE NSCET
layout – QWERTY
• Standardised layout
but …
•
•
•
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 QWERTYtypists produces reluctance to change.
•
Department of CSE Page 55 of 205 NSCETDepartment of CSE NSCET
QWERTY (ctd)
4 8 92 3 5 61 7 0
Q
A
W
S
Z
E
D
R
F
T
G
Y
H
U
J
I
K
O
L
P
X C V B N M , .
SPACE
Department of CSE Page 56 of 205 NSCETDepartment of CSE NSCET
alternative keyboard layouts
Alphabetic•
•
•
keys arranged in alphabetic ordernot faster for trained typists
not faster for beginners either!
Dvorak•
•
•
•
•
common letters under dominant fingersbiased towards right hand
common combinations of letters alternate between hands
10-15% improvement in speed and reduction in fatigue
But - large social base of QWERTY typists produce market pressures not to change
Department of CSE Page 57 of 205 NSCETDepartment of CSE NSCET
special keyboards
•
•
designs to reduce fatigue for RSI
for one handed usee.g. the Maltron left-handed keyboard
Department of CSE Page 58 of 205 NSCETDepartment of CSE NSCET
Chord keyboards
only a few keys - four or 5
letters typed as combination of keypresses
compact size
– ideal for portable applications
short learning time– keypresses reflect letter shape
fast
– once you have trained
BUT - social resistance, plus fatigue after extended use
NEW – niche market for some wearables
Department of CSE Page 59 of 205 NSCETDepartment of CSE NSCET
phone pad and T9 entry
• use numeric keys withmultiple presses
2 – a b c
3 - d e f
4 - g h i
5 - j k l
6 - m n o
7 - p q r s
8 - t u v
9 - w x y z
hello = 4433555[pause]555666
surprisingly fast!
• T9 predictive entry•
•
•
•
type as if single key for each letteruse dictionary to ‘guess’ the right word
hello = 43556 …
but 26 -> menu ‘am’ or ‘an’
Department of CSE Page 60 of 205 NSCETDepartment of CSE NSCET
Handwriting recognition
• Text can be input into the computer, digesting tablet
• natural interaction
using a pen and a
• Technical problems:• capturing all useful information - stroke path, pressure, etc. in a
natural mannersegmenting joined up writing into individual lettersinterpreting individual letterscoping with different styles of handwriting
•••
• Used in PDAs, and tablet computers… leave the keyboard on the desk!
…
Department of CSE Page 61 of 205 NSCETDepartment of CSE NSCET
Speech recognition
• Improving rapidly
• Most successful when:• single user – initial training and learns peculiarities
• limited vocabulary systems
• Problems with•
•
•
•
external noise interfering
imprecision of pronunciation
large vocabulariesdifferent speakers
Department of CSE Page 62 of 205 NSCETDepartment of CSE NSCET
Numeric keypads
• for entering numbers quickly:• calculator, PC keyboard
• for telephones
not the same!!
ATM like phone
telephone calculator
Department of CSE Page 63 of 205 NSCETDepartment of CSE NSCET
7 8 9
4 5 6
1 2 3
0 . =
1 2 3
4 5 6
7 8 9
* 0 #
positioning, pointing and drawing
mouse, touchpadtrackballs, joysticks etc.touch screens, tablets
eyegaze, cursors
Department of CSE Page 64 of 205 NSCETDepartment of CSE NSCET
the Mouse
• Handheld pointing device• very common
• easy to use
• Two characteristics•
•
planar movement
buttons(usually from 1 to 3 buttons on top, used for making a selection, indicating an option,or to initiate drawing etc.)
Department of CSE Page 65 of 205 NSCETDepartment of CSE NSCET
the mouse (ctd)
Mouse located on desktop• requires physical space
• no arm fatigue
Relative movement only is detectable.
Movement of mouse moves screen cursor
Screen cursor oriented in (x, y) plane,mouse movement in (x, z) plane …
… an indirect manipulation device.• device itself doesn’t obscure screen, is accurate and fast.
• hand-eye coordination problems for novice users
Department of CSE Page 66 of 205 NSCETDepartment of CSE NSCET
How does it work?
Two methods for detecting motion
• Mechanical•
•
•
Ball on underside of mouse turns as mouse is movedRotates orthogonal potentiometers
Can be used on almost any flat surface
• Optical•
•
•
•
light emitting diode on underside of mouse
may use special grid-like pad or just on desk
less susceptible to dust and dirt
detects fluctuating alterations in reflected light intensity to calculate relative motion in (x, z) plane
Department of CSE Page 67 of 205 NSCETDepartment of CSE NSCET
Even by foot …
• some experiments with the footmouse• controlling mouse movement with feet …
• not very common :-)
• but foot controls are common elsewhere:•
•
•
car pedalssewing machine speed control
organ and piano pedals
Department of CSE Page 68 of 205 NSCETDepartment of CSE NSCET
Touchpad
•
•
•
small touch sensitive tablets
‘stroke’ to move mouse pointer
used mainly in laptop computers
• good ‘acceleration’ settings important• fast stroke
• lots of pixels per inch moved
• initial movement to the target
slow stroke• less pixels per inch
• for accurate positioning
•
Department of CSE Page 69 of 205 NSCETDepartment of CSE NSCET
Trackball and thumbwheels
Trackball• ball is rotated inside static housing
• like an upsdie down mouse!
relative motion moves cursor indirect device, fairly accurate separate buttons for picking
very fast for gamingused in some portable and notebook computers.
•
•
•
•
•
Thumbwheels …• for accurate CAD – two dials for X-Y cursor position
• for fast scrolling – single dial on mouse
Department of CSE Page 70 of 205 NSCETDepartment of CSE NSCET
Joystick and keyboard nipple
Joystick• indirect
pressure of stick = velocity of movementbuttons for selection
on top or on front like a trigger
often used for computer games aircraft controls and 3D navigation
•
•
Keyboard nipple• for laptop computers
• miniature joystick in the middle of the keyboard
Department of CSE Page 71 of 205 NSCETDepartment of CSE NSCET
Touch-sensitive screen
• Detect the presence of finger or stylus on the screen.• works by interrupting matrix of light beams, capacitance changes or ultrasonic
reflections
• direct pointing device
• Advantages:•
•
•
fast, and requires no specialised pointer
good for menu selection
suitable for use in hostile environment: clean and safe from damage.
• Disadvantages:•
•
finger can mark screen
imprecise (finger is a fairly blunt instrument!)• difficult to select small regions or perform accurate drawing
lifting arm can be tiring•
Department of CSE Page 72 of 205 NSCETDepartment of CSE NSCET
Stylus and light pen
Stylus•
•
•
small pen-like pointer to draw directly on screenmay use touch sensitive surface or magnetic detection
used in PDA, tablets PCs and drawing tables
Light Pen• now rarely used
• uses light from screen to detect location
BOTH …• very direct and obvious to use
• but can obscure screen
Department of CSE Page 73 of 205 NSCETDepartment of CSE NSCET
Digitizing tablet
• Mouse like-device with cross hairs
• used on special surface- rather like stylus
• very accurate- used for digitizing maps
Department of CSE Page 74 of 205 NSCETDepartment of CSE NSCET
Eyegaze
• control interface by eye gaze direction• e.g. look at a menu item to select it
uses laser beam reflected off retina• … a very low power laser!
mainly used for evaluation (ch x)
potential for hands-free control
high accuracy requires headset
•
•
•
•
• cheaper and lower accuracy devicessit under the screen like a small
availablewebcam
Department of CSE Page 75 of 205 NSCETDepartment of CSE NSCET
Cursor keys
•
•
•
•
Four keys (up, down, left, right) on keyboard.
Very, very cheap, but slow.
Useful for not much more than basic motion for text-editing tasks.
No standardised layout, but inverted “T”, most common
Department of CSE Page 76 of 205 NSCETDepartment of CSE NSCET
Discrete positioning controls
• in phones, TV controls etc.•
•
•
cursor pads or mini-joysticksdiscrete left-right, up-down
mainly for menu selection
Department of CSE Page 77 of 205 NSCETDepartment of CSE NSCET
display devices
bitmap screens (CRT & LCD)
large & situated displays digital paper
Department of CSE Page 78 of 205 NSCETDepartment of CSE NSCET
bitmap displays
• screen is vast number of coloured dots
Department of CSE Page 79 of 205 NSCETDepartment of CSE NSCET
resolution and colour depth
• Resolution … used (inconsistently) for• number of pixels on screen (width x height)
• e.g. SVGA 1024 x 768, PDA perhaps 240x400
• density of pixels (in pixels or dots per inch - dpi)• typically between 72 and 96 dpi
Aspect ratio• ration between width and height
• 4:3 for most screens, 16:9 for wide-screen TV
Colour depth:
•
••
•
•
•
how many different colours for each pixel?black/white or greys only
256 from a pallete
8 bits each for red/green/blue = millions of colours
Department of CSE Page 80 of 205 NSCETDepartment of CSE NSCET
anti-aliasing
Jaggies• diagonal lines that have discontinuities in due to horizontal raster scan
process.
Anti-aliasing••
softens edges by using shades of line colouralso used for text
Department of CSE Page 81 of 205 NSCETDepartment of CSE NSCET
n
Cathode ray tube
• Stream of electrons emitted from electron gun, focused and directed bymagnetic fields, hit phosphor-coated screen which glows
used in TVs and computer monitors•
electronbeam
electrongun
focussing and
deflection
phosphor-
coated screeDepartment of CSE Page 82 of 205 NSCETDepartment of CSE NSCET
Health hazards of CRT !
•
•
•
•
X-rays: largely absorbed by screen (but not at rear!)
UV- and IR-radiation from phosphors: insignificant levels
Radio frequency emissions, plus ultrasound (~16kHz)
Electrostatic field - leaks out through tube to user. Intensity dependant on distance and humidity. Can cause rashes.
Electromagnetic fields (50Hz-0.5MHz). Create induction currents in conductive materials, including the human body. Two types of effects attributed to this: visual system - high incidence of cataracts in VDU operators, and concern over reproductive disorders (miscarriages and birth defects).
•
Department of CSE Page 83 of 205 NSCETDepartment of CSE NSCET
Health hints …
•
•
•
•
•
do
do
do
do
not
not
not
not
sit too close to the screen
use very small fonts
look at the screen for long periods without a break
place the screen directly in front of a bright window
work in well-lit surroundings
Take extra care if pregnant.but also posture, ergonomics, stress
Department of CSE Page 84 of 205 NSCETDepartment of CSE NSCET
Liquid crystal displays
• Smaller, lighter, and … no radiation problems.
• Found on PDAs, portables and notebooks,… and increasingly on desktop and even for home TV
• also used in dedicted displays:digital watches, mobile phones, HiFi controls
• How it works …•
•
•
•
Top plate transparent and polarised, bottom plate reflecting.
Light passes through top plate and crystal, and reflects back to eye.
Voltage applied to crystal changes polarisation and hence colour
N.B. light reflected not emitted => less eye strain
Department of CSE Page 85 of 205 NSCETDepartment of CSE NSCET
special displays
Random Scan (Directed-beam refresh, vector display)•
•
•
•
draw the lines to be displayed directlyno jaggies
lines need to be constantly redrawn
rarely used except in special instruments
Direct view storage tube (DVST)•
•
•
Similar to random scan but persistent => no flicker
Can be incrementally updated but not selectively erased
Used in analogue storage oscilloscopes
Department of CSE Page 86 of 205 NSCETDepartment of CSE NSCET
large displays
•
•
used for meetings, lectures, etc.
technology
– usually wide screenplasma
video walls – lots of small screens together
– RGB lights or LCD projectorprojected– hand/body obscures screen
– may be solved by 2 projectors + clever software
back-projected– frosted glass + projector behind
Department of CSE Page 87 of 205 NSCETDepartment of CSE NSCET
situated displays
• displays in ‘public’ places• large or small
• very public or for small group
display only••
or•
for information relevant to location
interactiveuse stylus, touch sensitive screem
•
• in all cases … the location matters• meaning of information or interaction is related to the location
Department of CSE Page 88 of 205 NSCETDepartment of CSE NSCET
• small displays beside office doors
• handwritten notes left using stylus
• office owner reads notes using web interface
Hermes a situated display
small displaysbeside
office doors
handwrittennotes left
using stylus
office ownerreads notes using
web interface
Department of CSE Page 89 of 205 NSCETDepartment of CSE NSCET
Digital paper
appearance
• what?•
•
•
thin flexible sheetsupdated electronically
but retain display crosssection
• how?•
•
small spheres turnedor channels with coloured liquidand contrasting spheresrapidly developing area•
Department of CSE Page 90 of 205 NSCETDepartment of CSE NSCET
virtual reality and 3D interaction
positioning in 3D spacemoving and grasping
seeing 3D (helmets and caves)
Department of CSE Page 91 of 205 NSCETDepartment of CSE NSCET
positioning in 3D space
• cockpit and virtual controls• steering wheels, knobs and dials … just like real!
the 3D mouse• six-degrees of movement: x, y, z + roll, pitch, yaw
data glove• fibre optics used to detect finger position
VR helmets• detect head motion and possibly eye gaze
whole body tracking• accelerometers strapped to limbs or reflective dots and video
processing
•
•
•
•
Department of CSE Page 92 of 205 NSCETDepartment of CSE NSCET
pitch, yaw and roll
yaw
rollpitch
Department of CSE Page 93 of 205 NSCETDepartment of CSE NSCET
3D vision
3D displays
• desktop VR• ordinary screen, mouse or keyboard control
• perspective and motion give 3D effect
seeing in 3D••
•
•
use stereoscopic visionVR helmets
screen plus shuttered specs, etc.
Department of CSE Page 94 of 205 NSCETDepartment of CSE NSCET
also see extra slides on
VR headsets
•
•
•
small TV screen for each eye
slightly different angles
3D effect
Department of CSE Page 95 of 205 NSCETDepartment of CSE NSCET
VR motion sickness
• time delay• move head … lag … display moves
• conflict: head movement vs. eyes
depth perception••
•
•
headset gives different stereo distancebut all focused in same plane
conflict: eye angle vs. focus
• conflicting cues => sickness• helps motivate improvements in technology
Department of CSE Page 96 of 205 NSCETDepartment of CSE NSCET
simulators and VR caves
•
•
•
•
•
scenes projected on walls
realistic environment
hydraulic rams!
real controls
other people
Department of CSE Page 97 of 205 NSCETDepartment of CSE NSCET
physical controls, sensors etc.
special displays and gauges
sound, touch, feel, smell
physical controlsenvironmental and bio-sensing
Department of CSE Page 98 of 205 NSCETDepartment of CSE NSCET
dedicated displays
• analogue representations:• dials, gauges, lights, etc.
• digital displays:• small LCD screens, LED lights, etc.
• head-up displays•
•
found in aircraft cockpitsshow most important controls
… depending on context
Department of CSE Page 99 of 205 NSCETDepartment of CSE NSCET
Sounds
• beeps, bongs, clonks, whistles and whirrs
• used for error indications
• confirmation of actions e.g. keyclick
also see chapter 10
Department of CSE Page 100 of 205 NSCETDepartment of CSE NSCET
Touch, feel, smell
• touch and feeling important•
•
•
in games … vibration, force feedbackin simulation … feel of surgical instruments
called haptic devices
• texture, smell, taste• current technology very limited
Department of CSE Page 101 of 205 NSCETDepartment of CSE NSCET
BMW iDrive
•
•
•
•
for controlling menus
feel small ‘bumps’ for each item
makes it easier to select options by feel
uses haptic technology from Immersion Corp.
Department of CSE Page 102 of 205 NSCETDepartment of CSE NSCET
physical controls
• specialist controls needed …• industrial controls, consumer products, etc.
easy-cleansmooth buttons
multi-functioncontrol
large buttonsclear dials
tiny buttons
Department of CSE Page 103 of 205 NSCETDepartment of CSE NSCET
Environment and bio-sensing
• sensors all around us•
•
•
•
car courtesy light – small switch on doorultrasound detectors – security, washbasins
RFID security tags in shops
temperature, weight, location
• … and even our own bodies …• iris scanners, body temperature, heart rate, galvanic skin response, blink rate
Department of CSE Page 104 of 205 NSCETDepartment of CSE NSCET
paper: printing and scanning
print technology
fonts, page description, WYSIWYG
scanning, OCR
Department of CSE Page 105 of 205 NSCETDepartment of CSE NSCET
Printing
• image made from small dots• allows any character set or graphic to be printed,
critical features:•• resolution
• size and spacing of the dots
• measured in dots per inch (dpi)
speed• usually measured in pages per minute
cost!!
•
•
Department of CSE Page 106 of 205 NSCETDepartment of CSE NSCET
Types of dot-based printers
• dot-matrix printers•
•
•
use inked ribbon (like a typewriterline of pins that can strike the ribbon, dotting the paper.
typical resolution 80-120 dpi
• ink-jet and bubble-jet printers• tiny blobs of ink sent from print head to paper
• typically 300 dpi or better .
laser printer• like photocopier: dots of electrostatic charge deposited on drum, which picks
up toner (black powder form of ink) rolled onto paper which is then fixedwith heat
• typically 600 dpi or better.
•
Department of CSE Page 107 of 205 NSCETDepartment of CSE NSCET
Printing in the workplace
• shop tills•
•
•
dot matrixsame print head used for several paper rolls
may also print cheques
• thermal printers•
•
•
•
special heat-sensitive paperpaper heated by pins makes a dot
poor quality, but simple & low maintenance
used in some fax machines
Department of CSE Page 108 of 205 NSCETDepartment of CSE NSCET
Fonts
• Font – the particular style of text
Courier font
Helvetica font Palatino font
Times Roman font• §´ (special symbol)
• Size of a font measured in points (1 pt about 1/72”)(vaguely) related to its height
This is ten point Helvetica
This is twelve point
This is fourteen point
This is eighteen point
and this is twenty-four point
Department of CSE Page 109 of 205 NSCETDepartment of CSE NSCET
Fonts (ctd)
Pitch• fixed-pitch – every character has the same width
e.g. Courier
• variable-pitched – some characters widere.g. Times Roman – compare the ‘i’ and the “m”
Serif or Sans-serif• sans-serif – square-ended strokes
e.g. Helvetica
serif – with splayed ends (such as)e.g. Times Roman or Palatino
•
Department of CSE Page 110 of 205 NSCETDepartment of CSE NSCET
Readability of text
• lowercase• easy to read shape of words
UPPERCASE• better for individual letters and non-words
e.g. flight numbers: BA793 vs. ba793
•
• serif fonts
•helps your eye on long lines• but sans serif often better on screen
of printed text
Department of CSE Page 111 of 205 NSCETDepartment of CSE NSCET
Page Description Languages
• Pages very complex• different fonts, bitmaps, lines, digitised photos, etc.
• Can convert it all into a bitmap and send to the printer… but often huge !
• Alternatively Use a page description language•
•
•
sends a description of the page can be sent,instructions for curves, lines, text in different styles, etc.
like a programming language for printing!
• PostScript is the most common
Department of CSE Page 112 of 205 NSCETDepartment of CSE NSCET
Screen and page
• WYSIWYG• what you see is what you get
• aim of word processing, etc.
but …• screen: 72 dpi, landscape image
• print: 600+ dpi, portrait
can try to make them similarbut never quite the same
so … need different designs, graphicsprint
•
•
• etc, for screen and
Department of CSE Page 113 of 205 NSCETDepartment of CSE NSCET
Scanners
• Take paper and convert it into a bitmap
• Two sorts of scanner• flat-bed: paper placed on a glass plate, whole page converted into bitmap
• hand-held: scanner passed over paper, digitising strip typically 3-4” wide
• Shines light at paper and note intensity of reflection• colour or greyscale
• Typical resolutions from 600–2400 dpi
Department of CSE Page 114 of 205 NSCETDepartment of CSE NSCET
Scanners (ctd)
Used in
• desktop publishing for incorporating photographs and other images
• document storage and retrieval systems, doing away with paper storage
+ special scanners for slides and photographic negatives
Department of CSE Page 115 of 205 NSCETDepartment of CSE NSCET
Optical character recognition
•
•
OCR converts bitmap back into text
different fonts• create problems for simple “template matching” algorithms
• more complex systems segment text, decompose it into lines and arcs, and decipher characters that way
page format•• columns, pictures, headers and footers
Department of CSE Page 116 of 205 NSCETDepartment of CSE NSCET
Paper-based interaction
• paper usually regarded as output only
• can be input too – OCR, scanning, etc.
• Xerox PaperWorks• glyphs – small patterns of /\\//\\\
• used to identify forms etc.• used with scanner and fax to control applications
• more recently• papers micro printed - like wattermarks
• identify which sheet and where you are
• special ‘pen’ can read locations• know where they are writing
Department of CSE Page 117 of 205 NSCETDepartment of CSE NSCET
memory
short term and long term
speed, capacity, compression
formats, access
Department of CSE Page 118 of 205 NSCETDepartment of CSE NSCET
Short-term Memory - RAM
• Random access memory (RAM)•
•
•
•
on silicon chips100 nano-second access time
usually volatile (lose information if power turned off)
data transferred at around 100 Mbytes/sec
• Some non-volatile RAM usedinformation
to store basic set-up
• Typical desktop computers:64 to 256 Mbytes RAM
Department of CSE Page 119 of 205 NSCETDepartment of CSE NSCET
Long-term Memory - disks
• magnetic disks• floppy disks store around 1.4 Mbytes
• hard disks typically 40 Gbytes to 100s of Gbytesaccess time ~10ms, transfer rate 100kbytes/s
• optical disks•
•
•
use lasers to read and sometimes writemore robust that magnetic media
CD-ROM- same technology as home audio, ~ 600 Gbytes
DVD - for AV applications, or very large files•
Department of CSE Page 120 of 205 NSCETDepartment of CSE NSCET
Blurring boundaries
• PDAs• often use RAM for their main memory
• Flash-Memory•
•
•
used in PDAs, cameras etc.
silicon based but persistent
plug-in USB devices for data transfer
Department of CSE Page 121 of 205 NSCETDepartment of CSE NSCET
speed and capacity
• what do the numbers mean?
• some sizes (all uncompressed) …•
•
•
this book, text only ~ 320,000 words, 2Mb
the Bible ~ 4.5 Mbytes
scanned page ~ 128 Mbytes• (11x8 inches, 1200 dpi, 8bit greyscale)
digital photo ~ 10 Mbytes• (2–4 mega pixels, 24 bit colour)
video ~ 10 Mbytes per second• (512x512, 12 bit colour, 25 frames per sec)
•
•
Department of CSE Page 122 of 205 NSCETDepartment of CSE NSCET
virtual memory
• Problem:• running lots of programs + each program large
• not enough RAM
• Solution - Virtual memory :• store some programs temporarily on disk
• makes RAM appear bigger
• But … swopping•
•
•
program on disk needs to run againcopied from disk to RAM
s l o w s t h i n g s d o w n
Department of CSE Page 123 of 205 NSCETDepartment of CSE NSCET
Compression
•
•
reduce amount of storage required
lossless• recover exact text or image – e.g. GIF, ZIP
• look for commonalities:• text: AAAAAAAAAABBBBBCCCCCCCC 10A5B8C
• video: compare successive frames and store change
lossy••
•
recover something like original – e.g. JPEG, MP3exploit perception
• JPEG: lose rapid changes and some colour
• MP3: reduce accuracy of drowned out notes
Department of CSE Page 124 of 205 NSCETDepartment of CSE NSCET
Storage formats - text
•
•
•
ASCII - 7-bit binary code for to each letter and character
UTF-8 - 8-bit encoding of 16 bit character set
RTF (rich text format)- text plus formatting and layout information
SGML (standardized generalised markup language)- documents regarded as structured objects
XML (extended markup language)
•
•- simpler version of SGML for web applications
Department of CSE Page 125 of 205 NSCETDepartment of CSE NSCET
Storage formats - media
• Images:• many storage formats :
(PostScript, GIFF, JPEG, TIFF, PICT, etc.)• plus different compression techniques
(to reduce their storage requirements)
• Audio/Video• again lots of formats :
(QuickTime, MPEG, WAV, etc.)compression even more important
also ‘streaming ’ formats for network delivery•
•
Department of CSE Page 126 of 205 NSCETDepartment of CSE NSCET
methods of access
• large information store• long time to search => use index
• what you index -> what you can access
exact match•
•
simple index needs
forgiving systems:• Xerox “do what I mean” (DWIM)
• SOUNDEX – McCloud ~ MacCleod
access without structure …• free text indexing (all the words in a document)
• needs lots of space!!
•
Department of CSE Page 127 of 205 NSCETDepartment of CSE NSCET
processing and networks
finite speed (but also Moore’s law)
limits of interaction
networked computing
Department of CSE Page 128 of 205 NSCETDepartment of CSE NSCET
Finite processing speed
• Designers tend to assume fast processors, and make interfaces more andmore complicated
• But problems occur, because processing cannot keep up with all thetasks it needs to do
• cursor overshooting because system has buffered keypresses
• icon wars - user clicks on icon, nothing happens, clicks on another, then system responds and windows fly everywhere
• Also problems if system is too fast - e.g. help screens may scroll throughtext much too rapidly to be read
Department of CSE Page 129 of 205 NSCETDepartment of CSE NSCET
res-law/
Moore’s law
•
•
computers get faster and faster!
1965 …•
•
•
Gordon Moore, co-founder of Intel, noticed a patternprocessor speed doubles every 18 months
PC … 1987: 1.5 Mhz, 2002: 1.5 GHz
• similar pattern for memory• but doubles every 12 months!!
• hard disk … 1991: 20Mbyte : 2002: 30 Gbyte
baby born today• record all sound and vision
• by 70 all life’s memories stored in a grain of dust!
•
/e3/online/mooDepartment of CSE Page 130 of 205 NSCETDepartment of CSE NSCET
the myth of the infinitelyfast machine
• implicit assumption … no delaysan infinitely fast machine
what is good design for real machines?
good example … the telephone :
•
••
•
•
•
type keys too fast
hear tones as numbers sent down the line
actually an accident of implementation
emulate in deisgn
Department of CSE Page 131 of 205 NSCETDepartment of CSE NSCET
Limitations on interactive performance
Computation bound• Computation takes ages, causing frustration for the user
Storage channel bound• Bottleneck in transference of data from disk to memory
Graphics bound• Common bottleneck: updating displays requires a lot of effort - sometimes
helped by adding a graphics co-processor optimised to take on the burden
Network capacity• Many computers networked - shared resources and files, access to printers
etc. - but interactive performance can be reduced by slow network speed
Department of CSE Page 132 of 205 NSCETDepartment of CSE NSCET
Networked computing
Networks allow access to …•
•
•
large memory and processingother people (groupware, email)
shared resources – esp. the web
Issues•
•
•
network delays – slow feedbackconflicts - many people update data
unpredictability
Department of CSE Page 133 of 205 NSCETDepartment of CSE NSCET
The internet
• history …• 1969: DARPANET US DoD, 4 sites
• 1971: 23; 1984: 1000; 1989: 10000
common language (protocols):•• TCP – Transmission Control protocol
• lower level, packets (like letters) between machines
IP – Internet Protocol• reliable channel (like phone call) between programs on machines
email, HTTP, all build on top of these
•
•
Department of CSE Page 134 of 205 NSCETDepartment of CSE NSCET
THE INTERACTIONUNIT 01 - UNIT NAME – LECTURE 01
Department of CSE Page 135 of 205 NSCETDepartment of CSE NSCET
chapter 3
the interaction
Department of CSE Page 136 of 205 NSCETDepartment of CSE NSCET
The Interaction
• interaction models– translations between
ergonomics
user and system
•
– physical characteristics of interaction
interaction styles
– the nature of user/system dialog
context
– social, organizational, motivational
•
•
Department of CSE Page 137 of 205 NSCETDepartment of CSE NSCET
What is interaction?
communication
user system
but is that all … ?
– see “language and action” in chapter 4 …
Department of CSE Page 138 of 205 NSCETDepartment of CSE NSCET
models of interaction
terms of interaction
Norman model
interaction framework
Department of CSE Page 139 of 205 NSCETDepartment of CSE NSCET
Some terms of interaction
domain – the area of work under study
e.g. graphic design
what you want to achieve
e.g. create a solid red triangle
how you go about doing itultimately in terms of operations
goal –
task –– or actions
e.g. … select fill tool, click over triangle
Note …– traditional interaction …– use of terms differs a lot especially task/goal !!!
Department of CSE Page 140 of 205 NSCETDepartment of CSE NSCET
Donald Norman’s model
• Seven stages––
–
–
–
–
–
user establishes the goalformulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
• Norman’s model concentratesof the interface
on user’s view
Department of CSE Page 141 of 205 NSCETDepartment of CSE NSCET
execution/evaluationgoal
loop
execution evaluation
system
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
Department of CSE Page 142 of 205 NSCETDepartment of CSE NSCET
execution/evaluationgoal
loop
execution evaluation
system
• formulates intention
••
•
•
•
specifies actions at interfaceexecutes action
perceives system state
interprets system state
evaluates system state with respect to goal
Department of CSE Page 143 of 205 NSCETDepartment of CSE NSCET
• user establishes the goal
execution/evaluationgoal
loop
execution evaluation
system
the goal• user establishes
• perceives system state
••
interprets system stateevaluates system state with respect to goal
Department of CSE Page 144 of 205 NSCETDepartment of CSE NSCET
• formulates intention
• specifies actions at interface
• executes action
execution/evaluationgoal
loop
execution evaluation
system
user establishes the goal
formulates intention••
•
•specifies actionsexecutes action
at interface
Department of CSE Page 145 of 205 NSCETDepartment of CSE NSCET
• perceives system state
• interprets system state
• evaluates system state with respect to goal
Using Norman’s model
Some systems are harder to use than others
Gulf of Executionuser’s formulation of actions
allowed by the system≠ actions
Gulf of Evaluationuser’s expectation of changed system state
≠ actual presentation of this state
Department of CSE Page 146 of 205 NSCETDepartment of CSE NSCET
Human error - slips and mistakes
slipunderstand systemcorrect formulation
incorrect action
and goalof action
mistakemay not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system
Department of CSE Page 147 of 205 NSCETDepartment of CSE NSCET
Abowd and Beale framework
extension of Norman…
Ooutput
their interaction framework has 4 parts
––
–
–
user
input
system
output
Score
Utask
Iinput
each has its own
interaction
unique language
translation between languages
problems in interaction = problems in translation
Department of CSE Page 148 of 205 NSCETDepartment of CSE NSCET
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
allows comparative assessment
an abstraction
involved in interaction
of systems
Department of CSE Page 149 of 205 NSCETDepartment of CSE NSCET
ergonomics
physical aspects of interfaces
industrial interfaces
Department of CSE Page 150 of 205 NSCETDepartment of CSE NSCET
Ergonomics
• Study of the physicalinteraction
characteristics of
• Also known as human factors – but thisalso be used to mean much of HCI!
can
• Ergonomics good at defining standards andguidelines for constrainingcertain aspects of systems
the way we design
Department of CSE Page 151 of 205 NSCETDepartment of CSE NSCET
Ergonomics - examples
• arrangement of controls and displayse.g. controls grouped according to function or
frequency of use, or sequentially
surrounding environmente.g. seating arrangements adaptable to cope with
sizes of user
health issuese.g. physical position, environmental conditions
(temperature, humidity), lighting, noise,
use of coloure.g. use of red for warning, green for okay,
•all
•
•
awareness of colour-blindness etc.
Department of CSE Page 152 of 205 NSCETDepartment of CSE NSCET
Industrial interfaces
Office interface vs. industrial interface?
Context matters!
office industrial
type of datarate of change
environment
textualslow
clean
numericfast
dirty
… the oil soaked mouse!
Department of CSE Page 153 of 205 NSCETDepartment of CSE NSCET
mation
Glass interfaces ?
• industrial interface:– traditional … dials and knobs
– now … screens and keypads
glass interface
+ cheaper, more flexible, multiple representations, precise values
– not physically located, loss of context,
•
complex
may need
interfaces
both•multiple representations
of same infor
Department of CSE Page 154 of 205 NSCETDepartment of CSE NSCET
Vessel B Temp
0 100 200
113
Indirect manipulation
• office– direct manipulation– user interacts
with artificial world
• industrial – indirect
– user interacts with real world through interface
issues ..
– feedback
– delays
manipulation
interface
•immediate
feedback
instruments
Page 155 of 205Department of CSE NSCETDepartment of CSE NSCET
plant
system
interaction styles
dialogue … computer and user
distinct styles of interaction
Department of CSE Page 156 of 205 NSCETDepartment of CSE NSCET
Common interaction styles
••
•
•
•
•
•
•
command line interfacemenus
natural language
question/answer and query
form-fills and spreadsheets
WIMP
point and click
dialogue
three–dimensional interfaces
Department of CSE Page 157 of 205 NSCETDepartment of CSE NSCET
Command line interface
• Way of expressing instructions to the computer directly– function keys, single characters, short abbreviations,
whole words, or a combination
••
•
•
suitable for repetitive tasksbetter for expert users than novices
offers direct access to system functionality
command names/abbreviationsmeaningful!
should be
Typical example: the Unix system
Department of CSE Page 158 of 205 NSCETDepartment of CSE NSCET
Menus
••
Set of options displayed on the screenOptions visible– less recall - easier to use
– rely on recognition so names should be meaningful
Selection by:– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
Often options hierarchically grouped– sensible grouping is needed
•
•
• Restricted form of full WIMP system
Department of CSE Page 159 of 205 NSCETDepartment of CSE NSCET
Natural language
•
•
•
Familiar to user
speech recognition
Problems
or typed natural language
–
–
–
vague
ambiguous
hard to do well!
• Solutions– try to understand a
– pick on key words
subset
Department of CSE Page 160 of 205 NSCETDepartment of CSE NSCET
Query interfaces
• Question/answer interfaces
–
–
–
user led through interaction via series of questions
suitable for novice users but restricted functionality
often used in information systems
• Query languages (e.g. SQL)– used to retrieve information from database
– requires understanding of database structure and
language syntax, hence requires some expertise
Department of CSE Page 161 of 205 NSCETDepartment of CSE NSCET
Form-fills
•
•
•
•
Primarily for data entry or
Screen like paper form.
data retrieval
Data put in relevant
Requires
place
–
–
good design
obvious correction facilities
Department of CSE Page 162 of 205 NSCETDepartment of CSE NSCET
Spreadsheets
• first spreadsheet VISICALC, followed byLotus 1-2-3MS Excel most common today
sophisticated variation of form-filling.•
–
–
grid of cells contain a value or a formula
formula can involve values of other cellse.g. sum of all cells in this column
– user can enter and altermaintains consistency
data spreadsheet
Department of CSE Page 163 of 205 NSCETDepartment of CSE NSCET
WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!
• default style for majority of interactivecomputer systems, especially machines
PCs and desktop
Department of CSE Page 164 of 205 NSCETDepartment of CSE NSCET
Point and click interfaces
• used in ..
–
–
–
multimedia
web browsers
hypertext
• just click something!– icons, text links or location on map
• minimal typing
Department of CSE Page 165 of 205 NSCETDepartment of CSE NSCET
Three dimensional interfaces
•
•
virtual reality
‘ordinary’ window systems
–
–
–
highlighting
visual affordance
indiscriminate usejust confusing!
flat buttons …
click me!
• 3D workspaces … or sculptured
–
–
–
use for extra virtual space
light and occlusion give depth
distance effects
Department of CSE Page 166 of 205 NSCETDepartment of CSE NSCET
ry material elements
elements of the wimp interface
windows, icons, menus, pointers
+++
buttons, toolbars,
palettes, dialog boxes
also seesupplementa
on
choosinNgSwCiEmTp
Department of CSE Page 167 of 205Department of CSE NSCET
Windows
• Areas of the screen that behave as were independent
if they
––
–
can
cancanout
contain text or graphicsbe moved or resized
overlap and obscure each other, next to one another (tiled)
or can be laid
• scrollbars– allow the user to move the contents
up and down or from side to side
title bars– describe the name of the window
of the window
•
Department of CSE Page 168 of 205 NSCETDepartment of CSE NSCET
Icons
•
•
small picture or imagerepresents some object in the interface– often a window or action
windows can be closed down (iconised)– small representation fi many accessible
windows
icons can be many and various– highly stylized
– realistic representations.
•
•
Department of CSE Page 169 of 205 NSCETDepartment of CSE NSCET
Pointers
• important component– WIMP style relies on pointing and selecting things
uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts
•
• wide variety of graphical images
Department of CSE Page 170 of 205 NSCETDepartment of CSE NSCET
Menus
•
•
Choice of operations or services offered on the screen
Required option selected with pointer
problem – take a lot of screen space
solution – pop-up: menu appears when needed
Department of CSE Page 171 of 205 NSCETDepartment of CSE NSCET
File Edit Options Font
Typewriter
ScreenTimes
Kinds of Menus
• Menu drags
Bar at top of screen (normally), menu down
––
–
pull-down menu - mouse hold and drag down menu
drop-down menu - mouse click reveals menu
fall-down menus - mouse just moves over bar!
• Contextual menu appears where you are– pop-up menus - actions for selected object
– pie menus - arranged in a circle
• easier to select item (larger target area)
• quicker (same distance to any option)… but not widely used!
Department of CSE Page 172 of 205 NSCETDepartment of CSE NSCET
Menus extras
• Cascading menus
–
–
–
hierarchical menu structure
menu selection opens new menu
and so in ad infinitum
• Keyboard accelerators– key combinations - same effect as
– two kinds
menu item
• active when menu open – usually first letter
• active when menu closed – usually
usually different !!!
Ctrl + letter
Department of CSE Page 173 of 205 NSCETDepartment of CSE NSCET
Menus design issues
•
•
•
•
•
which kind to use
what to include in menus at all
words to use (action or description)
how to group items
choice of keyboard accelerators
Department of CSE Page 174 of 205 NSCETDepartment of CSE NSCET
Buttons
• individual and isolated regions within ainvokedisplay that can
an actionbe selected to
• Special kinds– radio buttons
–– check
–
set of mutuallyboxes
exclusive choices
set of non-exclusive choices
Department of CSE Page 175 of 205 NSCETDepartment of CSE NSCET
Toolbars
• long lines of icons …… but what do they do?
• fast access to common actions
• often customizable:
– choose
– choose
which toolbars to see
what options are on it
Department of CSE Page 176 of 205 NSCETDepartment of CSE NSCET
Palettes and tear-off menus
• Problemmenu not there when you want it
• Solutionpalettes – little windows of actions
– shown/hidden via menu option
e.g. available shapes in drawing package
tear-off and pin-up menus
– menu ‘tears off’ to become palette
Department of CSE Page 177 of 205 NSCETDepartment of CSE NSCET
Dialogue boxes
• information windows that pop up toinform of an important event or request information.
e.g: when saving a file, a dialogue box isdisplayed to allow the user to specify thefilename and location. Once the file issaved, the box disappears.
Department of CSE Page 178 of 205 NSCETDepartment of CSE NSCET
interactivity
easy to
what
focus
about
on look
feel?
Department of CSE Page 179 of 205 NSCETDepartment of CSE NSCET
Speech–driven interfaces
• rapidly improving …… but still inaccurate
how to have robust dialogue?
… interaction of course!•
e.g. airline reservation:reliable “yes” and “no”+ system reflects back its understanding“you want a ticket from New York to Boston?”
Department of CSE Page 180 of 205 NSCETDepartment of CSE NSCET
Look and … feel
• WIMP systems have the same elements:windows, icons., menus, pointers, buttons, etc.
• but different window systems… behave differently
e.g. MacOS vs Windows menus
appearance + behaviour = look and feel
Department of CSE Page 181 of 205 NSCETDepartment of CSE NSCET
Initiative
• who has the initiative?old question–answerWIMP interface
––
computeruser
• WIMP exceptions …pre-emptive parts of the interface
• modal dialog boxes
–
–
–
come and won’t go away!
good for errors, essential steps
but use with care
Department of CSE Page 182 of 205 NSCETDepartment of CSE NSCET
Error and repair
can’t always avoid errors …… but we can put them right
make it easy to detect errors… then the user can repair them
Department of CSE Page 183 of 205 NSCETDepartment of CSE NSCET
hello, this is the Go Faster booking system
what would you like?
(user) I want to fly from New York to London
you want a ticket from New York to Boston
(user) no
sorry, please confirm one at a time
do you want to fly from New York
(user) yes
… … …
Context
Interaction affectedcontext
by social and organizational
• other people– desire to impress,
motivation
competition, fear of failure
•
– fear, allegiance, ambition, self-satisfaction
inadequate systems•
– cause frustration and lack of motivation
Department of CSE Page 184 of 205 NSCETDepartment of CSE NSCET
Experience, engagement and fun
designing experience
physical engagement
managing value
Department of CSE Page 185 of 205 NSCETDepartment of CSE NSCET
Experience?
• home, entertainment, shopping– not enough that people can use a system
– they must want to use it!
• psychology of experience– flow (Csikszentimihalyi)
– balance between anxiety and boredom
• education– zone of proximal development
– things you can just do with help
• wider ...– literary analysis, film studies, drama
Department of CSE Page 186 of 205 NSCETDepartment of CSE NSCET
Designing experience
• real crackers
–
–
–
cheap and cheerful!
bad joke, plastic toy,
pull and bang
paper hat
Department of CSE Page 187 of 205 NSCETDepartment of CSE NSCET
Designing experience
• virtual crackers
–
–
–
cheap and cheerful
bad joke, web toy, cut-out
click and bang
mask
Department of CSE Page 188 of 205 NSCETDepartment of CSE NSCET
Designing experience
• virtual crackers
–
–
–
cheap and cheerful
bad joke, web toy, cut-out
click and bang
mask
Department of CSE Page 189 of 205 NSCETDepartment of CSE NSCET
message
how crackers workfill in web form
sender recipientreceive emailTo: wxvFrom: ..
closedcracker page
open recipient clicks
cracker opens ...
very slowly
watchesprogress
opencracker page
sender jokelinks
web toymask
Department of CSE Page 190 of 205 NSCETDepartment of CSE NSCET
The crackers experience
real cracker virtual cracker
Surface elements
design
play
cheap and
plastic toy
paper hat
cheerful
and joke
simple page/graphics
web toy and joke
mask to cut outdressing up
Experienced effects
shared
co-experience
offered to another
pulled together
sent by email message
sender can't see content until opened by recipient
recruited expectation
first page - no contents
slow ... page change
excitement
hiddenness
suspense
surprise
cultural connotations
contents inside
pulling cracker
bang (when it works) WAV file (when it works)
Department of CSE Page 191 of 205 NSCETDepartment of CSE NSCET
Physical design
• many constraints:
–
–
–
–
–
–
ergonomic – minimum button size
switches are bigphysical – high-voltage
legal and safety – high cooker controls
context and environment –
must look good
easy to clean
aesthetic
economic
–
– … and not cost too much!
Department of CSE Page 192 of 205 NSCETDepartment of CSE NSCET
Design trade-offs
constraints are contradictory
within categories:
e.g. safety – cooker controls
… need trade-offs
front panel – safer for adult
rear panel – safer for child
between categories
e.g. ergonomics vs. physical – MiniDisc remote
ergonomics – controls need to be bigger
physical – no room!
solution – multifunction controls & reduced functionality
Department of CSE Page 193 of 205 NSCETDepartment of CSE NSCET
Fluidity
• do external physical aspectslogical effect?– related to affordance (chap 5)
reflect
logical state revealed in physicale.g. on/off buttons
state?
inverse actions inverse effects?e.g. arrow buttons, twist controls
Department of CSE Page 194 of 205 NSCETDepartment of CSE NSCET
inverse actions
• yes/no buttons– well sort of
• ‘joystick’
• also left side control
Department of CSE Page 195 of 205 NSCETDepartment of CSE NSCET
spring back controls
••
•
one-shot buttons
joystick
some sliders
good – large selection
bad – hidden state
sets
Department of CSE Page 196 of 205 NSCETDepartment of CSE NSCET
twist
a minidisk controller
twist for track movementpull and twist for volumeseries of spring-back controls
each cycle through some options–natural inverse back/forward
––
spring backnatural inverse for
NSCETDepartment of CSE Page 197 of 205Department of CSE NSCET
physical layout
controls:
logical relationship
~ spatial grouping
Department of CSE Page 198 of 205 NSCETDepartment of CSE NSCET
compliant interaction
rotary knobs reveal internal statestate evident inmechanical buttons and can be controlled by both user
and machine
Department of CSE Page 199 of 205 NSCETDepartment of CSE NSCET
Managing value
people use somethingONLY IF
it has perceived valueAND
value exceeds cost
BUT NOTE
•
•
exceptions
value NOT
(e.g. habit)
necessarily personal gain or money
Department of CSE Page 200 of 205 NSCETDepartment of CSE NSCET
Weighing up value
value•
•
•
cost•
•
•
helps me get my
fun
good for others
work done
download time
money £, $, €
learning effort
Department of CSE Page 201 of 205 NSCETDepartment of CSE NSCET
Discounted future
• in–
economics Net Present Value:
discount by (1+rate)years to wait
• in–
–
–
life people heavily discount
future value and future cost
hence resistance to learning
need low barriers
and high perceived present value
Department of CSE Page 202 of 205 NSCETDepartment of CSE NSCET
… but also says “buy me”!!
example – HCI book search
• value forhelps
peopleyou to
who have the booklook up thingspage number– chapter and
• value for those who don’t …sort of
– full
online mini-encyclopaediaparagraph of context
… but also says “buy me”!!
Department of CSE Page 203 of 205 NSCETDepartment of CSE NSCET
Value and organisational design
• coercion• tell people what to do!
• value = keep your job
enculturation• explain corporate values
• establish support (e.g share
emergence• design process so that
•
options)
•
individuals value → organisational value
Department of CSE Page 204 of 205 NSCETDepartment of CSE NSCET
General lesson …
if you want someone to do something …
• make it easy for them!
• understand their values
Department of CSE Page 205 of 205 NSCETDepartment of CSE NSCET