Ilovepdf Merged

SYLLABUS
1. HCI FOUNDATIONS
2. DESIGNING INTERACTION
3. INTERACTION DESIGN MODELS
4. GUIDELINES IN HCI
5. COLLABORATION AND COMMUNICATION
6. HUMAN FACTORS AND SECURITY
7. VALIDATION AND ADVANCED CONCEPTS
8. RECENT TRENDS
1
Module – 1
HCI FOUNDATIONS
1. Introduction to Human Computer Interaction
2. Input-Output Channels
3. Thinking : Reasoning and Problem Solving
4. Devices for Text Entry and Virtual Reality
2
Introduction to HCI
 Human–computer interaction (HCI), alternatively man–machine interaction
(MMI) or computer–human interaction (CHI) is the study of interaction
between people (users) and computers.
 Human-computer interaction is the study, planning, and design of how
people and computers work together so that a person’s needs are satisfied
in the most effective way
 Human Computer Interaction not meant a single user and a desktop

computer.
 Human (User) + Computer + Interaction
3
Introduction to HCI
 User
o Individual user /
o Group of users /
o sequence of users
 Each dealing with some part of the task or a process.
 In general, Whoever trying to get the job done using technology
 Computer
o a general desktop computer /
o a large scale computer system /
o a process control system /
o an embedded system
4
HCI Foundation
 The user interface is the part of a computer and its software that people can
see, hear, touch, talk to, or otherwise understand or direct.
 User interface design is a subset of a field of study called human-computer
interaction (HCI).
 The user interface has essentially two components: input and
output.
 Input is how a person communicates his or her needs or desires to
the computer. Some common input components are the keyboard,
mouse, trackball, one’s finger, and one’s voice.
 Output is how the computer conveys the results of its computations
and requirements to the user.
5
HCI Foundation
 Today, the most common computer output mechanism is the display
screen, followed by mechanisms that take advantage of a person’s
auditory capabilities: voice and sound.
 Information received and response given via I/O channels,
o visual channel, auditory channel, haptic channel, movement
 Information is stored in memory,
o Sensory Memory, short-term or working memory, long-term memory
 Information processed and applied for,
o reasoning, problem solving, skill, error
 Emotion influences human capabilities
 Each person is different
6
HCI Foundation
 HCI is made up of
 Theories – learn and apply
 Models – create and use
 Methods – master and apply
 Guidelines – learn and use
 Principles – understand and apply
 Techniques – master and use
7
Input – Output Channels
 Person interaction with outside world by sending and receiving
information
 Input in the human occurs mainly through senses.
 Output through the motor control and effectors
8
 Input in human - Five senses
– sight, hearing, touch, taste and smell
 Output in human – The motor control of effectors
- Limbs, fingers, eyes, head and vocal system
 Interaction – Fingers play primary role-typing, mouse control
- with some use of voice, eye, head and body position
 Example is Personal Computer, Graphical user interface, menus, icons.
Primary sense is sight, from what appears in the screen. Ear is used for
hearing. Touch is for key movements.
 Most of the information are passed by using primary effector
9
 In addition to sight, smell, taste, touch, and hearing, humans also
have awareness of balance (equilibrioception), pressure,
temperature (thermoception), pain (nociception), and motion all of
which may involve the coordinated use of multiple sensory organs.
 The sense of balance is maintained by a complex interaction of
visual inputs, the proprioceptive sensors (which are affected by
gravity and stretch sensors found in muscles, skin, and joints), the
inner ear vestibular system, and the central nervous system.
 Disturbances occurring in any part of the balance system, or even
within the brain's integration of inputs, can cause the feeling of
dizziness or unsteadiness.
10
Visual Channel – Vision (Eye)
 Two stages in vision
o physical reception of stimulus (event observed) from the outside world
o processing and interpretation of stimulus
1. The Eye – Physical Reception
 Eye is a mechanism for receiving light and transforming into electrical
energy
 light reflects from objects
 images are focused upside-down on retina
 retina contains,
 rods for low light vision, more sensitive
 cones for colour and vision, less sensitive.
11
 There are 3 type of cone, R,G,B. Each sensitive to different wavelength. 6
million cones.
 Mainly concentrated on fovea, where images are fixed in retina.
 Blind spot in retina, where optic nerves enter the eye. In this spot no rods
and cones.
 Specialized nerve cells, ganglion cells (brain!) detect pattern and
movement.
 There are two types,
o X cells – for early detection of pattern
o Y cells – for early detection of movement
12
2. Interpreting the Signals
 Size and Depth
o The size of the image is specified as visual angle
o visual angle indicates how much of view object occupies
(relates to size and distance from eye)
o visual acuity is ability to perceive detail (limited)
o familiar objects perceived as constant size
(in spite of changes in visual angle when far away)
o cues like overlapping help perception of size and depth
13
 Brightness
o subjective reaction to levels of light
o affected by luminance (light emitted by object) of object
o measured by just noticeable difference using photometer
o visual acuity increases with luminance
o If luminance increase then flicker increases (light, switched on and off
rapidly)
14
 Colour
o made up of hue (spectral wavelength, blue is low, red is high),
intensity (brightness of colour), saturation(amount of whiteness in
colour)
o cones sensitive to colour wavelengths
o 3-4% of fovea is occupied by cones, sensitive to blue light, blue acuity
is lowest
o 8% males and 1% females suffer from colour blindness
15
 The visual system compensates for:
o movement
o changes in luminance.
 Context is used to resolve ambiguity
 Optical illusions sometimes occur due to over compensation
16
Over Compensation
 Read this,
The Quick Brown

fox jumps over the
the lazy dog
is this correct?
17
Reading
 Several stages:
o visual pattern perceived
o decoded using internal representation of language
o interpreted using knowledge of syntax, semantics, pragmatics
 Reading involves saccades (jerky movements) and fixations
 Perception occurs during fixations
 Adult reads 250 words/minute
 Word shape is important to recognition
 Negative contrast improves reading from computer screen
18
Word Recognition by Shape
19
Auditory Channel – Hearing (Ear)
 Considered secondary after sight(vision).
 Hearing begins vibrations in air or sound waves
 Provides information about environment:
(distances, directions, objects etc.)
 Physical apparatus:
outer ear – contains pinna (outside structure), protects middle
ear from damage.
– Auditory canal (sound waves passed to the inner
ear), contains wax, which prevents dust, dirt and
insects reaching middle ear and amplifies sound
middle ear – transmits sound waves as vibrations to inner ear
inner ear – chemical transmitters are released and cause
impulses in auditory nerve
20
Auditory Channel – Hearing (Ear)
 Sound
pitch – sound frequency
loudness – amplitude
timbre – type or quality
 Humans can hear frequencies from 20Hz to 15kHz
o less accurate distinguishing high frequencies than low.
 Auditory system filters sounds
o can attend to sounds over background noise.
o for example, the cocktail party phenomenon. (in a loudy crowd hearing
your name spoken across )
21
Touch or Haptic
 The third and last of the senses. Less important than sight and hearing
 Provides important feedback about environment.
 May be key sense for someone who is visually impaired.
 Act as a warning
 Stimulus received via receptors in the skin and contains three sensory
receptor,
o thermoreceptors – heat and cold
o nociceptors – intense pressure, heat and pain
o mechanoreceptors – pressure
 Rapidly adapting – response to immediate pressure
 Slowly adapting – response to continuous pressure
22
Touch or Haptic
 Some areas more sensitive than others e.g. fingers.
 Kinethesis - awareness of body position, affects comfort and
performance.
23
Movement
 Time taken to respond to stimulus:
reaction time + movement time and accuracy
 Movement time dependent on the physical characteristics of an object. Like
age, fitness etc.
 Reaction time depends upon the sensory channel through which stimulus
received,
o visual ~ 200 ms
o auditory ~ 150 ms
o pain ~ 700ms
 Speed and accuracy of the movement is important
 Increasing reaction time decreases accuracy in the unskilled operator but
not in the skilled operator.
1
Movement
 Fitts' Law describes the time taken to hit a screen target:
Mt = a + b log2( D / S + 1)
where: a and b are empirically determined constants
Mt is movement time
D is Distance
S is Size of target
 More difficult to manipulate small objects, targets as large as possible
 Distance to be moved as small as possible
2
Human Memory
 The are three types of memory or memory function.
o Sensory Memory
o Working memory / Short term memory
o Long Term memory
o Model of the memory structure
o Selection of stimuli governed by level of arousal.

o A person's Level of Arousal can be described as a function of
alertness, situational awareness, vigilance, level of distraction,
stress and direction of attention
3
Sensory Memory
 Act as a buffer for stimuli received through the senses.
o Iconic memory : visual stimuli
o Echoic memory : aural stimuli
o Haptic memory : tactile stimuli (touch)
 Examples
o “sparkler” trail
o stereo sound
 Constantly overwritten
 Information from sensory memory to short-term memory passed through
attention
 Attention is the concentration of the mind on one out of the number of
competing stimuli or thoughts.
4
Short Term Memory (STM)
 Act as a scratch pad for temporary recall of information.
o Example: multiplication of two numbers. 36 x 5 = ?
 Accessed rapidly in the order of 70 ms and the information held there
temporarily in the order of 200 ms (rapid decay).
 Limited capacity look down the number, - 7± 2 chunks
205397623412
 It is difficult to remember, instead group or chunk the digits,
205 397 623 412
 The successful formation of chunk is known as closure.
 Example, consider the following chunks,
HEC ATR ANU PTH ETR EET
 Its difficult, move the last character to the first position,
THE CAT RAN UP THE TREE 5
Long Term Memory (LTM)
 Repository for all our knowledge
o slow access ~ 1/10 second
o slow decay, if any
o huge or unlimited capacity
 Two types
o episodic – serial memory of events
o semantic – structured memory of facts, concepts, skills, derived
from episodic memory
 semantic LTM derived from episodic LTM
6
Long Term Memory (LTM)
 Semantic memory structure
o provides access to information
o represents relationships between bits of information
o supports inference
 Model: semantic network
o inheritance – child nodes inherit properties of parent nodes
o relationships between bits of information explicit
o supports inference through inheritance
 Frame based – fixed slots, attribute value is set
 Script based – stereotypical information.
7
LTM – Semantic Memory
8
Models of LTM – Frames
 Information organized in data structures
 Slots in structure instantiated with values for instance of data
 Type–subtype relationships
9
Models of LTM – Scripts
 Model of stereotypical information required to interpret situation
 Script has elements that can be instantiated with values for context
Script for a visit to the vet
Entry conditions: dog ill Roles: vet examines

vet open diagnoses
owner has money treats
owner brings dog in
Result: dog better
pays
owner poorer
takes dog out
vet richer
Scenes: arriving at reception
Props: examination table
waiting in room
medicine
examination
instruments
paying
Tracks: dog needs medicine
dog needs operation
10
Models of LTM – Production rules
 Model Representation of procedural knowledge.
 Condition/action rules
if condition is matched
then use rule to determine action.
IF dog is wagging tail

THEN pat dog
IF dog is growling
THEN run away
11
LTM – Storage of information
 rehearsal
o information moves from STM to LTM
 total time hypothesis
o amount retained proportional to rehearsal time
 distribution of practice effect
o optimized by spreading learning over time
 structure, meaning and familiarity
o information easier to remember
12
LTM – Forgetting
 decay
o information is lost gradually but very slowly
 There are two theories of forgetting,
o Decay and interference – two memory traces are equally strong
o Retroactive interference - acquire new information causes the loss of
old information
 Proactive inhibition – old memory trace breaks through the new information
(driving car to old house instead of new house)
13
LTM – Retrieval
 Two types of information retrieval,
o Recall
o Information is reproduced from memory can be assisted by cues,
e.g. categories, imagery
o Recognition
o presentation of the information provides the knowledge that the
information seen before
o less complex then recall - information is cue
14
THINKING
 Able to use the information to a reason and solve a problems
 Usually do this when the information is partial or unavailable
 Thought is conscious and self-aware
 Thinking can be different
o Directed and the knowledge required is constrained
o Vast amount of knowledge from different domains
 Two categories of thinking,
o Reasoning
o Deductive
o Inductive
o Abductive
o Problem solving
15
Deductive Reasoning
 Derive logically necessary conclusion from given premises.
Example: If it is Friday then she will go to work
It is Friday
Therefore she will go to work. (Truth)
 Logical conclusion not necessarily true:
Example: If it is raining then the ground is dry
It is raining
Therefore the ground is dry (Validity)
 When truth and logical validity clash …
Example: Some people are babies
Some babies cry
Inference - Some people cry (invalid deduction)
16
Inductive Reasoning
 Induction
o generalize from cases seen to infer information about cases unseen
e.g. all elephants we have seen have trunks
therefore all elephants have trunks.
 Unreliable
o Induction is a useful process
o can only prove false not true
 … but useful!
 Humans not good at using negative evidence
o e.g. Wason's cards.
17
Wason’s Cards
 The only way to falsify an "if X, then Y" statement ("if vowel, then even
number") is by finding an instance of "X and not Y" ("vowel and odd
number"). K and 4 are irrelevant, because these cards cannot combine a
vowel and odd number.
18
Abductive Reasoning
 reasoning from event to cause
Example: ‘X’ drives fast when drunk.
If I see ‘X’ driving fast, assume drunk.
 Unreliable:
o can lead to false explanations
o Not always true
o People do infer explanations in this way, and hold onto them until
evidence to support an alternative (often results in confusion and error)
19
Problem Solving
 Finding solution to an unfamiliar task, using the knowledge
 Solutions seem to be original and creative
 Different theories of problem solving in the past and present
 Gestalt Theory
o Problem solving is the matter of reproducing known response or trail
and error
o Problem solving both productive and reproductive
o Productive draws on insight and restructuring of problem
o Reproductive draws on previous experience
o Attractive but not enough evidence to explain `insight' etc.
o Move away from behaviourism and led towards information processing
theories
20
Problem Solving
 Problem space theory
o problem space comprises problem states
o problem solving involves generating states using legal operators
o heuristics may be employed to select operators
e.g. means-ends analysis – initial state and goal state comparison
o operates within human information processing system
e.g. STM limits etc.
o largely applied to problem solving in well-defined areas
e.g. puzzles rather than knowledge intensive areas
21
Problem Solving
 Analogy
o analogical mapping:
 Mapping knowledge relating to a similar known domain to the new
problem
 Similarities are noted and the operators from known domain are
transferred to the new one.
o analogical mapping difficult if domains are semantically different
o People often miss analogous information, unless it is semantically close
to the problem domain.
22
Problem Solving
 Skill acquisition
o skilled activity characterized by chunking
 lot of information is chunked to optimize STM
o conceptual rather than superficial grouping of problems
 Novice => Superficial Expert => Conceptual
o information is structured more effectively
o Anderson’s ACT model
 Uses knowledge extensively
 Relies upon known procedures
 Represents skilled behaviour
o Experts tend to rehearse their actions mentally. Efficient, but cause
errors when the context changes.
23
Errors and Mental Models
Types of error
 slips
o right intention, but failed to do it right
o causes: poor physical skill, inattention etc.
o change to aspect of skilled behaviour can cause slip
 mistakes
o wrong intention
o cause: incorrect understanding
 humans create mental models to explain behaviour.
 if wrong (different from actual system) errors can occur
24
Common Slips and Lapses
 Capture Error
o An activity you are doing is “captured” by another one. Often a
non-routine activity can be captured by a more routine one.
o For example, sometimes when I am driving to St Andrews town

centre, I pull into the work car park as if I was driving to work.
25
 Description Error
o Sometimes when we do a routine activity, we do it to something
that is similar to but not the same as the thing intended. (It is not
correct but “fits the description”)
o For example sometimes if I leave my mobile next to my mouse, I
grab the mobile by mistake.
o For example I once dried my hands on my flatmate’s coat which
was hanging on the back of a chair where a tea-towel would
normally be
26
 Data Driven Error
o Many human actions are responses to something. These
responses can enter into a processes as an additional step or as
a mis-step
o For example when I was typing a document, someone asked me
the meaning of a word. I then realised I had typed that word
instead of the word I mean to.
27
 Associate Action Error
o Sometimes our own internal associations can trigger a slip.
o For example picking up the telephone and saying “come in”
o For example, I once went to a job interview and instead of saying
“Hi, I‟m John”, I said “Hi, I‟m scared”. (These kinds of associative
errors are called Freudian Slips).
28
 Loss of Activation Error
o Sometimes we set out to do something, but along the way forget
what we set out to do.
o For example, I once went to my bedroom but once I was there
wondered what it was I went to do. Once I was back downstairs I
remembered I wanted to charge my phone.
29
 Mode Error
o Sometimes we operate a technology correctly, except that it is in
the wrong mode.
o For example, when turning my car around, I reversed it but forgot
to put it in a forward gear before setting off forwards.
o For example, I typed the body of a text message into the “to”
area on my phone.
30
Emotion
 Various theories of how emotion works
o James-Lange: emotion is our interpretation of a physiological response
to a stimuli
o Cannon: emotion is a psychological response to a stimuli
o Schacter-Singer: emotion is the result of our evaluation of our
physiological responses, in the light of the whole situation we are in
 Emotion clearly involves both cognitive and physical responses to stimuli
 The biological response to physical stimuli is called affect. It changes the way
we deal with different situations
31
Emotion
 Affect influences how we respond to situations
o positive  creative problem solving
o negative  narrow thinking
 “Negative affect can make it harder to do even easy tasks; positive affect can
make it easier to do difficult tasks”
(Donald Norman)
 Implications for interface design
 stress will increase the difficulty of problem solving – less able to cope
with managing difficult interfaces
 relaxed users will be more forgiving of shortcomings in design
 aesthetically pleasing and rewarding interfaces will increase positive
affect.
32
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?
33
Psychology and the design of Interactive System
 Some direct applications
o 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

o guidelines
o cognitive models
o experimental and analytic evaluation techniques
34
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
Interacting with computers
to understand human–computer interaction

… need to understand computers!
what goes in and out

devices, paper,
sensors, etc.
what can it do?

memory, processing,
networks
A ‘typical’ computer system
? • screen, or monitor, on which there are windows
• keyboard
window 1
• mouse/trackpad
window 2
• variations
– desktop
– laptop
– PDA
12-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 of interaction
How many …
• computers in your house?

– hands up, …
… none, 1, 2 , 3, more!!
• computers in your pockets?
are you thinking …

… PC, laptop, PDA ??
How many computers …
in your house? in your pockets?

– PC – PDA
– TV, VCR, DVD, HiFi, – phone, camera
cable/satellite TV – smart card, card with
– microwave, cooker, magnetic strip?
washing machine – electronic car key
– central heating – USB memory
– security system
try your pockets and
can you think of more? bags
Interactivity?
Long ago in a galaxy far away … 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
– the user in control (most of the time)
– doing rather than thinking …
Is faster always better?

Richer interaction
sensors
and devices
everywhere
text entry devices
keyboards (QWERTY et al.)

chord keyboards, phone pads
handwriting, speech
Keyboards
• 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
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 QWERTY typists produces reluctance to change.
QWERTY (ctd)
1 2 3 4 5 6 7 8 9 0
Q W E R T Y U I O P
A S D F G H J K L
Z X C V B N M , .
SPACE
alternative keyboard layouts
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
– But - large social base of QWERTY typists produce market
pressures not to change
special keyboards
• designs to reduce fatigue for RSI

• for one handed use
e.g. the Maltron left-handed keyboard
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
phone pad and T9 entry
• use numeric keys with
multiple presses
2 –abc 6mno-
3 -def 7 -
pqrs
4 -ghi 8tuv-
5 -jkl 9 -
wxyz
hello = 4433555[pause]555666
surprisingly fast!
• T9 predictive entry
– type as if single key for each letter
– use dictionary to ‘guess’ the right word
– hello = 43556 …
– but 26 -> menu ‘am’ or ‘an’
Handwriting recognition
• Text can be input into the computer, using a

pen and a digesting tablet
– natural interaction
• Technical problems:
– capturing all useful information - stroke path,
pressure, etc. in a natural manner
– segmenting joined up writing into individual letters
– interpreting individual letters
– coping with different styles of handwriting
• Used in PDAs, and tablet computers …

… leave the keyboard on the desk!
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 vocabularies
– different speakers
Numeric keypads
• for entering numbers quickly:

– calculator, PC keyboard
• for telephones
1 2 3 7 8 9
not the same!! 4 5 6 4 5 6
7 8 9 1 2 3
ATM like phone
0 # 0 . =
*
telephone calculator
positioning, pointing and drawing
mouse, touchpad
trackballs, joysticks etc.
touch screens, tablets
eyegaze, cursors
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.)
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
How does it work?
Two methods for detecting motion
• Mechanical
– Ball on underside of mouse turns as mouse is moved
– Rotates 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
Even by foot …
• some experiments with the footmouse

– controlling mouse movement with feet …
– not very common :-)
• but foot controls are common elsewhere:

– car pedals
– sewing machine speed control
– organ and piano pedals
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
Trackball and thumbwheels
Trackball
– ball is rotated inside static housing
• like an upside down mouse!
– relative motion moves cursor
– indirect device, fairly accurate
– separate buttons for picking
– very fast for gaming
– used in some portable and notebook computers.
Thumbwheels …
– for accurate CAD – two dials for X-Y cursor position
– for fast scrolling – single dial on mouse
Joystick and keyboard nipple
Joystick
– indirect
pressure of stick = velocity of movement
– buttons 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
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
Stylus and light pen
Stylus
– small pen-like pointer to draw directly on screen
– may 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
Digitizing tablet
• Mouse like-device with cross hairs
• used on special surface

- rather like stylus
• very accurate
- used for digitizing maps
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 devices available
sit under the screen like a small webcam
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
Discrete positioning controls
• in phones, TV controls etc.

– cursor pads or mini-joysticks
– discrete left-right, up-down
– mainly for menu selection
display devices
bitmap screens (CRT & LCD)

large & situated displays
digital paper
bitmap displays
• screen is vast number of coloured dots

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
anti-aliasing
Jaggies
– diagonal lines that have discontinuities in due to horizontal
raster scan process.
Anti-aliasing
– softens edges by using shades of line colour
– also used for text
Cathode ray tube
• Stream of electrons emitted from electron gun, focused

and directed by magnetic fields, hit phosphor-coated
screen which glows
• used in TVs and computer monitors
electron beam
electron gun
focussing and
deflection
phosphor-
coated screen
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).
Health hints …
• do not sit too close to the screen

• do not use very small fonts
• do not look at the screen for long periods
without a break
• do not 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
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
special displays
Random Scan (Directed-beam refresh, vector display)

– draw the lines to be displayed directly
– no 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
large displays
• used for meetings, lectures, etc.

• technology
plasma – usually wide screen
video walls – lots of small screens together
projected – RGB lights or LCD projector
– hand/body obscures screen
– may be solved by 2 projectors + clever software
back-projected
– frosted glass + projector behind
situated displays
• displays in ‘public’ places

– large or small
– very public or for small group
• display only
– for information relevant to location
• or interactive
– use stylus, touch sensitive screem
• in all cases … the location matters
– meaning of information or interaction is related to
the location
Hermes a situated display
• small displays beside office doors

• handwritten notes left using stylus
small displays
•beside
office owner reads notes using web interface
office doors
handwritten office owner

notes left reads notes
using stylus using web interface
Digital paper
appearance
• what?
– thin flexible sheets
– updated electronically cross
section
– but retain display
• how?
– small spheres turned
– or channels with coloured liquid
and contrasting spheres
– rapidly developing area
virtual reality and 3D interaction
positioning in 3D space
moving and grasping
seeing 3D (helmets and caves)
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
pitch, yaw and roll
yaw
roll
pitch
3D displays
• desktop VR
– ordinary screen, mouse or keyboard control
– perspective and motion give 3D effect
• seeing in 3D
– use stereoscopic vision
– VR helmets
– screen plus shuttered specs, etc.
also see extra slides on 3D vision

VR headsets
• small TV screen for each eye

• slightly different angles
• 3D effect
VR motion sickness
• time delay
– move head … lag … display moves
– conflict: head movement vs. eyes
• depth perception
– headset gives different stereo distance
– but all focused in same plane
– conflict: eye angle vs. focus
• conflicting cues => sickness
– helps motivate improvements in technology
simulators and VR caves
• scenes projected on walls

• realistic environment
• hydraulic rams!
• real controls
• other people
physical controls, sensors etc.
special displays and gauges

sound, touch, feel, smell
physical controls
environmental and bio-sensing
dedicated displays
• analogue representations:
– dials, gauges, lights, etc.
• digital displays:
– small LCD screens, LED lights, etc.
• head-up displays
– found in aircraft cockpits
– show most important controls
… depending on context
Sounds
• beeps, bongs, clonks, whistles and

whirrs
• used for error indications
• confirmation of actions e.g. keyclick

Touch, feel, smell
• touch and feeling important

– in games … vibration, force feedback
– in simulation … feel of surgical instruments
– called haptic devices
• texture, smell, taste

– current technology very limited
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.
physical controls
• specialist controls needed …

– industrial controls, consumer products, etc.
easy-clean
smooth buttons
multi-function
control
large buttons
clear dials
tiny buttons
Environment and bio-sensing
• sensors all around us

– car courtesy light – small switch on door
– ultrasound 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
paper: printing and scanning
print technology
fonts, page description, WYSIWYG
scanning, OCR
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!!
Types of dot-based printers
• dot-matrix printers
– use inked ribbon (like a typewriter
– line 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 fixed with heat
– typically 600 dpi or better.
Printing in the workplace
• shop tills
– dot matrix
– same print head used for several paper rolls
– may also print cheques
• thermal printers
– special heat-sensitive paper
– paper heated by pins makes a dot
– poor quality, but simple & low maintenance
– used in some fax machines
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
Fonts (ctd)
Pitch
– fixed-pitch – every character has the same width
e.g. Courier
– variable-pitched – some characters wider
e.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
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 of printed text
– but sans serif often better on screen
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

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 similar
but never quite the same
• so … need different designs, graphics etc, for
screen and print
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

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
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
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
memory
short term and long term

speed, capacity, compression
formats, access
Short-term Memory - RAM
• Random access memory (RAM)

– on silicon chips
– 100 nano-second access time
– usually volatile (lose information if power turned off)
– data transferred at around 100 Mbytes/sec
• Some non-volatile RAM used to store basic

set-up information
• Typical desktop computers:

64 to 256 Mbytes RAM
Long-term Memory - disks
• magnetic disks
– floppy disks store around 1.4 Mbytes
– hard disks typically 40 Gbytes to 100s of Gbytes
access time ~10ms, transfer rate 100kbytes/s
• optical disks
– use lasers to read and sometimes write
– more robust that magnetic media
– CD-ROM
- same technology as home audio, ~ 600 Gbytes
– DVD - for AV applications, or very large files
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
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)
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 again
– copied from disk to RAM
– slows t h i n g s d o w n
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, MP3
– exploit perception
• JPEG: lose rapid changes and some colour
• MP3: reduce accuracy of drowned out notes
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
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
methods of access
• large information store

– long time to search => use index
– what you index -> what you can access
• simple index needs exact match
• 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!!
processing and networks
finite speed (but also Moore’s law)

limits of interaction
networked computing
Finite processing speed
• Designers tend to assume fast processors, and make
interfaces more and more complicated
• But problems occur, because processing cannot keep up

with all the tasks 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 through text much too rapidly to be read
Moore’s law
• computers get faster and faster!

• 1965 …
– Gordon Moore, co-founder of Intel, noticed a pattern
– processor 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/moores-law/
the myth of the infinitely
fast machine
• implicit assumption … no delays

an 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
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
Networked computing
Networks allow access to …

– large memory and processing
– other people (groupware, email)
– shared resources – esp. the web
Issues
– network delays – slow feedback
– conflicts - many people update data
– unpredictability
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
Module – 2
DESIGNING INTERACTION
1. Overview of Interaction Design Models
2. Discovery, Collection
3. Interpretation – Task Analysis
4. Project Management Document
1
Interaction Design Process
 Iterative Design
 User-Centered Design
 Interaction Design Models
 Overview of Interaction Design Models
2
Iterative Design
 Interaction design is an iterative process
o One step forward, two steps back
 The knowledge path is constantly moving forward
3
User-Centered Design (UCD)
 How do designers come up with an interface that’s not in your face?
That just does what you want, and doesn’t make you waste time
doing what it wants? (IBM, 2006)
 Pioneered by Donald Norman’s research laboratory at the University
of California at San Diego.
 The objective of UCD is to develop a design framework that enables
interaction designers to build more usable systems.
 ISO Standard - Human Centered Design Processes for Interactive
Systems.
 The basic tenants / principles of user-centered design:
o Early focus on users and their tasks
o Continuous evaluations to determine ease of learning and ease
of use (Empirical Measurement)
o Iterative design 4
 Design should emerge from the user’s
o tasks
o goals
o environment
 Focuses on human-centric issues
o cognition
o perception
o physical attributes and conditions
 user
 Environment
5
User-Centered Design (UCD) Process
6
 UCD projects generally involve the following methods:
o User Participation
o Focus Groups
o Questionnaires
o Ethnographic Observations
o Walkthroughs
o Expert Evaluations
o Usability Testing
7
8
Methods used in UCD
 Requirements
o Field studies: ethnography, contextual inquiry
o User interviews, surveys
 Analysis
o Scenarios
o Task Analysis
o Card sorting
 Design
o Participatory Design - brings user(s) fully into the whole design
process
 Brainstorming, storyboarding, workshops, pencil and paper
exercises
9
Methods used in UCD
 Evaluation
o Usability evaluation
o Focus groups
o Formal heuristic evaluation
 Scenario
o A scenario is an informal description of an interaction, perhaps
with a real-world setting. Scenarios can:
 be elaborated down to low-level interactions
 suggest desirable constraints such as response time, error
behaviour
 motivate choice of use-cases
 help validate formal models of system design
 Scenarios afford a rich picture of the user’s tasks 10
Methods used in UCD
 Brainstorming
o Team activity
 Stream-of-consciousness
 Storyboarding/ paper prototypes
 Semantic networks /mind-maps
o Using informal tools (pen and paper) is one of the keys to
successful conceptual design
11
Participatory Design
 Users are first-class members of the design team
o As opposed to their passive involvement in UCD
 Users are considered subject experts
o Know all about their work context
 Iterative design process
o All design stages are subject to revision
12
Interaction Design Models
 Waterfall Model
 Spiral Model
 Dynamic Systems Development Method
 Prototype-Based Models
 Discount Usability Engineering
 Contextual Inquiry
13
Classical Waterfall Model
 Winston Royce (1970)
o Spacecraft missions
 Planning
 Commanding
 Post-flight analysis
 Analysis and Coding
 Small projects
 Programmers are the users
 Requirements are fixed
 Not user-centered
 Time sensitive
o Early completion of requirements Documentation
14
Waterfall Model
 Advantages of the waterfall model:
o Highly disciplined process of documentation
o Easily observable development progress
o Easy to create budget
 Disadvantages of the waterfall model:

o Document centric; can be difficult for customer to understand
o Not user centered
o Makes assumptions about requirements that are inflexible
15
Interactive System Design
 The uni-directional flow is not
appropriate for interactive
system design.
 In other words, Each stage
depends on the previous
stages.
 It may also depend on the next
stages (feedback).
 It is no longer the (linear)
waterfall model
16
Interactive System Design
 Advantage of Iterative Waterfall Model:
o Consistent review process
17
Spiral Model
 Barry Boehm (1988)
o More flexible
o Centered on risk reduction
o Incorporates prototype development
o Encourages iteration
o Starts with value proposition
 identifies a particular corporate mission that could be
improved by technology
18
1) The advantages of the Spiral SDLC Model are as follows −
1) Changing requirements can be accommodated.
2) Allows extensive use of prototypes.
3) Requirements can be captured more accurately.
4) Users see the system early.
5) Development can be divided into smaller parts and the risky parts can
be developed earlier which helps in better risk management.
2) The disadvantages of the Spiral SDLC Model are as follows −

1) Management is more complex.
2) End of the project may not be known early.
3) Not suitable for small or low risk projects and could be expensive for
small projects.
4) Process is complex
5) Spiral may go on indefinitely.
6) Large number of intermediate stages requires excessive
documentation
Spiral Model
 Advantages of the spiral model:
o Appropriateness for large-scale enterprise systems
o Flexibility in terms of its sensitivity to the dynamic nature of the
software industry
o High sensitivity to risk at each stage of development
 Disadvantages of the spiral model:
o Complex nature makes it difficult for customers to grasp
o Requires extensive information regarding risk assessment
o Undetected risks can be problematic
21
Spiral Model
22
Dynamic System Development Method (DSDM)
 Rapid Application Development (RAD)
 The Dynamic Systems Development Method (DSDM)
o Not-for-profit consortium www.dsdm.org
 Time-sensitive
 Business-centered
o Main focus – on-time delivery of high-quality software for current
business needs
o 80% of a software solution can be developed in 20% of the time
required to complete a total solution.
 Time frame and allocated resources are fixed
 Functional requirements are flexible
23
 Three stages
o Pre-project, feasibility study, and business study phases
o Iteration between the functional model iteration, design and build
iteration, and implementation phases
o Post-project phase
24
 The DSDM framework recognizes nine principles:
1. Active user involvement is imperative.
2. The team must be empowered to make decisions.
3. The focus is on frequent delivery of products.
4. Fitness for business purpose is the essential criterion for
acceptance of deliverables.
5. Iterative and incremental development is necessary to
converge on an accurate business solution.
6. All changes during development are reversible.
7. Requirements are baselined at a high level.
8. Testing is integrated throughout the life cycle.
9. Collaboration and cooperation among all stakeholders is
essential. 25
 Advantages of the DSDM:
o Provides a technique-independent process
o Flexible in terms of requirement evolution
o Strict time and budget adherence
o Incorporates stakeholders into the development process
 Disadvantages of the DSDM:
o Involves progressive development of requirements
o Focus on RAD can lead to decrease in code robustness
o Requires full commitment to DSDM process
o Requires significant user involvement
o Requires a skilled development team in both the business and
technical areas
26
Prototype-based Development
 Prototypes are used to develop, demonstrate and test design ideas
o Appropriate for small-scale projects
o Enable discussions of:
 Look and feel
 Scope
 Information flow
 Product concept
 Throwaway Prototyping Model
 Evolutionary Prototyping Model
27
 In HCI, three broad categories of prototypes are used in different
stages of the design life cycle.
 Low fidelity prototypes:
 The prototypes in this category are built primarily using cheap
and non-technological means such as paper, cardboard, wood
etc.
 These are useful mainly to brainstorm initial ideas at the early
design stage
 Ex.: Storyboarding
28
 Low fidelity prototypes:
29
 Medium fidelity prototypes:
 These prototypes are used primarily to evaluate selective
functionality of the system, during the middle phases of the
design
 There are two ways in which medium fidelity prototypes are
implemented:
 horizontal prototypes, in which the entire surface interface is
implemented without any functionality
 Ex.: first screen of an interface (showing layout)
 vertical prototypes, in which one or more features of the
systems are implemented in depth.
 Ex.: working of a single menu item in full
30
 Hi fidelity prototypes:
 These typically refer to prototypes where most, if not all,
functionalities of the system is implemented for final user
evaluation.
 Since user evaluation is costly in term of money and effort, such
prototypes are usually developed at the final stages of the
design cycle.
31
 Advantages of prototyping:
 Easy for users to give feedback
 Reduced development time and cost
 Involvement of the user in the development process
 Disadvantages of prototyping:
 Can be viewed by client as the final product
 May lead to insufficient analysis due to the ease of development
 Difficult for developers to discard and start creating the final
product from scratch
32
Discount Usability Engineering (DUE)
 Jakob Nielsen (1994)
o Nielsen argued that the benefits derived from even small amounts of
user testing would have a significant impact on the usability of the
design.
o DUE is based on the use of the following three techniques:
 Scenarios-A type of extreme prototyping that reduces the level of
functionality and number of features for a system to a minimum. Scenarios can
be paper mock-ups or actual simple prototype interfaces.
 Simplified thinking aloud - A simple method that involves bringing in a
limited number of real end-users, having them use a system to carry out typical
tasks of interest
 Heuristic evaluation - A group of experts are employed to individually
evaluate systems based on commonly accepted standards and "rules of thumb"
33
known as heuristics.
Usability refers to the effectiveness, efficiency, and satisfaction

of the user experience when using a system.
•Effectiveness - the ease in which the system allows users to

achieve specific goals
•Efficiency - the length of time to achieve those goals
•Satisfaction - subjective evaluations of the system by users

36
Usability Engineering (UE) : Assignment
37
Nielsen 10 Usability Heuristics
 Visibility of system status
 Match between system and the real world
 User control and freedom
 Consistency and standards
 Error prevention
 Recognition rather than recall
 Flexibility and efficiency of use
 Aesthetic and minimalist design
 Help users recognize, diagnose, and recover from errors
 Help and documentation
38
Contextual Inquiry
 Hugh Beyer and Karen Holzblatt 1998
 Contextual Design: Defining Customer-Centered Systems.
 Involves
o – Observation
o – Inquiry
o – Interpretation
 It is based on four main principles:
o – Context
o – Partnership
o – Focus
o – Interpretation
39
Contextual Inquiry
 Context
o how and why people use software products
 Partnership
o partnering with a typical user in a master/apprentice relationship.
 Focus
o Observations are focused on collecting information, which can
be categorized as follows:
 Tools - The various applications people use to perform their
tasks.
 Artifacts – Non-digital tools required by the work but not part
of the design.
 Terminology - The labels and terms people use to identify
objects and processes. 40
Contextual Inquiry
 Sequences - The order in which people perform their tasks.
 Methods - Organization techniques used by the workers.
 Interactions - How and why people interact with each other.
 Interpretation
o An affinity diagram is a way to sort, organize, and prioritize
observations
o They involve post-it notes and grouping observations
o The team creates models of :
 Communication flows
 Information sequences
 Physical environments
 Corporate culture structures
o They lead to the conceptual models of the design 41
Contextual Inquiry :: Affinity Diagram
42
Interactive System Design Life Cycle (ISLC)
 Key stages
o Know the user, propose design, evaluate design by users, refine
design
 Iterative design process
o The above stages are iterated till an acceptable (determined
from user feedback) solution is obtained
43
ISLC – Identify Need
 What is wanted – identify users and their need
 Designers make use of one or more methods to identify the
requirements
 Such methods include
o Interview (structured, semi-structured, unstructured)
o Contextual inquiry
o Cultural probes
o Ethnography
o User models
44
ISLC – Analyze Data
 Analysis of the data collected
 Two types of analysis are performed
o Scenario analysis: analyze data collected from the user on one
or more usage scenario of the system
o Task analysis: analyze tasks required to be carried out by the
user to operate the system.
 System level task analysis: analysis of external tasks
required to operate the system
 Cognitive task analysis: analysis of tasks performed in the
mind of the user
45
ISLC – Propose Design
 Design proposal arrived at from the analysis of collected data
o Guidelines and principles help in the development of initial
design
o Several sets of guidelines (both general and specific) are there
to cater to specific interface design context
46
ISLC – Develop Prototype
 Implement a prototype of the design for collecting user feedback.
 A spectrum of techniques is used in developing prototypes
o Paper prototype (one extreme)
o Complete software (other extreme)
o Lots in between …
47
ISLC – Evaluate Design
 Evaluation of the design by users
 In the initial design phase, evaluation is done on prototypes
o Cost effective and easier to perform
o Suitable for iterative design process where the evaluation is
performed many times
 The full system is typically evaluated at the end
o Full system evaluation is costly in terms of money, manpower,
time and effort
o Hence, typically done once or a limited number of times
48
ISLC – Evaluate Design
 Several evaluation methods are available
o Checklist/guideline based evaluation
 Heuristic evaluation, cognitive walkthrough
o Model-based evaluation: employs models (of the system or user
or hybrid) for evaluation
 Hybrid models are essentially models that combines the
features of both the system and the user
o Empirical evaluation – evaluate with real users
 Involve implementation of the system with full
functionalities
49
Interaction Types
 Interaction types are defined by the user experience supported by
the HCI design.
 Instructing (command-based)
 Conversing (dialogue-based)
 Manipulating (static interaction with the environment)
 Exploring (dynamic interaction with the environment)
50
Interaction Types
Instructing (command-based)
 Instructions can be issued in various ways: typing in commands,
pressing buttons, selecting options from menus, speech / gesture-
based issuing of commands, thought-based issuing of commands
(brain interfaces).
 Instruction-based software products: Unix, Windows, Linux, (99% of
products).
 Other products: vending machines, audio / video equipment, toys,
clocks, cars…
51
Interaction Types
Conversing (dialog-based)
 User has a dialogue with the system by means of speech-based or
typed-questions-based interface.
 Simple (speech-based) HCIs: tele-banking, ticket booking, train-
times inquiries.
 Advanced HCIs: advisory system, search engines, virtual tutoring.
 Pros: more natural Cons: HCI tiresome, unable to handle complex
questions.
52
Interaction Types
Manipulating
 Manipulating (static interaction with the environment)
 Interacting with objects in physical or virtual environment by
selecting, moving, resizing, opening, and closing them.
 Manipulation-based HCI design: direct manipulation GUI (current
trend).
 Manipulation-based product design : toys.
 Pros: enables easy learning / remembering, direct results → no
need for error messages, incites exploring → mastery →confidence;
 Cons : too slow for experts
53
Interaction Types
Manipulating Interface
54
Interaction Types
Exploring
 Exploring (dynamic interaction with the environment)
 Moving through physical or virtual environment.
 Exploration-based designs: fantasy and other virtual worlds,
Computer- Automated Virtual Environment (CAVE), ambient
intelligence (smart rooms)
 Pros: natural HCI, opens up 1000s of possibilities;
55
GUI Design and Aesthetics
 GUI determines the Usability Index of the product as a whole. Gives
the product an identity, personality & character.
 In GUI Design Aesthetics is about Sensory + Empirical + Taste +

Judgment
 Aesthetics is both Art as well as Mathematics. It is both rational as

well as emotional at the same time.
 Aesthetics (Look & Feel) + Communication + Use ability

= Total UI Experience
56
 Case Study 1 : Windows GUI (Aesthetic and minimalist design)
57
 Case Study 2 : Icon Design (Two simple icons communicating an
activity in progress.)
58
 Case Study 3 : Graphic Design – Website Layout
59
GUI Design and Aesthetics : Assignment 1
From any computer or mobile screen pick one GUI which you do not
like & one more GUI which you like.
Analyze their constituting graphic / visual elements by applying

principles of aesthetics and find out if you can attribute any aesthetic
reasons for your ‘like’ & ‘dislike’.
Write down some points in favour of your design w.r.t. functional and
usability aspect
60
GUI Design and Aesthetics : Assignment 2
61
Thank You for Your Attention !
62
Discovery - Interpretation
 Interpretation means going from data to design requirements
 After collection you interpret the information by:
o Creating descriptions of the people who do the work
o Describing the different goals involved in the work
o Documenting the work step by step
o Creating different stories about how the various aspects of the
work are done
o Creating charts and diagrams of the work flow
o Tracing the different stories identified with the various people
through the charts and diagrams
 The data collected must be organized and transformed into
information
1
Discovery - Interpretation
 The tools we will explore for interpretation include the following:
o Task analysis
o Storyboarding
o Use cases
o Primary stakeholder profiles
2
Discovery – Interpretation – Task Analysis
 Task analysis is a way of documenting how people perform tasks
 A task analysis includes all aspects of the work flow
 It is used to explore the requirements of the proposed system and
structure the results of the data collection phase
 Task decomposition
o A linear description of a process that captures the elements
involved as well as the prevailing environmental factors.
 Hierarchical Task Analysis (HTA)
o HTA provides a top-down, structured approach to documenting
processes.
3
Interpretation – Task Analysis – Task Decomposition
 Identify the process
 Describe the steps
 Include the following,
 The reasons for the actions
 The people who perform the actions
 The objects or information required to complete the actions
 Should try to capture,

 The flow of information
 Use of artifacts
 Sequence of actions and dependences
 Environmental conditions
 Cultural constraints 4
 Task decompositions include:
 Goal - This defines the top-level goal for the analysis
 Ex:- Schedule a team meeting
 Plans - Describe the order and conditions required to proceed
with subtasks
 Ex:- Reserve the conference room, A.V equip. based on
availability of team members
 Information - This includes all of the information you need to
perform the task
 Ex:- Team member contact info, conference room schedule,
A.V equip. use procedures
 Objects - These include all of the physical objects you will use
to find the information 5
 Ex:- Conference room calendar, team address book, A.V sign-
up sheet.
 Methods - These are the various ways you can proceed.
 Ex:- Can contact team via email, IM, phone etc.
 Objectives - These are the sub goals
 Ex:- Contact team members, Coordinate schedules, book
room, book A.V equip, confirm meeting with team
 Procedures - These are the triggers that may initiate contingency
activities
 Ex:- Coordinate schedules, Check room & A.V bookings
 Contingencies - These will describe what you need to do if one of
your methods does not work
 Ex:- If you get no response from email try other methods of
6
communication.
Interpretation – Task Analysis – HTA
 Hierarchical task analysis (HTA)
o Start with a specific goal and then add the tasks or subgoals
required to achieve that goal.
o An HTA is read as follows:
 A box on top of another box describes what we want to do
(subgoal).
 The box below another box describes how it is done.
 Plans control the flow between subgoals.
 Generating the hierarchy
o get list of tasks
o group tasks into higher level tasks
o decompose lowest level tasks further
7
First part of the HTA of the “schedule a team meeting” task. 8

Second part of the HTA of the “schedule a team meeting” task.

9
HTA of the “schedule a team meeting” task.

10
Interpretation – Task Analysis – HTA - Example
11
Interpretation – Task Analysis – HTA - Example
12
 Draw a HTA for a website of your college to announce Results. Take
into consideration that there are multiple Departments, CAT1, CAT 2
& FAT exams results to be declared and documented
 Cleaning House using Vacuum Cleaner
13
Interpretation – Storyboarding
 Storyboarding involves using a series of pictures that describes a
particular process or work flow
 Can be used to study existing work flows or generate
requirements.
 Can facilitate the process of task decomposition
 Used to brainstorm alternative ways of completing tasks.
 Requirements Document
o Requirements
 Functional
 Information
 Physical
o Inputs/outputs
o Constraints 14
 Pros
 Simple to design by yourself
 Makes you think through the process of how something will be
used and identify needed features
 Useful for communicating ideas
 Cons
 Rough sketches, not everything can go in
 Limited in scope, impractical to use on a whole project
 Sketching is important to low-fidelity prototyping

 Don’t be inhibited about drawing ability. Practice simple symbols
15
16
Interpretation – Use Cases
 Use cases [proposed by Jacobson et al. (1992)] represent a formal,
structured approach to interpreting work flows and processes
 Designed to describe a particular goal and explore the interaction
between users and the actual system components.
 Incorporated into the Unified Modeling Language (UML) standard
 The two main components,
 Actors: similar to stakeholders, but can also include other systems,
networks, or software that interacts with the proposed system.
 Use Cases: Each actor has a unique use case, which involves a
task or goal the actor is engaged in.
 Describe discrete goals that are accomplished in a short time
period
 Describe the various ways the system will be used and cover all
17
of the potential functionality being built into the design
 Can be diverse paths through a Use Case
 Basic Path: The primary path through the use case is the one that
is completed without any diversions from error conditions or
extenuating circumstances
 Alternate Path: Alternate paths test the exception-handling
capabilities of the system.
 They capture premature termination of a process, choosing of a
different method and possible error conditions
 Scenarios: Each unique path through the use case is called a
scenario.
 Scenarios represent discrete instances that combine to create
the complete use case.
 They are the lowest level of the use case and should cover all
18
conceivable paths and alternatives.
 Scenario Elements:
 Settings – description of the starting state of the episode and
objects that are involved.
 Actors
 Goals
 Actions – things that actors do
 Events – things that happen to the actors
 Objects
19
20
Example: Scenarios for ‘schedule a meeting’
 Basic path – coordinator books room and a/v equip. contacts team
members and they reply, “ok”
 Alt path 1: the a/v equipment is unavailable
 Alt path 2: booking is ok, but team members don’t reply
Example: Flow of events ’
 Coordinator checks book and sends a group email
 Coordinator checks email responses
 if no response, coordinator uses an alternate method
o Instant messaging
o Face to face
o Phone
 Coordinator creates a list of available times 21
 Coordinator checks room schedule and reserves room
 6 checks a/v equip sign up sheet.
o If a/v not available, alter room schedule (go back to step 5)
 End Loop
22
23
24
25
Include:
 An include relationship is a relationship in which one use case (the
base use case) includes the functionality of another use case (the
inclusion use case).
 The include relationship supports the reuse of functionality in a use
case model.
 A dotted line labeled <<include>> beginning at base use case and
ending with an arrows pointing to the include use case.
<<include>>
26
27
Extend:
 In UML modeling, you can use an extend relationship to specify that
one use case (extension) extends the behavior of another use case
(base)
 A dotted line labeled <<extend>> with an arrow toward the base
case. The extending use case may add behavior to the base use
case.
 The base class declares “extension points”.
<<extend>>
28
29
 Prepare a use case for Voice based web browser
o The user gives request through voice using PC to touch tone
o The request goes to voice browser and converts the voice to text
o Checks the grammars and speech synthesis
o Access Business Information, Public Information and Personal
Information
 Home Heating Monitoring System
30
Interpretation – Primary Stakeholder Profiles
 Primary Stakeholder Profiles are used to define the target user
 The constructs covered include:

 Context of use
 Cognitive ability
 Physical ability
 Individual profile
31
32
 Context of Use for a common office desktop system
33
 Cognitive Abilities of the target user affect the design
 The cognitive abilities of the target user may be specific or more
general
 Note: Domain expertise may not correlate with computer literacy
34
 Physical Ability: the human condition includes wide ranges of
abilities
o visual
o auditory
o Haptic
o Describe situations when physical ability will affect design
35
 Individual profiles: There are situations when personal user
information is required
o E.g. if you are designing educational software you may want to
specify age by grade level.
 Describe some design situations that require personal information
36
Documentation
 Mission Statement
o Project goals:
 What is the value proposition?
 What needs will the new system address?
 How will it address these needs?
o Project scope
 What does the proposed design include or exclude?
 What are the external constraints such as time and
finances?
 How will you decide when it satisfies the design proposal?
37
Documentation
 Requirements Document
o Requirements
 Functional – basically a list of required features
 Information – what info. is needed to carry out functional
requirements
 Physical – hardware? Also consider interoperability with
legacy systems
o Inputs/outputs
o Constraints - e.g. time, money, security…
38
Documentation
 Project Management Document
o Definition of the tasks involved in the project
o Risk – e.g. time, money, security, safety
o Evaluation criteria and methods
o Implementation
o Training requirements
o Maintenance
o Future needs
39
THANK YOU FOR YOUR
ATTENTION !
40
Module – 3
INTERACTION DESIGN MODELS
1. Model Human Processor (MHP)
2. Keyboard Level Model (KLM)
3. GOMS-CMN-GOMS Analysis
4. State Transition Networks
1
Types of Models
 Descriptive / Prescriptive models, such as state networks and the
Three-State Model, provide a framework for thinking about user
interaction.
o They can help us to understand how people interact with
dynamic systems.
o some models in HCI are used to explain/describe user
behaviour during interaction in qualitative terms.
 An example is the Norman’s model of interaction. These
models help in formulating (prescribing) guidelines for
interface design
2
Types of Models
 Predictive models such as the Model Human Processor (MHP) and
the Keyboard Level Model (KLM), are a priori (pre-experience)
models
o They give approximations of user actions before real users are
brought into the testing environment.
o These models can “predict” behaviour of a user in quantitative
terms.
 An example is the GOMS model (composed of methods that
are used to achieve specific goals.) which can predict the task
completion time of an average user for a given system.
3
Types of Models : Sample Question
Suppose a model mentions that “our reading pattern is from left-

to-right”. Is it a predictive model or prescriptive model?
Answer with justification
4
Types of Models : Answer
The model indicates how a user is supposed to behave on an

interface. Consequently, it prescribes a design guideline,
namely to put interface elements on the left side of the
screen, as we are most likely to look at the left side first.
Therefore, this is a prescriptive model, without any ability to
make any prediction.
5
Predictive Engineering Models
 The predictive engineering models used in HCI are of three types
o Formal (system) models
o Cognitive (user) models
o Syndetic (hybrid) model
6
Formal (System) Models
 In these models, the interactive system (interface and interaction) is
represented using ‘formal specification’ techniques
o For example, the interaction modelling using state transition
networks
 Essentially models of the ‘external aspects’ of interactive system
(what is seen from outside)
 Interaction is assumed to be a transition between states in a
‘system state space’
o A ‘system state’ is characterized by the state of the interface
(what the user sees)
7
Formal (System) Models
 It is assumed that certain state transitions increase usability while
the others do not.
 The models try to predict if the proposed design allows the users to
make usability-enhancing transitions
 By applying ‘reasoning’ (manually or using tools) on the formal
specification.
8
Cognitive (User) Models
 These models capture the user’s thought (cognitive) process during
interaction
o For example, a GOMS model tells us the series of cognitive
steps involved in typing a word
 Essentially models are the ‘internal aspects’ of interaction (what
goes on inside user’s mind)
 Usability is assumed to depend on the ‘complexity’ of the thought
process (cognitive activities)
o Higher complexity implies less usability
9
Cognitive (User) Models
 Cognitive activities involved in interacting with a system is assumed
to be composed of a series of steps (serial or parallel)
 More the number of steps (or more the amount of parallelism
involved), the more complex the cognitive activities are
 The models try to predict the number of cognitive steps involved in
executing ‘representative’ tasks with the proposed designs
 Which leads to an estimation of usability of the proposed design
10
Syndetic (Hybrid) Models
 HCI literature mentions one more type of model, called ‘Syndetic’
model
 In this model, both the system (external aspect) and the cognitive
activities (internal aspect) are combined and represented using
formal specification
 The model is rather complex and rarely used.
11
Model Human Processor (MHP)
 The Model Human Processor can make general predictions about
human performance
 The MHP is a predictive model and is described by a set of
memories and processors that function according to a set of
principles (principles of operation)
 Contains three interacting systems: perceptual, cognitive, and
motor systems
o For some tasks, systems operate in serial (pressing a key in
response to a stimulus).
o For other tasks, systems operate in parallel (driving, talking to
passenger, listening to radio).
12
 Each system has its own memory and processor.
o Memory: storage capacity and decay time.
o Processor: cycle time (includes access time).
 Each system guided by principles of operation.
13
Perceptual system (sensory image stores)
 Sensors
o Eyes
o Ears
 Buffers
o Visual memory store (VIS)
o Auditory memory store (AIS)
 Cognitive system
o Working memory (WM)—Short-term memory
o Long-term memory (LTM)
 Motor system
o arm-hand-finger system
o head-eye system. 14
Perceptual Processor
 Codes information in perceptual memory for about 100ms and then
retrieves next stimulus
 Cycle time (Tp) ≈100ms [50-200ms]
 Processor cannot code all information before the next stimulus
arrives
 Type and order of coding influenced by:
 Gestalt principles (perceive shape from atomic parts)
 Attention - directs processing or filters information
 Variable Processor Rate Principle
 Processor cycle time varies inversely with stimulus intensity
 Brighter screens need faster refresh rates
15
Why MHP is useful?
 Use empirical studies to validate the model
o Validates our understanding of the three systems
 Use model to:
o Predict and compare usability of different interface designs
 Task performance, learnability, and error rates
 No users or functional prototype required!
o Develop guidelines for interface design
 Color, spatial layout, recall, response rates, etc.
 To be useful, a model must:
o Be easy to use and learn
o Produce reasonably accurate results
19
What’s not in the MHP
 Haptic sensory processor and memory
 Motor (or muscle) memory
 Attention
 Active “chunk” in WM + cognitive processing
 Affects perceptual processing of sensory stimuli and filters what
information is transferred from sensory memory to WM
20
MHP – Working Memory
 WM consists of a subset of “activated” elements from LTM
 It encode only the non-symbolic physical parameters of stimuli.
 Shortly after the onset of a stimulus, a symbolic representation is
registered in the WM
 The activated elements from LTM are called chunks.
 Chunks can be composed of smaller units like the letters in a
word.
 A chunk might also consist of several words, as in a well-known
phrase
21
MHP – Long Term Memory
 The cognitive processor can add items to WM but not to LTM.
 The WM must interact with LTM over a significant length of time
before an item can be stored in LTM.
 This increases the number of cues that can be used to retrieve the
item later
 Items with numerous associations have a greater probability of
being retrieved
23
MHP – Memory Example
 What if you are given 3 sets of filenames, where each set starts
with the same characters?
o E.g., Class1, Class2, Class3, Class4; Day1, Day2, Day3, Day4,
Time1, Time2, Time3, Time4.
 How many chunks?
 Answer:
o 4 chunks (class, day, time, and 1,2,3,4)
24
MHP – Processor Timing
 Perceptual - The perceptual system captures physical sensations
by way of the visual and auditory receptor channels.
 Perceptual decay is shorter for the visual channel than for the
auditory channel.
 Perceptual processor cycle time is variable according to the nature
of the stimuli
 Cognitive - The cognitive system bridges the perceptual and motor
systems.
 It can function as a simple conduit or it can involve complex
processes, such as learning, fact retrieval, and problem solving.
 Cognitive coding in the WM is predominantly visual and auditory
25
 Cognitive coding in LTM is involved with associations and is
considered to be predominantly semantic.
 Cognitive decay time of WM requires a large range.
 Cognitive decay is highly sensitive to the number of chunks
involved in the recalled item
 Cognitive decay of LTM is considered infinite.
 Cognitive processor cycle time is variable according to the nature of
the stimuli.
 Motor - The motor system converts thought into action.
 Motor processor cycle time is calculated in units of discrete micro-
movements.
26
27
 A user sits before a computer terminal. Whenever a symbol
appears, s/he must press the space bar. What is the time between
stimulus and response?
Tp + Tc + Tm = 240 ms
 Two symbols appear on the computer terminal. If the second

symbol matches the first, the user presses “Y” and presses “N”
otherwise. What is the time between the second signal and
response?
Tp + 2Tc (compare + decide) + Tm = 310 ms

28
GOMS Family Models
 The family consists of FOUR models
 Keystroke Level Model or KLM
 Original GOMS proposed by Card, Moran and Newell, popularly
known as (CMN) GOMS
 Natural GOMS Language or NGOMSL
 Cognitive Perceptual Motor or (CPM)GOMS [also known as
Critical Path Method GOMS]
29
Keyboard / Keystroke Level Model (KLM)
 The KLM is a practical design tool that can capture and calculate
the physical actions a user will have to carry out to complete
specific tasks.
 The model was proposed way back in 1980 by Card, Moran and
Newell.
 This is the earliest model to be proposed in the GOMS family (and
one of the first predictive models in HCI)
 The model allows a designer to ‘predict’ the time it takes for an
average user to execute a task using an interface and interaction
method
o For example, the model can predict how long it takes to close
this PPT using the “close” menu option
30
Keyboard / Keystroke Level Model (KLM)
 Given:
o A task (possibly involving several subtasks)
o The command language of a system
o The motor skill parameter of the user
o The response time parameters
 Predict:
o The time an expert user will take to execute the task using the
system
 Provided that he or she uses the method without error
 The KLM is comprised of:
o Operators
o Encoding methods
o Heuristics for the placement of mental (M) operators 31
How KLM Works
 In KLM, it is assumed that any decision making task is composed of
a series of ‘elementary’ cognitive (mental) steps, that are executed
in sequence
 These ‘elementary’ steps essentially represent low-level cognitive
activities, which can not be decomposed any further.
 The method of breaking down a higher-level cognitive activity into a
sequence of elementary steps is simple to understand, provides a
good level of accuracy and enough flexibility to apply in practical
design situations
 To understand how the model works, we first have to understand
this concept of ‘elementary’ cognitive steps
 These elementary cognitive steps are known as operators
o For example, a key press, mouse button press and release etc.32
KLM Operators
 Each operator takes a pre-determined amount of time to perform
 The operator times are determined from empirical data (i.e., data
collected from several users over a period of time under different
experimental conditions)
o That means, operator times represent average user behaviour
(not the exact behaviour of an individual)
 There are seven operator defined, belonging to three broad groups
o Physical (motor) operators
o Mental operator
o System response operator
33
KLM Operators
 Physical (motor) operators:-
 Mental operator :- (M - Any decision-making (thinking) process is

modelled)
 System response operator :- (R - model the system response time
(e.g., the time between a key press and appearance of the
corresponding character on the screen) 34
KLM Physical Operator Times
35
KLM Mental Operator Times
36
KLM Mental Operator Times
37
KLM Encoding Methods
 Encoding methods define how the operators involved in a task are
to be written
MK[i] K[p] K[c] K[o] K[n] K[f] K[i] K[g] K[RETURN]
 It would be encoded in the short-hand version as
M 9K [ipconfig RETURN]
 This results in a timing of 1.35s + 9 * 0.20s = 3.15 seconds for an

average skilled typist
38
KLM Heuristics for M Operator Placement
 The KLM operators can be placed into one of two groups
o Physical or Cognitive.
 The physical operators are defined by the chosen method of

operation, such as clicking an icon or entering a command string.
 The cognitive operators are governed by the set of heuristics
39
KLM Does not Do
 The KLM was not designed to consider the following:
o Errors
o Learning
o Functionality
o Recall
o Concentration
o Fatigue
o Acceptability
40
KLM Applications
 Case 1 (Mouse-Driven Text Editor)
o During the development of the Xerox Star KLMs served as
expert proxies
 Case 2 (Directory Assistance Workstation)

o The KLM clarified the trade-offs between the number of
keystrokes entered in the query and the number of returned
fields
41
KLM Example
 Suppose a user is writing some text using a text editor program. At
some instant, the user notices a single character error (i.e., a wrong
character is typed) in the text. In order to rectify it, the user moves
the cursor to the location of the character (using mouse), deletes
the character and retypes the correct character. Afterwards, the
user returns to the original typing position (by repositioning the
cursor using mouse).
 Calculate the time taken to perform this task (error rectification)
following a KLM analysis for a non-typist.
42
KLM Example
Let us try to do that step-by-step
 Step 1: user brings cursor to the error location
o To carry out step 1, user moves mouse to the location and
‘clicks’ to place the cursor there
 Operator level task sequence
43
KLM Example
 Step 2: user deletes the erroneous character
o Switches to keyboard (from mouse) and presses a key (say
“Del” key)
44
KLM Example
 Step 3: user types the correct character
o Presses the corresponding character key
45
KLM Example
 Step 4: user returns to previous typing place
o Moves hand to mouse (from keyboard), brings the mouse
pointer to the previous point of typing and places the cursor
there with mouse click
46
KLM Example
 Total execution time (T) = the sum of all the operator times in the
component activities
T = HPBBHKKHPBB = 6.20 seconds
47
KLM Example – M Operator Guidelines
 What about M (mental operator) – where to place them in the list?
 It is usually difficult to identify the correct position of M
o However, we can use some guidelines and heuristics
 Place an M whenever a task is initiated

 M should be placed before executing a strategy decision
o If there is more than one way to proceed, and the decision is not
obvious or well practiced, but is important, the user has to stop
and think
 M is required for retrieving a chunk from memory
o A chunk is a familiar unit such as a file name, command name or
abbreviation
48
o Example - the user wants to list the contents of directory foo; it
needs to retrieve two chunks - dir (command name) and foo (file
name), each of which takes an M
 Other situations where M is required
o Trying to locate something on the screen (e.g., looking for an
image, a word)
o Verifying the result of an action (e.g., checking if the cursor
appears after clicking at a location in a text editor)
 Consistency – be sure to place M in alternative designs following a
consistent policy
 Number of Ms – total number of M is more important than their exact
position
49
o Explore different ways of placing M and count total M in each
possibility
 Apples & oranges – don’t use same policy to place M in two different
contexts of interaction
o Example: don’t place M using the same policy while comparing
between menu driven word processing (MS Word) vs command
driven word processing (Latex)
 Yellow pad heuristics –
o If the alternative designs raises an apples & oranges situation
then consider removing the mental activities from action
sequence and assume that the user has the results of such
activities easily available, as if they were written on a yellow pad
in front of them 50
M Placement Heuristics
 Rule 0: initial insertion of candidate Ms
o Mouse-operated widgets (like buttons, check boxes, radio
buttons, and links) are considered commands
o Text entry is considered as argument
 Rule 1: deletion of anticipated Ms

o If an operator following an M is fully anticipated in an operator
immediately preceding that M, then delete the M
o Example - if user clicks the mouse with the intention of typing at
the location, then delete the M inserted as a consequence of rule
0
o So BBMK becomes BBK
51
 Rule 2: deletion of Ms within cognitive units
o If a string of MKs belongs to a cognitive unit then delete all Ms
except the first
o A cognitive unit refers to a chunk of cognitive activities which is
predetermined
o Example - if a user is typing “100”, MKMKMK becomes MKKK

(since the user decided to type 100 before starts typing, thus
typing 100 constitutes a cognitive unit)
52
 Rule 3: deletion of Ms before consecutive terminators
o If a K is a redundant delimiter at the end of a cognitive unit, such
as the delimiter of a command immediately following the delimiter
of its argument, then delete the M in front of it
o Example: when typing code in Java, we end most lines with a

semi-colon, followed by a carriage return. The semi-colon is a
terminator, and the carriage return is a redundant terminator,
since both serve to end the line of code
53
 Rule 4: deletion of Ms that are terminators of commands
o If a K is a delimiter that follows a constant string, a command
name (like “print”), or something that is the same every time you
use it, then delete the M in front of it
o If a K terminates a variable string (e.g., the name of the file to be
printed, which is different each time) then leave it
 Rule 5: deletion of overlapped Ms

o Do not count any portion of an M that overlaps a R — a delay,
with the user waiting for a response from the computer
o Example: user is waiting for some web page to load (R) while
thinking about typing the search string in the web page (M). Then
M should not come before typing since it is overlapping with R 54
THANK YOU FOR YOUR
ATTENTION !
55

Ilovepdf Merged

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ilovepdf Merged

Uploaded by

Copyright:

Available Formats

SYLLABUS

3. INTERACTION DESIGN MODELS

5. COLLABORATION AND COMMUNICATION

6. HUMAN FACTORS AND SECURITY

7. VALIDATION AND ADVANCED CONCEPTS

1. Introduction to Human Computer Interaction

3. Thinking : Reasoning and Problem Solving

4. Devices for Text Entry and Virtual Reality

 Human Computer Interaction not meant a single user and a desktop

The Quick Brown

o Selection of stimuli governed by level of arousal.

 semantic LTM derived from episodic LTM

Script for a visit to the vet

Entry conditions: dog ill Roles: vet examines

IF dog is wagging tail

o For example, sometimes when I am driving to St Andrews town

 However, correct application generally requires understanding of context in

 A lot of knowledge has been distilled in

each of these elements affects the interaction

to understand human–computer interaction

what goes in and out

what can it do?

the devices dictate the styles of interaction that the system

• computers in your house?

• computers in your pockets?

are you thinking …

in your house? in your pockets?

Long ago in a galaxy far away … batch processing

Now most computing is interactive

Is faster always better?

keyboards (QWERTY et al.)

• Most common text input device

• Keypress closes connection, causing a

• QWERTY arrangement not optimal for typing

• designs to reduce fatigue for RSI

BUT - social resistance, plus fatigue after extended use

• Text can be input into the computer, using a

• Used in PDAs, and tablet computers …

• Most successful when:

• for entering numbers quickly:

• Handheld pointing device

Relative movement only is detectable.

• some experiments with the footmouse

• but foot controls are common elsewhere:

• small touch sensitive tablets

• good ‘acceleration’ settings important

• Mouse like-device with cross hairs

• used on special surface

• control interface by eye gaze direction

• Four keys (up, down, left, right) on keyboard.

• in phones, TV controls etc.

bitmap screens (CRT & LCD)

• screen is vast number of coloured dots

• Stream of electrons emitted from electron gun, focused

• do not sit too close to the screen

 Take extra care if pregnant.

• Found on PDAs, portables and notebooks,

• also used in dedicted displays:

Random Scan (Directed-beam refresh, vector display)

Direct view storage tube (DVST)

• used for meetings, lectures, etc.

• displays in ‘public’ places

• small displays beside office doors