Dr Linda Anticoli

l.anticoli@ucl.ac.uk

BASC0048: Lecture 2
Computers and Humans
1
Humans Perception, Cognition, and Culture
 Reception
and
Perception

https://assets.ctfassets.net/4zjnzn055a4v/6qZ76US7AKRD1Iy5pPs9UL
/4528090b122bb50e23e8bd3be8b0fe1a/On_Human_Perceptual_Bandwidth_and_Slow_Listening_-_2
 Reception:
rate your
senses

https://www.ncbi.nlm.nih.gov/pmc
Human/User

• Consider biological limits in design

• Information processing: visual, auditory, haptic,
movement
• Memory: sensory, short-term, long-term
• Emotions
• Context and Culture
Vision
2 stages:

• Physical reception of stimulus

• Processing and interpretation of stimuli

The Eye -
physical
reception
 Size and depth
The Eye – signal Visual acuity: ability to perceive detail
interpretation Visual angle: how much of view object
occupies
 Size and depth:
The Eye – signal • Perceptual constancy
interpretation
• Overlapping cues
The Eye –
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
The Eye –
Colour

• made up of hue, value,

saturation
• cones sensitive to colour
wavelengths
• blue acuity is lowest– 8%
males and 1% females colour
blind
The Eye: final thoughts
• The visual system compensates for:
• Movement
• Changes in luminance
• Context is used to resolve ambiguity
• Optical illusions sometimes occur due to over compensation
Sight – Accessibility Implications
• Color Blindness

https://www.color-blindness.com/2016/10/27/new-release-of-
color-blindness-simulator/
Sight – Accessibility Implications
• Color Blindness
• Rely on symbols, not colors
• Encode information in shapes
• Use patterns
• Use labels

https://blog.datawrapper.de/colorblindness-part2/
Sight – Accessibility
Implications
• Visual impairment: Sight loss and blindness
• Try zooming text text to accommodate different sights
• Can someone navigate only with the keyboard?
• Alt text for images, use screen readers
• Clear headings (<h1> title <h1>)
• “Skip to main content” link on each page
• Contrast!
• Use templates
https://abilitynet.org.uk/factsheets/vision-impairment-and-
computing
Sight – Accessibility
Implications
• Colours matter: don’t use blue for warnings!
• Beware of inattentional blindness (mobile distraction, driver
distraction, etc)
• Popularised by (Simons & Chabris, 1999)
• And change blindness
• Avoid superpose complementary colours

https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4530948/ https://www.simplypsychology.org/inattentional-
blindness.html
Reading
• Several Stages:
• visual pattern perceived
• decoded using internal representation of language
• interpreted using knowledge of syntax, semantics, pragmatics
• Reading involves saccades and fixations
• Perception -> fixations
• Word shape is important to recognition -> word superiority effect ->
top down processing in object identification
Design Advice Typography
• Paper: serif
• Display: sans serif
• Upper part of a word > recognisable than lower

https://learn.microsoft.com/en-us/typography/develop/word-
recognition
 VR
• Beware of:
• Ocular parallax
• Motion sickness

https://stanford.edu/class/ee367/Winter2019/
angelopoulos_report.pdf
 Hearing
• Provides information about
environment: distances, directions,
objects etc.
• 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
effect.
Hearing – Accessibility Implications
• Audio commonly used for feedback and situational awareness
• Gesture-based interfaces
• Games
• Video without captions means less accessibility
• Computers can help people with hearing loss through auto
transcription
 Touch
• Provides important feedback about environment.
• May be key sense for someone who is visually impaired.
• Stimulus received via receptors in the skin:

• Some areas more sensitive than others e.g. fingers.

• Kinethesis - awareness of body position – affects comfort and performance
Movement
Fitt’s Law
• relationship between the time it takes
a pointer (such as a mouse cursor, a
human finger, or a hand)
• to move to a particular target (e.g.,
physical or digital button, a physical
object)
• in order to interact with it in some way
(e.g., by clicking or tapping it, grasping
it, etc.)
Fitt’s Law -
Examples
• For each pair of
boxes move your
finger between
them as fast as
you can without
clicking outside
the box
Fitt’s Law -
Examples
• https://www.nngroup.com/
articles/fitts-law/
Fitt’s Law - Examples
Physical Impairment
• Limited control over movement.
• Fine mouse movements difficult.
• Precise motions difficult.
• Speech or eye tracker input an option
• Usually gestures are more inclusive (cite)
Cognition
 • Sensory

• Short/working term (STM)

Memory
• Long term (LTM)

• Selection of stimuli
governed by level of arousal
 • Sensory
Attention
• Short/working term (STM)
Rehearsal
Memory
• Long term (LTM)

• Selection of stimuli
governed by level of arousal
Atkinson & Shiffrin (1968) model
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
Sensory
memory
Sensory
memory
• Do you remember the letters
in row 3?

• If I tell you in advance, yes.

• You pay attention and you
move to
Short term memory
• Scratch-pad for temporary recall
• rapid access ~ 70ms
• rapid decay ~ 200ms
• limited capacity - 7± 2 chunks

• Rehearsing moves chunks into..

 Long term memory

• Repository for ALL our knowledge

• Slow access
• Slow decay (also age related)
• Large capacity

• Episodic: serial memory of events

• Semantic: structured memory of facts, concepts, skills. Derived
from episodic
• Semantic memory supports inference
Long term memory
Long term memory
Different models for LTM
• Frames
• Scripts
• Production Rules

• All relate to the storage and retrieval of

information

• Read chapter 1 Alan Dix for more examples!

Accessibility issues regarding
memory
• AHDH and Alzheimer impact iconic memory (Ahmadi et al.
,2013; Lu et al, 2005)
• ASD selectively impacts working and LTM, e.g., difficult
to recognise faces, shapes. Poor working memory for
spatial information. https://www.apa.org
/news/press/releases/2006/01/autism
• Forgetting:
• Decay -> information lost gradually
• Interference -> new information replaces old: retroactive
interference and proactive inhibition
Accessibility issues regarding memory
Recognition is better than Recall
 Accessibility/Usability issues regarding
sensory and cognitive skills
• Errors
• Slips
• Right intention
• Causes: poor physical skill, inattention
• CHANGE: aspect of skill that causes slip -> make buttons larger, more
visible
• Mistakes
• Wrong intention
• Cause: incorrect understanding
• CHANGE: make instructions explicit
Accessibility/Usability: error prevention
Include Helpful
Constraints

https://m2.material.io/components/date-pickers
Offer
suggestions
Use good
defaults

https://web.dev/articles/cookie-notice-best-practices
Use forgiving formatting
Emotions and Trust
 Emotions
• Various theories:
• James-Lange: emotion is our interpretation of a physiological response to
stimuli
• Cannon: physiological response to stimuli
• Schacter-Singer: emotion is the result of our contextual and situational
evaluation of a physiological response to stimuli

• Emotions involve both cognitive AND physical response to stimuli

• Emotions are subjectively experienced as strong
feelings
https://www.apa.org/topics/emotions#:~:text=Emotions%20are%20conscious%20mental%20reactions,behavioral
%20changes%20in%20the%20body.
 Emotions
• Affect: a broader term used to describe the emotional and
cognitive experience of an emotion, feeling or mood
• Affect influences how we respond to situations
• Positive -> creative problem solving, enhance motivation
• Negative -> narrow thinking, impairs motivation

“Negative affect can make it harder to do even easy tasks; positive affect can
make it easier to do difficult tasks”(Donald Norman)

Teigen, K. H. (1994). Yerkes- Trezise, K., and Reeve, R. A. (2014). Cognition-

Dodson: a law for all emotion interactions: patterns of change and
seasons. Theory Psychol. 4, 525– implications for math problem solving. Front.
547. doi: Psychol. 5:840. doi: 10.3389/fpsyg.2014.00840
10.1177/0959354394044004
Emotions in UI and IxD
• stress will increase the difficulty of problem solving
• relaxed users will be more forgiving of shortcomings in design
• aesthetically pleasing and rewarding interfaces will increase positive
affect
• Avoid TMI: cognitive load theory!
Let’s talk about Trust
• Trust is a crucial guide in interpersonal interactions
• Trust is a psychological bridge between beliefs and
behavior (Lee and See, 2004).
• Cognitive antecedents of trust: competence,
dependability, credibility
• Affective antecedents of trust: warmth, bond, care
• IN HCI: trustworthy interfaces match perceived and
actual characteristics

https://www.frontiersin.org/articles/10.3389/
fdigh.2018.00014/full
Who should I trust?
Designer

Myself Trust Company

Algorithms
Psychology and the Design
of Interactive Systems
Individual Differences
• Influence our perception and cognition, and our ability to use
interfaces
• Long term: gender stereotypes, physical and intellectual abilities,
culture
• Short term: effect of stress/fatigue
• Ongoing: age

• Accessible design doesn’t exclude sections of user population

Trust Failures
• Twitter blue checkmark: once symbol with functional/identification
value, now identifies paying users only. Breach of trust

• Airtags used to stalk people: trust

• https://www.apple.com/uk/newsroom/2022/02/
an-update-on-airtag-and-unwanted-tracking/
• https://qz.com/the-problem-with-twitters-blue-checkmark-is-not-the-8-
1850363089
READ
• Chapter 1 and 3 Alan Dix
• Refs if interested
Affordance(s)
Can’t unread
them!
Affordance
• Coined by Gibson in Ecological Approach to Visual Perception
• Introduced in HCI by Donald Norman in The psychology of everyday
things

https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/affordances
Affordance
• action possibility in the relation between user and an object
• Clear affordances are vital to usability.
• User maps the possibilities of what an object does according to their
conceptual model of what that object should do
• designers must create objects’ affordances to conform to users’
needs based on these users’ physical and perceptual capabilities,
goals and past experiences
Signifier
• Perceivable/symbolic cue about the affordance
• Can be misleading-> aberrant decoding, signifier can be interpreted
differently from what was intended by the designer (see Reception
Theory)
• In semiotics is the form that a sign takes
• Important in the process from interpretation to signification

https://irvine.georgetown.domains/papers/Irvine-SSA-Peirce-
Computation-expanded-version.pdf
 Affordance and Semiotics
• In HCI we use Peirce Triangle

https://www.interaction-design.org/literature/book/the-
encyclopedia-of-human-computer-interaction-2nd-ed/
semiotics
Affordance
• Three types:
• Perceptible
• Hidden
• False
 Hidden/False affordance - EV
• EV are involved in 50% more traffic accidents than their petrol and
diesel counterparts (study by insurer Axa on rental cars)

• Nothing to do with technology, but with the behaviour of the drivers

• Greatest risk: accellerating. Same pedal, different outcomes from

ICEV and EV
• EV -> immediate torque
• ICEV -> gradual
https://www-elektroauto--news-net/news/unfallforschung-warum-e-autos-haeufiger-in-unfaelle-verwickelt-sind?
 Hidden/False affordance - EV

https://www.rospa.com/media/documents/road-safety/road-
observatory/Vehicles-Electric-vehicle-safety.pdf
Affordance in IxD and UI design
• Skeuomorphic design: creates an expectation by drawing on
a user’s past experiences with a physical thing
https://medium.com/design-warp/skeuomorphism-design-we-learned-to-outgrow-8a24895a80d0
Affordance in IxD and UI design
• Visible ‘focus’ on a text inputs
Affordance in IxD and UI design
• Iconography for navigation
Affordance in UI design: many
components

But also
Influenced by Culture and
Experience

Biological
Affordance Cultural practices
constraints

Perception Cognition Values Past experiences

Influenced by Culture and
Experience

Biological
Affordance Cultural practices
constraints

Perception Cognition Values Past experiences

Influenced by Culture and
Experience

Biological
Affordance Cultural practices
constraints

Perception Cognition Values Past experiences

Culture & Socio Technical
Systems
What is Culture
• Many definitions, some still debated
• Learned behaviour consisting of
thoughts, feelings, action and
practices (Hoft, 1996)
• Shared, learned symbolic system of
values, beliefs and attitudes shaping
and influencing perception and
behaviours
• Not only national: organisational,
subcultures, etc
Culture Meta-models
• Used to effectively address the needs of users worldwide in computer
product design
• Pyramid Model (Hofstede)
• Three layers:
• Personality: individual, learned AND inherited
• Culture: groups, learned, NOT inherited
• Nature: all Humans, inherited and universal
Culture and ButHCI
also design, communication, etc.

• Different cultures have different approaches to interact with

computers which may cause different types of problems
• Companies and designers treat other cultures as inconveniences that
cost money to deal with and as a result, the differences in people are
ignored
• People adapts instead of the interface
• Cross-cultural design still very difficult: not only UI but also IxD
Internationalisation vs Localisation
• I18N: designing interfaces that can potentiallybe adapted to various
languages and regions without engineering changes

• L10N: adapting internationalized interfaces for a specific region or

language by adding specific components and translating text
I18N & L10N challenges

• (Shneiderman, 1998):
• Characters, numerals, special characters and diacritical.
• Left-to-right versus right-to-left versus vertical input and reading.
• Date and time formats
• Numeric and currency formats
• Weights and measures
• Addresses and telefone numbers, names and titles
• Capitalisation and punctuation
I18N & L10N challenges
• But also
• Nationalism: What is considered an inherent part of a nation or
culture and what is consider a threat to it.
• Language: a language and its various dialect.
• Social context: in many languages of the world, who made a
statement has a much bearing as what the statement was.
• Cultural values: notion of quality, normality, cleanliness and property.
Symbols: food, animals and everyday objects can has symbolic
meanings that may convey unintendedmessages. Esthetics: use of
color, patterns, shapes andtextures. Fernandes, 1995]
I18N & L10N
• (Del Galdo & Nielsen, 1996), three levels:
• Comprehensibility
• Usability
• Desirability

• Focus on semiotics and meaning-making interfaces

• Affective components are important
 Culture and cognitive styles
• Cognitive styles: individual’s preferred/habitual mode of perceiving,
remembering, organizing, processing, and representing information
and deal with tasks (Zhang & sternberg, 2006)
• None is better than the other
• Wholists vs analytics (Riding, 2002), depending on the field of
dependence/independence (FDI)
• Nisbett: Holistic vs Analytic cognitive styles connected to collectivism
vs individualism
• Root in cross-cultural cognitive psychology: e.g., linguistic relativity
hypotheses (weak), learning patterns
https://psycnet.apa.org/fulltext/2012-22249-012.pdf?auth_token=762cd2eb72544a57027f2f56ee8ca147010e71d8
 Holistic vs Analytic – eye tracking
• Holistic and Analytic individuals differ visual perception and
visual information processing
• Holistic individuals view the perceptual field as a whole and
are not attentive to detail,
• Analytic individuals view the information presented as a
collection of parts and separate items from their
backgrounds.
• Somehow connected to National boundaries: East ->
collective and holistic, West -> individualistic and analytic.
• East-West divide may be due to environmental factors? —>
T. Talhelm et al., “Large-Scale Psychological Differences within China Explained by Rice versus
Wheat Agriculture,” Science 344 (2014): 603; T. Talhelm, X. Zhang, and S. Oishi, “Moving Chairs
in Starbucks: Observational Studies Find Rice-Wheat Cultural Differences in Daily Life in China,”
http://www.ijdesign.org/index.php/IJDesign/article/view/
267/163#:~:text=for%20the%20experiment.-,Findings%20from
%20the%20analysis%20suggest%20that%20the%20Chinese
%2C%20Korean%2C%20and,similarities%20to%20analytic
%20thought%20patterns.
Hofstede’s Dimensions
• Used in HCI, web design, UX, product design, knowledge base design
• Complement cross-cultural cognitive perspectives
• Attempt to classify cultures
• Not perfect but based on large samples, so statistically relevant
• Doesn’t apply to individuals! Only national groups (NO Ethicity)
• Power-distance, Collectivism vs. Individualism, Femininity vs.
Masculinity, Uncertainty Avoidance, and Long vs. Short-term Time
Orientation

https://core.ac.uk/download/pdf/161880779.pdf
Cultural Models to generate
guidelines or design framework
• Marcus & Gould guidelines (2000)
• Smith, Dunckley, French, Minocha and Chang (2004)
• Semiotics: first gather information, then use similar approaches to
meaning-making
• Ford and Kotze (2005) cross-cultural user experience model based on
an extended version of the TAM including elements such as subjective
and objective culture
https://www.researchgate.net/publication/220606804_Cross-
cultural_interface_design_strategy
Read
• https://www.nngroup.com/articles/crosscultural-design/
• https://in.sagepub.com/sites/default/files/upm-binaries
/53260_ch_14.pdf
Other refs
• T. Hedden et al., “Cultural Influences on Neural Substrates of
Attentional Control,” Psychological Science 19 (2008): 12;

• S. Han and G. Northoff, “Culture-Sensitive Neural Substrates of

Human Cognition: A Transcultural Neuroimaging Approach,”
Nature Reviews Neuroscience 9 (20008): 646; T. Masuda and R. E.

• Nisbett, “Attending Holistically vs. Analytically: Comparing the

Context Sensitivity of Japanese and Americans,” Journal of
Personality and Social Psychology 81 (2001): 922; J. Chiao,
“Cultural Neuroscience: A Once and Future Discipline,” Progress in
Brain Research 178 (2009): 287.
Other refs
• Zhang, l.-f., & sternberg, R. J. (2006). The nature of intellectual
styles. mahwah, nJ: Erlbaum.

• nisbett, R. E. (2003). The geography of thought: How Asians and

Westerners think dif- ferently . . . and why. new york, ny: free Pres

• Riding, R. (2002). Cognitive style: A review. In R. Riding & s. g.

Rayner (Eds.), Interpersonal perspectives on individual
differences: Vol. 1. Cognitive styles (pp. 315– 344). stamford, Ct:
Ablex.
Other refs

• https://inria.hal.science/hal-01060969/file/
5_1_Loefstrom.pdf

• https://eprints.bournemouth.ac.uk/23776/1/The-Effect-of
-Culture-on-User-Interface-Design-of-Social-Media---A-Ca
se-Study-on-Preferences-of-Saudi-Arabians-on-the-Arabi
c-User-Interface-of-Facebook.pdf
Refs
• Cognitive Load Theory -> https://www.sciencedirect.com/science/article/pii/S0747563210001718
• Defensive/Appetitive stimuli and motor response —>
https://www.ncbi.nlm.nih.gov/pmc/articles/PMC6754972/

• Affordance:
• https://uxdesign.cc/in-defense-of-reusing-existing-design-patterns-9d216e09dfce

• https://uxdesign.cc/affordance-in-user-interface-design-3b4b0b361143

• https://www.amazon.in/Ecological-Approach-Visual-Perception-Psychology/dp/1848725787

• https://www.researchgate.net/publication/356566789_A_semiotic_and_design-oriented_approach_to_affordance

• https://www.pixelfridge.digital/what-are-affordances-and-why-do-they-matter/
Other refs
• Eye tracking cross-cultural
https://www.bc.edu/content/dam/files/schools/cas_sites/cs
/pdf/academics/honors/05DanielShaw.pdf
• https://hcis-journal.springeropen.com/articles/10.1186/s13673-020-
00249-3
Motivation for Technology
Use and Engagement –
after UX before social
media
Technology Acceptance Model
Uses and Gratification Theory
Self-Determination Theory