Introduction To HCI: BITS F364, 2021-2022 Sem II

Introduction to HCI
BITS F364, 2021- 2022 Sem II

Human-Computer Interaction
“a discipline that is concerned with the design, evaluation, and

implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them”
- ACM
2
● Example systems
○ Smartphone
○ Smartwatch
○ Home Appliance UI
○ Car
○ Web UIs
○ ….
3
Why HCI is important?
● Computing devices are everywhere in today’s world
○ Interacting with an app, writing something in a word processor, searching for some location,
make reservation, driving assistant in car
● Importance
○ Computing systems affect every person
○ Safety, satisfaction, utility is critical
○ Product success depends on ease of use

4
● Interdisciplinary in nature
Human Factors
- Capabilities
- Limitations
- Characteristics
Cognitive Science
- Study of mind and intelligence
- Psychology
- Neuroscience
- ...
HCI and Related Areas

5
Objectives of HCI
● Allow users to perform the tasks
○ Safely
○ Efficiently
○ Effectively
○ Enjoyably
6
Key Aspects in an HCI System
“a discipline that is concerned with the design, evaluation, and
implementation of interactive computing systems for human use and
with the study of major phenomena surrounding them”
- ACM
● Components ● Aspects
○ Human ○ Design
○ Computer ○ Usability
○ Study
7
○ Evaluation
Users: The most important
● Know your users
○ Demographic (Kids, Adult, Elderly)
○ Physical & cognitive abilities (& special needs)
○ Personality & culture
○ Knowledge & skills
○ Motivation
● All users are not alike

○ Personalization
8
Design
● Focus on Users
○ Analyze user goals and tasks
○ Create multiple designs

IMPLEMENT
○ Evaluate options
■ Subjective and Objective
DESIGN
○ Implement
USE &
○ Test EVALUATE
○ Refine or Amend
9
Usability of a System
● Crucial in this area
● Combination of many aspects

○ Ease of learning
○ Time required to complete the task
○ Errors made
○ User satisfaction
○ User retention over time
10
User Study
● Within-subject
■ Each user → tries all variants
● Between-subject
■ Each user → tries a different variant
● Control group → dummy solution (placebo)
● Study group → actual solution
● Longitudinal study
■ To capture the usage habit (temporal effect)
■ Carried out for a long term
11
Evaluation
● Expert-driven ● Subjective measures
○ Qualitative feedback
● User-driven ○ Subjective satisfaction / user experience
● Objective measures
○ Time to learn
○ Rate of error
○ Retention rate over time
12
Introduction to HCI
BITS F364, 2021- 2022 Sem II

Evolution of HCI
● Early computers
○ Batch processing
● Current focus
○ User-centered design, the hallmark of HCI
2
Evolution of HCI
● Early computer (e.g., ENIAC 1946)
○ Improvement in H/W technology (vacuum tube → Transistor → IC) implied
massive increase in computing power
○ How to use this massive power?
● Mid 1950’s
○ Need for VDU (Visual Display Unit)
○ One of the first is an air defense system of USA Air Force
3
Evolution of HCI
● Sketchpad by Ivan Sutherland (1962)
○ First interactive computer graphics program
● Concept of programming toolkit (1963)

○ Small parts can be integrated to develop large system
4
Evolution of HCI
● Idea of personal computer
○ Alan Kay introduced the concept of Dynabook (1970’s)
■ Early concept of laptop, tablet
Alan Kay’s vision of Dynabook
○ Development of “smalltalk” (a visual programming

environment) at Xerox PARC
5
Smalltalk 76 in execution
Evolution of HCI
● Windows and WIMP interface
○ Human can think in parallel
○ Sequential interactions are not suitable
○ WIMP (Window, Icon, Menu, Pointer)
○ Xerox 8010 star information system (Xerox, 1981)
Xerox 8010 star information system

○ Used the concept of metaphor
■ Abstraction of actions/objects
6
Evolution of HCI
● Direct Manipulation
○ Ben Shneiderman coined the term in 1982
○ First successful use of the idea in Apple Mac PC (1984)
○ Common GUI operations (move, drag etc)
■ Reduces the chances for syntactic errors,

learning for command line interfaces
Apple Mac PC in 1984
7
Evolution of HCI
● Computer supported cooperative work
(CSCW)-1990’s
○ Computer networks in 1960’s
○ Society/sociology comes into picture
○ Groupware (CSCW systems built to support users

working in a group)
○ Computer mediated communication
8
Evolution of HCI
● WWW
○ Tim Berners –Lee (CERN, 1989)
○ The year 1991 saw the first text based browser
○ The first graphical browser (Mosaic) came in 1993
9
Evolution of HCI
● Ubiquitous computing
○ Ubiquitous computing –the most active research area

in HCI now
○ The field originated from Mark Weiser’s vision, Xerox

PARC, late 1980’s
○ Sensor based/context aware computing (1990’s)
○ Also known as pervasive computing
10
The Human in HCI
● Capabilities
○ Information i/o …
■ visual, auditory, haptic, movement
○ Information stored in memory

■ sensory, short-term, long-term
○ Information processed and applied

■ reasoning, problem solving, skill, error
○ Emotion influences human capabilities
○ Each person is different

11
The Human in HCI
● Vision
○ Two stages in vision
■ physical reception of stimulus
■ processing and interpretation of stimulus
12
The Human in HCI
● Vision: 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
13
The Human in HCI
○ 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
● Difficulty in distinguishing red and green 14
The Human in HCI
○ The visual system compensates for:
■ movement
■ changes in luminance.
○ Context is used to resolve ambiguity
15
The Human in HCI
○ Optical illusions sometimes occur due to over
compensation
16
The Human in HCI
○ Several stages:
■ visual pattern perceived
■ decoded using internal representation of
language
■ interpreted using knowledge of syntax,
semantics, pragmatics
17
The Human in HCI
○ Reading involves saccades and fixations
○ Perception occurs during fixations
○ Word shape is important to recognition
○ Negative contrast improves reading from computer
screen
○ State-of-the-art eye tracking devices

■ Desktop based
■ Mobile environment
■ VR
18
The Human in HCI
● Vision: Eye tracking
○ AOI (Area of Interest)
■ Broken into small regions
■ Bounded by x,y coordinates
■ Separated by white marks
Screen divided into multiple AOIs 19

The Human in HCI
○ Dwell time
■ Total amount of time spent looking within an AOI
■ Includes all (considering revisits)
● Fixation
● Saccade
■ Good metric → to capture user’s level of interest on specific item
■ Rule of thumb
● Dwell time < 100 ms → did not pay enough attention
● Dwell time > 500 ms → paid attention and processed information
20
The Human in HCI
○ Fixation
■ Normally defined as pause in the eye’s movement within an AOI
■ Fixations are usually numbered
● To track the sequence of eye movement
○ Saccade
■ Movement between the fixations
Circle size is proportional to

fixation duration
21
Fixation sequence
The Human in HCI
○ Fixation
■ Fixation duration
● Time of fixations
● Typically ranges in 150 ms to 300 ms
■ Number of fixations
● Total count of fixations within an AOI
■ Both of these indicate the relative engagement with the object in the AOI
■ Time to first fixation

● Captures the time required to grab user’s attention for the first time to an object
● Useful in web-page design 22
The Human in HCI
○ Revisit
■ number of times that the eye fixates within an AOI, leaves the AOI, and returns back
to fixate within the AOI
● Measures “stickiness” of an AOI
○ HIT ratio
■ percentage of participants who had at least one fixation within the AOI
Key features for a sample AOI
23
The Human in HCI
○ Sequence
■ the order or sequence in which each AOI is first fixated
■ relative prominence of each AOI within the context of a given task
■ Also known as “scan path”
24
The Human in HCI
● 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
25
The Human in HCI
● Hearing
○ 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 cocktail party phenomenon.
● Cocktail party
○ Selective in hearing
○ Hear our name even if in a crowded noisy room,
26
The Human in HCI
● Touch
○ Provides important feedback about environment.
○ May be key sense for someone who is visually impaired.
○ Stimulus received via receptors in the skin:

■ thermoreceptors – heat and cold
■ nociceptors – pain
■ mechanoreceptors – pressure
(some instant, some continuous)
○ Some areas more sensitive than others e.g. fingers.
○ Kinethesis - awareness of body position

■ affects comfort and performance. 27
The Human in HCI
● 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.
■ Video games that need to react quickly
28
The Human in HCI
● Movement: Fitts’ Law
○ Measurement of motor performance
○ 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

29
The Human in HCI
○ Fitts' Law describes the time taken to hit a screen target:
S=2
■ Mt = a + b log2(D/S + 1)
■ where: Object
● a=135, b= 249 (given)

● Object distance → 14 D = 14
● Size → 2
30
The Human in HCI
○ Measurement of motor performance
■ The movement is related to some “target acquisition task”
■ The movement is rapid and aimed (i.e., no decision making is involved during
movement)
■ The movement is error-free (i.e. the target is acquired at the very first attempt)
31
The Human in HCI
● Memory
○ There are three types of memory function:
■ Sensory memories
■ Short-term memory or working memory
■ Long-term memory
○ Selection of stimuli governed by level of arousal.
1
The Human in HCI
● Memory: Sensory Memory
○ Buffers for stimuli received through senses
■ iconic memory: visual stimuli
■ echoic memory: aural stimuli
■ haptic memory: tactile stimuli
○ Examples
■ “sparkler” trail
■ stereo sound
○ Continuously overwritten
2
The Human in HCI
● Memory: Short-term Memory (STM)
○ Scratch-pad for temporary recall
■ rapid access ~ 70ms
■ rapid decay ~ 200ms
■ limited capacity - 7± 2 chunks
3
The Human in HCI
● Memory: Short-term Memory (STM)
○ Examples
■ 212348278493202
■ 0121 414 2626
■ HEC ATR ANU PTH ETR EET
● THE CAT RAN UP THE TREE
4
The Human in HCI
● Memory: Long-term Memory (LTM)
○ 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
5
The Human in HCI
○ Semantic memory structure

■ provides access to information
■ represents relationships between bits of information
■ supports inference
○ Model: semantic network

■ Network is constructed to better represent the information
6
The Human in HCI
○ Information storage
■ 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 7
The Human in HCI
○ Forgetting
■ decay
● information is lost gradually but very slowly
■ interference
● new information replaces old: retroactive interference
● old may interfere with new: proactive inhibition
■ so may not forget at all memory is selective …
■ … affected by emotion – can subconsciously `choose' to forget

8
The Human in HCI
○ Retrieval
■ recall
● information reproduced from memory
■ recognition
● information gives knowledge that it has been seen before
● less complex than recall - information is cue
9
The Human in HCI
● Thinking
○ Reasoning
■ deduction
■ induction
■ abduction
○ Problem solving
10
The Human in HCI
● Thinking: Reasoning
○ Deductive Reasoning
■ 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
11
The Human in HCI
○ Deductive Reasoning
■ Truth and logical validity can conflict
● e.g. Some people are babies
Some babies cry
Inference - Some people cry ??
we are not told that all babies are people
12
The Human in HCI
○ Inductive Reasoning
■ Induction:
● generalize from cases seen to cases unseen
○ e.g. all elephants we have seen have trunks
therefore all elephants have trunks.
● Unreliable:
○ can only prove false not true
● … but useful!
● Humans not good at using negative evidence

○ e.g. Wason's cards. 13
The Human in HCI
○ Inductive Reasoning
■ Wason’s Cards
If a card has a vowel on one side it has an even number on the other
■ Is this true?
■ How many cards do you need to turn over to find out?
■ …. and which cards?

● We should look for negative evidence → 7 and E 14
The Human in HCI
○ Abductive Reasoning
■ 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
15
The Human in HCI
● Problem Solving
○ Process of finding solution to unfamiliar task using knowledge.
○ Analogy
■ analogical mapping:
● novel problems in new domain?
● use knowledge of similar problem from similar domain
■ analogical mapping difficult if domains are semantically different
○ 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 16
The Human in HCI
● Errors and Mental Models
○ Types of error
■ slips
● right intention, but failed to do it right
○ causes: poor physical skill, inattention etc.
○ change to aspect of skilled behaviour can cause slip
■ mistakes
● wrong intention
● cause: incorrect understanding
○ humans create mental models to explain behaviour.
○ if wrong (different from actual system) errors can occur
17
The Human in HCI
● Two-factor emotion theory1
○ Emotion involves both cognitive and physical responses to stimuli
○ Cognitive
■ Difficult to observe
○ Physical
■ Comparatively easy to observe
● e.g., happiness may be expressed as laughter
● anxiety → high pulse rate
1S. Schachter and J. Singer, “Cognitive, social, and physiological determinants of emotional state.,” Psychological review, vol. 69,
no. 5, p. 379, 1962. 18
The Human in HCI
● In psychology, there are different models of emotions
○ Discrete model
■ Ekman’s basic emotion
■ Plutchik’s emotion model
○ Continuous model
■ Russel’s Valecne-arousal (VA) model
■ Valence, arousal, and dominance (VAD) model
19
The Human in HCI
● Ekman’s basic emotions
○ Happiness
○ Sadness
○ Fear
○ Disgust
○ Anger
○ Surprise
20
The Human in HCI
● Plutchik’s emotion model
○ Joy
○ Grief
○ Trust
○ Disgust
○ Anticipation
○ Surprise
○ Anger
○ Fear
21
The Human in HCI
● Russell’s Circumplex model
○ Continuous
○ Valence
■ Pleasant
○ Arousal
■ Activated
22
The Human in HCI
● Valence-Arousal-Dominance model
○ Continuous
○ Valence
■ Pleasant
○ Arousal
■ Activated
○ Dominance
■ Control ability of emotion
■ Submissive to dominant
23
The Human in HCI
● Emotion
○ The biological response to physical stimuli is called affect
○ Affect 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)
24
Introduction to HCI
BITS F364, 2021- 2022 Sem II

The Human in HCI
● Individual Differences
○ long term
– gender, physical and intellectual abilities
○ short term
– effect of stress or fatigue
○ changing
– age
○ Ask yourself:
will design decision exclude section of user population?
2
The Human in HCI
● User personality traits
Evaluation sheet
○ BIG Five Personality Dimensions
■ O → Openness (vs. closedness to experience)
■ C → Conscientiousness (vs. lack of direction)
■ E → Extraversion (vs. introversion)
■ A → Agreeableness (vs. antagonism)
■ N → Neuroticism (vs. emotional stability)
3
The Human in HCI
○ BIG Five Inventory Questionnaire
■ Number of questions
■ Obtain score in Likert scale
4
The Human in HCI
5
The Human in HCI
○ Scoring
■ BFI scale scoring (“R” denotes reverse-scored items):
■ Extraversion: 1, 6R, 11, 16, 21R, 26, 31R, 36

■ Agreeableness: 2R, 7, 12R, 17, 22, 27R, 32, 37R, 42
■ Conscientiousness: 3, 8R, 13, 18R, 23R, 28, 33, 38, 43R
■ Neuroticism: 4, 9R, 14, 19, 24R, 29, 34R, 39
■ Openness: 5, 10, 15, 20, 25, 30, 35R, 40, 41R, 44
6
The Human in HCI
○ Scoring
■ BFI scale scoring (“R” denotes reverse-
scored items):
■ Extraversion:
● 1, 6R, 11, 16, 21R, 26, 31R, 36
■ Sum up the scores as per the likert scale

■ Be careful for the “R” questions
7
Interaction Basics
BITS F364, 2021- 2022 Sem II

Interaction Devices
● Large number of interaction devices
○ Computer, Smartphone, Wearables, VR Headset
○ Eye trackers
○ Voice assistants
○ Tablets
○ Stylus, joystick, mouse
○ …
2
Interaction Devices
● Large number of interaction devices
○ Two types of widely used interaction devices

■ Smartphone
■ Wearable
○ Let’s look into more detail in these two devices
3
Interaction Devices
● Smartphone[1]
○ Phone usage
■ Light sensor
■ Proximity
○ Content capture
■ Camera
■ Microphone
○ Location, mapping
■ GPS
■ Compass – Global orientation
○ Device orientation
■ IMU sensors - Accelerometer, [1] Lane, Nicholas D., et al. "A survey of mobile phone sensing." IEEE
Communications magazine 48.9 (2010): 140-150. 4
gyroscope – local orientation
Interaction Devices
● Wearable[2]
○ HR monitor
■ ECG-based
■ PPG-based
○ Skin conductance monitor
○ Fatigue monitor
■ Using muscle movement
○ Location, mapping
■ GPS
○ Device orientation
■ IMU sensors - Accelerometer, [2] Guk, Kyeonghye, et al. "Evolution of wearable devices with real-time
disease monitoring for personalized healthcare." Nanomaterials 9.6 5
gyroscope – local orientation (2019): 813.
Sensors
● A few widely used sensors
○ ECG
○ PPG
○ EDA (or GSR)
○ EMG
● Basic steps
○ Capture the signal values
Overlapping segments of a signal
○ Pre-processing
○ Segmentation
○ Feature extraction
6
Sensors
● HR Monitor
○ Using ECG signal
■ RR interval or IBI
■ Heart rate
■ Peak amplitude
Typical ECG signal, IBI = 750 ms → HR =

60*1000 / 750 = 80; Peak amplitude ~ 2.6
7
Sensors
● HR monitor
○ Using photoplethysmography (PPG) signal
■ Measures changes in BV in arteries and capillaries
● Correspond to heart rate
■ Peaks (P1) → denote blood flow
■ IBI (dist. Between peaks) → correspond to heart rate
Typical BVP signal

8
Sensors
● GSR (Galvanic Skin Response) sensor
○ Also known as Electrodermal activity
■ Measures the skin conductance variation caused by variation in sweating
■ Two aspects
● SCR (Skin conductance response) → effect of some stimulus, fast-varying
● SCL (Skin conductance level) → slow-varying continuous
● Difficult to distinguish these two
■ Peak value
9
Sensors
○ GSR signal
■ Commonly used mathematical and statistical features of SCL
● maxSCL
● minSCL
● diff(maxSCL - minSCL)
● slope
● 1st, 2nd, 3rd quartile value
Finding different features from a segment of GSR signal
10
Sensors
○ GSR signal
■ Commonly used mathematical and statistical features of SCR (after applying stimuli)
● rise time
● 50% recovery time
● response onset
● peak response
11
Sensors
● EMG sensor
○ Measures the muscle response in response to nerve’s stimulation of a muscle
○ Can be used to measure fatigue
○ Commonly used mathematical and statistical features
■ IEMG (Integrated EMG)
● summation of the absolute values of the EMG amplitude
12
Sensors
● EMG Sensor
○ MAV (Mean Absolute Value)
■ moving average of the full-wave rectified EMG signal
13
Sensors
● EMG Sensor
○ MAVS (MAV Slope)
■ difference between the MAVs of the adjacent segments
14
Sensors
● EMG Sensor
○ SSI (Simple Square Integral)
■ energy of the EMG signal
15
Sensors
● IMU (Inertial Measurement Unit) Sensor
○ Accelerometer
■ Acceleration in x, y, and z axis
■ Unit m/s2
■ By default contains the gravity (g) component
■ To counter that, linear acceleration is to be considered
■ linear acceleration = acceleration - acceleration due to gravity
Coordinate system (relative to a device)
16
Sensors
● IMU (Inertial Measurement Unit) Sensor
○ Gyroscope
■ Rotation in x, y, and z axis
■ Unit rad/sec
Coordinate system (relative to a device)
17
Understanding User (Context)
● Understanding Users (context)
○ Helps to improve the interaction with the interaction devices
○ Sense user context using the sensors
■ Context-aware computing
● What is context?
18
Context-aware Computing
● What is context?
○ Identity (who?)
○ Activity (what?)
○ Time (when?)
○ Location (where?)
● Who + What + When + Where → Context
○ “Context is any information that can be used to characterise the situation of an entity. An
entity is a person, place, or object that is considered relevant to the interaction between a
user and an application, including the user and applications themselves.”
- Dey, Anind K. "Understanding and using context." Personal and

ubiquitous computing 5.1 (2001): 4-7. 19
● Context examples
20
● What is a context-aware system?
○ A system is context-aware if it uses context to provide relevant information and/or services

to the user, where relevancy depends on the user’s task.
● Example
○ Mobile screen changes (portrait or landscape) automatically based on how it is held
○ Automatically adjusting mobile screen brightness based on ambient light
○ Smartphone goes to power-saver mode when battery is low
○ Screen gets turned off based on locked screen

21
● Traditional computing system
○ Explicit input Context independent:

acts exactly the same
○ Explicit output
input Computer System output
Human in the loop

22
● Context-aware computing system
explicit Context-Aware explicit
○ Explicit input/output
input System output
○ Also leverages on the context
○ Context
Implicit Input
■ Implicit input
Context:
• state of the user
• state of the physical environment
• state of the computing system
• history of user-computer interaction
•...
23
● Context categorization → based on level of interactivity
○ Personalization
■ Set configurations as per personal preference
■ E.g., setting font / icon size in an UI
○ Active context-awareness
■ System automatically takes the action based on the changes in the context
■ E.g., mobile phone automatically changes time based on entering new time zone
○ Passive context-awareness
■ System seeks user consent before making changes based on new context
■ E.g, in previous example, before changing time, asks for user consent
24
● Need for context-awareness
○ Human – human communication

■ Many cues
● Facial expression
● Emotion
● Voice tone
● Past experience
■ Accordingly, the communication gets shaped
25
● Need for context-awareness
○ But in human – machine interaction

■ Many challenges,
● Difficulty in interpreting our language

● Difficulty in interpreting our emotion
● Restricted to conventional peripheral devices
○ Machines need to understand / sense / interpret the situation around the human to respond
more efficiently
26
● Typical Context-aware system architecture
○ Acquisition of context
■ Use of sensors → low-level information
○ Abstraction & understanding context

■ High-level interpretation
○ Application
■ Uses the context information
■ Triggers specific action
Typical architecture of a context-aware system

27
● Context information
○ Data collected from
■ Sensors
■ Application or environment
○ Exhibit temporal characteristics

■ May vary with time
■ Context histories
○ Can be incorrect, inconsistent, or incomplete

■ Sensor node fails, transmission delay etc.
○ Different representations
■ Graphical, Ontological, Tuple-based etc.
28
● Mobile Phone Sensing: Low-level sensor details to Abstraction
○ Human activity recognition (HAR) based on Accelerometer data
■ Running
■ Walking
■ Stationary
○ Combine Accelerometer data with GPS → mode of transportation

■ Subway, bus, bike, car etc.
○ Phone cameras to track eye movement → accessibility

■ GAZEL: Runtime Gaze Tracking for Smartphones [Percom’21]
○ Microphones → surrounding sound → context

■ ATM usage
■ Conversation 29
From raw audio signal to context classification
■ Having a Coffee in specific coffee shop
○ CenceMe[3] → Sense people activity → post update to the Social Network site
■ Uses off-the-shelf smartphone sensors
■ Audio classifier → people talking
■ Motion classifier → standing, sitting, walking, running
■ Server side → identifies conversation by combining classifiers
[3] Miluzzo, Emiliano, et al. "Sensing meets mobile social networks: the
design, implementation and evaluation of the cenceme application."
Proceedings of the 6th ACM conference on Embedded network sensor
systems. 2008.
Automatic identification of context and sharing 30

update in CenceMe application
○ UbiFit Garden[4] → Early project to combine sensor details for health monitoring
■ Off-the-shelf sensors data to sense behavior and persuasion
■ Continuous sensing of physical activities
■ Feedback to the user using a garden like environment
■ Feedback wrt to desired goals
[4] Consolvo, Sunny, et al. "Activity sensing in the wild: a field trial of
ubifit garden." Proceedings of the SIGCHI conference on human factors in
computing systems. 2008.
UbiFit Garden UI 31
● Sensing scale
○ Individual sensing
○ Group sensing
○ Community sensing
Different scale of Sensing
32
● Sensing scale
○ Individual sensing
■ Tracking exercise routines
■ Automated diary collection
■ Health & wellness apps
■ Sole benefit of user
● High user commitment
● Direct feedback of results
33
● Sensing scale
○ Group sensing
■ Sensing tied to a specific group
■ Users share common interest
■ Results shared with the group
■ Limited access
■ Example: UCLA’s GarbageWatch

(2010)
● Users uploaded photos of
recycle bins to improve
recycling program on
campus
34
● Sensing scale
○ Community sensing
■ Larger scale sensing
■ Open participation
■ Users are anonymous
■ Privacy must be protected
■ Example:
● Tracking bird migrations,
disease spread, congestion
patterns
● Making a noise map of a
city from user contributed
sound sensor readings Different scale of Sensing
35
● Sensing paradigm
○ Manual (Participatory) Collection
■ Better, fewer data points
■ User is in the loop on the sensing activity, taking a picture or logging a reading
■ Users must have incentive to continue
○ Automatic (Opportunistic) Collection

■ Lots of data points, but much noisy/bad data
■ Users not burdened by process, more likely to use the application
■ Application may only be active when in foreground
36
● Mobile phone sensing architecture
○ Sensing applications generally have same structure
○ Sense
■ Raw sensor data captured
○ Learn
■ Filtering and machine-learning based approach
○ Inform, share, and persuade

■ Give feedback to the user
■ Share in the connected web platforms
■ Showing progress towards a common goal
Sense Learn Inform, share & persuade Mobile Phone Sensing Architecture 1
○ Sense: Continuous sensor sampling in smartphone
■ Support for background activities Inform, share &
Sense Learn
persuade
■ Device resource consideration

● CPU
● Energy
● Expensive user bandwidth
● Poor network
● Low battery
■ Phone context
● Pocket, hip
● User, phone → perform multitasking
○ Can influence the sensor readings 2
Inform, share &
○ Learn: Interpreting smartphone sensor data Sense Learn
persuade
■ Machine learning model application
● Supervised
○ Hand-annotation is costly
● Semi/Unsupervised
■ Accelerometer is cheap to poll and helpful to classify

general activity
■ Microphone can classify audio environments at cost of

CPU resources and algorithm complexity
■ A user’s social network can help classify data, such as

significant locations.
3
Inform, share &
○ Inform, Share and Persuade Sense Learn
persuade
■ Inform
● Provide feedback and tracking
● Recommendation
● Targeted advertising
■ Share
● Share in the web-portal among a set of peers (e.g., Fitbit Leaderboard)
● Allow peers to share and compare
■ Persuasion
● To improve QoL (Quality of Life)
○ Activity level, quit smoking, avoid traffic
● Accurate model to identify behavioral change and intervene 4
○ Privacy Issues in context sensing
■ Your personal details can be revealed
● Location, habits, conversation, activities
○ Mitigating privacy concerns

■ Personal sensing apps
● Store data locally (on-device), and share selectively
■ Group sensing apps

● Share only within group based on trusted, limited membership
■ Community sensing apps

● Must ensure privacy (no personal details, data obfuscation)
● Local processing → anonymous upload of data 5
Interaction
● What is interaction?
○ communication
user system
6
Interaction
● Interaction models
○ translations between user and system
● Ergonomics
○ physical characteristics of interaction
● Interaction styles
○ the nature of user/system dialog
● Context
○ social, organizational, motivational
7
Interaction
○ Key terminologies
○ domain – the area of work under study

■ e.g. graphic design
○ goal – what you want to achieve

■ e.g. create a solid red triangle
○ intention – specific action required to meet the goal
○ task – how you go about doing it

– ultimately in terms of operations or actions
■ e.g. … select fill tool, click over triangle 8
Interaction
● Interaction models: Donald Norman’s model
○ Seven stages
■ user establishes the goal
■ formulates intention
■ specifies actions at interface
■ executes action
■ perceives system state
■ interprets system state
■ evaluates system state with respect to goal
○ Norman’s model concentrates on user’s view of the interface
9
Interaction
○ Seven stages
■ executes action
○ Evaluation / Execution Loop
10
Interaction
○ Seven stages
■ executes action
11
Interaction
○ Seven stages
■ executes action
12
Interaction
○ Seven stages
■ executes action
13
Interaction
○ Gulf of Execution
■ user’s formulation of actions
≠ actions allowed by the system
○ Gulf of Evaluation
■ user’s expectation of changed system state
≠ actual presentation of this state
14
Interaction
○ Human Error
■ Slip
● understand system and goal
● correct formulation of action
● incorrect action
■ Mistake
● may not even have right goal!
○ How to fix?
■ slip – better interface design
■ mistake – better understanding of system 15
Interaction
● Interaction models: Abowd and Beale framework
○ Extension on Norman’s Model
○ Four Parts
Interface
■ user
■ input
■ system
■ output
16
Interaction
● Interaction models: Abowd and Beale framework
○ Interactive cycle has four parts
■ articulation
Interface
■ performance
■ presentation
■ observation
17
Interaction
● HCI Framework
○ translations between user and system
● Ergonomics
● Interaction styles
○ the nature of user/system dialog
● Context HCI Framework
○ social, organizational, motivational 1

Interaction
● Ergonomics
○ human factors
○ primary objective:
■ to improve user performance
○ good at defining standards and guidelines for constraining the

way we design certain aspects of systems
2
Interaction
● Ergonomics: Example
○ arrangement of controls and displays
■ e.g. controls grouped according to function or frequency of use, or sequentially
○ surrounding environment
■ e.g. seating arrangements adaptable to cope with all sizes of user
○ health issues
■ e.g. physical position, environmental conditions (temperature, humidity), lighting,
noise,
○ use of colour
■ e.g. use of red for warning, green for okay, awareness of colour-blindness etc.
3
Interaction
● Interaction Style
○ dialogue … computer and user
○ distinct styles of interaction
4
Interaction
● Interaction Style: Common ones
○ command line interface (e.g., Unix)

○ menus (easy to recall)
○ natural language (speech recognition / typed natural language)
○ question/answer and query dialogue
○ form-fills and spreadsheets
○ WIMP
○ point and click
○ three–dimensional interfaces
5
Interaction
○ question/answer and query dialogue
○ Question/answer interfaces
■ user led through interaction via series of questions
■ suitable for novice users but restricted functionality
■ often used in information systems
○ Query languages (e.g. SQL)

■ used to retrieve information from database
■ requires understanding of database structure and language syntax, hence
requires some expertise
6
Interaction
○ WIMP
○ Windows
○ Icons
○ Menus
○ Pointers
○ … or windows, icons, mice, and pull-down menus!
○ default style for majority of interactive computer systems,

especially PCs and desktop machines
7
Interaction
● Context
○ Interaction often does not happen in isolation

○ Interaction affected by social and organizational context
■ other people
● desire to impress, competition, fear of failure
■ motivation
● fear, allegiance, ambition, self-satisfaction
■ inadequate systems
● cause frustration and lack of motivation
8
Survey and Qualitative Analysis
BITS F364, 2021- 2022 Sem II

Survey Design
● What are surveys and types of surveys
● Cases, populations, samples
● Sampling methods and sample sizes
● Response rates
● Question design
2
Surveys
● Surveys are a method of gathering information from a sample of people,
traditionally with the intention of generalizing the results to a larger
population.
● Types
○ Self-administered
○ Through interviews
○ Over the phone
○ Online
○ …
3
Surveys
● Query-based: Interviews
○ analyst questions user on one-to -one

○ informal, subjective
○ 3 types
■ Unstructured →
● No formal structure, researchers probe the user to obtain most rich information
■ Semi-structured
● → guided structure, but offers to probe, provides flexibility to the researcher
■ Structured
● → a fixed of questions, no opportunity to probe
4
Surveys
● Online Survey: Many tools
5
Case, Population, Sample
● Case
○ Every empirical instance that you are researching
○ E.g.,
■ If you are comparing e-commerce sites Amazon, Flipkart, then each of these becomes
a case
■ If you are comparing OTT platforms, then Netflix, Amazon prime, each of these
becomes a case
■ If you were interested in Fast Food companies McDonalds would be a case, Burger
King would be a case, as would Subway, KFC, etc.
6
● Population
○ Population – all the theoretically-relevant cases (e.g. ‘All Team USA supporters’). This is also
often referred to as the target population.
○ Study population - This may differ from the study population, which is all of the
theoretically-relevant cases that are actually available to be studied (e.g. ‘people who have
purchased tickets in 2018’).
7
● Selecting study population
○ Are they relevant to the problem?
○ Are they the group affected by the problem?
○ Or are they the group that will have to carry the recommendations?
○ Or are they people who have dealt with the problem successfully elsewhere?
○ Can you get a fair sampling? How?
○ Will you get a high response rate?
8
● Selecting Sample
○ Sometimes you can study all possible cases (i.e., the entire population)
■ e.g., All BITS F364 students
○ Often you can’t study the whole population because it is too big, or doing so would be too
costly, too time- consuming, or impossible.
■ e.g., All students who ever attended BITS
○ In these cases, you need to select a sample of the population to study.
9
● Sampling Strategy
○ Opportunity sampling
○ Snowball sampling
○ Random sampling
○ Stratified sampling
10
○ Opportunity sampling
■ Rely on available participants
■ Justified if other sampling methods not possible
■ Need to be cautious while generalizing results from such a study
■ advantage – quick and easy way to recruit participants

■ disadvantage – may not provide representative sample
11
○ Snowball sampling
■ Researchers reach the target population, whom she can reach and uses them to locate
other members
■ Applicable if locating participants are difficult, but a few participants are connected
well with other participants
● E.g., running study with a group of society (e.g., in slum dwellers, )
12
○ Random sampling
■ type of probability sampling where everyone in the entire target population has an
equal chance of being selected.
■ the best method of selecting your sample from the population of interest.
● The advantages are that your sample should represent the target population and
eliminate sampling bias.
● The disadvantage is that it is very difficult to achieve (i.e. time, effort and
money).
13
○ Stratified sampling
■ researcher identifies the different types of people that make up the target population
and works out the proportions needed for the sample to be representative.
● E.g., random sampling from engineering students and random sampling from
science students
● the advantage is that the sample should be highly representative of the target
population
● disadvantage of stratified samplingis that gathering such a sample would be

extremely time consuming and difficult to do
14
● Sample size
○ Many factors
■ Heterogeneity
● More heterogenous → bigger sample
■ Number of sub-groups
● More sub-groups → bigger sample
■ Frequency of event
● Less frequent → bigger sample
■ Desired accuracy
● Higher accuracy → bigger sample 15
● Sample size
○ Response rate
■ Number of participants responded to the survey
■ If you expect low response rate → increase sample size
■ Some statistical tests require at least 30 – 40 samples,

● Decide accordingly
16
Questionnaire Design
● Title and purpose
○ Give suitable title
○ Describe objective briefly
○ Include instructions
■ How to fill
■ How to return
○ Assure participant anonymity
17
● Question design
○ Survey questions should be easy to understand and hard to misinterpret.
■ Use common language & clearly defined terms
■ Use mostly closed questions
■ Include demographic questions to help identify the sample
■ Use precise, unambiguous language
■ Make sure questions are valid & reliable
18
● Question design: What to avoid
○ Avoid two-barreled question
■ Do you like running and going to gym?
○ Avoid leading and biased question

■ Will this product help you to be efficient and better at your job?
○ Avoid loaded question

■ Have you stopped cheating on exams?
○ Avoid repetitive questions
○ Avoid personal questions

■ What type of relationship did you have with your parents? 19
● Question design
○ Demographic information
■ Does gender play a role?
■ Does age play a role?
■ Does education level play a role?
■ Does income level play a role?
■ Does household size play a role?
■ Do you want to compare responses across different groups?

20
● Question design
○ Demographic information
■ Does gender play a role?
■ Does age play a role?
■ Does education level play a role?
■ Does income level play a role?
■ Does household size play a role?
■ Do you want to compare responses across different groups?

21
● Question design
○ Question sequencing
■ Group questions that are similar
■ Put them in a logical order
■ Demographics → at the beginning
■ Sensitive / difficult questions → at the end
■ Open ended questions → at the end
22
● Question design
○ Question types
■ Yes/No Questions, True/False Questions Multiple Choice (Choose one)
■ Checklist (Select all that apply)
■ Agree-Disagree Scale (e.g., strongly disagree - neutral - strongly agree)
■ Likert Scales (0-5)
■ Ranking / Rating (e.g., rank these statements) Grids answers
■ Open-ended questions 23
● Question design
○ Response categories
■ Limit type of questions and response sets (usually 3)

■ Give clear-cut answer choices
■ Make response sets easy to navigate
■ Make sure responses cover all possibilities
■ Avoid Overlapping Categories

● e.g., How old are you?
○ 0-15 years, 15-20 years, 20-25 years, etc.
24
● Question design
○ Test run your survey
■ Helps to detect any issues early

■ Avoids dealing with incorrect responses
■ Once the survey is triggered, no way to correct
25
● Question design
○ Survey: Strengths
■ Useful for describing the characteristics of a large population.
■ Makes large samples feasible.
■ Many questions can be asked on a given topic.
■ Has a high degree of reliability and replicability.
■ Is a relatively transparent process.
■ Useful for measuring change over time. 26

● Question design
○ Survey: Weakness
■ Seldom deals with the context of social life.
■ Inflexible – cannot be altered once it has begun.
■ Subject to artificiality – the findings can be a product of the respondents’

consciousness that they are being studied.
■ Can be bad for gathering certain kinds of information, e.g.,

● highly complex or ‘expert’ knowledge
● people’s past attitudes or behavior
● subconscious (especially macro‐social) influences
● shameful or stigmatized behavior or attitudes 27
● Survey strategy comparison
28
Survey Evaluation
● Survey evaluation: key factors
○ Survey validity
■ Before executing the survey
■ Construct validity → how much is backed by the literature
■ Predictive validity → power of the survey to predict correct result for repetitive use
○ Survey reliability
■ After executing the survey, once the response is collected
■ Internal reliability
■ Inter-rater reliability
29
Survey Evaluation
○ Internal reliability measurement
■ Cronbach’s alpha
● Measurement of checking if same question is answered same way by the participants
● Value between 0 to 1
● Insert one /two duplicate questions and check how the participants respond
30
Survey Evaluation
○ Internal reliability measurement: Cronbach’s alpha calculation example
31
Survey Evaluation
○ Inter-rater reliability measurement
■ Percentage of matches
■ Interclass correlation
■ Cohen’s kappa
■ Flessis’ kappa
32
Survey Evaluation
● Survey evaluation: key factors Three raters
■ Percentage of matches
Two raters
Disadvantage: Doesn’t scale. Hence other metrics 33

Survey Evaluation
What about the agreements by chance? 34

Survey Evaluation
○ Inter-rater reliability measurement: Cohen’s Kappa
■ Measure of inter-rate reliability
■ -1 to +1
■ 1 → perfect agreement
■ 0 → agreement by chance
■ <0 → possible, unlikely
Interpretation of Cohen’s kappa

35
Survey Evaluation
■ Calculation
● Pr(a) → actual observed agreement

● Pr(e) → chance agreement
○ raters guessed every item

○ guessed at the rates similar to
marginal proportion
○ raters are entirely independent
36
Survey Evaluation
■ Example

Pr(a) =
37
Survey Evaluation
■ Example

Pr(e) =
38
Survey Evaluation
■ Example
● Pr(a) → actual observed agreement Raw agreement: .94

Kappa: .85
Adjusted due to chance agreement.
39
BITS F364, 2021- 2022 Sem II

Qualitative Interview
● Qualitative interview
○ Verbally asking participants a set of evaluation questions and hearing the participant’s point of
view in their own words.
○ 3 types
■ Structured
■ Unstructured
■ semi-structured
○ Mode
■ Individual
■ Group level
2
○ Structured
■ A structured interview uses a set of questions that are asked in a standard
way across all respondents (like a survey).
○ Unstructured
■ An unstructured interview has a topic to be explored but what is covered is
up to the respondent.
■ Ex,
● An opening question might introduce the topic:
● I’d like to get your perspective about BITS Pilani Goa campus. What
would you like to tell me about it?
3
○ Semi-structured
■ A semi-structured interview has specific topic areas and a general set of
questions but the interview flows like a conversation and topics are
covered as they come up.
■ A key component of conducting semi-structured interviews is probing.
■ Probing is the process of asking follow-up questions to dig deeper in order

to obtain useful, meaningful information
4
○ Semi-structured: Probing questions: Example
■ Interview question:
● “What do you like best about this degree program?”
● Response: “I like everything.”
● Probe 1: “What one thing really stands out?”
● Response: “The exposure”
● Probe 2: “What about the program activities?”

● Response : “I liked it when we had famous people come and talk to
us.”
● Probe 3: “Really? Tell me more…?”

● Response : “It was interesting to hear their perspectives. I heard
5
some things I hadn’t considered before.”
○ Can be conducted with a group or an individual

○ Individual Interview
■ The number of interviews and selection of interviewees will depend on

your purpose and the time and resources you have available.
■ Key informant interview is one type of individual interview.

● Key informants are individuals who are specifically chosen because
they have particular knowledge or insights of interest.
6
○ Group Interview
■ The most common type of group interview is the focus group (involves a
group of people)
■ Focus groups involve a particular process with a focused set of questions.
■ Other group formats also can be used, for example:

● Informal discussion group: ask a series of questions in an informal
way; a summary of the discussion is recorded.
● Community forum: an open community meeting provides a forum for
getting perspectives on needs, behaviors and outcomes.
7
○ Steps
■ Prepare the questions
■ Practice well
■ During the process

● Welcome the participant
● Make him/her comfortable
● Follow interview questions
● Ask probing questions
● Listen carefully, scribe, (or record with permission)
■ After the interview

● Immediately after the interview: brief summary, theme, 8
● Analyze the data
○ Strengths
■ Depth of information
■ Respondent can influence the topic so unexpected issues/topics emerge
■ Researcher can probe to get a better understanding of perspectives and

experiences
■ Topic guide ensures that a core list of questions is asked in each interview
■ Because order of questions not fixed, flow and sharing of views is more
natural.
9
○ Weakness
■ Trained interviewers needed to probe without being directive or
judgmental
■ Time consuming and challenging to analyze findings

● helps if it is done by the people who did the interviews
■ Researcher has to avoid their own bias in analysis
■ Difficult to generalize findings
10
Contextual Inquiry
● Contextual Inquiry
○ Suppose you wanted to learn how to drive a car. As a first step, should you:
■ 1) Assume you can figure it out on your own

■ 2) Have an online discussion with Facebook friends
■ 3) Watch driving lessons on YouTube
■ 4) Ride along with someone who knows how to drive, observe what they
do, and ask questions
11
Contextual Inquiry
○ A semi-structured interview method to obtain information about the context of

use, where users are first asked a set of standard questions and then observed
and questioned while they work in their own environments.
○ In a nutshell:
■ You are observing/shadowing the participant as they go about their
day/work, and asking probing questions about what you observe to get a
deep understanding of their actions/thinking/challenges.
12
Contextual Inquiry
○ Master-Apprentice Relationship
■ The “master/apprentice” relationship is at the heart of contextual inquiry

■ In a master/apprentice relationship:
● The master is doing stuff
● The master explains what they’re doing
● The apprentice asks clarification questions
● The master answers
■ Obviously, the participant is the master and you are the apprentice ☺
13
Contextual Inquiry
○ Master-Apprentice Relationship
■ Not exactly the same in case of contextual inquiry

● The goal is not to learn to do the task
● Instead, the goal is to learn how the participant does the task in
order to learn how to support it
● And for the researcher to enlist the participant’s active assistance in
understanding the task
14
Contextual Inquiry
○ Key Principles
■ Context
● Must be done in the setting of the participant.
■ Focus
● Themes that emerge during the inquiry. You cannot pay attention to
all facets of someone’s work at all times.
■ Partnership
● Master/apprentice model; investigator is humble.
■ Interpretation
● Observed facts must be regarded for their design implications. Raw
facts without interpretation are not very useful.
15
Contextual Inquiry
○ Key Principles: Context

■ Go to the workplace & see the work as it unfolds Ask participants to think aloud
■ People summarize, but we want specific details
■ Keep it concrete when people start to abstract “Do you have one? May I see it?”
16
Contextual Inquiry
○ Key Principles: Focus

■ Focus defines the point of view
■ Clear focus steers the conversation
■ Everyone in the team should have an entering focus
■ Focus lets the interviewer see more, reveals detail
■ Focus may conceal the unexpected
■ Focus on one, and lose the other
● Start with a focus and then expand
17
Contextual Inquiry
○ Key Principles: Focus
■ Nods
● Question assumptions even if they match
● “Do they really do that? Why would they do
that?”
■ What you don’t know

● Treat the enquiry as an opportunity to learn
new stuff
● Even if the participant is not knowledgeable, the
extent of their knowledge / misinformation will
be useful 18
Contextual Inquiry
○ Key Principles: Partnership
■ Designer should create a partnership

■ Alternate between watching and probing
■ Questions lead to withdrawal and return

● Designer observes action that indicates something meaningful
● The designer asks about the action, and the pair withdraw from
the task
● They discuss the question
● Then they return to the task
19
Contextual Inquiry
■ Designer should create a partnership

■ Alternate between watching and probing
■ Questions lead to withdrawal and return

● Designer observes action that indicates something meaningful
● The designer asks about the action, and the pair withdraw from
the task
● They discuss the question
● Then they return to the task
20
Contextual Inquiry
21
Contextual Inquiry
○ Key Principles: Interpretation

■ Chain of Reasoning
● Fact, Hypothesis, Implication for Design, Design Idea
■ Design is built upon interpretation of facts

● So interpretation had better be right
■ Share interpretations with users to validate

● Teaches participant to see structure in the work
■ Non-verbal cues
22
■ Commit to hearing what people actually say
Contextual Inquiry
○ Steps
■ Warm up
● Meet and greet
■ Setting the device (if required)
● Pre-judging the user
● Gathering usage data and experience
23
Contextual Inquiry
○ Analysis of collected data

○ Different models
■ To capture what is important in user’s work situation
● Flow model
● Sequence model
● Cultural model
● Artifact model
● Physical model
24
Contextual Inquiry
■ Sequence model
● Steps required to complete a task
25
Contextual Inquiry
■ Physical model
● maps the physical work environment and how it impacts upon work
practice
● E.g., office layout
26
Contextual Inquiry
■ Flow model
● lines of coordination and communication between the user and other
participants within and outside the workplace.
27
Contextual Inquiry
■ Cultural model
● reflects the influences of work culture and policy and shows the
scope of these influences.
● may include official or unofficial codes of behavior, common
expectations
28
Contextual Inquiry
■ Artifact model
● describes the structure and use of a particular artifact within the
work process
● documents or other physical things that are part of the work
● E.g., a Paper based voucher simultaneously filled up in a particular
step of a sequential task flow.
29
Contextual Inquiry
○ Different models, interconnected, → consolidation
30
Contextual Inquiry
○ Advantage
■ Gaining insight from user’s action
■ Provide opportunity to dig deeper based on user’s tacit knowledge
■ Shared understanding of the device interface creator and user
31
Contextual Inquiry
○ Disadvantage
■ Statistical significance can’t be proven → qualitative data
■ inquirer needs to be highly skilled in multiple disciplines such as
Ethnography, Psychology, Culture, Design and HCI
■ Field level challenges,

● Shy users can pose a problem
● Humans when observed may try to do things differently
32
BITS F364, 2021- 2022 Sem II

Qualitative Analysis
● Qualitative analysis
○ So, you have collected data from all the qualitative research you have been
doing.
○ Interviews, surveys, observations…
○ NOW WHAT?
○ Data analysis
■ An attempt by the researcher to summarize the data.
○ Data Interpretation
■ An attempt to derive meaning from the data
2
● Qualitative analysis: Inductive Content Analysis
○ There are many different ways of analyzing the data collected from qualitative
methods.
○ The one we’ll be looking at is inductive analysis.
■ In general inductive research is theory-generating, whilst deductive
research is theory-testing.
○ With inductive analysis, you generate themes and use them to create
theories/narratives and draw conclusions
■ e.g., War victims express hatred towards soldiers and/or relief that the war
is over
○ It’s also called thematic analysis.
3
○ Thematic Analysis
4
○ Qualitative coding
■ Reduces data to manageable format
○ Code generation
■ Research question
● What is the question you are after?
● Map responses to codes
■ previous research
■ Previous theory
5
○ Code generation
■ Meaningful names
■ Combination of text
■ Code will evolve
■ Increases with a data
■ Use a codebook
● For maintaining the codes
6
○ Codes
■ Actions, behaviors
■ Themes, topics
■ Ideas, concepts
■ Terms, phrases
■ Keywords
■ Code only relevant data (Not all data must be coded)
7
○ Codes: Example
Behaviors, specific acts Being dumbfounded, Bragging
Specific events, stories (short or First time visiting

once) New York.
Activities (common or longer Playing baseball,

duration) eating out
Strategies, practice, or tactics States Doing extra homework to get an A+
– general conditions/feeling Being angry about Assignment 1
Relationships or interaction I want to beat the other team
Conditions or constraints I can’t use Facebook on the subway
Consequences Getting hacked because you had a 8

weak password
○ Coding Process
■ Iterative process
● Read through data multiple times. Become familiar with the data
through reading data and transcripts, listening to recordings, etc.
● Categorize and code pieces of data
● Group the codes into themes
● Reduce overlap and redundancy
9
● Repeat, refine, repeat, refine…
○ Coding Process
■ Guiding Principles
● What is important in the data?
● Why is it important?
● What can be learned from it?
● So what?
10
○ Coding Process
■ Identifying themes
● Generate broader themes by linking instances of codes with other

instances/codes.
● Begin with big picture and list “themes” that emerge.
● Events/codes that keep repeating themselves
● First round of coding: 30-40 categories Second round of coding: 15-
20 categories
● Remove redundancy
● Reduce overlap
● Eventual target: 3-8 main categories/themes
11
● Can have sub-categories
○ Coding Process
■ Identifying themes: Example
12
○ Create a narrative
○ Once you have your ~3-8 main themes, the themes are formed into a narrative
about the data.
○ Create a story that best represents your data

■ “Our participants expressed mixed feelings about deleting their Facebook
accounts. For example….”
■ You can’t include every detail!
○ For product design, create “user stories” that describe the key
concerns/actions/feelings for each main category of user.
■ Often several important categories of users.
13
● Qualitative analysis: Key Takeaways
○ Initial read through of the data (many pages of text)
○ Identify specific segments of information (many segments of text)
○ Label the segments to create categories (30-40 codes)
○ Reduce overlap and redundancy among categories (15-20 codes)
○ Create a model incorporating the most important categories (3-8 categories, with
sub-categories)
○ Generate a narrative/user stories from your most important codes/themes

14
Interaction Design
BITS F364, 2021- 2022 Sem II

Interaction and Intervention
● design interactions not just interfaces
○ not just the immediate interaction
■ e.g. stapler in office – technology changes interaction style
■ manual: write, print, staple, write, print, staple, …
■ electric: write, print, write, print, …, staple
● designing interventions not just artefacts

○ not just the system, but also …
■ documentation, manuals, tutorials
■ what we say and do as well as what we make
2
What is a design?
● achieving goals within constraints
● goals - purpose
○ who is it for, why do they want it
● constraints
○ materials, platforms
● trade-offs
3
What is a design?
● Golden rules of design
○ Understand your material
● For HCI, understand the materials

○ understand computers
■ limitations, capacities, tools, platforms
○ understand people
■ psychological, social aspects
■ human error
○ and their interaction …
4
What is a design?
● human ‘error’ is normal
○ we know how users behave under stress
○ so design for it!
● treat the user at least as well as physical materials!
User at the center of interaction design
5
Design Process
● Different phased in interaction design
○ Requirement
○ Analysis
○ Design
○ Iteration and Prototyping
○ Implement and deploy
Simplified version of interaction design 6

Design Process
● Different phased in interaction design
○ requirements
■ what is there and what is wanted …
○ analysis
■ ordering and understanding
○ design
■ what to do and how to decide
○ iteration and prototyping
■ getting it right … and finding what is really needed!
○ implementation and deployment
■ making it and getting it out there
7
Design Process
● Interaction design: One major challenge
○ limited time ➔ design trade-off
○ usability?
■ finding problems and fixing them?
■ deciding what to fix?
○ a perfect system is badly designed

■ too good ➔ too much effort in design
8
Design Process
● User Focus
○ know your user
○ personae
○ cultural probes
9
Design Process
● User Focus
○ Know your user
■ who are they?
■ probably not like you!
■ talk to them
■ watch them
■ use your imagination
● This can be dangerous
● Not only about putting you in user’s shoes, but imagining what they would do
● A method useful helping design teams produce user focussed designs is the
persona
10
Design Process
● User Focus
○ Persona
■ a fictional character that is meant to represent a group of users that share common
goals, attitudes and behaviors when interacting with a particular product or service.
■ description of an ‘example’ user

● not necessarily a real person
■ use as surrogate user
■ details matter
11
Design Process
● User Focus
○ Persona: Example
Betty is 37 years old, She has been Warehouse Manager for five years
and worked for Simpkins Brothers Engineering for twelve years. She didn’t
go to university, but has studied in her evenings for a business diploma.
She has two children aged 15 and 7 and does not like to work late. She
did part of an introductory in-house computer course some years ago, but
it was interrupted when she was promoted and could no longer afford to
take the time. Her vision is perfect, but her right-hand movement is
slightly restricted following an industrial accident 3 years ago. She is
enthusiastic about her work and is happy to delegate responsibility and
take suggestions from her staff. However, she does feel threatened by
the introduction of yet another new computer system (the third in her time
at SBE).
12
Design Process
● User Focus
○ Persona: Why to develop?
○ Empathy
■ We are engaged by fictional characters all the time in movies and books.
○ Focus: Personas provide a precise way of thinking about…
■ how users behave
■ their motivations
■ how they think
■ what they wish to accomplish (goals)
■ why they want to do what they do
○ Communication
■ Provides a way of conveying a broad range of quantitative and qualitative data
■ Assumptions about users made explicit 13
Design Process
● User Focus
○ Persona: Why to develop?
○ Within the design/engineering team:

■ provides a shared understanding
■ engage in empathy of design towards a target user
■ helps communicate who you are building the product for
■ helps determines what the product should and shouldn’t do
■ serves as a stable reference point during the design process
■ provides focus
■ a stand-in for actual users
■ testable via walkthroughs
14
Design Process
● User Focus
○ Personas are not sterotypes
■ Base your personas on REAL DATA, not assumptions
○ Personas do not necessarily equal roles

■ e.g., parent, doctor, programmer, actor, etc.
○ People within the same roles can have very different needs and goals
■ e.g., new vs. experienced programmer
■ e.g., parent of 1 vs. parent of 8
■ e.g., oncologist vs. pediatrician
15
Design Process
● User Focus
○ Personas: Different Types
■ Primary
■ Secondary
■ Supplemental
■ Customer
■ Negative
16
Design Process
● User Focus
○ Personas: Steps to create persona
■ Collect data about users

■ Segment the users
■ Create personas
■ Design Example: Designing a video game for kids!
17
Design Process
● User Focus
■ Collect data about users Done

● Logical groupings of users
● Group users that have similar characteristics, motivations, goals, capabilities,

experiences, lives, etc.
● Each group represents one “persona”
18
Design Process
● User Focus

● Logical groupings of users
● Group users that have

similar characteristics,
motivations, goals,
capabilities, experiences,
lives, etc.
● Each group represents one

“persona”
19
Design Process
● User Focus
■ Each persona should each have three to four goals

● (1) Life goals, which are personal aspirations
○ e.g., wanting to retire before the age of 50
● (2) Experience goals describe how the user wants to feel while interacting with a
product; they are personal and universal
○ e.g., wanting to be competent while using the product
● (3) End goals, which are tangible outcomes the user has in mind when using the
product
○ e.g., want to be updated about finances over last month
■ Typically experience/end goals are more helpful to designers

20
Design Process
● User Focus
○ Personas: Summary
■ Personas are fictional characters Based on user research
■ Represent different user types that might use your service, product or site in similar
ways
■ Helps you to understand your users’ needs, experiences, behaviors and goals.
■ Recognize that different people have different needs and expectations. Help you to
identify with the user you’re designing for.
■ Help you to achieve the goal of creating a good user experience for your target user
21
group
Design Process
● User Focus
○ Cultural Probes
■ direct observation
● sometimes hard
○ in the home
Cultural probe toolkit
○ psychiatric patients, …
■ probe packs
● items to prompt responses
○ e.g. glass to listen at wall, camera, postcard
● given to people to open in their own environment
they record what is meaningful to them
■ used to … Smartphone for

sampling user
● inform interviews, prompt ideas, enculture designers experience 22
Design Process
● Scenarios
○ what will users want to do?
○ step-by-step walkthrough
■ what can they see (sketches, screen shots)
■ what do they do (keyboard, mouse etc.)
■ what are they thinking?
○ use and reuse throughout design
23
Design Process
● Scenarios
○ Allow exploration
■ explore interaction
● what happens when
■ explore cognition
● what are the users thinking
■ explore architecture
● what is happening inside
24
Design Process
● Scenarios
○ communicate with others
■ designers, clients, users
○ validate other models

■ ‘play’ it against other models
○ express dynamics
■ screenshots – appearance
■ scenario – behaviour
25
Design Process
● Scenarios
○ Scenarios – one linear path through system (Linearity)
○ Pros:
■ life and time are linear
■ easy to understand (stories and narrative are natural)
■ concrete (errors less likely)
○ Cons:
■ no choice, no branches, no special conditions
■ miss the unintended
○ So:
■ use several scenarios
■ use several methods 26
Interaction Design
BITS F364, 2021- 2022 Sem II

Design Process
● GUI (Graphical User Interface)
○ Allows user to interact with the application or device
○ Consists of
■ ICONS, buttons, scroll bars, menus, widgets, boxes,
status lamps, labels, instructions, visuals etc
■ visually pleasing as well as ergonomically useable
○ returns Usability Index of the product as a whole. Gives the

product an identity, personality & character
2
Design Process
● Requirement of GUI
○ FUNCTIONAL
■ Useable - Easy to operate ; locate what is required &
where it is required on the screen; and do what is
expected of it – without need for learning or training
○ AESTHETIC
■ Pleasing to the eye ; Highest Visual Quality; Identifiable;
Distinct ; Recognizable, Recallable
○ COMMUNICABLE
■ Express what it represents; how it is to be operated;
Unambiguous; Meaningful; Culturally & Contextually
compatible
3
Design Process
● GUI Design
○ AESTHETIC
■ Sensory + Empirical + Taste + Judgment
■ Philosophical argument,
● Simplicity + Infinity + Eternity + Serenity = Beauty
■ Aesthetics is both Art as well as Mathematics.

■ It is both rational as well as emotional at the same time.
4
Design Process
● GUI Design
○ AESTHETIC
■ is a medium for User Experience

■ Aesthetics (Look & Feel) + Communication + Usability =
Total UI Experience
5
Design Process
● GUI Design
○ AESTHETIC
■ often misunderstood & underestimated
■ is not mere beautification
■ is not mere decoration
■ It has as much to do with FUNCTION as with beauty
■ A ‘good looking’ GUI needs also

● to function
● to communicate
● to express
● to instruct
● to perform 6
Design Process
● GUI Design
○ AESTHETIC
■ judgment of Aesthetics is subjective
■ while the construction / configuration is not.
■ Has elements and principles of good aesthetic

configuration
Balance Line
Emphasis Shape
Rhythm Space
Unity Color, Form
Contrast Texture
Movement Light
7
Design Process
● GUI Design
○ Principles of design Balance
■ Grammar of the visual language. Unity
■ Rules for composing with the elements Proportion
Harmony
Direction
Rhythm
Symmetry
Pattern
Emphasis
Contrast
Movement
8
Design Process
● GUI Design
○ Principles of design
■ Unity
● Unity is an overall “sameness” throughout a screen.
How harmoniously all the elements blend together.
● Example: Windows 8 GUI
■ Balance
● Are the various elements visually balanced in terms
of their Size, shape, weight, and placement. Can the
rhythmic order be visually discernable ?
9
Design Process
● GUI Design
■ Proportion
● Size relationships found within an object or design.
Also a comparison in terms of ratio of size, shape,
etc with neighboring elements.
● Example see proportions of various buttons within
Windows 8 screen
10
Design Process
● GUI Design
■ Rule of thirds
● a simple grid overlay (divided equally into thirds,
both horizontally and vertically)
● Size relationships found within an object or design.

Also a comparison in terms of ratio of size, shape,
etc with neighboring elements.
11
Design Process
● GUI Design
■ The Golden mean
● Ratio of 1:1.618
● 1000 x 618 → golden rectangle
○ Square of 618 x 618
○ Remainder 618 x 382 → another golden
rectangle
■ Aspect Ratio
12
Design Process
● GUI Design
○ Colour
■ Colour is a vast subject of both Physics and Fine Arts.
■ Graphic Designers use metrics to specify colours.
■ Hue: refers to the names of the primary colours. (red,

green and blue).
■ Value: lightness and darkness of the hue
■ Shade: amount of white or black added.
■ Intensity: the purity or saturation of the colour
■ Monochromatic : use of one colour where only the value of
the colour changes
■ Analogous colours: colours that are adjacent to each other
on the colour wheel,
13
● e.g. yellow and green are analogous.
Design Process
● GUI Design
○ Colour
■ Psychology of colours
● WARM colours: yellows, red and orange we
associate these with blood, sun and fire.
14
Design Process
● GUI Design
○ Colour
■ Psychology of colours
● COOL colours: violet, blue and green because of our
association with sky, water.
15
Design Process
● GUI Design
○ Colour
■ Colour theme
● Choice is given to users
● But don’t confuse them

with 100s of options
● A set of carefully chosen

colors by the designer
16
Design Process
● GUI Design
○ Colour
■ Bad use of colour
17
Design Process
● GUI Design
○ Colour and 3D
■ both often used very badly!
■ colour
● older monitors limited palette
● colour over used because ‘it is there’
● beware colour blind!
● use sparingly to reinforce other information
■ 3D effects
● good for physical information and some graphs
● but if over used …
e.g. text in perspective!! 3D pie charts
18
Design Process
● GUI Design
○ Navigation design
■ Local structure (Single screen)
■ Global structure (Whole site)
19
Design Process
● GUI Design
○ Navigation design: Local
■ From one screen looking out
■ Goal seeking
■ Golden rules
● knowing where you are
● knowing what you can do
● knowing where you are going
○ or what will happen
● knowing where you’ve been
○ or what you’ve done
20
Design Process
● GUI Design
○ Navigation design: Local
■ From one screen looking out
■ Goal seeking
■ Golden rules
● knowing where you are
21
Design Process
● GUI Design
○ Navigation design: Global
■ between screens within the application
■ Hierarchical diagrams
● Parts of application
○ Groups of screen
○ Functional separation
22
Design Process
● GUI Design
○ Navigation design: Global
■ between screens within the application
■ Network diagrams
● Show different paths through system
● What leads to what
● what happens when
● including branches
● more task oriented then hierarchy
23
Design Process
● GUI Design
○ screen design and layout
■ basic principles
■ grouping, structure, order
■ alignment
■ use of white space
24
Design Process
● GUI Design
■ basic principles: grouping, structure
● logically together → physically together
25
Design Process
● GUI Design
■ basic principles: order
■ think! - what is natural order
■ should match screen order!

● use boxes, space etc.
● set up tabbing right!
■ instructions
● beware the cake recipie syndrome!
… mix milk and flour, add the fruit
after beating them
26
Design Process
● GUI Design
■ basic principles: alignment
27
Design Process
● GUI Design
28
Design Process
● GUI Design
29
Design Process
● GUI Design
○ Multiple columns
30
Design Process
● GUI Design
○ Multiple columns
31
Interaction Design
BITS F364, 2021- 2022 Sem II

Design Process
● GUI Design
○ Graphic Design Principles: Example: mobile screen
■ Clustering
● Visually separate blocks with similar controls
● Information (if not categorised in some order) → confusing (right side diagram)
○ GRIDS → not only for alignment, aesthetics, but also for to categorize
elements according to function
2
Design Process
● GUI Design
■ Reduce clutter
● Type size, font
● Safe font
○ Arial, Helvetica, sans-serif
○ Courier New, Courier, mono
○ Verdana, Arial, Helvetica, sans-serif
○ Geneva, Arial, Helvetica, sans-serif
● BOLD
○ some times , results in poor smudged
readability on mobile screens
Poor font readability

3
Design Process
● GUI Design
■ Screen resolution and aesthetics
● 25 to 30% of the area is taken by buttons,
etc.
● Therefore only about 229 X 255 is effectively
available from a 320 X240 display.
4
Design Process
● GUI Design
○ Some unsatisfactory GUI examples
Too many similar elements. No colour contrast.

Monochrome colour scheme is visually too heavy. No
differentiation . No identity.
Functional confusion. Poor communication.
Difficult to use. Error prone.
No colour contrast.
Too many data fields
undistinguishable.
Use of same colour
(orange) to for two
different tasks. 5
Design Process
● GUI Design
○ Some unsatisfactory GUI examples
Confused verbal statement label.

The two buttons offer a dead end. By
executing the action the user is not
visually informed as to what to do.
Icon to depict ‘
security’ has two
humans . Not
representational &
meaningful.
6
Design Process
● Case study 1: Windows GUI
○ Aesthetic and minimalist design
■ not cluttered with excessive use of icons and buttons
■ Tabs are used to separate different functionalities
■ A simple rectangle composition arrangement is used
to model information
○ Recognition rather than recall

■ use of colour schemes and icons act to denote
functionalities
■ Example ‘Head Phone icon”. This design feature
promotes recognition of rather than recall of system
functionalities
7
Design Process
● Case study 2: Icon design
○ Activity in progress
■ Simple design, inform the status, easy to understand
■ use gradient in colors (monochrome) to depict time
progress through animation
■ Circular form → abstract concept of time
■ icons
● need very less computing memory, amiable to
both pixel as well as vector graphics
■ aesthetic principles
● form, colour, shape, configuration, motion &
composition
8
Design Process
● Graphic design – Website Layout
○ HCI design
■ Needs to be sensitive to visual language
■ Should consider principle of visual elements
Too much of order. Rhythmic spacing.

Not Interesting Different shapes create 9
interesting lay out.
Design Process
● Case Study 3: Graphic design
○ Website’s visual quality Visual balance, Hierarchy
○ The principle of cognitive science – Gestalt Laws

■ Aesthetics Ordered Grid
● Rows and Columns
■ Good composition
● Position with respect to area
■ Visual Balance
● Symmetry / Asymmetry
■ Low visual noise
● No clutter or crowding
■ Color & Graphics
● Simple plain light reflective /absorbing
colors with no fancy labels. 10
Design Process
● GUI design
○ Aesthetics
■ Aesthetics is a specialised discipline.
■ It has as much science & technology in it as much as Art.
■ It is qualitative as well as quantitative judgment.
■ Creative Designers are best equipped to decide on aesthetics as

they are trained professionally.
11
Design Process
● Iteration and Prototyping
○ Prototype
■ a model of the system
■ Incomplete, early version of a product
■ The prototype (model) can have limited or full range of

functionalities of the proposed system
■ A widely used technique in engineering where novel products are

tested by testing a prototype
12
Design Process
○ What to prototype?
■ Any aspect of the design that needs to be evaluated
● Work flow
● Task design
● Screen layout
● Difficult, controversial, critical areas
13
Design Process
○ Forms of Prototype
■ A storyboard (cartoon-like series of screen sketches)
■ A power point slide slow
■ A video simulating the use of a system
■ A cardboard mock-up
■ A piece of software with limited functionality
■ Even a lump of wood

14
Design Process
○ Prototypes in HCI
■ Low fidelity prototypes
■ Medium fidelity prototypes
■ High fidelity prototypes
15
Design Process
○ Prototypes in HCI
■ Two extremes
● Lo-Fi
● Hi-Fi
○ Fidelity can be thought of as how close of an

approximation of the final product is being attempted
○ Your design process should use multiple levels of fidelity

as you move from an idea to a fully designed product
16
Design Process
○ Low Fidelity Prototype
■ Basically paper mock-up of the interface look, feel, functionality

● Quick and cheap to prepare and modify
■ Purpose
● Brainstorm competing designs
● Elicit user reaction (including any suggestions for
modifications)
17
Design Process
○ Low Fidelity Prototype: Sketches
■ In a sketch, the outward appearance of the intended system is drawn

● Typically a crude approximation of the final appearance
■ Such crude approximation helps people concentrate on high level concepts

● But difficult to visualize interaction (dialog’s progression)
18
Design Process
○ Low Fidelity Prototype: Sketches
Interface of a proposed system A sketch of the interface

19
Design Process
○ Low Fidelity Prototype: Storyboarding
■ Storyboards are illustrations that represent a story.

■ Images are arranged together to visualize the story. Invented by Walt
Disney in the 1920s.
■ Visual storytelling with rough sketches/cartoons/comics.

■ A great way to bring a story to life!
■ Storyboards can be used to:

■ Describe a user’s current situation (pre or post design). Describe a user’s
hypothetical experience using a new technology/design.
20
Storyboarding is NOT the same as Paper Prototyping
Design Process
■ Example
21
Design Process
■ Example
● Initial screen. Shows the layout of
interface options.
22
Design Process
■ Example
● Once a stroller is selected by the
customer, its tag is scanned with a
hand-held scanner. The details of
the stroller is displayed on the
interface if the scanning is
successful. Also, the option
buttons become active after a
successful scan.
23
Design Process
■ Example
● However, the customer can choose
a different product at this stage
and the same procedure is
followed. For example, the
customer may choose a stroller
with different color.
24
Design Process
■ Example
● Once the customer finalizes a
product, a bill is generated and
displayed on the interface. The
option buttons become inactive
again.
25
Design Process
■ Challenges:
● Determining WHAT to draw is often hard
● Drawing the wrong thing puts the focus on the wrong thing
● Can be challenging to represent some things
● e.g., time, attention
■ Usefulness:
● If done right, storyboards can give you quick, valuable feedback on early ideas
● MUCH quicker/easier than building the whole app, system, or prototype
26
Design Process
■ Goal: Understand how your product or application fits into a larger context.
● Show a single scenario / tell a single story
● Use different storyboards to tell different stories
● Start by setting the stage:
■ Who? What? Where? Why? When?

● Then show key interactions
● Zoom back out and show the consequences of using the
system/design/application
● Could be satisfaction, but also think about errors
27
Design Process
■ Figure out the story you want to tell
● Iterative process with lots of drafts
■ Do a lot of brainstorming
■ Define a scenario and break it into segments
● Start with simple text (captions) and arrows
● Add emotions
● THEN sketch visuals on paper
■ Generate more polished versions only when you have refined/finalized the story!
28
Design Process
■ Elements of a storyboard
● Level of detail
● Inclusion of text
● Inclusion of people (personas!) and emotions
● Number of frames
● Portrayal of time
29
Design Process
● Level of detail
30
Caution: Too much detail can lose universality!
Design Process
● Level of detail
● Drawing is hard
Spending too much time drawing details is unnecessary! 31

Design Process
● Inclusion of text
32
Text is necessary, and captions help, But keep it short.
Design Process
● Include people and emotions
Include people experiencing the task/situation/design and

their reactions to it…. Both good and bad! 33
Design Process
○ Generally speaking, try to use fewer frames (e.g., 4-6 frames per story)
○ More is not always better
○ May lose focus of the story
○ May lose reader’s attention
○ Limit it to the important steps

○ Other advantages of short storyboards: Less work on the designer
○ Forces you to succinctly tell the story / what really matters
34
Design Process
35
Design Process
● Passage of time → include only if it is necessary
36
Design Process
● Making drawing easier → It does not have to be (always) drawing
37
Design Process
■ Summary
● Storyboards are a great way to bring a story to life.
● Good for pitching/communicating ideas
● Describe a user’s current situation.

● Describe a user’s hypothetical experience using a new technology/design.
● Make different versions of your storyboards

● Explore different options for presenting sequences of drawings Think carefully
about what you want to tell / achieve
● The wrong storyboard puts the focus on the wrong thing!
38
Design Process
○ Medium Fidelity Prototype
■ Prototypes built using computers

● More powerful than low fidelity prototypes
● Simulates some but not all functionalities of the system
● More engaging for end users as the user can get better feeling of the system
● Can be helpful in testing more subtle design issues
39
Design Process
○ Medium Fidelity Prototype
■ Two types
● Vertical
● Horizontal
Vertical - “Deep” prototyping Horizontal - “Broad” prototyping

◦ Show only portion of interface, but large ◦ Show much of the interface, but in 40
amount of those portions
a shallow manner
Interaction Design
BITS F364, 2021- 2022 Sem II

Design Process
○ High Fidelity Prototype
■ Typically a software implementation of the design with full or most of the

functionalities
● Requires money, manpower, time and effort
● Typically done at the end for final user evaluations
2
Design Process
■ Following ways to design prototypes

● Throw-away
● Incremental
● Evolutionary
3
Design Process

● Throw-away
○ prototypes are used only to elicit user reaction. Once their purpose is
served, they are thrown away.
○ Typically done with low and some medium fidelity prototypes
4
Design Process

● Incremental
○ Product is built as separate
components (modules).
After each component is
prototyped and tested, it is
added to the final system
○ Typically done with medium

and hi fidelity prototypes
5
Design Process

● Evolutionary
○ A single prototype is refined and
altered after testing, iteratively,
which ultimately “evolve” to the
final product
○ Typically done with hi fidelity

prototypes
6
Design Process
■ Prototype extremes
● UI prototypes can be as simple as a drawing on a piece of paper or as complex
as functional web application
● Or anywhere in between those extremes!
7
Design Process
■ Dimensionality of fidelity
● What are ways a prototype can be ‘true to life”?
8
Design Process
● Breadth
● Depth
● Look
● Interaction
9
Design Process
● Breadth
○ The “breadth” of a prototype refers to how much of the product’s
functionality is represented in the prototype
■ A very narrow prototype only represents a single feature

■ A broad prototype represents all intended functionality
○ Prototypes should generally be as broad as needed to cover basic or

most important tasks, but not much more
10
Design Process
● Depth
○ The “depth” of a prototype refers to how much of the prototype is
functional, and how robust it is
■ A very shallow prototype has no backend at all and is hard-coded
to respond as though the user had provided ideal input
■ A deep prototype has some logic and error-handling capabilities
■ At first glance, depth may seem unimportant, but it affects the
amount of exploration a user can do
■ Thus depth can actually have a profound influence on user testing!
11
Design Process
● Look
○ “Look” is probably what most people think of when they think of
prototype fidelity
○ It refers to how accurately a prototype represents the product’s intended
appearance, including fonts, colors, and graphics
○ It’s generally a good idea to hold off on something that has a high
fidelity look until later in the design process
■ People are less likely to point out flaws and mistakes
■ People can easily fixate on the “little” things
■ You are less likely to throw it out and start again
12
Design Process
● Interaction
○ “Interaction” refers to how the prototype handles input and output
○ Interaction can often be simulated
○ For example, you might create a digital prototype for an iPad application
which runs on your desktop and responds to traditional a traditional
mouse and keyboard
○ You might use hyperlinks or animation to simulate clicking interaction
(e.g., in Powerpoint)
13
Design Process
■ Once you have developed a lo-fi prototype and solicited feedback on it through peer
critique and user testing:
● You may wish to create another lo-fi prototype
● (isn’t iterative design fun?)
● Or you may be ready to move on to a hi-fi prototype
■ Remember, a high fidelity prototype is a substantial time investment!
■ It is good for evaluating a working design that has been derived from a few rounds
paper prototyping
14
Design Process
○ Comparison of prototypes
15
Design Process
○ Which prototype to use when?
16
Design Process
○ Prototyping tools
■ Points to consider
● Typography / font
● Color palette
● Device
● Interaction
● Implementation
■ Start by creating a digital version of your paper prototype Then iterate through user
testing and feedback
■ Don’t design a beautiful prototype that can’t be implemented! 17

Design Process
○ Prototyping tools
■ Choosing a tool: considerations

● Learning Curve
○ How long will it take me to learn this tool?
● Usage
○ Which device will it be used on?
● Fidelity
○ Will it showcase layout structure or complex interactions?
● Sharing
○ Can I collaborate with others on the prototype?
● Cost
○ How much am I prepared to pay for this tool? 18
All platforms
Powerpoint or Costs money … but many
Keynote of you have it already
Only for Mac
Costs money
Sketch Student discount (?)
All platforms
3 projects free
Figma
All platforms
Free trial (15 days)
Proto.io Then monthly fee
All platforms
One project free, then
InVision monthly subscription
Comparing prototyping tools
A cool tool to help you do this: http://www.prototypr.io/prototyping-tools/
Design Process
● Design is a solution
○ Design is about finding solutions
○ Unfortunately, designers often reinvent things

■ Hard to know how things were done before
■ Why things were done a certain way
■ How to reuse solutions
25
Design Process
○ Coding the design knowledge
○ An effective and flexible design is difficult to get “right” the first time.
○ Yet experienced designers do make good designs

■ New designers (like many of you!) are usually overwhelmed by the all the design
options available.
○ Experienced designers evidently know something inexperienced ones don’t, what is it?
■ Reuse solutions that worked in the past
26
Design Process
○ Coding the design knowledge
○ Experienced designers evidently know something inexperienced ones don’t, what is it?
■ Reuse solutions that worked in the past
■ How can you reuse solutions that good designers have used again and again?
● But still make them new/yours
● And learn how to create awesome designs at the same time
Design Pattern
27
Design Process
○ Classic example
○ Apple iPhone Launch

■ The screen was not suitable for the existing Websites
○ Solution
■ Plug and play UI (iOS Dev Kit)
28
Design Process
○ Solution
■ Plug and play UI (iOS Dev Kit)
■ Redesign app for every device
● Web
● iPhone
● iPad
● Android
29
Design Process
○ Solution → Responsive design for any screen 30

Design Process
○ Google Solution: Material design
■ Released by Google in 2014 material.io
■ a new visual language that combines principles of good design with technical and
scientific innovation.
■ a single underlying system that allows for a unified experience across platforms and
device sizes.
31
Design Process
32
Design Process
■ Reusable components
33
Design Process
■ Different devices
34
Design Process
■ Buttons
Icon buttons
35
Design Process
■ Navigation bar
36
Design Process
■ Tabs
37
Design Process
■ Cards
38
Design Process
■ Any app can be reduced
to these basic elements
39
Design Process
■ Practice
● Goal: Decompose an app into design patterns / components
○ Choose any popular app or website
○ Go though it and identify the different patterns/components used
○ Make a list, take screenshots, label different components
○ List of components: https://material.io/design
40
Usability Engineering
BITS F364, 2021- 2022 Sem II

● Xristine Faulkner (2000): defines it as follows
● “UE is an approach to the development of software and systems which

involves user participation from the outset and guarantees the usefulness
of the product through the use of a usability specification and metrics.”
2
● UE thus refers to the USABILITY FUNCTION aspects of the entire
process of conceptualising, executing & testing products (both hardware
as well as software), from requirements gathering stage to installation /
marketing & testing of their use.
3
● Usability
○ Usability is the effectiveness, efficiency and satisfaction with which users

achieve specific goals in particular environments; where
Satisfaction
Effectiveness Efficiency
the comfort (experience)
the accuracy and the resources
and acceptability of the
completeness with expended in
work system to its users
which specified users relation to the
and other people
can achieve specified accuracy and
affected by its use.
goals in particular completeness of
environments; goals achieved;
4
● Usability
○ User’s definition
■ USABILITY : The ability of a User to Use the product/ system / environment

as desired
■ Usability Engineering: The ‘affordance’ offered by a product that makes it

useable.
Usability does not happen by it self. It has to be “engineered” into the product.
5
● Usability
○ Related with
■ Human performance
● Capabilities, Limits, Consequences
● Intuitiveness
○ Maximum success for first-time users, with minimum training,

explanation or thought
● Efficiency
○ Maximum success for long-term users, with minimum time,

6
mental load, physical effort
● Usability
○ How to conceptualize within a product?
■ Design
7
● Some definitions
○ ‘Usability’ is the measure of the quality of a User’s experience when interacting

with a product or system
○ ‘Usability Engineering’ is the processes of deriving, specifying, measuring,

constructing and evaluating usability features into products and systems.
○ ‘Usability Study’ is the systematic analysis based on heuristics and/or

experimental evaluation of the interaction between people and the products
including the environment of use. Psychology/ Cognitive Sc/ Behavioral Sc
○ ‘Usability Testing’ is the scientific verification of the specified usability

parameters with respect to the Users needs, capabilities, expectations, safety &
satisfaction.
8
● UE Lifecycle
9
● UE Lifecycle
○ Design stages
10
● Goals of Usability Engineering
○ Effective to use → Functional
○ Efficient to use → Efficient
○ Error free in use → safe
○ Easy to use → Friendly
○ Enjoyable to use → Pleasurable Experience
5 Es 11
● Usability Engineering
○ Based on UCD (User-Centered Design)
12
● User Centered Design
13
BITS F364, 2021- 2022 Sem II

● UE and related areas
○ HCI : Human Computer Interaction is 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. ACM - Association for
Computing Machinery.
○ Human Factors & Ergonomics : Stress on human physical issues (physiology) and
on optimising work processes
○ User Interface Design: Focuses on interface layer assuming all deeper functions
are fixed.
2
○ HCD- Human Centered Design: Approaches to software engineering with user

focus at all stages of software design
○ ID – Interaction Design : wider scope in terms of devices beyond computers.

More emphasis on cognitive & experiential factors.
○ UE- Usability engineering focuses on design & implementation processes. It is

essentially research & design based activity .
○ There are overlaps in the above fields. Each is independent. UE has all of them. 3
○ Relationship between UE & Human Computer Interaction; Interaction Design;

Experience Design; GUI Design
4
● UE vs Software Engineering
○ Key difference (Karat and Dayton, 1995):
■ “In most cases of the design and development of commercial software,

usability is not dealt with at the same level as other aspects of SE, (e.g.
■ Clear usability objectives are not set; and
■ Resources for appropriate activities are not given priority by project

management).”
5
● Example: Recoverability in a VCR system
○ Usability specification
6
● Usability
○ Effectiveness
○ Efficiency
○ Satisfaction
● Usability metrics
○ ISO 9241
7
● Usability Testing & UE – the difference
• Usability engineering • Usability Testing

– Methodical approach – Part of process of UE
to producing user – Real users
interface + Experience performing real
+ function + aesthetics tasks
– A way to deliver a
product that works
8
● Usability Testing
○ Analytical evaluation
■ By simulating how the user’s activity will be

performed.
■ Heuristic evaluation measures design

against a list of usability factors.
○ Empirical evaluation
■ By building and testing a prototype.
■ Formal usability testing tests a component

of the design under controlled conditions - 9
actual users.
● Implication of Usability on Cost
○ $1 spent on usability = $10 saved

(Nielsen, 1993).
■ Mobile / Tablet /Device companies

now are heavily investing in UE as
the value adder as well as product
differentiator.
■ They do not consider ‘cost’ as a

constraining factor as far as UE is
concerned
10
● Evolution of HCI and understanding Users
•User as 'cog’ in the system – (1970's)
•User a source of error (80's),
•User a social actor (90's)
•User as a consumer now (2000’s)
•When user is a consumer, his needs need to be

understood in order for the product to stay in
the market….
•User experience with interactive

products start determining which
ones will sell.
11
BITS F364, 2021- 2022 Sem II

● Attributes of Usability – Nielsen (1993)
○ Learnability. How easy is it for users to accomplish basic tasks the first time they
encounter the design?
○ Efficiency. Once users have learned the design, how quickly can they perform
tasks?
○ Memorability. When users return to the design after a period of not using it, how
easily can they reestablish proficiency?
○ Errors. How many errors do users make, how severe are these errors, and how
easily can they recover from the errors?
○ Satisfaction. How pleasant is it to use the design?

2
● Case Study: Ryanair
○ one of the most recognizable airlines in Europe known for democratizing air travel for
the masses.
3
○ Motivation
■ Ryanair set about changing the perception

of the company, by launching an initiative
aimed at improving customer experience.
○ Goal
■ The airline’s plan is to turn its website —

which attracts 50m hits a month — into an
online travel platform.
4
○ User experience (UX) was quickly recognized as

a key area of focus
○ User focus
■ design research was seen as an important

part of keeping the user at the center of
everything Ryanair was doing
■ providing actionable insight to improve the

experience of the customer
5
○ Launched a brand new website
○ Usability aspects ○ Usability metrics
■ Effectiveness ■ Enhanced accounts section (store CC, travel doc)
■ Efficiency ■ Reduced number of steps to book a flight
■ Satisfaction ■ Consistent experience across devices
6
○ Hired a UX research organization
○ Solution
■ Remote usability testing
● Real people performing real tasks and their performance are measured
7
○ Method
■ Task(s)
● Book cheapest fare
● Book certain travel date
● Find some option on screen
● ‘Look and feel’ of the app
● Across devices and platforms
8
○ Method
■ Platform ■ Benchmark
● Ryanair’s test website ■ Execute the same tasks on

the competitor’s website
■ Data collected
● Quantitative (e.g., number of

steps required, completion time,
discovery time)
9
● Qualitative (e.g, look and feel)
○ Result
■ Feedback from large population sample sizes across different mobile platforms and
devices identified opportunities for better design
■ User feedback reinforced decisions that were made in the platform redesign and
helped ensure development milestones were achieved.
10
○ Outcome
■ Feedback
11
HCI in Software Processes
BITS F364, 2021- 2022 Sem II

The Software Lifecycle
● Software engineering is the discipline for understanding the
software design process, or life cycle
● Designing for usability occurs at all stages of the life cycle,

not as a single isolated activity
2
● Waterfall model
3
● Activities in the Software Lifecycle
○ Requirements specification
■ designer and customer try capture what the system is expected to
provide can be expressed in natural language or more precise
languages, such as a task analysis would provide
○ Architectural design
■ high-level description of how the system will provide the services
required factor system into major components of the system and
how they are interrelated needs to satisfy both functional and
nonfunctional requirements
4
● Activities in the Software Lifecycle
○ Coding and unit testing

■ Implement components
■ Testing the components independently
○ Integration and System testing

■ Putting components together
■ Testing to verify if the system meets requirements
○ Maintenance
■ Product is operational
■ Addressing errors and adding new functionalities
5
● Verification and Validation
○ Verification
■ designing the product right
○ Validation
■ designing the right product
○ The formality gap
■ validation will always rely to some extent on

subjective means of proof
6
● For Interactive Systems
○ Software Life Cycle
■ Iterative
■ Does not greatly help how user

interacts with a system
■ Need to have provision for user

feedback (or iteration)
● To improve usability
7
● Design rationale
○ Design rationale is information that explains why a computer system is the way it is.
○ Benefits
■ communication throughout life cycle
■ reuse of design knowledge across products
■ enforces design discipline
■ presents arguments for design trade-offs
■ organizes potentially large design space
■ capturing contextual information 8

○ Two types
○ Process-oriented
■ preserves order of deliberation and decision-making
○ Structure-oriented
■ emphasizes post hoc structuring of considered design alternatives
○ Two examples
■ Issue-based information system (IBIS)
■ Design space analysis 9

○ Issue-based information system (IBIS)
○ basis for much of design rationale research
○ process-oriented
10
○ Issue-based information system (IBIS)
○ main elements:
■ issues
● – hierarchical structure with one ‘root’ issue
■ positions
● – potential resolutions of an issue
■ arguments
● – modify the relationship between positions and issues 11

supports
Position Argument
responds to
Issue
responds to
objects to
Position Argument
specializes
Sub-issue generalizes
questions
Sub-issue
Sub-issue
Structure of gIBIS
○ Design space analysis
○ structure-oriented
○ QOC – hierarchical structure:
13
○ Design space analysis
○ questions (and sub-questions)
■ – represent major issues of a design
○ options
■ – provide alternative solutions to the question
○ criteria
■ – the means to assess the options in order to make a choice
14
Criterion
Option
Question Option Criterion
Option
Criterion
… Consequent …
Question
Question
The QOC notation

Requirements
specification
Architectural
design
Detailed
design
Coding and
unit testing
Integration
and testing
Operation and
maintenance
Traditional Design Iterative Design

• Why the difference?

• We are trying to design “for” the user
– Not for a programmer’s convenience or expert’s use
• What should we consider

– Abilities and needs of the users
– Their usage context
– Their work setting
• In other words, we have to “know the user”

• Need: Know the User
• A never ending process because there is so much to know and

because the users keep changing
• An interactive system designer should consider the human factors

that characterize users
• The Human Factors
• Perception: our ability to perceive our surroundings

– Can be visual, auditory or haptic (touch)
• Cognition: the way we process the perceived information in our

“mind” and take decisions
• Motor action: this is the mechanism through which we interact with
the surrounding
– Example: hand movement, eyeball movement, speech
• The Human factors
• These factors (user characteristics) vary with

– Age, gender, physical and cognitive abilities, personality
– Education, cultural or ethnic background
– Training, motivation, goals
• An interactive system designer should recognize this diversity

• Recognize diversity
• Systems used by several communities of users

– No single design can satisfy all users and situations
• Designer faces real challenge to cater to the need of

each community
– Designers must characterize users and situations as precisely
and completely as possible
• A generic user characterization
• Novice or first time users

– Know nothing about the task or interface concepts
– Often anxious about the computer and its functionality
• Knowledgeable or intermediate users

– Have stable task concepts and broad interface concepts
• A generic user characterization
• Expert users
– Thoroughly familiar with the task and interface concepts
– Want to get their job done quickly

• So, why the difference?
• Designer must know the user

– This knowledge can not be captured at once
• Design involves acquiring new knowledge and using it to refine

design in continuous cycle (till some “acceptable” design is found)
– The reason for so many “feedbacks” in the waterfall model
• User Centered Design (UCD)
• The design process, where designer collects feedback about the design
from users and use this to refine design, is known as “user centered
design” or UCD
• UCD is based on understanding the domain of work or play in which

people are engaged and in which they interact with computers
• User-Centered design
• Assumptions
– Result of a good design is a satisfied user
– Process of design is a collaboration between designers and user.
– Design evolves and adapts to users’ changing concerns, and the process
produces a specification as an important byproduct
– The user and designer are in constant communication during the
entire process
• UCD - Drawback
• In UCD, user involvement is “passive”

– The designer elicits feedback from user (through
interviews, informal discussions etc)
– Prepares specification on the basis of user response
– Take feedback on the design and makes refinements

• UCD - Drawback
• Problems with “passive” involvement of user

– User intuition about a new interface may not be correct (feedback
not reliable)
– The interview process itself may not be formulated properly (designer

asks wrong questions)
– It is not possible for the designer to identify all possible issues to take
feedback from users, as the designer’s knowledge about the user may
not be complete
• Participatory Design
• Solution: make (representative) users a part of the design team
• Such a design process, where end users are part of the design team,
is known as “participatory design”
Design Guidelines
BITS F364, 2021- 2022 Sem II

Design Guidelines
● Designing for maximum usability
– the goal of interaction design
○ Principles of usability
■ general understanding
○ Standards and guidelines

■ direction for design
○ Design patterns
■ capture and reuse design knowledge
2
Design Guidelines
● Design principles
○ Learnability
■ Support for learning for users of all levels
○ Flexibility
■ Support for different ways of getting a task done
○ Robustness
■ Support for recovery
3
Design Guidelines
● Design principle: Learnability
○ How easily the user can start the interaction and achieve superior performance?
○ Predictability
○ Synthesizability
○ Familiarity
○ Generalizability
○ Consistency
4
Design Guidelines
● Learnability: Predictability
○ What some action will do?
○ Operation visibility
■ grayed menu items
■ menus or command shell
5
Design Guidelines
● Learnability: Synthesizability
○ Providing cues to indicate the cause of the current state (or error)
■ Don’t just inform
○ e.g.,
■ You can’t copy some folder
● At the same time indicate that there is not enough space
■ You can’t write to a file

● At the same time indicate that file is open by other program
6
Design Guidelines
● Learnability: Familiarity
○ Using cues from real world
○ e.g.,
■ Errors are normally shown in red
■ Confirmations are usually shown as green tick
7
Design Guidelines
● Learnability: Generalizability
○ Knowledge of one system is generalizable to other system
○ e.g.,
■ Cut and paste across different application
■ File browser in different application
8
Design Guidelines
● Learnability: Consistency
○ Likeliness in behavior in terms of tasks/operations/situations
■ In different things,
● Interacting or doing a task
● Output
● Screen layout
9
Design Guidelines
● Design principle: Flexibility
○ Different ways to exchange information between user and system
○ Dialog Initiative
○ Multithreading
○ Task migration
○ Substitutivity
○ Customizability
10
Design Guidelines
● Flexibility: Dialogue Initiative
○ Interaction between the system and user
○ User-initiated
■ User initiates
■ Generally preferred
○ System-initiated
■ System does all prompts, user responds
11
Design Guidelines
● Flexibility: Multithreading
○ Ability to perform multiple tasks at a time
○ Concurrent
■ Input to multiple tasks simultaneously
○ Interleaved
■ Many tasks, but input to one at a time
12
Design Guidelines
● Flexibility: Task Migration
○ Ability to switch tasks between users and system
■ Depending upon who does it better
○ Self-driving car
■ L5 automation, control automatically goes to the machine
■ L3, L4 automation → control to user
○ Spell checking
13
Design Guidelines
● Flexibility: Substitutivity
○ Ability to chose over different options
■ Interaction methods
● Voice-based or text-based search
■ Ways of performing actions

● Doing something by mouse / keyboard
■ Ways to representing output
14
Design Guidelines
● Flexibility: Customizability
○ Ability to change the interface → personalization
■ User driven
● adaptability
■ System driven
● adaptivity
15
Design Guidelines
● Flexibility
Summary of principles affecting flexibility 16

Design Guidelines
● Design principle: Robustness
○ Observability
○ Recoverability
○ Responsiveness
○ Task performance
17
Design Guidelines
● Robustness: Observability
○ Can user determine the internal state of the system from her observation?
○ Browsability
■ Explore current state (without changing)
■ Availability of default values
○ Reachability
■ Navigating through observable states
○ Persistence
■ Time of the persistence of the observable state
■ E.g., email message notification visual cue
18
Design Guidelines
● Robustness: Recoverability
○ Can user come out of the state in case of an error?
○ UNDO
■ the previous error
○ Move forward
■ In case the error can’t be undone
19
Design Guidelines
● Robustness: Responsiveness
○ User’s perception about the rate of communication with the system
○ Response time
■ Time taken by the system to respond to user action
○ Consistency is important
■ Every time similar amount of time should be taken to respond
20
Design Guidelines
● Robustness: Task Performance
○ Does the system allow to perform the tasks as wished by the user?
○ Task completeness
■ Can system do all tasks of interest?
○ Task adequacy
■ Can user understand how to do tasks?
○ New tasks
■ Provision for defining new tasks
21
Design Guidelines
● Robustness
Summary of principles affecting robustness 22

Design Guidelines
● Example
○ Preparing usability specification for measuring the guessability of a user while making
entry in an electronic diary system. The electronic system is going to replace the
existing paper based system.
23
Design Guidelines
● Example
○ Preparing usability specification for task migratability of a system. The current system
allows the user the schedule meeting for every occurrence, but in the new system the
recurrence of the meeting will be specified by the user and the scheduler will
automatically set the meeting at desired frequency.
24
Design Guidelines
● Design Guidelines used in HCI
○ To evaluate existing interfaces or to conceptualize new interfaces
○ Shneiderman’s eight golden rules

○ Norman’s seven principles.
○ Nielsen’s ten heuristics
25
Design Guidelines
● Design Guidelines: Background
○ Design is both qualitative as well as

quantitative.
○ The terms ‘Guidelines’ and

‘principles’ rather than precise’ laws
& rules’ are used in Design.
○ Ben Shneiderman formulated eight

such guidelines that can be used in
Interface designing.
26
Design Guidelines
● Design Guidelines: Shneiderman’s 8 Golden Rules
○ 1. Strive for consistency

○ 2. Enable frequent users to use shortcuts
○ 3. Offer informative feedback
○ 4. Design dialogs to yield closure
○ 5. Offer error prevention and simple error handling
○ 6. Permit easy reversal of actions
○ 7. Support internal locus of control
○ 8. Reduce short-term memory load
27
Design Guidelines

■ Users need to be able to do the same thing the same way that they have been
doing.- every time.
■ Interfaces need to exhibit ‘consistent’ quality across screens/ applications

both visually as well as behaviorally.
■ Consistency leads to a pattern which is easier to handle cognitively.
■ Consistency such as ‘similar sequence of actions in similar situations’ makes it

easy to learn.
28
Design Guidelines

■ Using consistent graphical elements in consistent manner
29
Design Guidelines

■ Using consistent graphical elements in consistent manner
● Use grid layout
■ The number of inconsistent placement (if any) should be as minimal as

possible 30
Design Guidelines
○ 2. Enable frequent users to use shortcuts

■ Design for all
● Novice, intermediate, and for expert
■ For frequent users

● Reduce number of interactions
○ Reduces response time
○ Faster display
○ Pace of interaction
● Enable
○ Short cut keys
○ 31
Special commands, macros
Design Guidelines
○ 3. Offer Informative feedback

■ Interfaces need to not just to be communicative but also need to inform the
‘user‘ in terms of learning & feed back which tells them that they are
proceeding in the right direction.
■ E.g, you can’t copy <as there is not enough space.>
■ Unless the user gets a feed back he/she cannot proceed or becomes unsure of
the correctness of the action.
32
Design Guidelines
○ 4. Design dialogs to yield closure

■ In an interaction - dialogue needs to have a closure which is recognized by the
user as end of an action.
■ Sequence of actions need to proceed in a dialogue by engaging the user in a
step by step manner.
■ E.g., A message at the end of a sequence of events gives a feedback &

closure of sending a message.
33
Design Guidelines
○ 5. Offer error prevention and simple error handling

■ Interfaces need to minimize errors.
■ Users can make errors while interacting with computers

as well as while inputting / interpreting information.
■ Even if the user makes an error the system needs top

be designed to detect it, take corrective or
precautionary steps to arrest it. It also needs to offer a
way out for recovery from the error.
■ A default system unchanged message needs to be

communicated to the user if an error has happened 34
Design Guidelines
○ 6. Permit easy reversal of actions

■ retracing backwards /reverse actions if need be so as
give relief from anxiety to the user.
■ system should encourage exploration without techno

fear
■ re traceable path backwards of all actions and permit

their nullification.
■ E.g., PPT application has reversal in both the direction –

backwards (last action) and forward (post action)
35
Design Guidelines
○ 7. Support internal locus of control

■ Allow user to always feel ‘in control’ of the system and
of the situation.
■ User should believe that they are controlling the system

and not the other way around. This is achieved by
more opportunities for ‘interactions’.
■ The bearing of where the user presently is helps the

user to orient or reorient the interaction. The user
should never be allowed to feel lost.
36
Design Guidelines
94 56 781029
○ 8. Reduce short term memory load Easier to remember

■ not load the cognitive short term memory of the user if chunked into
by expecting user to remember several sequences , smaller setc
actions and their consequences at a time. 94 56 7 810 29
■ Millers’ 7 chunks of information is often prescribed as a

solution to limit short term memory.
■ In psychological experiments it has been found that the

short term memory can hold 7 +/- 2 bits called chunks
of information. Long sequential actins requiring more
than 7 chunks need to be broken down into smaller
chunks.
37
Design Guidelines
○ Practice exercise
■ Choose any common software interface (e.g., MS Excel).
Analyze its interfaces by navigating to find out if it
adheres to the eight Shneiderman Rules .
th
■ Use a Novice User (e.g., 10 standard) as your
reference.
■ Prepare your findings in terms of number of violations

per rule for the chosen software.
38
Design Guidelines
BITS F364, 2021- 2022 Sem II

Design Guidelines
● Design Guidelines: Norman’s 7 Principles
○ 1. Use both knowledge in world & knowledge in the head

○ 2. Simplify task structures.
○ 3. Make things visible
○ 4. Get the mapping right
■ (User mental model = Conceptual model = Designed model)
○ 5. Convert constrains into advantages
■ (Physical constraints, Cultural constraints, Technological constraints)
○ 6. Design for Error
○ 7. When all else fails – Standardize.
2
Design Guidelines
■ Knowledge in world
● Learning not required. Interpretation substitutes for learning.
● How easy it is to interpret information in the world depends upon how well it
exploits natural mappings and constraints.
■ Knowledge in the head

● Requires learning, which can be considerable.
● Learning is made easier if there is meaning of structure to the material (or if there
is a good mental model).
3
Design Guidelines
■ E.g., typing in a keyboard does not require any prior knowledge on key alignment
● Same across keyboards
■ But, what about this?
■ User’s knowledge model is not necessarily same as the world’s knowledge model
4
Design Guidelines
■ Both of these are to be considered

● Semantic level
○ set of objects, attributes and operations, which the ‘system’ and the ‘user’
can communicate. Semantics is about how the user interprets and makes
meanings out of the system.
● Syntactic level
○ conceptual entities and operations may be referred to in a particular
command context or system state.
● Interaction level
○ translation of commands and objects into the associated physical actions
5
and the structure of the interaction, including typing / mouse / gesture /
Design Guidelines
○ 2. Simplify task structures
■ Task Level
● analyze the user's needs and to structure the
task domain in such a way, that a computer
system can play its part. The task level describes
the structure of the tasks which can be delegated
to the computer system.
■ Breaking down the task at simplest level so that at

every level there is only one action involved (as far as
possible)
6
Design Guidelines
■ Objects at the Semantic level need to be mapped to the objects at Syntactic level,
for the user.
■ achieved with making the connection as ‘Visual’ as possible.
■ Graphic User Interface designers use ‘ Metaphors’ to make the connection.
■ Semantic Level
● Delete action
■ Syntatic level
● Delete command 7
Design Guidelines
■ E.g., Delete action

● Semantic Level
○ Delete action
● Syntactic level
○ Delete command
■ Command line → (natural language)
○ Trash icon (visual)
8
Design Guidelines
■ HCI Designers use this principle of ‘Making it Visual ‘

to the maximum while designing Interfaces.
■ Interaction styles such as

■ WIMP ( Windows – Icons – Menus – Pointer)
■ Three Dimensional Interfaces as in
● Virtual Realty can be found in current software
interfaces.
9
Design Guidelines
■ Mapping: the link between what user wants to do

and what is perceived as possible - by the user
based on the user’s own logic.
■ User Mental Model = Conceptual Model = Designed

Model
10
Design Guidelines
■ User Mental Model

● the model of a system’s working that a user
creates when learning
● not technically accurate
● Evolve with learning
● models people have of themselves, others and

environment. It is their inner understanding.
11
Design Guidelines
■ Conceptual Model
● technically accurate model of the computer /
device / system created by designers /
teachers/researchers for their specific internal
technical use
12
Design Guidelines
■ Design Model
● The Conceptualised solution the Designer had in
his/her mind
● The user model and the system image

(functionality, appearance etc.) roll into one
● the design model and user model have to be as

close as possible for the systems acceptance. The
designer must ensure that the system image is
consistent with and operates according to the 13
proper conceptual model.
Design Guidelines
■ to ensure that the user knows what to do next when there are
● more than one possibility or
● more than one given option.
■ a designer needs to embed constraints in the sequence of operations in an interface such

that the user is guided to the right sequence choice by reducing the chance of error in
choosing the wrong option
14
Design Guidelines
■ Physical constraints
● Based on shape, size, area (example mouse over area demarcation)
■ Cultural constraints : Culturally & semantically practiced rituals, symbols, color codes.
● Ex: Always start from Right & stop on Left lower end in a word document.
● Different colors (red, yellow, green) used to denote different situations
15
Design Guidelines
■ Technological constraints:
● Example: Closing a file without saving – user needs to be warned every time this is
likely to be operated by the user.
● Program it such that it is mandatory to press the save button before close button.
16
Design Guidelines
■ Visibility and feedback:

● Visual design also can suggest constraints.
● Ex: If a number of identical buttons are required for diverse functions,

○ Visually building differences such as colour or grouping , it is possible to ‘
constrain’ a user in not pressing randomly the identical looking buttons placed
in close proximity.
17
Design Guidelines
■ In HCI, errors by users cannot be blamed on Users.

■ Users are not the cause for errors.
■ Error are often
● ‘slips’ - intend to do one thing but end up doing another accidentally.
● Errors happen when there is a mismatch between User’s mental model, designers'
understanding of User’s mental model;
18
Design Guidelines
■ Description Errors
● Two objects physically alike are described / taken mistakenly for each other.
● One solution employed is ‘highlighting’ the object which is in line of next action so
that ‘attention’ is drawn to that right object from amongst similar looking group of
objects.
■ Data Errors
● Could be perception errors or selection errors.
● A solution could be reversal of action without penalty and ‘ affordance’ by the user
to correct the error by retracing action steps.
19
Design Guidelines
■ Associative Errors
● involve activating one sequence in place of another and realising it when the
wrong/unexpected response results
● when short term memory is overloaded or long term memory fails.
● Forgetting to do something as prescribed or reversing the sequence
○ E.g., Pressing the second button first instead of the first button etc
20
Design Guidelines
■ Error Resolution Strategies

● Slips’ & Errors need to be taken care of in Design by providing feed back (either pre
or post action ). Example : Prompting.
● The cause of the error needs to be understood more than the error.
● Retracing actions must be provided for.
● Assume Task to be imperfect and assume that users will always ‘ approximate’ their
actions. 21
Design Guidelines
○ 7. When all else is unsuitable – Standardize
■ In certain situations / contexts wherein the nature of the task is critical , the user needs
to be ‘ forced’ to follow a the only choice as given (afforded) by design.
■ Example of such situations are : Medical Devices; Warfare equipment; Nuclear

Equipment; Power Plant Controls, Energy Grids; Air Traffic Controls etc
■ In such critical application contexts ‘ STANDARDISATION’ practice is followed.
22
Design Guidelines
BITS F364, 2021- 2022 Sem II

Design Guidelines
● Design Guidelines: Nielsen’s 10 Heuristics
○ What is a heuristic?
■ “rule of thumb”
○ derived after careful research by Nielsen who after conducting a factor analysis of 249 usability
problems, came up with ten simply stated guidelines in 1994.
○ Empirical derivations
○ Widely used by Usability professionals (which includes Interface designers)
○ means of quickly identifying likely interface design problems in an application. 2

Design Guidelines
○ 1. Visibility of system status

○ 2. Match between system and the real world
○ 3. User control and freedom
○ 4. Consistency and standards
○ 5. Error prevention
○ 6. Recognition rather than recall
○ 7. Flexibility and efficiency of use
○ 8. Aesthetic and minimalist design
○ 9. Help users recognize, diagnose, and recover from errors
○ 10. Provision of Help and documentation
3
Design Guidelines
■ Users need to be kept informed by the system about what is

going on, through appropriate feedback within reasonable
time.
■ For example :
● A glowing LED/ flashing element indicating that the
interface is live .
● An animated symbol that states that ‘saving’ act is
going on…..
4
Design Guidelines
■ Users need to be kept informed by the system about what is going on, through
appropriate feedback within reasonable time.
■ user needs to be constantly made aware of his/her interaction with the interface while
interacting.
■ The control response ratio (input – output time) need to be as small as possible.
■ Any interface needs to communicate that it is in a ready state to be operated upon – at

the start of an interaction cycle.
5
Design Guidelines
■ The system should speak the users' language, with words, phrases and concepts familiar
to the user, rather than system-oriented terms.
■ Follow real- world conventions, making information appear in a natural and logical order.
■ Technical jargon or using terms like ‘Initiate’ or ‘Load’ in place of ‘Start’ contributes to
initial mismatch between the users cognitive process and machines feed back dialogue.
■ The interface should allow smooth transition from real world to digital world
6
Design Guidelines
■ Tendency to use programming language and

syntax on the display, while understandable to
the software programmer, will certainly be a
mismatch to a user.
■ Users can come from different backgrounds,

skills levels, specializations & culture. The
context on the screen needs to match with the
context of the user’s mental model
7
Design Guidelines
■ Users often choose system functions which they did not want. (e.g., Mouse click due to
haste). This calls for Support undo and redo.
■ A user needs to have to go through tracing too many steps back to regain control.
■ Sequential thought process in a user that follows a simple everyday human habit need to
be reflected in the dialogue between the device and the user. A good interface facilitates
this.
8
Design Guidelines
■ In control (a) (b)

● one can choose to stop interacting an
time rather than be forced or The first example (a) “accuses ‘ them
trapped by the interface into inaction of committing an error. The second
one (b) is much better but does not
● Feeling in the user that he/she is in tell the user what to do next !
control at all times must be created.
● If the user attempts to gain control

and if a message like 404 error
occurs the systems is unfriendly & 9
unhelpful !
Design Guidelines
■ Using different words to mean the same action or using different symbols on different
pages can be confusing to the user.
■ Users should not have to wonder whether different words, situations, or actions mean the
same thing. They should not be in doubt as to what to do next.
■ Do not use different words to mean the same action in an interface

● leads to confusion
● Interaction pattern gets disrupted → cognitive load increases
10
Design Guidelines
■ To achieve consistency
● Maintain a dictionary of labels /
words → prescribed set
Inconsistent wording & windows / buttons can confuse

users when the destination page has a different title from
the link. The two screens belong to the same software
but appear differently at different places within the
11
website.
Design Guidelines
■ By research it is possible to pinpointthe typical errors that users normally tend to commit.
Prevention of error is best approach. However recovery from error prone actions through
a well designed error message should be adopted.
■ Developing error prevention mechanism

● Forewarning, restricting , prompting , retracing or recovery routes , etc are means
of addressing errors.
● Anticipating for errors and incorporating preventive measures ensures fear free and
ego free user
12
Design Guidelines
■ Developing error prevention mechanism
● E.g., GUI-style widgets cut down
on the errors but may still have to
be double checked before
confirmation
13
Design Guidelines

■ Users are better at recognising things they have previously experienced.
■ Loading the STM- short term memory of the user beyond a limit has negative
consequences.
■ Reduction on cognitive load during the interaction ensures that the user is not asked to
rely on means and methods that extract human cost.
■ If an interface requires specialised training and use of memory to operate - it will be
quickly abandoned by the user.
14
Design Guidelines

■ Analogy, metaphor, symbols, sounds, etc are used as design elements in an interface to
ease recall thereby eliminating the need for ‘ thinking while interacting’ and memory loads
for the user.
■ Good labels and descriptive links are crucial for recognition.
Difficult to interpret
Easy to find 15
location of the file
Design Guidelines
○ 7. Flexibility and efficiency of use

■ The system can cater to both inexperienced and experienced users.
● As the user becomes proficient - shortcuts can be encouraged. Thereby increasing
the efficiency.
● Allowing the rearranging of the screen elements by the user can also be adopted.
● Interface needs to be flexible and make it possible for the user to adopt quicker
dialogues through shortcuts.
16
Design Guidelines

■ Relevancy, simplicity, minimum amount of labels, un cluttered graphics result in efficient
communication dialogue between the user and the interface.
■ All unnecessary superfluous elements need to be dropped.
■ Use least number of elements
17
Design Guidelines

■ Simplicity is equal to efficiency is equal to elegance is equal to beauty is the aesthetic
algorithm in minimalism.
■ Visual noise needs to be completely eliminated.
18
Design Guidelines
○ 9. Help users recognize, diagnose, and recover from errors

■ Preventing a user who is about to make a error would be a good approach.
■ Gentle wording of error messages, constructive suggestions, re-educating the user- all
can contribute to a happy self confident user who is not afraid of being caught unawares
or penalized.
■ Do not use the loud message
■ Error messages should be suggestions
■ Not clear about the consequence of continuation

● Seems users is responsible for the option selected
19
Design Guidelines
○ 10. Provision of Help and documentation

■ Even though it is better if the system can be used without documentation, it may be
necessary to provide help and documentation.
■ Help quarries need to be answered promptly without the user having to go through an
elaborate eliminating list.
■ to assist the user learn and understand the dialogue between the user and the machine
or understand
The screen shots (1&2) attempt to

Train the user by offering
information on the consequences
of their decision 20

Introduction To HCI: BITS F364, 2021-2022 Sem II

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To HCI: BITS F364, 2021-2022 Sem II

Uploaded by

Copyright:

Available Formats

Introduction to HCI

BITS F364, 2021- 2022 Sem II

“a discipline that is concerned with the design, evaluation, and

○ Computing systems affect every person

○ Safety, satisfaction, utility is critical

○ Product success depends on ease of use

HCI and Related Areas

○ Physical & cognitive abilities (& special needs)

○ Personality & culture

○ Knowledge & skills

● All users are not alike

○ Create multiple designs

● Combination of many aspects

○ Time required to complete the task

○ User retention over time

● User-driven ○ Subjective satisfaction / user experience

○ Retention rate over time

BITS F364, 2021- 2022 Sem II

○ How to use this massive power?

○ One of the first is an air defense system of USA Air Force

● Concept of programming toolkit (1963)

Alan Kay’s vision of Dynabook

○ Development of “smalltalk” (a visual programming

○ WIMP (Window, Icon, Menu, Pointer)

○ Xerox 8010 star information system (Xerox, 1981)

Xerox 8010 star information system

○ Common GUI operations (move, drag etc)

■ Reduces the chances for syntactic errors,

Apple Mac PC in 1984

○ Computer networks in 1960’s

○ Society/sociology comes into picture

○ Groupware (CSCW systems built to support users

○ Computer mediated communication

○ Tim Berners –Lee (CERN, 1989)

○ The year 1991 saw the first text based browser

○ The first graphical browser (Mosaic) came in 1993

○ Ubiquitous computing –the most active research area

○ The field originated from Mark Weiser’s vision, Xerox

○ Sensor based/context aware computing (1990’s)

○ Also known as pervasive computing

○ Information stored in memory

○ Information processed and applied

○ Emotion influences human capabilities

○ Each person is different

■ physical reception of stimulus

■ processing and interpretation of stimulus

■ visual acuity is ability to perceive detail

■ familiar objects perceived as constant size

■ cues like overlapping help perception of size

○ Context is used to resolve ambiguity

○ State-of-the-art eye tracking devices

Screen divided into multiple AOIs 19

Circle size is proportional to

■ Time to first fixation

Key features for a sample AOI

■ Also known as “scan path”

○ Auditory system filters sounds

○ May be key sense for someone who is visually impaired.

○ Stimulus received via receptors in the skin:

○ Kinethesis - awareness of body position

○ Movement time dependent on age, fitness etc.

○ Reaction time - dependent on stimulus type: