HUMAN COMPUTER INTERACTION

LECTURE 1
Recommended Resources
 Text book
 Human Computer Interaction, A. Dix et al., 3rd edition, Pearson
Education,
 Other
 Designing Interactive Systems: A comprehensive guide to HCI,
UX and interaction design, D. Benyon, 3rd edition, Pearson
Education, 2013.
 Designing the User Interface: Strategies for Effective Human-
Computer Interaction, B. Shneiderman et al., 5th edition, Pearson
Education, 2009.
 The essence of human computer interaction, C. Faulkner, 1 st Ed.
 The design of everyday things, D. Norman, 2 nd Ed.
 http://hcibib.org/

2
Outline
 Introduction to HCI
 Alarm Clock Example
 Dos time versus software application
 Don Norman’s Door Example
 The human
 Information i/o …
 visual,
 auditory,

 haptic,

 movement

3
Introduction to HCI
 HCI refers to the study of the interaction between people
(users) and computers. This encompasses
understanding how users interact with technology, the
interfaces they use, and the overall user experience.

 Focus on Effective Interfaces

 how important it is to consider today's technology and tools
when designing interfaces. It also need to make interfaces not
just work well but also be really good and easy for people to
use.

4
Scope of HCI
 Design
 This involves creating interfaces and interactive systems that
are intuitive, efficient, and user-friendly.
 Implementation
 HCI involves the practical implementation of interactive
computing systems, translating design concepts into functioning
software or hardware.
 Evaluation
 HCI includes methods for assessing and testing interfaces to
ensure they meet user needs and expectations.

5
Goals of HCI
 Useful
 Accomplish what is required
 Play music, cook dinner, format a document
 Usable
 Do it easily and naturally
 Without danger of error
 Used
 Make people want to use it
 Be attractive, engaging, fun
6
Example -Alarm Clock
 In HCI, the design of everyday
objects like alarm clocks can
demonstrate principles of
usability. An alarm clock with
intuitive controls, clear display,
and easily accessible snooze
and stop buttons exemplifies
good design.
 Conversely, a poorly designed
alarm clock with confusing
buttons or a complicated
interface frustrates users. This
example highlights the
importance of designing
interfaces that are user-friendly
and easy to understand. 7
Smart Phone Clock

8
Example -DOS TIME
 DOS Time versus Software Application
 This example contrasts the command-line interface of
DOS (Disk Operating System) with modern software
applications featuring graphical user interfaces (GUIs).
DOS required users to input commands through text-
based interfaces, whereas GUIs allow users to interact
with applications using visual elements such as icons,
menus, and buttons. The evolution from DOS to GUIs
signifies a shift towards more intuitive and user-friendly
interfaces, improving the overall user experience.

9
DOS TIME

10
Why Study HCI – Software Perspective

11
Don Norman’s Concept
 Don Norman is a  Affordances
cognitive scientist and  Affordances are the
usability engineer who qualities of an object
has made significant that suggest how it can
contributions to the field be used.
of design and Human-
Computer Interaction
 Signifiers
(HCI).  Signifiers are the cues
 One of his most famous or indicators in a
design that
contributions is the
communicate the
concept of "affordances"
available actions or
and "signifiers" in design.
functions.
12
Don Norman’s Concept
 Affordances  Signifiers
 For example, a button  These could be visual
affords pressing, a cues like buttons,
handle affords pulling, icons, or labels, or
and a screen affords auditory cues like
touching. beeps or tones.

13
Don Norman’s Door Example
 "The Design of Everyday
Things" emphasizes the
importance of intuitive design
to make products easy to use
without the need for manuals.

 BTW what is wrong with the

kettle on the book cover?
 The kettle on the book cover
symbolizes poor design,
particularly in its handle,
highlighting the consequences
of disregarding user-centered
design principles.

14
Don Norman’s Door Example

A plate naturally says “ push me” and a handle

naturally says “pull me “ 15
Don Norman’s Door Example

When Don Norman’s

advice is not
followed

16
The human -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
 This refers to the eye, which serves as the primary
organ for receiving light. Light enters the eye
through the cornea and passes through the pupil.
The lens of the eye focuses the light onto the
retina, where photoreceptor cells convert the light
energy into electrical signals that can be
interpreted by the brain.
The Eye - physical reception
 Light reflects from objects
 Objects in the environment reflect light in
various wavelengths. This reflected light is
what enters the eye and allows us to perceive
our surroundings visually.
The Eye - physical reception
 Images are focused upside-down on retina
 When light enters the eye, it is refracted by
the cornea and lens to form an inverted image
on the retina. Despite this inversion, the brain
processes the visual information in a way that
allows us to perceive the world right-side-up.
The Eye - physical reception
 Retina contains rods for low light vision
and cones for colour vision
 The retina contains two types of
photoreceptor cells: rods and cones. Rods are
highly sensitive to low levels of light and are
responsible for night vision and detecting
motion. Cones are responsible for color vision
and function best under normal lighting
conditions.
The Eye - physical reception
 Ganglion cells (brain!) detect pattern and
movement
 Ganglion cells in the retina receive signals from
rods and cones and transmit this visual information
to the brain via the optic nerve. These cells play a
crucial role in detecting patterns, shapes, and
movements in the visual field, which are then
processed and interpreted by various regions of
the brain responsible for visual perception.
Interpreting the signal
 Size and depth perception
 Size and depth perception are crucial aspects
of visual perception that help individuals
understand and interact with their
environment effectively.
Interpreting the signal
 Size and depth perception
 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
(the way we see how big something is and how far away it is can be
tricked by certain visual clues.)
Interpreting the signal (cont)
 Brightness
 subjective reaction to levels of light
(How bright something appears to us depends on our personal perception of
light levels.)
 affected by luminance of object
(The brightness of an object is influenced by how much light it reflects or
emits.)
 measured by just noticeable difference
(Scientists use this concept to measure how much a change in brightness
needs to be for a person to notice it.)
 visual acuity increases with luminance as does flicker
(Our ability to see detail (visual acuity) improves in brighter light, and flickering
light sources become less noticeable.)
Interpreting the signal (cont)
 Colour
 made up of hue (the specific shade), intensity (how bright or dull
it is), and saturation (how pure the color appears).
 cones sensitive to colour wavelengths
 blue acuity is lowest
 8% males and 1% females colour blind
Interpreting the signal (cont)
 The visual system compensates for:
 movement
 changes in luminance.

 Context is used to resolve ambiguity

 Optical illusions sometimes occur due to

over compensation
Optical Illusions

the Ponzo illusion the Muller Lyer illusion

Reading
 Several stages:
 visual pattern perceived
 decoded using internal representation of language
 interpreted using knowledge of syntax, semantics, pragmatics

 Reading involves saccades and fixations

 Perception occurs during fixations
 Word shape is important to recognition
 Negative contrast improves reading from computer
screen
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
Hearing (cont)
 Humans can hear frequencies from 20Hz to 15kHz
 less accurate distinguishing high frequencies than low.

 Auditory system filters sounds

 can attend to sounds over background noise.
 for example, the party phenomenon.
Touch/Haptic
 Provides important feedback about environment.
 May be key sense for someone who is visually impaired.
 Stimulus received via receptors in the skin:
 Thermo-receptors – heat and cold
 nociceptors – pain
 mechanoreceptors – pressure
(some instant, some continuous)
 Some areas more sensitive than others e.g. fingers.
 Kinesthesis - 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
Fitts law
 Fitts law is useful for web designers when
deciding where to place the next button
 Call to Action Buttons , links and other buttons can
be strategically placed on websites/apps to
increase the chance of clicking. Not only do you
want to direct traffic to the right places, but users
need to a have a simple and easy experience.
Notice how the windows start button almost
doubled in size?

35
Summary
 Today we learnt about,
 Basics of Human Computer Interaction
 Alarm Clock Example
 Dos time versus software application

 Don Norman’s Door Example

 The human
 Information i/o …
 visual,
 auditory,

 haptic,

 movement

36