Human Computer Interaction

Assessments
• ISE1-10 Mark.
• ISE2-10 Mark.
• MSE-30 Mark
• ESE- 50 Mark
 Module 1:Introduction
• Course Objective and Overview.
• Historical Evolution of the field.
• The Human.
• The Computer.
• The Interaction.
 Course Objective and Overview
• Traditional Computers Era When computers
first appeared on the commercial scene in the
1950s, they were extremely difficult to use.
• Reasons for this were: – They were very large
and expensive machines, so that by
comparison human labor was an inexpensive
resource. – They were used only by technical
specialists, due to which little was known
about how to make them easier to use.
 Computers are everywhere
• None of after mentioned conditions about computers
holds today: computers have become much less
expensive, computer users come from every walk of
life.
• Traditional notion of computers has been changed.
Computers are no more just on your table. They are
everywhere, at everyplace and in everything. Look
around yourself and you will see examples such as
ATM, cell phone, remote control, calculator, watch,
photocopier, toaster, air conditioner, medical
equipment, VCR …. There is an endless list.
 Definition of HCI
• Human-computer interaction is a discipline
concerned with the design, evaluation and
implementation of interactive computing
systems for human use and with the study of
major phenomena surrounding them.
 Why HCI is Important
• The study of our interface with information.
• HCI is interdisciplinary – No single discipline
• Next slide shows the various area of studies
that contribute to the field
 HCI Tools
• Sound
• 3D
• Animation
• Video
• Devices
– Size (small->very large)
– Portable (PDA, phone)
– Plasticity
• Context sensitive/aware
• Personalizable
• Ubiquitous
 Usability Requirements
• Goals:
– Usability
– Universality
– Usefulness
• Achieved by:
– Planning
– Sensitivity to user needs
– Devotion to requirements
analysis
– Testing
 Bad Interfaces
• Encumbering
• Confusing
• Slow
• Trust (ex. windows
crashing)
• What makes it hard?
– Varies by culture
– Multiple platforms
– Variety of users
 History of HCI
• Mechanical Computers http://www.thocp.net
• 1623 Schickard makes "Calculating Clock".
6-digit machine can add, subtract, bell indicates overflow.
• 1674 Leibniz designs his "Stepped Reckoner”
Can multiply, with operands of up to 5 and 12 digits.
User turns a crank for each unit in each digit
• 1820 de Colmar makes "Arithmometer”
First mass-produced calculator. Does multiplication & division.
It is also the most reliable calculator yet.
Continue to be sold for about 90 years.
• 1889 Felt invents the first printing desk calculator.
• 1935 IBM introduces "IBM 601", punch card machine
capable of 1 multiplication /second. 1500 are made.
• 1945 Mauchly & Eckert "ENIAC” for ballistics.
30 tons, 1000 ft2 of floor, 140 kilowatts of electricity, 17,468 vacuum tubes

CS / Psych 6750 12
 Personal Computers
• 1974 IBM 5100
• 1981 Datamaster
• 1981 IBM XT/AT
– Text and command-based
– Sold lots
– Performed lots of tasks the
general public wanted done
– A good basic toolkit
• 1978 VisiCalc
CS / Psych 6750 13
HCI SCOPE
 The human
• Information i/o …
– visual, auditory, haptic, movement
• Information stored in memory
– sensory, short-term, long-term
• Information processed and applied
– reasoning, problem solving, skill, error
• Emotion influences human capabilities
• Each person is different
 Vision
Two stages in vision

• physical reception of stimulus

• processing and interpretation of stimulus

 The Eye - physical reception
• Mechanism for receiving light and
transforming it into electrical energy
• light reflects from objects
• Images are focused upside-down on retina
• Retina contains rods for low light vision and
cones for colour vision
• ganglion cells (brain!) detect pattern and
movement
Vision Perception
 Interpreting the signal
• Size and depth
– visual angle indicates how much of view object
occupies
(relates to size and distance from eye)

– visual acuity is ability to perceive detail (limited)

– familiar objects perceived as constant size
(in spite of changes in visual angle when far away)

– cues like overlapping help perception of size and

depth
 Interpreting the signal (cont)
• Brightness
– subjective reaction to levels of light
– affected by luminance of object
– measured by just noticeable difference
– visual acuity increases with luminance as does flicker

• Colour
– made up of hue(Spectral Wavelength of light), intensity(Brightness of
color), saturation (amount of Whiteness in color)
– The eye perceives color because cones sensitive to colour
wavelengths.
– blue acuity is lowest
– 8% males and 1% females colour blind
 Optical Illusions

The Ponzo illusion The Muller Lyer illusion

Due to distance The Top line appear like concave
effect edge
And bottom line like convex edge
The former therefore seems
further away then latter and is
therefore scale to appear larger
 Hearing
• Provides information about environment:
distances, directions, objects etc.
• Physical apparatus:
– outer ear – protects inner 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
• Sound
– pitch – sound frequency
– loudness – amplitude
– timbre – type or quality
 Touch
• Provides important feedback about environment.
• May be key sense for someone who is visually impaired.
• Stimulus received via receptors in the skin:
– thermoreceptors – heat and cold
– nociceptors – pain
– mechanoreceptors – pressure
(some instant, some continuous)

• Some areas more sensitive than others e.g. fingers.

• Kinethesis - awareness of body position
– affects comfort and performance.
 Movement
• Time taken to respond to stimulus:
reaction time + movement time
• Movement time dependent on age, fitness etc.
• Reaction time - dependent on stimulus type:
– visual ~ 200ms
– auditory ~ 150 ms
– pain ~ 700ms
• Increasing reaction time decreases accuracy in the unskilled
operator but not in the skilled operator.
 Movement (cont)
• 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

Þ targets as large as possible

distances as small as possible
 Memory

There are three types of memory function:

Sensory memories

Short-term memory or working memory

Long-term memory

Selection of stimuli governed by level of arousal.

Human Memory Storage
 sensory memory
• Buffers for stimuli received through senses
– iconic memory: visual stimuli
– echoic memory: aural stimuli
– haptic memory: tactile stimuli
• Examples
– “sparkler” trail
– stereo sound
• Continuously overwritten
 Short-term memory (STM)
• Scratch-pad for temporary recall
– rapid access ~ 70ms

– rapid decay ~ 200ms

– limited capacity - 7± 2 chunks

 Examples

212348278493202

0121 414 2626

HEC ATR ANU PTH ETR EET

 Long-term memory (LTM)
• Repository for all our knowledge
– slow access ~ 1/10 second
– slow decay, if any
– huge or unlimited capacity

• Two types
– episodic – serial memory of events
– semantic – structured memory of facts,concepts, skills

semantic LTM derived from episodic LTM

 Long-term memory (cont.)
• Semantic memory structure
– provides access to information
– represents relationships between bits of information
– supports inference

• Model: semantic network

– inheritance – child nodes inherit properties of parent nodes
– relationships between bits of information explicit
– supports inference through inheritance
LTM - semantic network
 Models of LTM - Frames

• Information organized in data structures

• Slots in structure instantiated with values for instance of data
• Type–subtype relationships

DOG COLLIE

Fixed Fixed
legs: 4 breed of: DOG
type: sheepdog
Default
diet: carniverous Default
sound: bark size: 65 cm
Variable Variable
size: colour
colour
 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
 Models of LTM - Production rules

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
 LTM - Storage of information
• rehearsal
– information moves from STM to LTM

• total time hypothesis

– amount retained proportional to rehearsal time

• distribution of practice effect

– optimized by spreading learning over time

• structure, meaning and familiarity

– information easier to remember
 LTM - Forgetting
decay
– information is lost gradually but very slowly

interference
– new information replaces old: retroactive interference
– old may interfere with new: proactive inhibition

so may not forget at all memory is selective …

… affected by emotion – can subconsciously `choose' to forget
 LTM - retrieval
recall
– information reproduced from memory can be assisted by cues, e.g.
categories, imagery

recognition
– information gives knowledge that it has been seen before
– less complex than recall - information is cue
 Thinking
Reasoning
deduction, induction, abduction
Problem solving
 Deductive Reasoning
• Deduction:
– derive logically necessary conclusion from given premises.
e.g. If it is Friday then she will go to work
It is Friday
Therefore she will go to work.

• Logical conclusion not necessarily true:

e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
 Deduction (cont.)
• When truth and logical validity clash …
e.g. Some people are babies
Some babies cry
Inference - Some people cry
Correct?

• People bring world knowledge to bear

 Inductive Reasoning
• Induction:
– generalize from cases seen to cases unseen
e.g. all elephants we have seen have trunks
therefore all elephants have trunks.

• Unreliable:
– can only prove false not true

… but useful!
• Humans not good at using negative evidence
e.g. Wason's cards.
 Wason's cards

7 E 4 K
If a card has a vowel on one side it has an even number on the other

Is this true?

How many cards do you need to turn over to find out?

…. and which cards?

 Abductive reasoning
• reasoning from event to cause
e.g. Sam drives fast when drunk.
If I see Sam driving fast, assume drunk.

• Unreliable:
– can lead to false explanations
 Problem solving
• Process of finding solution to unfamiliar task using knowledge.
• Several theories.
• Gestalt
– problem solving both productive and reproductive
– productive draws on insight and restructuring of problem
– attractive but not enough evidence to explain `insight' etc.
– move away from behaviourism and led towards information processing
theories
 Problem solving (cont.)
Problem space theory
– problem space comprises problem states
– problem solving involves generating states using legal operators
– heuristics may be employed to select operators
e.g. means-ends analysis
– operates within human information processing system
e.g. STM limits etc.
– largely applied to problem solving in well-defined areas
e.g. puzzles rather than knowledge intensive areas
 Problem solving (cont.)
• Analogy
– analogical mapping:
• novel problems in new domain?
• use knowledge of similar problem from similar domain
– analogical mapping difficult if domains are semantically different

• Skill acquisition
– skilled activity characterized by chunking
• lot of information is chunked to optimize STM
– conceptual rather than superficial grouping of problems
– information is structured more effectively
 Errors and mental models
Types of error
• slips
– right intention, but failed to do it right
– causes: poor physical skill,inattention etc.
– change to aspect of skilled behaviour can cause slip

• mistakes
– wrong intention
– cause: incorrect understanding
humans create mental models to explain behaviour.
if wrong (different from actual system) errors can occur
 Emotion
• Various theories of how emotion works
– James-Lange: emotion is our interpretation of a physiological
response to a stimuli
– Cannon: emotion is a psychological response to a stimuli
– Schacter-Singer: emotion is the result of our evaluation of our
physiological responses, in the light of the whole situation we are
in
• Emotion clearly involves both cognitive and physical
responses to stimuli
 Emotion (cont.)
• The biological response to physical stimuli is called affect

• Affect influences how we respond to situations

– positive  creative problem solving
– negative  narrow thinking

“Negative affect can make it harder to do even

easy tasks; positive affect can make it easier to
do difficult tasks”
(Donald Norman)
 Emotion (cont.)
• Implications for interface design
– stress will increase the difficulty of problem
solving
– relaxed users will be more forgiving of
shortcomings in design
– aesthetically pleasing and rewarding interfaces
will increase positive affect
 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?
 Psychology and the Design of Interactive
System
• Some direct applications
– e.g. blue acuity is poor
 blue should not be used for important detail

• However, correct application generally requires understanding of context

in psychology, and an understanding of particular experimental conditions

• A lot of knowledge has been distilled in

– guidelines (chap 7)
– cognitive models (chap 12)
– experimental and analytic evaluation techniques (chap 9)
 The Computer
• A computer system comprises various
elements ,each of which affects the user of
the system.
 Input Devices
• It is used for interactive use ,allowing text
entry ,drawing and selection from the screen.
• Text entry: Traditional keyboard, Phone text
entry ,speech and Handwriting.
• Pointing : Principally the mouse, but also
touched ,stylus and others.
• 3D interaction devices.
 Output Display Devices
• Its for interactive use .
• Different types of screen mostly using some
form of bitmap display.
• Large displays and situated displays for shared
and public use.
• Digital paper may be usable in the near future.
• Virtual reality systems and 3D visualization
which have special interaction and display
devices.
 Devices in Physical world
• Physical controls and dedicated display.
• Sound ,smell and haptic feedback.
• Sensors for nearby everything including
movement ,temperature, bio-signs.
• Paper output and input: The paperless office
and paper office
• Different types of printer and their
characteristics
• Scanner and optical character recongnition.
 Memory
• Short term memory : RAM
• Long term memory : magnetic and optical
disk.
• Capacity limitations related to document and
video storage.
• Access methods as they limit or help the user.
 Processing
• The effects when systems run too slow or too
fast ,the myth of the infinitely fast machine.
• Limitations on processing speed.
• Networks and their impact on system
performance.
 The Interaction
• Interaction models help us to understand
what is going on in the interaction between
user and system .They address the translations
between what the user wants and what the
system does.
 The Interaction
• interaction models
– translations between user and system
• ergonomics
– physical characteristics of interaction
• interaction styles
– the nature of user/system dialog
• context
– social, organizational, motivational

62
 What is interaction?
Communication
user  system

63
models of interaction

Purpose of interaction
Norman model
interaction framework

64
 Donald Norman’s model
• Norman uses this model to demonstrate why some interfaces
causes problem to their users.
• Seven stages (each stage is an activity of the user)
1. user establishes the goal e.g. purchase books
2. formulates intention e.g. connect to the Internet/or ask someone
3. specifies actions at interface e.g. search
4. executes action e.g. search for product, fill in form, …
5. perceives system state e.g. perceives the result (found/not found)
6. interprets system state e.g. understand the result
7. evaluates system state with e.g. evaluate the result
respect to goal

• Norman’s model concentrates on user’s view of the interface

65
execution/evaluation loop
goal

execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

66
execution/evaluation loop
goal

execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

67
execution/evaluation loop
goal

execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

68
execution/evaluation loop
goal

execution evaluation
system
• user establishes the goal
• formulates intention
• specifies actions at interface
• executes action
• perceives system state
• interprets system state
• evaluates system state with respect to goal

69
 Human error - slips and mistakes

slip
understand system and goal
correct formulation of action
incorrect action
mistake
may not even have right goal!
Fixing things?
slip – better interface design
mistake – better understanding of system
70
 ergonomics
physical aspects of interfaces

71
 Ergonomics
• Ergonomics, also known as human factors, is the scientific
discipline that seeks to understand and improve human
interactions with products, equipment, environments and
systems.
• Ergonomics good at defining standards and guidelines for
constraining the way we design certain aspects of systems
• Some of the Ergonomics example:
– Arrangement of controls and displays
– surrounding environment
– health issues
– The use of colour

72
 Ergonomics - examples

Arrangement …displays
surrounding environment
health issues - use of colour

73
 Arrangement of controls and displays
• Controls and displays should be grouped logically to allow rapid
access by the user.

• Controls grouped and organized according to:

1. Function: according to their functionality
2. Frequency of use: how frequently they used
3. Sequentially: to reflect the order of their use

• Arrangement of controls and displays is more important in critical

system were users work under pressure. E.g. air traffic control

74
 Arrangement ..(cont.)
• Arrangement in relation to users positions:
– Users should be able to reach all controls necessary and view all
displays without excessive body movement.
– Critical displays should be at eye level.
– Lighting should be arranged to avoid reflection distorting
displays.
– Controls should be spaced to provide adequate room for the
user to manoeuvre

75
 surrounding environment
• Where the system will be used? By whom the it will be used? Will
users sitting, standing, or moving about?

• All users should be comfortable by using the system:

– For long period of use, users should be seated for comfort, and seats
should provide back support.

– Seating arrangements adaptable to cope with all sizes of user

– If user required to stand, the user should have room to move around
to reach all control.

• Physical environment will be more critical in specific control.

76
 health issues
• Poor designs in critical system can results to death. E.g. aircraft
crashing

• health issues
e.g. physical position, environmental conditions (temperature,
humidity), lighting, noise, and usage time

77
 The use of colour
• Colour should correspond to users expectation
e.g. Red frequently associated with stop, therefore it can be use for
warning
e.g. Green frequently associated with go, therefore it can be use for
okay.
e.g. Yellow frequently associated with standby, therefore it can be use
for standby and secondary function.

• Colours and culture

• Red
• China: Good luck, celebration,
• Western: Warning, danger, stop

78
 interaction styles

dialogue … computer and user

distinct styles of interaction

79
 Common interaction styles
• command line interface
• menus
• natural language
• question/answer and query dialogue
• form-fills and spreadsheets
• WIMP
• point and click
• three–dimensional interfaces

80
 Command line interface
• It provide instructions to the computer directly
– function keys, single characters, short abbreviations, whole words, or
a combination

• better for expert users than novices

• Powerful: offers direct access to system functionality
• Flexible: command has a number of options and parameters
• suitable for repetitive tasks

• Difficult to use and learn therefore, command

names/abbreviations should be meaningful!
Typical example: the Unix system

81
 Menus
• Set of options displayed on the screen
• Options visible
– less recall - easier to use
– rely on recognition so names should be meaningful
• Selection by:
– numbers, letters, arrow keys, mouse
– combination (e.g. mouse plus accelerators)
• Often options hierarchically grouped
– sensible grouping is needed
• Restricted form of full WIMP system

82
 Natural language
• Familiar to user
• speech recognition or typed natural language
• Problems
– vague
– ambiguous
– hard to do well!
• Solutions
– try to understand a subset
– pick on key words

83
 Query interfaces
• Question/answer interfaces
– user led through interaction via series of questions
– suitable for novice users but restricted functionality
– often used in information systems

• Query languages (e.g. SQL)

– used to retrieve information from database
– requires understanding of database structure and language syntax,
hence requires some expertise

84
 Form-fills
• Primarily for data entry or data retrieval
• Screen like paper form.
• Data put in relevant place
• Requires
– good design
– obvious correction
facilities

85
 Spreadsheets
• first spreadsheet VISICALC, followed by Lotus 1-2-3
MS Excel most common today

• sophisticated variation of form-filling.

– grid of cells contain a value or a formula
– formula can involve values of other cells
e.g. sum of all cells in this column
– user can enter and alter data spreadsheet maintains
consistency

86
 Point and click interfaces
• used in ..
– multimedia
– web browsers
– hypertext

• just click something!

– icons, text links or location on map

• minimal typing

87
 WIMP Interface
Windows
Icons
Menus
Pointers
… or windows, icons, mice, and pull-down menus!

• default style for majority of interactive computer systems,

especially PCs and desktop machines

88
 Three dimensional interfaces
• virtual reality
• ‘ordinary’ window systems
– highlighting
– visual affordance flat buttons …
– indiscriminate use
just confusing!
click me!
• 3D workspaces
– use for extra virtual space
… or sculptured
– light and shadow give depth
– distance effects

89
elements of the wimp interface

windows, icons, menus, pointers

+++
buttons, toolbars,
palettes, dialog boxes

also see supplementary material

90
on choosing wimp elements
 Windows
• Areas of the screen that behave as if they were independent
– can contain text or graphics
– can be moved or resized
– can overlap and obscure each other, or can be laid out next to one
another (tiled)

• scrollbars
– allow the user to move the contents of the window up and down or
from side to side
• title bars
– describe the name of the window

91
 Icons
• small picture or image
• represents some object in the interface
– often a window or action
• windows can be closed down (iconised)
– small representation of many accessible windows
• icons can be many and various
– highly stylized
– realistic representations.

92
 Pointers
• important component
– WIMP style relies on pointing and selecting things
• uses mouse, trackpad, joystick, trackball, cursor keys or
keyboard shortcuts
• wide variety of graphical images

93
 Menus

• Choice of operations or services offered on the screen

• Required option selected with pointer

File Edit Options Font

Typewriter
Screen
Times

problem – take a lot of screen space

solution – pop-up: menu appears when needed

94
 Kinds of Menus
• Menu Bar at top of screen (normally), menu drags down
– pull-down menu - mouse hold and drag down menu
– drop-down menu - mouse click reveals menu
– fall-down menus - mouse just moves over bar!

• Contextual menu is a drop-down menus that display a small set of

commands and options related to the current context.

• Contextual menu appears where you are

– pop-up menus - actions for selected object
– pie menus - arranged in a circle
• easier to select item (larger target area)
• quicker (same distance to any option)
… but not widely used!

95
 Menus extras
• Cascading menus (submenu) is secondary menu displayed on
demand from within a menu.
– Hierarchy menu structure
– menu selection opens new menu
– and so in ad infinitum

• Keyboard accelerators
– key combinations - same effect as menu item
– two kinds
• active when menu open – usually first letter
• active when menu closed – usually Ctrl + letter
usually different !!!

96
 Menu techniques

Leah Findlater and Krzysztof Z. Gajos, “Design Space and Evaluation Challenges of Adaptive Graphical User Interface”

97
 Menus design issues
• which kind to use
• what to include in menus at all
• words to use (action or description)
• how to group items
• choice of keyboard accelerators

98
 Menus design issues
Why Microsoft have changed the menu from dropdown menu to tabbed
menu? Think about it!

Tabbed menu
Dropdown
– Smart menu
– Split menu

99
 Buttons
• individual and isolated regions within a display that can be
selected to invoke an action

• Special kinds
– radio buttons
– set of mutually exclusive choices
– check boxes
– set of non-exclusive choices

100
 Toolbars
• long lines of icons …
… but what do they do?

• fast access to common actions

• often customizable:
– choose which toolbars to see
– choose what options are on it

101
 Dialogue boxes
• information windows that pop up to inform of an important
event or request information.

e.g: when saving a file, a dialogue box is displayed to allow

the user to specify the filename and location. Once the
file is saved, the box disappears.

102
 References
• HCIBook. “Human Computer Interaction”. ALAN DIX -3rd Edition

103