Unit-1 Foundation of HCI
Session-I
• Principles of Human Computer Interaction
• I/O Channels

What is HCI?
• Human-computer interaction (HCI) is a
multidisciplinary field of study focusing on
the design of computer technology and, in
particular, the interaction between humans
(the users) and computers.
• HCI is about designing computer systems
that support people so that they can carry
out their activities productively and safely.

HCI
• An Academic Discipline
• Studying people interacting with (computer)
technology
• A Design Discipline
• Design interventions for systems involving
people and technology

Why HCI is important?
“As interaction designers, we need to remember that it is
not about the interface, it’s about what people want to
do. To come up with great designs, you need to know who
those people are and what they are really trying to
accomplish.”
~ Cordell Ratzlaff, Designing Interactions, 2007.

HCI
HCI is a broad field which overlaps with
areas such as user-centered design
(UCD), user interface (UI) design and user
experience (UX) design. In many ways, HCI
was the forerunner to UX design.
HCI UX Design

HCI and UX
• HCI – academically focussed and involved in scientific
research and developing empirical understandings of
users.
• UX - invariably industry-focused and involved in
building products or services—e.g., smartphone apps
and websites.
• User-centered design (UCD) - iterative design process
in which designers focus on the users and their needs
in each phase of the design process.
• In user-centered design, designers use a mixture
of investigative methods and tools (e.g., surveys and
interviews) and generative ones (e.g., brainstorming)
to develop an understanding of user needs.

HCI and UX
• User interface (UI) design is the process designers use
to build interfaces in software or computerized
devices, focusing on looks or style. Designers aim to
create interfaces which users find easy to use and
pleasurable.
• User experience (UX) design is the process design
teams use to create products that provide meaningful
and relevant experiences to users. This involves the
design of the entire process of acquiring and
integrating the product, including aspects of branding,
design, usability and function.

Technological change :
different design needs
• For computer to be widely accepted and used effectively
they need to be well designed.
• Computers should be designed for the needs and
capabilities of the people for whom they are intended.
• The designer should think beyond merely what
capabilities the system should have.
• The designer needs to consider the interaction that
goes on between users and a computer system.

• It means:
• An input language for user
• An output language for the machine
• A protocol for interaction
• In 1970s, a new term for user interface –
• Man-Machine Interaction. Moran defined as ‘those
aspects of the system that the users comes in
contact with’

• The term Human-Computer Interaction was adopted
in 1980s – describing the new field of study.
• It concerns not just the interface design but all
aspects that relate to the interaction between
humans and computers.

• Two key principles that help to ensure good HCI:
(Donald Norman,1988)
• Visibility
• Affordance
• Visibility – range in which we can see clearly in any
conditions
• Affordance – the design suggest their functionality

Interaction must be easy and
understanding
Usable, effective and safe
systems
Enhance Quality and
Efficiency
Technology easier to learn
and use
Understand users
(processes and capabilities)
Understand what the
computer can do for Users
Understand the User’s task
Best Communication
Goals of HCI

Goals of HCI
• Provide an understanding of both the human
user and the computer system, means the
interaction must be easy and satisfying.
• To produce usable, effective, efficient and safe
systems as well as functional systems.
• Enhance the quality and efficiency of
interaction between human and computers
• To make technology easier to learn and use.

Goals of HCI
• To understand users, it is necessary to
understand the processes, capabilities and
predilections that they might bring to the tasks
they perform.
• To understand what the computer can do for
users and how it might best communicate with
them.
• To understand the user’s task and how it might
best be accomplished using the computer
system.

Evolution of HCI
• Electronic computers first appeared in the 1950s and
60s – extremely expensive
• Things began to change in the late 1970s and early 80s
– the size became smaller and cheaper
• In 1981 –first IBM Personal Computer - costs less and
more purchase.
NEW PHENOMENON
Non-experts began
using computers

Evolution of HCI
• For this group of people,
• computers were similar to cars and telephone –
like a tool to assist them in their work.
• knowledge of a computer’s internal workings
was not interesting. They want to use it.
• Because of this trend, the computer and software
manufacturer started considering the benefits of
creating products that were user- friendly.

Importance of HCI
• Computers are now widely used by people who may be
experts in their particular field, but they are not computer
experts.
• This means that systems have to be user friendly.
• The cost of software is high and the competitive edge is
more difficult to achieve.
• The interface to a system might give it this edge.
• The cost to train users is high
• A system which is easy and natural to use will save money in
the long run, since the training time will be kept to a minimum.
• The cost of human error can be high
• Systems that are transparent ought to reduce the likelihood of
error or to aid error recovery.

Components of HCI
Add your detail text
here
Computer
Technology ranging
from the general
desktop computer to
a large-scale
computer system
Interaction
Any communication
between user and
computer
User
Dealing with some
part of the task or
process to be done
using technology

The Human (The User)
• Individual User
• Group of Users working together
• Sequence of Users in an Organization
• The users are dealing with some part of the task or
process.
• The user is whoever trying to get the job done using the
technology.
• The one whom computer systems designed to assist.

Model-Human-Processor (1983)
• Described by Card, Norman and Newell
• Simplified view of the human processing involved
in interacting with computer systems
• Comprises 3 sub systems
• Perceptual System
• Motor System
• Cognitive System

Model-Human-Processor
• The perceptual system - handling
sensory stimulus from the outside
world
• The motor system – controls actions
• The cognitive system - provides the
processing needed to connect the two.

Input – Output Channels
• Input and Output
• A person’s interaction with the outside world occurs
through information being received and sent

• Output Channels
• Motor control of the effectors
• Input Channels
• Senses
• Senses
• Sight
• Hearing
• Touch
• Taste
• Smell

• Output Channels
• Motor control of the effectors
• Input Channels
• Senses
• Senses
• Sight
• Hearing Role in HCI
• Touch
• Taste
• Smell

• Effectors
• Limbs
• Fingers – major role (typing or mouse
control)
• Eyes
• Head
• Vocal System

• PC with mouse and keyboard
• GUI with menus, icons and windows
• Receive information
• Sight (primarily what appears on the
screen)
• Ear (Computer may ‘beep’ to draw
attention)
• Touch (orientation of the mouse)
• Finally, information is sent by using
Touch

Vision
• Primary source of information
• highly complex activity with a range of physical and
perceptual limitations
Visual Perception
Physical
reception from
the outside world
Processing and
interpretation of
that stimulus

Vision
• The physical properties of the eye and the visual system
mean that there are certain things that cannot be seen by
the human;
• The interpretative capabilities of visual processing allow
images to be constructed from incomplete information.
• We need to understand both stages as both influence what
can and cannot be perceived visually by a human being,
which in turn directly affects the way that we design
computer systems.

Vision – The Eye
• Eye - receives light and transforms it to
electrical energy and then transmitted to the
brain.
• Components of Eye
• Cornea
• Lens
• Retina
• Rods
• Cones

Vision – The Eye
• Light passes through the front of the eye (cornea) to
the lens.
• The cornea and the lens help to focus the light rays onto the
back of the eye (retina).
• The cells in the retina absorb and convert the light to
electrochemical impulses which are transferred along the
optic nerve and then to the brain.

Vision – The Eye
Rods Cones
• Second type of receptor
• Less sensitive to light
• Tolerate more light
• 6 million cones per eye
• Allows colour vision
• 3 types of cones according
to the wavelength of the
light (blue, red and green)
• First type of receptor
• Highly sensitive to light
• Doesn’t tolerate more
light
• 120 million rods per eye
• Dominate peripheral
vision
• Temporary blindness

Vision – The Eye
• Blind Spot
• Optic nerve enters the eye
• No Rods or Cones
• Fovea
• small area of the retina on which images are fixated.
• Ganglion cells
• X cells
• concentrated in the fovea
• Early detection of pattern
• Y cells
• widely distributed in the retina
• Early detection of movement

Visual Perception
• Perceiving size and depth
• Visual Angle
• Visual Acuity
• Perceiving brightness
• Luminance
• Perceiving colour
• Hue
• Intensity
• Saturation

Perceiving Colour
• Hue
• Spectral wavelength of the light
• Blues – short wavelengths
• Green – medium wavelengths
• Red – Long wavelengths
• 150 different hues – average person
• Intensity
• Brightness of the colour
• Saturation
• whiteness in the colour

Limitations and processing
of visual processing
• Visual processing compensates for the movement of
the image on the retina which occurs as we move
around and as the object which we see moves.

Visual Perception
ABC 12 13 14

Hearing
• The auditory system can convey a lot of information
about our environment.
• Hearing begins with vibrations in the air or sound
waves.
• The ear receives these vibrations and transmits them,
through various stages, to the auditory nerves.

Components of Ear
Middle Ear
Small cavity connected to the outer
ear by the tympanic membrane
Outer Ear
• VisiblepartoftheEar
• Air–filled
• Protectstheinnerpartoftheear
Inner Ear
• Pass along the auditory canal
• Transmit the vibrations to cochlea

Hearing – Outer Ear
• Outer Ear – air filled
• Visible part of the ear
• protects the sensitive middle ear from damage
• Two parts serve to amplify sounds :
• Pinna
• Auditory Canal
• Pinna
• structure that is attached to the sides of the head
• Auditory Canal
• sound waves are passed to the middle ear
• Contains wax which prevents dust, dirt and over-
inquisitive insects reaching the middle ear

Hearing – Middle Ear
• Middle Ear – air filled
• Small cavity connected to the outer ear by the tympanic
membrane
• And to the inner ear by cochlea
• Ossicles – smallest bone in the body

Hearing – Inner Ear
• Inner ear is filled with denser cochlean liquid
• Sound waves pass along the auditory canal and vibrate the
ear drum which in turn vibrates the ossicles, which transmit
the vibrations to the cochlea, and so into the inner ear.
• If passed directly from the air to the liquid, the transmission
of the sound waves would be poor. By transmitting them via
the ossicles the sound waves are concentrated and amplified.
• The waves are passed into the liquid-filled cochlea in
the inner ear.
• Within the cochlea are delicate hair cells or cilia that
bend because of the vibrations in the cochlean liquid
and release a chemical transmitter which causes
impulses in the auditory nerve.

Processing Sound
• Sound is changes or vibrations in air pressure
• The human ear can hear frequencies from about 20 Hz
to 15 kHz.
• Pitch is the frequency of the sound.
• A low frequency produces a low pitch
• A high frequency produces a high pitch.
• Loudness is proportional to the amplitude of the sound;
the frequency remains constant.
• Timbre relates to the type of the sound:

Sound
1
2
3
P i t c h
F req u en cy
of th e
s ou n d .
L o u d n e s s
proportional to
the amplitude of
the sound
T i m b r e
Type of
the
sound

Touch (Haptic Perception)
• Touch provides us with vital information about our
environment.
• The apparatus of touch differs from that of sight and
hearing in that it is not localized. We receive stimuli
through the skin.
• The skin contains three types of sensory receptor:
• Thermoreceptors – heat and cold
• Nociceptors – intense pressure, heat and pain
• Mechanoreceptors – pressure

Mechanoreceptors
• Rapidly adapting mechanoreceptors
• respond to immediate pressure as the skin is indented
• react more quickly with increased pressure
• stop responding if continuous pressure is applied
• Slowly adapting mechanoreceptors
• respond to continuously applied pressure.

Two-point Threshold Test
• Some areas of the body have greater sensitivity or
acuity than others
• To measure the acuity of different areas of the body

Kinesthesis
• Awareness of the position of the body and limbs, which
is due to receptors in the joints
• Three types
• Rapidly adapting - respond when a limb is moved in a
particular direction
• Slowly adapting -respond to both movement and static
position
• Positional receptors - respond when a limb is in a static
position
• For example, for a touch typist, awareness of the
relative positions of the fingers and feedback from
the keyboard are very important.

Movement
• A simple action such as hitting a button in response to
a question involves a number of processing stages.
• The stimulus (of the question) is received through the
sensory receptors and transmitted to the brain. The
question is processed and a valid response generated.
The brain then tells the appropriate muscles to
respond.
• Each of these stage takes time, which is divided into:
Reaction Time – varies according to the sensory channel
through which the stimulus is received.
Movement Time – physical characteristics of the subjects
(age and fitness)

Definition
• Memory is our ability to encode, store, retain and
subsequently recall information and past experiences
in the human brain.
• It can be thought of in general terms as the use of past
experience to affect or influence current behavior.

Structure of memory
• Much of our day-to-day activities rely on memory.
• Apart from storing information, it contains our knowledge of
actions or procedures.

Stroop effect
Do not read the words, but say the color the word is printed in.

Sensory Memory
• buffers for stimuli received through the senses
• exists for each sensory channel
iconic memory for visual stimuli
echoic memory for aural stimuli
haptic memory for touch
 Iconic Memory : Ability to taken in via the visual
system (eg. Moving a finger in front of the eye)
Echoic Memory : Ability to ascertain the direction from
which a sound originates

Short-term Memory
• acts as a ‘scratch-pad’ for temporary recall of
information.
• It is used to store information which is only required
fleetingly.
• It can be accessed rapidly, in the order of 70 ms.
• It also decays rapidly, meaning that information can
only be held there temporarily, in the order of 200 ms.
Measuring
memory
capacity
Length of a sequence
which can be
remembered in order
Items to be freely
recalled in any
order

Closure
• First measure
• 265397620853
• 44 113 245 8920 (chunks)
• The successful formation of a chunk is known as
closure.
HEC ATR ANU PTH ETR EET
• In experiments where subjects were able to recall
words freely, evidence shows that recall of the last
words presented is better than recall of those in the
middle. This is known as the recency effect.

Long-term memory
• Long-term memory is our main resource.
• Here we store factual information, experiential
knowledge, procedural rules of behavior – in fact,
everything that we ‘know’.
• Differences
• Huge, not unlimited
• Slow access time
• Forgetting occurs more slowly

Long Term Memory
Types
Episodic Memory Semantic Memory

References
What is HCI?
NPTEL video link-
https://www.youtube.com/watch?v=q81KXc54Ozs
&list=PLxtKZf9nLWO3d2a6M8l2BU8WTJKzHC4HJ
Introduction to Human ComputerInteraction
NPTEL video link-
https://www.youtube.com/watch?v=HSSFVBWFiLg&lis
t=PLxtKZf9nLWO3d2a6M8l2BU8WTJKzHC4HJ&index
=2

Human computer interaction -Input output channel