Credit Hours 3

Pre-requisite(s) ---

Post-requisite ---

Course Type Elective for BSCS

Course Duration 16 Weeks

Weekly tuition pattern 2 Lectures (90 Minutes each)

Presentation and use of white Board for lecturer, Class

Activities and homework/project, Assignments and
Course Structure Quizzes

Course Style The course will be delivered in classroom environment.

Web Link

Instructor Abdul Ghaffar

Text Book:
Book 1: Human-Computer Interaction by Alan Dix, Janet E. Finlay,
Gregory D. Abowd, Russell Beale, Prentice Hall; 3rd Edition (December
20, 2003). ISBN-10: 0130461091

Other Resources:
• Book 2: Human-Computer Interaction: Concepts And Design by J.
Preece, Y. Rogers, H. Sharp, D. Benyon, S. Holland, T. Carey,
Addison Wesley; 1st Edition (April 30, 1994). ISBN-10: 0201627698.
• Book 3: Human-Computer Interaction Handbook: Fundamentals,
Evolving Technologies, and Emerging Applications by Julie A. Jacko,
CRC Press; 3 Edition (May 4, 2012). ISBN-10: 1439829438
• Book 4: Interaction Design: Beyond Human - Computer Interaction
by Yvonne Rogers, Helen Sharp, and Jenny Preece, Wiley; 3rd Edition
(June 15, 2011). ISBN-10: 0470665769
• Book 5: Designing with the Mind in Mind: Simple Guide to
Understanding User Interface Design Rules by Jeff Johnson, Morgan
Kaufmann; 1st Edition (June 3, 2010). ISBN-10: 012375030X.
 Tentative Grading Distribution and Policy
Criteria Weightage Policy

Semester project 10 % At least 4, including semester project/report (if any)

which is group activity requiring students to submit a
proposal, progress/final report along with a
presentation of the work.
Submission of assignments as modified versions of
other’s work as your own will be considered as
cheating.
All assignments are required to be submitted at the
beginning of the class sessions when they are due.
All assignments may be handed back during
scheduled classes.

Assignments 10 % 4 Assignments (no retakes)

Quizzes 10 % 4 Quizzes
Mid Term Examination 30 % Comprises of course contents covered in class

Final Term Examination 40 % Comprises of course contents covered in class

Human Computer Interaction
 What is HCI

HCI is a study about how people interact with

technology?

We design human-centered systems that people

find useful, simple and accessible.
 Why should you take this class
• Why are things so hard to use these days?
• Why doesn’t this thing I just bought work?
• Why is this website so hard to use
• Why are users not liking my design?
• Why is my app not getting popular?

-These are frustrations that we have all faced

from systems not designed with people in mind.
-Therefore the purpose of this course, how can
chapter 1

the human
Human Information Processing System

Information comes in, store and process,

and information is passed out.

Input-Output -- Memory -- Processing

the human

• Information i/o
– haptic(touch), visual, tast, smell, auditory
• Information stored in memory
– sensory, short-term, long-term
• Information processed and applied
– reasoning, problem solving, skill, error
the human

• Information i/o
– visual
– physical reception of stimulus
– processing and interpretation of stimulus
Fixate on the dot in the center

To attain attention, its better to flash information

For effective visual effects size and depth, brightness and
color are important.
the human
• Information i/o
– visual (size and depth)
How eye perceive size and depth and relative distance?

The size of an object is specified as a visual angle

the human
• Information i/o
– visual (size and depth)
Objects of the same size at different distance have
different visual angle.

Objects of different size and different distance may have the

same visual angle
the human

• Information i/o
– Visual (color)
Color is made up of three components: hue,
intensity, and saturation.
• Hue: (Spectrum of Blue/Yello/Red)
• Intensity/value: (lightness/darkness of the
color)
• Saturation:(Whiteness in color)
the human

• Information i/o
– Visual (brightness)
• subjective reaction to levels of light
• affected by luminance of object
• visual acuity increases with luminance
the human

• Information i/o
– visual ambiguity/illusion
 Humans are limited in their visual capacity to process
information.
• Optical illusions highlight the differences between the
way things are and the way we perceive them – and in
interface design we need to be aware that we will not
always perceive things exactly as they are.

• Optical illusions sometimes occur due to over

compensation.
Context (ambiguous shape)

Context is used to resolve ambiguity

Context
Context
Overcompensation

the Muller Lyer illusion

Overcompensation
Reading Illusion
Reading

 Average Reading Speed: 250 words per minutes.

 Reading speed is a measure of legibility (clear view)
 Word shape is important
 Font size 9-12
 Line length 2.3” to 5.2”
the human

• Information i/o
– Hearing
• Vision begins with light, hearing begins with
vibrations in the air or sound waves
• Provides information about environment
distances, directions, objects etc.

Sound Properties
Pitch: (sound frequency)
Loudness: (amplitude)
Timbre (sound type or quality)
Human can hear frequency of 20Hz to 15kHz
Filters sounds (cocktail party phenomenon)
the human

• Information i/o
– Touch (haptic Perception)
• Provides feedback about environment
• Body Senses receive external input and process
to brain using motor control
• Stimulus received via receptors in the skin
- Thermoreceptors (heat and cold)
– Nociceptors (pain)
– Mechanoreceptors (pressure)
Kinesthesis (body position)
– affects comfort and performance
• Virtual Reality

Photo: Mauricio Alejo

the human

• Information i/o
– Movement
• Provides feedback about environment
• Time taken to respond to stimulus
– reaction time + movement time
– movement time depends on age, fitness etc.
– reaction time dependent on stimulus type
» visual ~ 200ms
» auditory ~ 150ms
» pain ~ 700ms

• reaction time depends on speed and accuracy in

operators ?
the human

• Memory
the human

• Memory
– Sensory
• Buffers for stimuli received through senses
– iconic memory: visual stimuli (available for
0.5 sec)
– echoic memory: aural stimuli (sound
reception from both ears)
– haptic memory: tactile stimuli
• Examples
– “sparkler” trail
– stereo sound
• Continuously overwritten
the human
• Memory
– Short-term
• Used to store information, which is only required
fleetingly (briefly). Calculate 35*6
• Scratch-pad for temporary recall
– rapid access ~ 70ms
– rapid decay ~ 200ms
– limited capacity - 7± 2 digits
– Fleeting

Photo: Mauricio Alejo

the human

• Memory
– Short-term
• Example

212348278493202

0121 414 2626

HEC ATR ANU PTH ETR EET

the human

• Memory
– Long-term
• 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
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
the human

• Thinking
– Reasoning
• use knowledge to draw conclusions
• deduction
• induction
• abduction
the human

• Thinking
– 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
the human

• Thinking
– Reasoning
• Induction
– generalize from cases seen to cases unseen

e.g. all elephants we have seen have trunks

therefore all elephants have trunks.

– Unreliable but useful

– Humans not good at using negative evidence

e.g. Wason's cards.

the human

• Thinking
– Reasoning
• Abduction
– 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

the human

• Thinking
– Problem solving
• Process of finding solution to unfamiliar task
using knowledge
• Gestalt theory
• Problem space theory
the human

• Thinking
– 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
the human

• Thinking
– Errors

• Slips
– right intention, but failed to do it right
– causes: poor physical skill, inattention etc.

• Mistakes
– wrong intention
– cause: incorrect understanding
the human

• Emotion
– involves both cognitive and physical
responses to stimuli
– Affect
• The biological response to physical stimuli
• 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)
the human

• 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?