Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Human Computer Interaction 2014, Lecture 3 1
LECTURE 3
PATTERNS, PERCEPTION
September 11th , 2014
human computer interaction 2014, fjv1
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
KEY CONCEPTS IN HCI
September 11th 2014
human computer interaction 2014, fjv3 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
Human Computer Interaction 2014, Lecture 3 2
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 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
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 8
Example
Metal plate Handle Handle
How does the door afford to be opened …
Human Computer Interaction 2014, Lecture 3 3
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
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
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
Usability of URL
human computer interaction 2014, fjv12
Q: What is the current population size of the US ?
Human Computer Interaction 2014, Lecture 3 4
Average heat-map eye-tracking
human computer interaction 2014, fjv13
Specific user categories
human computer interaction 2014, fjv14
• A,D Search dominant (57% of users)
• B Navigation dominant
• C Tool dominant
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
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
Human Computer Interaction 2014, Lecture 3 5
LECTURE 3
PATTERNS, PERCEPTION
September 11th , 2014
human computer interaction 2014, fjv17
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
Semantic network → Relations
human computer interaction 2014, fjv19
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
Human Computer Interaction 2014, Lecture 3 6
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
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
PERCEPTION
human computer interaction 2014, fjv23
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
Human Computer Interaction 2014, Lecture 3 7
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
Pragnanz
26
• Patterns are seen as simply as possible
human computer interaction 2014, fjv
Proximity
27
• Nearby objects tend to be grouped together
human computer interaction 2014, fjv
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
Human Computer Interaction 2014, Lecture 3 8
Closure
29
• Nearly closed contours tend to be closed
• Missing parts are filled in …
human computer interaction 2014, fjv
Continuity
30
• Neighbors are grouped when they can be
connected
• Simplifying a stimulus
human computer interaction 2014, fjv
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
Using Gestalt in GUI: proximity
32
Not usedUsed
Used
human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 3 9
Using Gestalt in GUI: Similarity
33
Organization of files in a folder (GUI).
human computer interaction 2014, fjv
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
Gestalt in Design: Closure
• We see more than actually is presented.
• We produce a closure to known artifacts
35human computer interaction 2014, fjv
Website Design - Gestalt
human computer interaction 2014, fjv36
Proximity
Continuity
Similarity
Proximity
Common Fate
Human Computer Interaction 2014, Lecture 3 10
SENSES
human computer interaction 2014, fjv37
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
What do you see…
39human computer interaction 2014, fjv
Human Vision – Visual System
40
What meets the eye!
human computer interaction 2014, fjv
Human Computer Interaction 2014, Lecture 3 11
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
Cones and Rods
42From Atlas of Histology, University of Illinois
human computer interaction 2014, fjv
Aspects of Human Vision
43
Distribution of Rods and Cones in the Human Retina
human computer interaction 2014, fjv
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
Human Computer Interaction 2014, Lecture 3 12
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
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
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
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
Human Computer Interaction 2014, Lecture 3 13
Color Blind
49
• Normal
• Protans
– (red weak)
• Deutans
– (green weak)
From webexhibits.orghuman computer interaction 2014, fjv
Chromatic Aberration (1)
• Different refractive index for different
wavelength
• Problem is dominantly present in Optics
50human computer interaction 2014, fjv
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
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
Human Computer Interaction 2014, Lecture 3 14
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
Example RGB vs. HSL
54
red green blue
hue saturation lightness
human computer interaction 2014, fjv
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
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
Human Computer Interaction 2014, Lecture 3 15
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
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
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
Focus
Wood anemone, by Håkan Dahlström (flickr.com)
human computer interaction 2014, fjv60
Human Computer Interaction 2014, Lecture 3 16
Perspective
Tay Rail Bridge, by Colin Broug (sxc.hu)
human computer interaction 2014, fjv61
Occlusion
Diamond Ring, By Mucahid Zengin (flickr.com)
human computer interaction 2014, fjv62
Color Intensity & Contrast
Highland view, by Colin Broug (sxc.hu)
human computer interaction 2014, fjv63
Motion Parallax
Differential motion parallax from infovis.net
human computer interaction 2014, fjv64
Human Computer Interaction 2014, Lecture 3 17
Human Audio – Hearing System
65
Ear detects sound, Brain interprets sound
human computer interaction 2014, fjv
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
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
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
Human Computer Interaction 2014, Lecture 3 18
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
human computer interaction 2014, fjv70
human computer interaction 2014, fjv71
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
Human Computer Interaction 2014, Lecture 3 19
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
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
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
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
Human Computer Interaction 2014, Lecture 3 20
77human computer interaction 2014, fjv