HUMAN COMPUTER INTERACTION

LECTURE 1
Course Profile
Credit Hours: 03

Evaluation Criteria

Assignments 05%
Presentation 05%
Quiz 10%
Mid term 30%
Final exam 50%

Federal Urdu University of Arts, Sciences & Technology, Islamabad 2

Course Learning Outcomes

Upon completion of the course, students will be able to:

 Explain human factors of HCI including human body physical
abilities, ergonomics, accessibility, health issues, cognitive load
and psychology.
 Explain hardware factors of HCI including different input and
output devices e.g. keyboard, mouse, and touchscreen.
 Understand different key elements from which user interfaces are
constructed.
 Implement user-centered approach in software development
process and apply suitable techniques for collecting user
requirement and analyzing task.
 Evaluate and compare user interfaces using different techniques
such as laboratory experiments and expert reviews.

3
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/

4
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

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
What is HCI?
• Interaction
OR
• Relationship between user and
computer

Federal Urdu University of Arts, Sciences & Technology, Islamabad 7

What is HCI?
 Human

The end user of the program

 Computer

The machine where program runs on

 Interaction

The user tells the computer what they want

The computer communicate the results

8
What is HCI?
 Human-computer interaction (HCI) is the field of study that focuses
on improving how users and computers interact by designing
interactive computer interfaces that satisfy users’ needs.

 It is a multidisciplinary subject covering computer science,

behavioral sciences, cognitive science, ergonomics, psychology,
and design principles

9
What is HCI?
Broader than just the design of the interface
Concerned with all those aspects that relate to the
interaction between users & computers

“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”

10
What is HCI?
 The emergence of HCI dates back to the 1980s, when
personal computing was on the rise.
 It was when desktop computers started appearing in
households and corporate offices.
 HCI’s journey began with video games, word processors,
and numerical units.

11
Human Computer Interaction
 HCI Terms interchangeably used:
 HCI (Human Computer Interaction)
 CHI (Computer Human Interaction)
 MMI (Man Machine Interaction)
 HMI (Human Machine Interaction)
 Interaction and Interface words:
Interchangeably used
12
User Interface
 Part of a software program that allows
- User to interact with the computer
- User to carry out their task

 Those aspects of the system that the user

comes in contact with
- an input language for the user
- an output language for the machine
- a protocol for the interaction

13
User Interface
 User interface is the medium through
which user interacts with the software

 “The user interface of a system is often the

yardstick by which that system is judged”

14
User Interface
 User interface is the medium through
which user interacts with the software

 “The user interface of a system is often the

measure by which that system is judged”

15
Example of DOS (Disk Operating
System) User Interface
 DOS interface
 A disk operating system doesn't have a graphical user interface (GUI).
 Its interface is character-based
 Users must type commands in the command line to indicate what actions
they want to perform by system

16
Graphical User Interface
• The GUI, graphical user interface, is a form of user interface that allows
users to interact with electronic devices through
• Graphical Icons

17
Human Computer Interaction
 People use computers because they want
to
write papers
communicate with people
design bridges
maintain their balances …

 Whatever they are doing, the computer is

an enabling device that can help them to
do it

18
Human Computer Interaction
 For Computer (based systems) to be
widely accepted and used effectively
 They need to be well designed ?
 Should be designed for the needs &
capabilities of the people for whom they
are intended
19
Interaction Design
 “Designing interactive products to support people
in their everyday and working lives”
People Use Computers to do work (task)
- Usefulness
whether the system can be used to achieve some desired
goal
- Utility
functionality of the system in principle can do what is
needed
- Usability
How well users can use that functionality

20
Alarm Clock

21
DOS TIME

22
Why Study HCI – Software Perspective

23
Smart Phone Clock

24
Don Norman’s Door Example
 A classic book. Read it!
 I will share its pdf soon
 Main Point: no one
reads manuals, so
things should be
designed so that
manuals are not
needed
 BTW what is wrong
with the kettle on the
book cover?
25
Don Norman’s Door Example

A plate naturally says “ push me” and a handle

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

When Don Norman’s

advice is not
followed

27
Vision
Two stages in vision

• physical reception of stimulus

• processing and interpretation of stimulus

28
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

29
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

30
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, intensity, saturation
 cones sensitive to colour wavelengths
 blue acuity is lowest
 8% males and 1% females colour blind

31
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

32
Optical Illusions

the Ponzo illusion the Muller Lyer illusion

33
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

34
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

35
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.

36
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.

37
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.

38
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

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

40
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

41