1. Dr. Shahzad Rasool
RESEARCH CENTER FOR MODELING & SIMULATION (RCMS)
Human Computer Interaction
CSE-868
Week 1 & 2. Introduction and HCI Principles
01–11 FEB 2022
2. Organization (1)
• Lecture:
– Time: Mon 04:00 pm – 05:00 pm Classroom 1
Wed 03:00 pm – 05:00 pm GP Lab
– Office hours: **** ****
• Notes/Script:
– Topic based:
• Books, tutorials, internet sources
• Lecture Notes Phillip Fu, Josh Bongard
• Reference Literature:
– Alan Dix et al., Human Computer Interaction, Pearson
– Jenny Preece, Yvonne Rogers, Helen Sharp, Interaction Design: Beyond
Human-Computer Interaction, Wiley
– Ben Shneiderman et al., Designing the User Interface: Strategies for
Effective Human-Computer Interaction (6th Ed.) Pearson
2
CSE-868
3. Organization (2)
• Grading:
– Assignments/Project ~10%
– Quizzes ~15%
– Mid Term ~20%
– Exam ~55%
• Feedback:
– Too fast ?
– Too slow?
– Email to shahzad.rasool@rcms.nust.edu.pk
3
CSE-868
4. Goal
• Course Objectives:
– To provide an understanding of the basics of human cognitive abilities
and limitations
– To introduce theories/principles, tools and techniques in HCI
– To develop an understanding of the fundamental aspects of designing
and evaluating interfaces and devices
– To help students learn to apply appropriate HCI techniques to design
systems that are usable by everyone
• Outcomes:
– The students should be able to apply HCI principles/techniques to new
problems through iterative design
4
CSE-868
5. Course Outline (Tentative)
Week Topics to be covered
1 Introduction – Interaction vs Interface
2 HCI Principles and the Human – Principles, Interpretation of human role in HCI, Human capabilities
3-4
PACT Analysis and Interaction Models – Mental models, Norman’s model - gulfs of execution and evaluation,
Interaction framework
5 Design Process – Types of data, Process, Research phase
6 Design Process – Design and Prototyping – Brainstorming, Personas, Scenarios, Types of prototypes and timeline
7
Design Process – Evaluation – Timeline, procedure, location, cognitive walkthrough, heuristic/predictive/empirical
evaluation
8-10
Interaction Devices – Interaction tasks, Pointing devices, Keyboards and text entry, Modalities of interaction and
input trends, Feedback – Display technologies, wearables
11 Interaction Styles – Direct manipulation – Invisible interfaces, 3D interfaces, Teleoperation
12-13
Interaction Styles – Fluid Navigation and Languages – Menu selection, Content organization, audio menus, Form
fill-in, speech recognition and production
14
Interaction through smell, taste and touch – Haptics perception and displays, Physiology and perception smell and
taste, Olfactory and gustatory interfaces
15 Brain computer interfaces – Capturing methods, Subtypes, ERPs and oscillatory processes, Challenges
16
Collaborative environments – Models of collaboration, Model of collaborative action (MoCA), Contexts and design
considerations
ESE
CSE-868 5
6. Sociology
What is Human Computer Interaction?
• Human-computer interaction is a discipline concerned with
the design, implementation and evaluation of interactive
computing systems for human use and with the study of
major phenomenon surrounding them
~ ACM SIGCHI
• Interdisciplinary area
CSE-868 6
Computer
Science
Design
Engineering
Artificial
Intelligence
Ergonomics
and Human
Factors
Robotics
Linguistics
Psychology
Many
more
7. The Human in HCI
• Basic Senses?
• Any other senses?
7
CSE-868
8. The Human in HCI
• Other attributes
• HCI involves the study, planning, design and uses of the
interaction between people (users) and computers
• Considerations
– Every element of human perception, interaction, experiences
CSE-868 8
Memory
Experience
Skills
Knowledge
9. The Computer in HCI
• What is a computer?
• Forms of interaction
– Human interacts with computer
– Computer responds to human
– Interaction with a task? Through the computer!
– Goal
• As little time and as high accuracy for task accomplishment
• Focus on task rather than focusing on interaction
– How to interact vs how to accomplish the task at hand
9
CSE-868
10. Interaction vs Interface
• Interaction
– Abstract model by which humans interact with the computing device
for a given task
• Interface
– Choice of technical realization (hardware or software) of such a given
interaction model
CSE-868 10
Ever made an online payment?
Think about what people
want to do, rather than
what technology can do
11. Example – Text Reader
• Finger Reader
– A finger worn device that assists the
visually impaired with effectively and
efficiently reading paper-printed text
– Real-time auditory and haptic feedback
• OrCam MyEye
– A wearable artificial vision device to assist
people who are visually impaired, or
have a reading disability
– Instantly reads printed and digital text
aloud, recognizes faces, products, and
money notes in real time
CSE-868 11
13. Why HCI?
• Why HCI?
– Effective interaction Usability
– Research investigate human perception, behavior, etc.
– Change behavior by providing a different interaction
• Between Humans and Computers
– Emphasis is not on interface (as in Interaction/UI Design course)
– Emphasis is on performing the task
• Basic idea of HCI
– Users use interfaces to accomplish some task
– Interfaces that are computational or computerized
13
CSE-868
14. HCI – A Brief History
• Until the late 1970s IT professionals and
dedicated hobbyists only humans who
interacted with computers
• Personal computers everyone became a
potential computer user
– deficiency in usability command line
• Graphics processing
• Pointing devices
• Smaller but more powerful microprocessors
• Ubiquitous computing (Pervasive Computing)
• Internet of Things (IoT)
CSE-868 14
15. What are we looking for?
User Experience (UX)
+ seamless integration into one’s lifestyle
Aesthetic appeal
Examples?
Looking for High usability
Easy to use interfaces, efficient, safe, correct task completion
Functional Completeness
Making the necessary functionalities available
CSE-868 15
17. Example – More wearable devices
CSE-868 17
Can you recognize these?
Google Glass
Magic Leap
Intel Vaunt
18. Why is HCI so … Complex?
• Good design is difficult simultaneous multiple objectives
– Types of users
– Characteristics of tasks
– Capabilities and cost of devices
– Lack of objective or exact quantitative evaluation measures
– Changing technologies
• Researchers/developers have established basic principles or
guidelines over the years
CSE-868 18
19. HCI Principles
• Determine user skills ‘Know thy user’
– Comprehensive information (e.g., age, gender, education level, social
status, computing experience, cultural background) about target users
• Determine the probable preferences, tendencies, capabilities (physical
and mental), and skill levels
• Properly model interaction and pick the right interface solution
– Ever heard of ‘user-centred design’?
– What about ‘Universal usability’?
• Understand the task
– Identifying the sequence and structure of subtasks appropriate for the
typical user within the larger application context
– Expert user model the task with detailed steps
– Casual user simplified subtasks
CSE-868 19
20. HCI Principles
• Reduce Memory Load
– Humans are more efficient in carrying out tasks that require less
memory burden, long or short term
• Capacity of the human’s short-term memory (STM) ~5–9 chunks of
information
• Light memory burden less erroneous behavior
• Example: Microsoft metro interface No. of menu items limited
– To maintain good user awareness of the ongoing task PLUS reminders and
status information continuously throughout the interaction
CSE-868 20
21. HCI Principles
• Strive for consistency
– One way to reduce memory load Consistency
• Both within an application and across different applications
• Both the interaction model and interface implementation
– If the same subtask is modelled differently for different interaction
steps confusion
– Same subtasks across different applications?
• Consistency and familiarity lead to higher acceptability and preference
CSE-868 21
22. HCI Principles
• Remind users and refresh their memory
– Give continuous reminders of important information and refresh
user’s memory
– Human memory dissipates information quite quickly when switching
tasks in multitasking situations
– Feedback should be informative whether momentary or continuous
– Ever bought anything online?
– Ever filed tax returns in Pakistan?
CSE-868 22
23. HCI Principles
• Prevent errors/action reversal
– High usability includes accuracy
– Interaction should be designed to avoid confusion and mental
overload
– Present/obtain only relevant information/action as required at a given
time
• Inactive menu items
• Choose from possibilities rather than direct text input
– Always a chance that the user will make mistakes
• Could you live without CTRL + Z?
CSE-868 23
24. HCI Principles
• Naturalness
– Interaction should be reflective of operations in our everyday life
– Natural Language Processing
– Model interaction ‘metaphorically’ to the real-life counterpart,
extracting the conceptual and abstract essence of the task
– Ever used a 3D modelling or visualization software?
• 3D rotations with 2D input device (mouse)?
• How much learning do you think it will
require?
CSE-868 24
26. Role of the Human in HCI
• Processor
– A sensory processor that takes input and produce output
• Not using information about how the information is processed
– Interface must fit within human limits
– Quantitative measurements for evaluation
CSE-868 26
27. Role of the Human in HCI
• Predictor
– Includes humans knowledge, experiences, expectations, thought
process
• Using information about how information
is being processed
– Predict what will happen in response to
actions map inputs to outputs
– Interface must fit with knowledge
• Help learn and leverage existing knowledge
– Qualitative evaluation methods in
controlled environments
CSE-868 27
28. Role of the Human in HCI
• Participant
– Using information about what is going on around the user
• Other tasks, interfaces, people they are interacting with
• Competing attention seekers, importance of current task with what else is
going on
– Interface must fit with the context
• Must be able to physically use the system
• Must know how to use the system
– Qualitative evaluation in actual environments
• Studies about the interface and the user in
real complete context
CSE-868 28
29. Model Human Processor
• A simplified view of human processing involved in interacting
with computer systems
• Three subsystems
– Perceptual system handling sensory stimulus from outside world
– Motor system controls actions
– Cognitive system provides the processing needed to connect
the two
• Each of these subsystems has its own processor and memory
CSE-868 29
Perceptual Interaction, Input, Sensory
Physical Interaction, Output
Conceptual Interaction
30. Example – Wii Remote
CSE-868 30
Sensor Bar
Physical interaction
Can sense three axes of
orientation; three directions of
acceleration.
Q: How could the remote
sense/calculate linear acceleration
or rotational orientation?
Perceptual interaction
Sound used for simulating the
shooting of an arrow from a bow
Sound of arrow unleashed is
made by a speaker on the
remote; a short time later, the TV
speakers make the sound of the
arrow hitting its target.
31. Human
• Information Exchange via input and output
channels
– Visual, auditory, haptic, movement
• Storage of information
– Short and long term memory
• Stored and exchanged information is
processed and applied
– Reasoning, problem solving, skill, error
• Emotion influences human capabilities
CSE-868 31
Influence of external factors e.g. Social and organizational environment
32. Human – Vision
• Physical reception of stimulus
– Light (inter-)reflects from objects and enters into eyes
– Retina contains rods for low light vision and cones for colour vision
– Images are focused upside-down on retina
– Ganglion cells detect pattern and
movement and generate
corresponding neural pulses
– Is the visual hardware perfect?
CSE-868 32
Photoreceptors
33. Human – Vision
• Processing/interpretation of stimulus
– Size and depth
• Visual angle indicates how much of view an object occupies
• Visual acuity is ability to perceive detail (limited)
• Familiar objects perceived as constant size (Despite different visual angles)
– Brightness Subjective reaction to levels of light
• Affected by luminance and measured by just noticeable difference
• Visual acuity increases with luminance as does flicker
– Colour
• Cones sensitive to colour wavelengths
– Compensation
• Movement and changes in luminance by visual system
• Ambiguity by using context
CSE-868 33
Why
are
they
important?
34. Human – Vision
• Process of reading
– 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
• Reading from a computer screen is slower than from a book
• Why is dark text used over bright backgrounds?
– Negative contrast improves reading from computer screen
CSE-868 34
35. Human – Audition
• 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 (Humans perceptual range ~20Hz to 15000Hz)
• Less accurate distinguishing high frequencies than low
– Loudness Amplitude
– Timbre Type or quality
• Auditory system filters sounds adapt to background noise
CSE-868 35
36. Human – Touch
• Provides important feedback about environment
• Stimulus received via receptors in the skin
– Thermoreceptors Heat and cold
– Nociceptors Pain
– Mechanoreceptors Pressure
• Rapidly adapting
• Slowly adapting
• Cutaneous vs Kinaesthetic feedback
• Some areas more sensitive than others e.g. fingers
– How to measure?
CSE-868 36
38. Human – Movement
• Time taken to respond to stimulus
reaction time + movement time
• Movement time dependent on physical characteristics
– Age, fitness etc.
• Reaction time – dependent on stimulus type
– Visual ~ 200 ms
– Auditory ~ 150 ms
– Pain ~ 700 ms
• Increasing reaction time decreases accuracy in the unskilled
operator but not in the skilled operator
CSE-868 38
39. Human – Movement
• How can we reduce movement time?
– Time taken to hit a target is a function of size of the target and
distance that has to be moved
• Fitts’ Law
𝑀𝑇 = 𝑎 + 𝑏 log2
𝑑𝑖𝑠𝑡𝑎𝑛𝑐𝑒
𝑠𝑖𝑧𝑒
+ 1
– 𝑎 and 𝑏 are empirically determined constants
• Smaller objects more difficult to manipulate
– Make objects larger
– Make distances between objects smaller
CSE-868 39
40. Human – Memory
• Knowledge of facts, actions, procedures, etc.
• Selection of stimulus being attended to
– Based on interest or level of arousal
CSE-868 40
Sensory
memory
Short term
memory
Long term
memory
Attention
Rehearsal
41. Human – Memory
• Sensory Memory
– Buffers for stimuli received through the senses
– For each sensory channel, sensory memory exists
• Iconic, echoic, haptic
– Selective focus on stimuli of interest
• Otherwise overload
– What happens to information received by sensory
memories?
• Quickly passed into a more permanent memory store
• Overwritten
• Lost
CSE-868 41
42. Human – Memory
• Short term memory
– ‘Scratch-pad’ for temporary recall
– Rapid access ~70 ms
– Rapid decay ~200 ms
– Capacity Limited to 5-9 chunks
– Try to remember this
265397620853
0121 414 2626
0320 1780931
090078601
CSE-868 42
Closure? Recency Effect?
43. Human – Memory
• Long term memory
– Everything that we know
– Capacity HUGE
– Slow access ~1/10 sec
– Slow decay
– Episodic memory
• Serial memory of events
– Semantic memory
• A structured record of facts, concepts and skills
– Information in semantic memory derived from that in our episodic
memory
CSE-868 43
44. Human – Memory
• How does the information get in there?
– 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
Faith Age Cold Quiet Logic Idea Value Past Large
Boat Tree Cat Child Rug Plate Church Gun Flame Head
CSE-868 44
45. Human – Memory
• How does it get out of there?
– Decay
• Information is lost gradually but very slowly
– Interference
• New information replaces old: retroactive interference
• Old may interfere with new: proactive inhibition
• Can we forget at all?
• Memory is selective …
– … affected by emotion – can subconsciously ‘choose’ to forget
CSE-868 45
46. Human – Memory
• How to access whatever is in there?
– 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
CSE-868 46
47. Human – Thinking
• Reasoning
– Process of drawing conclusions or infer something
new about domain of interest using existing
knowledge
• Problem Solving
– Process of finding a solution to an unfamiliar task using existing
knowledge
• Restructuring the problem
• Gaining insight into the problem
• Intermediate goals identification between initial state and goal state
• Analogical mapping: by mapping knowledge relating to a similar known
domain to the new problem
CSE-868 47
48. Human – Thinking – Reasoning
• Deductive
– 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 solely based on premises may not be true
• e.g. If it is raining then the ground is dry
It is raining
Therefore the ground is dry
– Often people bring world knowledge to base conclusion on both: given
information and truth
CSE-868 48
49. Human – Thinking – Reasoning
• Inductive
– Generalize from cases seen to cases unseen
• e.g. all elephants we have seen have trunks
therefore all elephants have trunks
– Unreliable … but useful!
• Can only prove false not true
– Humans not good at using negative evidence
• A trunk-less elephant would still not move us away from our positon
• Abductive
– Establishing causal relationships i.e. event to cause
– Unreliable
• Can lead to false explanations
• Ignores other possibilities
CSE-868 49
50. Human – 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 light of the whole situation we are in
• Emotion involves both cognitive and physical responses to
stimuli
CSE-868 50
51. Human – Emotion
• The biological response to physical stimuli is called affect
• Affect influences how we respond to situations
– Positive creative problem solving
– Negative narrow thinking
• 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
CSE-868 51
52. What about the Computer?
• Made of various elements each element affects interaction
– Input devices – text entry and pointing
– Output devices – screen (small & large), digital paper
– Virtual reality – special interaction and display devices
– Physical interaction – e.g. sound, haptic, bio-sensing
– Paper – as output (print) and input (scan)
– Memory – RAM & permanent media, capacity & access
– Processing – speed of processing, networks
CSE-868 52
what goes in and out
devices, paper,
sensors, etc.
what can it do?
memory, processing,
networks
53. A Typical Computer System
• Screen, or monitor, on which there are windows
• Keyboard
• Mouse/trackpad
• Variations
– Desktop
– Laptop
– Tablet
• Devices dictate the styles of interaction that system supports
– If we use different devices, then the interface will support a different
style of interaction
• Around us
– PC, TV, VCR, DVD, cable/satellite TV, microwave, washing machine,
security system, phone, camera, electronic car key, USB memory, etc.
CSE-868 53
54. Human Errors
• Errors in task performance (using the system to perform task)
– Some are trivial no more than temporary inconvenience or
annoyance
– Others may be more serious require substantial effort to correct
• Why?
– Stressed, distracted, failed understanding of the interface, flawed
understanding of user’s own goal
CSE-868 54
55. Human Errors
• Slip – When the user has the right mental model
– Understand system and goal
– Correct formulation of action
– Incorrect action
– Action based vs memory lapse
• Mistake – When the user has the wrong mental model
– May not even have right goal!
– Rule based, Knowledge based and Memory lapse
• Fixing things?
– Slip – better interface design
– Mistake – better understanding of system
CSE-868 55