th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · •...
Transcript of th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · •...
![Page 1: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/1.jpg)
LECTURE 3
PATTERNS, PERCEPTION
September 11th , 2014
human computer interaction 2014, fjv1
![Page 2: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/2.jpg)
Recapitulation Lecture 2
• Model Human Processor, STM and LTM
• Closure, User Attitude and Anxiety
• Control
• Emotion & Affect
Key concepts HCI so far:
Usability
Cognetics
human computer interaction 2014, fjv2
![Page 3: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/3.jpg)
KEY CONCEPTS IN HCI
September 11th 2014
human computer interaction 2014, fjv3
![Page 4: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/4.jpg)
4
Key Concepts of HCI
• Usability
• Cognetics – Locus of Attention
• Affordance
– what sort of operations and manipulations can be done to an object
– crucial is the Perceived Affordance
• Visibility (Transparency)
– mapping between controls and effects should be sensible and meaningful
– feedback
• Task orientation – Fit, Analysis
human computer interaction 2014, fjv
![Page 5: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/5.jpg)
Affordance
• James Gibson is best known in HCI design as the man who gave us the concept of affordance.
• An affordance is a resource or support that the environment offers an animal; the animal in turn must possess the capabilities to perceive it and to use it.
• An affordance refers to physical properties of the environmental constraints and to a person’s (or other animal) bodily dimensions and capacities.
• An affordance exists, whether it is perceived or used or not.
• It may be detected and used without explicit awareness of doing so.
human computer interaction 2014, fjv5
![Page 6: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/6.jpg)
6
Definition of Affordance for HCI (D.Norman, 1992)
• “A technical term that refers to the properties of objects - what sorts of operations and manipulations
can be done to a particular object.”
– In “Psychology of Everyday Things” (POET)
– Also “Design of Everyday Things”
– Originally from Psychologist JJ Gibson
• Important for Interaction: Perceived Affordance
• (GUI) – Graphical Interactions
“What a person thinks can be done with an object.”human computer interaction 2014, fjv
![Page 7: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/7.jpg)
7
Affordance
• psychological term
• for physical objects
– shape and size suggest actions
• pick up, twist, throw
– also cultural – buttons ‘afford’ pushing
• for screen objects
– button–like object ‘affords’ mouse click
– physical-like objects suggest use
• culture of computer use
– icons ‘afford’ clicking
– or even double clicking … not like real buttons!
mug handle
‘affords’grasping
human computer interaction 2014, fjv
![Page 8: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/8.jpg)
8
Example
Metal plate Handle Handle
How does the door afford to be opened …
![Page 9: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/9.jpg)
9
Exercise
• What are the affordances of icons on a computer screen?
• What are the affordances of icons on an iPad?
• How many affordances can you think of for a sheet of paper? and music paper?
• How would you rate the visibility of the Cut/Paste function in most software?
human computer interaction 2014, fjv
![Page 10: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/10.jpg)
Embodied Cognition
• Embodied Cognition– Meaning & Action
• Perceived Affordance– Allows interaction
– Relates meaning with action
– About conventions related to the object
• Action– Passes effect through the system
• We use technology – It is part of our world
human computer interaction 2014, fjv10
![Page 11: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/11.jpg)
Embodied Cognition
• We act “through” technology
– Computation is a medium
– Users create & communicate meaning
– Users manage coupling
– Embodied technologies PARTICIPATE in the world
the represent
– Embodied Interaction turns action into meaning
human computer interaction 2014, fjv11
![Page 12: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/12.jpg)
Usability of URL
human computer interaction 2014, fjv12
Q: What is the current population size of the US ?
![Page 13: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/13.jpg)
Average heat-map eye-tracking
human computer interaction 2014, fjv13
![Page 14: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/14.jpg)
Specific user categories
human computer interaction 2014, fjv14
• A,D Search dominant (57% of users)
• B Navigation dominant
• C Tool dominant
![Page 15: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/15.jpg)
Distraction from focus …
15
• 14% looked at right position
• Majority did not find correct answer.
• Distraction, some parts of the URL
looked like an add.
• Can further analyze the users
• !! Simple Usability Question
• Look at direction of each/exploration
human computer interaction 2014, fjv
![Page 16: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/16.jpg)
UI Design
• There are principles of perception that apply
too each of the senses
• Ignoring principles of perception can create
dysfunctional information displays
• Knowledge of principles of perception helps to
design effective information displays
• Knowledge of Locus of Attention and
Attention Variation are important to interface
design
16human computer interaction 2014, fjv
![Page 17: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/17.jpg)
LECTURE 3
PATTERNS, PERCEPTION
September 11th , 2014
human computer interaction 2014, fjv17
![Page 18: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/18.jpg)
What do you read …
18
• Information processing to Meaningful items from Context
• Prior Knowledge helps processing ambiguous information
• Not: “tae cht”, But: “the cat”
human computer interaction 2014, fjv
![Page 19: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/19.jpg)
Semantic network → Relations
human computer interaction 2014, fjv19
![Page 20: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/20.jpg)
Reasoning (1)
• Deductive reasoning
– Derive logically necessary conclusion from given premises.
• If it is Monday then she will go to class It is Monday. Therefore she will go to class
– Conflict in logic• If it is raining then the ground is dry
It is raining. Therefore the ground is dry
– Prior knowledge is addressed to solve conflicts
• Abductive reasoning
– reasoning from event to cause• Students drink beer when preparing a test
If I see Students drinking, I assume them preparing.
• Unreliable:
– can lead to false explanations
20human computer interaction 2014, fjv
![Page 21: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/21.jpg)
Reasoning (2)
• Inductive reasoning
– Starts from an Induction
– Generalize from cases seen to cases unseen
all elephants we have seen have trunks
therefore all elephants have trunks.
• Unreliable, … but useful!
– can only prove false not true
21human computer interaction 2014, fjv
![Page 22: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/22.jpg)
Learning strategies
• Behaviorism
– Measurement of outcome of learning process
– Not considering the mental process
– Behavior modified by reinforcement responses
• Gestalt
– Past experience affects individual perception
– Stimuli grouped in own perception patterns
– Processes leave a trace in the brain (encoding)
– Group information to make it more meaningful
human computer interaction 2014, fjv22
![Page 23: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/23.jpg)
PERCEPTION
human computer interaction 2014, fjv23
![Page 24: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/24.jpg)
Overview Gestalt
• Gestalt = Pattern/Form/Shape
• Gestalt helps ordering a scene – Pragnanz
– Proximity
– Similarity
– Closure (different from previous use of term)
– Good continuation
– Common fate
– Familiarity
• Gestalt is a bottum-up approach (stimulus-perception)
• Principles are being used in Symbol design– Icons
– Easterby, 1970
human computer interaction 2014, fjv24
![Page 25: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/25.jpg)
Image - Pattern
• Figure
– That what is the important subject
– Foreground
• Ground
– That what is the environment of the subject
– Background
• We actively separate Figure from Ground
– Selecting what is important
human computer interaction 2014, fjv25
![Page 26: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/26.jpg)
Pragnanz
26
• Patterns are seen as simply as possible
human computer interaction 2014, fjv
![Page 27: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/27.jpg)
Proximity
27
• Nearby objects tend to be grouped together
human computer interaction 2014, fjv
![Page 28: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/28.jpg)
Similarity
28
• Similar items tend to be grouped together
• Tendency to group elements of same shape or
color as belonging together
human computer interaction 2014, fjv
![Page 29: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/29.jpg)
Closure
29
• Nearly closed contours tend to be closed
• Missing parts are filled in …
human computer interaction 2014, fjv
![Page 30: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/30.jpg)
Continuity
30
• Neighbors are grouped when they can be
connected
• Simplifying a stimulus
human computer interaction 2014, fjv
![Page 31: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/31.jpg)
Constructivists ~ Ecologists
We are active in our perception:
• Constructivists approach for vision– Perception involves intervention of representation and
memory
– Actively embellish (process) and elaborate retinal images (stimuli)
– Related to Gestalt (1935):interpretation result from having innate laws of organization
• Ecological approach for vision– Active exploration of objects in environment (Gibson)
– Use of 5 senses
– Notion of affordances; easy/difficult to interact with object
31human computer interaction 2014, fjv
![Page 32: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/32.jpg)
Using Gestalt in GUI: proximity
32
Not usedUsed
Used
human computer interaction 2014, fjv
![Page 33: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/33.jpg)
Using Gestalt in GUI: Similarity
33
Organization of files in a folder (GUI).
human computer interaction 2014, fjv
![Page 34: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/34.jpg)
Gestalt in Design: Pragnanz
34
• Prominent role of the figure with respect to figure-ground
• Logo makers use this effect.
• See examples of 3 logos.
• Figure and ground can not be observed at the same time.
• Interpretation!!!
human computer interaction 2014, fjv
![Page 35: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/35.jpg)
Gestalt in Design: Closure
• We see more than actually is presented.
• We produce a closure to known artifacts
35human computer interaction 2014, fjv
![Page 36: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/36.jpg)
Website Design - Gestalt
human computer interaction 2014, fjv36
Proximity
Continuity
Similarity
Proximity
Common Fate
![Page 37: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/37.jpg)
SENSES
human computer interaction 2014, fjv37
![Page 38: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/38.jpg)
Crux of Human Vision
Facts:
• We like to see “whole” rather than “part”
• There is prior knowledge (LTM)
• There is interpretation ~ cognition
• Gestalt uses the fact that that the sum is more than the separate parts
These facts are unconsciously used in GUI design
Make yourselves aware!
38human computer interaction 2014, fjv
![Page 39: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/39.jpg)
What do you see…
39human computer interaction 2014, fjv
![Page 40: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/40.jpg)
Human Vision – Visual System
40
What meets the eye!
human computer interaction 2014, fjv
![Page 41: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/41.jpg)
Photo-sensors: the Retina
• From eye to retina to visual cortex: electrical pulses
• Cones
– 6-7 *106 per eye
– One cone-cell connected to one nerve
– Photopic vision (bright-light vision)
• Rods
– 75-150 *106 per eye
– Several rods connected to one nerve
– Scotopic vision (dim-light vision)
• Distribution of sensors is important for vision
• Distribution is radial symmetric around Fovea
41human computer interaction 2014, fjv
![Page 42: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/42.jpg)
Cones and Rods
42From Atlas of Histology, University of Illinois
human computer interaction 2014, fjv
![Page 43: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/43.jpg)
Aspects of Human Vision
43
Distribution of Rods and Cones in the Human Retina
human computer interaction 2014, fjv
![Page 44: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/44.jpg)
Visual Field
Visual Field:
• (a) Sharp vision
• (b) Un-sharp vision
• (c) Only movement seen
Retinal Image:
• Reflected in fovea area
• Eye muscles help project in
fovea area
44
Visual Field
human computer interaction 2014, fjv
![Page 45: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/45.jpg)
Color Perception in Human
• Fovea centralis
• Very detailed colour vision
• 1 degree of visual field
• Colour sensitivity of 3 types of cones
• A - mostly red,
• B - mostly green,
• C - mostly blue
• Eye most sensitive to green/yellow
• Eye least sensitive to blue
45human computer interaction 2014, fjv
![Page 46: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/46.jpg)
Cone Sensitivity to Light
• 3 Types of Cones & Light of equal Intensity
46
Violet Blue Green Yellow Orange Red
Sensitivity
human computer interaction 2014, fjv
![Page 47: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/47.jpg)
Color Perception in Human
• Complex perceptual system
• Cone response e.g.
• 17:44:39 is blue,
• 61:39:0 is yellow,
• 50:45:5 is white
• Defective colour vision
• 8% males, 0.5% females
• Red/green blindness is most common
47human computer interaction 2014, fjv
![Page 48: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/48.jpg)
Color Impairment, Red ~ Green
• X-chromosome related
• Males (XY)
• Female (XX)
• Deficiency more common in males
• 5-8% males
• 0.5% females
48human computer interaction 2014, fjv
![Page 49: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/49.jpg)
Color Blind
49
• Normal
• Protans
– (red weak)
• Deutans
– (green weak)
From webexhibits.orghuman computer interaction 2014, fjv
![Page 50: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/50.jpg)
Chromatic Aberration (1)
• Different refractive index for different
wavelength
• Problem is dominantly present in Optics
50human computer interaction 2014, fjv
![Page 51: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/51.jpg)
Chromatic Aberration (2)
51
• Avoiding extreme colour pairs
• e.g. red and blue
• or green and magenta
• Reducing chromatic aberration effect
• de-saturating, i.e. adding white
• Prefer pastel or darker shades for large areas
B G RRGB
human computer interaction 2014, fjv
![Page 52: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/52.jpg)
3 Color Models
• Hue, Saturation and Lightness Model: HSL
– Perceptive color model
– Defining color on a screen
• Red, Green, Blue Model: RGB
– Additive color model
– Defining color on a screen
• Cyan, Magenta, Yellow, K (Black): CMYK
– Subtractive color model
– Defining color on a printer
52human computer interaction 2014, fjv
![Page 53: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/53.jpg)
Hue, Saturation, Lightness
• Three perceptual
attributes of color
can be visualized
as a solid (HSL)
• aka HSV
• Relation to artist:
– Hue = Tint
– Saturation = Shade
– Lightness = Tone (or Value)
53human computer interaction 2014, fjv
![Page 54: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/54.jpg)
Example RGB vs. HSL
54
red green blue
hue saturation lightness
human computer interaction 2014, fjv
![Page 55: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/55.jpg)
Hue
• Hue is the perceptual attribute associated
with elementary color names.
• Color deficits have diminished ability to
discriminate colors
on the basis of hue
• Hue: how far
from the pure
“spectral” color (λ)
• Hue = Tint
55human computer interaction 2014, fjv
![Page 56: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/56.jpg)
Saturation
• Saturation is the degree of color intensity
associated with a color's perceptual difference
from a white, black or gray of equal lightness.
• Color deficits have difficulty discriminating
between colors on the basis of saturation.
• Saturation = Shade
56human computer interaction 2014, fjv
![Page 57: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/57.jpg)
Lightness (aka Value)
• Lightness corresponds to the amount of light
that appears to be reflected from a surface in
relation to nearby surfaces.
• Lightness is important as an attribute to make
contrast more effective.
• Color deficits have a reduced ability to
discriminate color on the basis of lightness.
• Lightness (Value) = Tone
57human computer interaction 2014, fjv
![Page 58: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/58.jpg)
Depth Vision
• Stereoscopy, binocular vision
• Motion parallax, – distant objects are slower
• Accommodation,– lens focuses at different depths
• Occlusion,– close occludes distant
• Texture,– distant objects blurry texture
• Familiarity, – size and shape of objects
• Laws of perspective
• Shadow casts
58human computer interaction 2014, fjv
![Page 59: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/59.jpg)
Depth Cues
• Humans use eight (8) depth cues
• Depth cues are used by the brain to estimate the relative distance of the objects in every scene we look at.
Some examples…
human computer interaction 2014, fjv59
![Page 60: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/60.jpg)
Focus
Wood anemone, by Håkan Dahlström (flickr.com)
human computer interaction 2014, fjv60
![Page 61: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/61.jpg)
Perspective
Tay Rail Bridge, by Colin Broug (sxc.hu)
human computer interaction 2014, fjv61
![Page 62: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/62.jpg)
Occlusion
Diamond Ring, By Mucahid Zengin (flickr.com)
human computer interaction 2014, fjv62
![Page 63: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/63.jpg)
Color Intensity & Contrast
Highland view, by Colin Broug (sxc.hu)
human computer interaction 2014, fjv63
![Page 64: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/64.jpg)
Motion Parallax
Differential motion parallax from infovis.net
human computer interaction 2014, fjv64
![Page 65: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/65.jpg)
Human Audio – Hearing System
65
Ear detects sound, Brain interprets sound
human computer interaction 2014, fjv
![Page 66: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/66.jpg)
Hearing & Auditory perception
• Hearing: processing of air pressure variation
– Density
– Wave patterns
• Audition: extraction of meaning in a pattern
– Understanding a sound
• Principles of Gestalt apply
– Sonic Gestalt
human computer interaction 2014, fjv66
proximity similarity
![Page 67: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/67.jpg)
Sound Perception in Human
• Sound is measured
– by pitch (frequency, Hz)
– and loudness (decibels, dB)
• Most people detect sound in the ranges [20-20*103] Hz
• Loudness in [20-70] dB constitutes comfortable hearing
• Features:– Sound is transient,
• once it is stopped, it does not persist
– Sound is pervasive
• we do not have to face it in order to hear it
– Sound triggers “locus of attention”
67human computer interaction 2014, fjv
![Page 68: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/68.jpg)
Examples of Sound
• Loud rock band 160 dB
• Shouting 100 dB
• Conversation 50 dB
• Whisper 20 dB
• Hearing impaired
– Middle ear deafness (age & gender)
– Inner ear deafness
68human computer interaction 2014, fjv
![Page 69: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/69.jpg)
human computer interaction 2014, fjv69
"Hearing is a form of touch. I hear it through the body, by opening myself up.
Sometimes it almost hits you in the face.“- Evelyn Glennie
![Page 70: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/70.jpg)
human computer interaction 2014, fjv70
![Page 71: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/71.jpg)
human computer interaction 2014, fjv71
![Page 72: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/72.jpg)
Haptic System
Haptic system is defined as [Gibson]:
• The sensibility of the individual to the world
adjacent to her/his body by use of his body.
Haptic perception:
• Links to body movement
• Active exploration.
human computer interaction 2014, fjv72
![Page 73: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/73.jpg)
Human Touch – Haptic System
• Ubiquitous in the body
– Somatosensory perception of patterns on skin surface
• edges,
• curvature,
• texture
– Proprioception of position and information.
• Hands are often used for haptics
– Haptic I/O devices
• Explore other areas
human computer interaction 2014, fjv73
![Page 74: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/74.jpg)
Key terms for haptics
• Proprioceptive - Relating to sensory information about the state of the body (including cutaneous, kinaesthetic and vestibular sensations).
• Vestibular - Pertaining to the perception of head position, acceleration and deceleration.
• Kinaesthetic - The feeling of motion. Relating to sensations originating in muscles, tendons and joints.
• Cutaneous - Pertaining to the skin itself or the skin as a sense organ. Includes sensation of pressure, temperature and pain.
• Tactile - Pertaining to the cutaneous sense but more specifically the sensation of pressure rather than temperature or pain.
• Force feedback - Relating to the mechanical production of information sensed by the human kinaesthetic system.
human computer interaction 2014, fjv74
![Page 75: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/75.jpg)
Directions in Haptics
• Haptic system: bi-directional (in-output)
• Understand touch
• What does one feel/touch
– Real subject
– Virtual subject
– Decouple sense and force
• Internet Interface
• Gaming experience
human computer interaction 2014, fjv75
![Page 76: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/76.jpg)
Review #3
• Introduction to reasoning
• Principles of Gestalt
• Principles of Reasoning
• Principles of Human Vision/Hearing/Touch
• (Perceptual) Color systems
• Discussed in design context
• Color
• Visual density and balance
• Text legibility
• Discussed in InfoViz/design context
• Visualisation
• Visual coding
76human computer interaction 2014, fjv
![Page 77: th LECTURE 3 PATTERNS, PERCEPTIONliacs.leidenuniv.nl/~verbeekfj/courses/hci/hci2014-L03.pdf · • Cognetics–Locus of Attention • Affordance – what sort of operations and manipulations](https://reader033.fdocuments.in/reader033/viewer/2022041907/5e647d5468358a416f768f80/html5/thumbnails/77.jpg)
77human computer interaction 2014, fjv