LECTURE 3 PATTERNS, PERCEPTION

Transcription

1 September 14 th, 2017 LECTURE 3 PATTERNS, PERCEPTION 1

2 Recapitulation Lecture 2 Model Human Processor, STM and LTM Closure, User Attitude and Anxiety Control Emotion & Affect Key concepts for Interaction Applications so far: Usability Cognetics 2

3 September 14 th 2017 KEY CONCEPTS IN HCI 3

4 Key Concepts of HCI/InfoVis Usability - Measurement of Success 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 4

5 Affordance In HCI design, James Gibson is best known 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. 5

6 Definition of Affordance for HCI (D.Norman, 1992) Important for Interaction: Perceived Affordance What a person thinks can be done with an object. 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 (GUI) Graphical Interactions 6

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 7

8 Example Metal plate Handle Handle How does the door afford to be opened 8

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? 9

10 Embodied Cognition Embodied Cognition Meaning & Action Derived from the field of Phenomenology Perceived Affordance Allows interaction Relates meaning with action About conventions related to the object Action Passes effect through the system Coupling: making a relation with meaning and Action We use technology It is part of our world 10

11 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 11

12 Usability - Cognetics Q: What is the current population size of the US? 12

13 Average heat-map eye-tracking 13

14 Specific user categories A,D Search dominant (57% of users) B Navigation dominant C Tool dominant 14

15 Distraction from focus 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 15

16 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 16

17 September 14 th, 2017 LECTURE 3 PATTERNS, PERCEPTION 17

18 What do you read Information processing to Meaningful items from Context Prior Knowledge helps processing ambiguous information Not: tae cht, But: the cat 18

19 Semantic network Relations 19

20 REASONING 20

21 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 21

22 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 22

23 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 23

24 PERCEPTION 24

25 Perception what is it... Webster (definitions) the way that you notice or understand something using one of your senses awareness of the elements of environment through physical sensation 2 Elements Physical sensing of a signal Cognitive concience interpretation of a signal 25

26 Overview Gestalt Gestalt = Pattern/Form/Shape Gestalt helps ordering a scene (signal) Pragnanz Proximity Similarity Closure (different from previous use of term) Good continuation Common fate Familiarity Gestalt is a bottom-up approach (stimulus-perception) Principles are being used in Symbol design Icons Easterby,

27 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 27

28 Pragnanz Patterns are seen as simply as possible 28

29 Proximity Nearby objects tend to be grouped together 29

30 Similarity Similar items tend to be grouped together Tendency to group elements of same shape or color as belonging together 30

31 Closure Nearly closed contours tend to be closed Missing parts are filled in 31

32 Continuity Neighbors are grouped when they can be connected Simplifying a stimulus 32

33 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 33

34 Using Gestalt in GUI: proximity Not used Used Used 34

35 Using Gestalt in GUI: Similarity Organization of files in a folder (GUI). 35

36 Gestalt in Design: Pragnanz 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!!! 36

37 Gestalt in Design: Closure We see more than actually is presented. We produce a closure to known artifacts 37

38 Website Design - Gestalt Proximity Common Continuity Fate Proximity Similarity 38

39 SENSES 39

40 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! 40

41 What do you see 41

42 Human Vision Visual System What meets the eye! 42

43 Photo-sensors: the Retina From eye to retina to visual cortex: electrical pulses Cones 6-7 *10 6 per eye One cone-cell connected to one nerve Photopic vision (bright-light vision) Rods *10 6 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 43

44 Cones and Rods From Atlas of Histology, University of Illinois 44

45 Aspects of Human Vision Distribution of Rods and Cones in the Human Retina 45

46 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 Visual Field 46

47 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 47

48 Cone Sensitivity to Light 3 Types of Cones & Light of equal Intensity S e n s i t i v i t y Violet Blue Green Yellow Orange Red 48

49 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 49

50 Color Impairment, Red ~ Green X-chromosome related Males (XY) Female (XX) Deficiency more common in males 5-8% males 0.5% females 50

51 Color Blind Normal Protans (red weak) Deutans (green weak) From webexhibits.org 51

52 Chromatic Aberration (1) Different refractive index for different wavelength Problem is dominantly present in Optics 52

53 Chromatic Aberration (2) RGB B G R 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 53

54 Elements of Color Perception There are 3 elements to color perception Hue, perception to a color name, i.e. a spectral definition Saturation, intensity of a color, with a reference to black and white Lightness (value), reflection of a color from a surface with reference to nearby surfaces This is part of a color model on perception, more on this in the color lecture 54

55 Perceptual Processing of Vision Vision consists of sub-systems Framework for perceptual vision 2-3 stages Helps understanding perception Stage 1 Stage 2 Stage 3 Simple Model (2 stages) Extended Model (3 stages) 55

56 Stage 1 pre-attentive processing Framework for perception Stage 1, Pre-attentive vision There is no focus attention required Resolves in msec Basic features in environment, Saliency (remarkable) Bottom-up Pre-attentive vision Parallel low-level vision system Target detection, Boundary detection, Counting 56

57 Stage 2 attribute attention Framework for perception Stage 2, Attribute vision There is focus attention required Top-down processing Segment visual scene (color, texture, motion etc.) Attribute vision Slow serial processing Working Memory Long Term Memory Focus on arbitrary aspects of symbols 57

58 Stage 3 active processing Framework for perception Stage 3, Active vision There is focus attention required Top-down processing Reduce to few objects in Visual Working Memory Active vision Slow serial processing Working Memory Long Term Memory VISUAL THINKING, making inferences i.e. Visual queries 58

59 Is there a red circle present (1) Hue based Rapid pre-attentive vision Surrounding objects: distractors 59

60 Is there a red circle present (2) Shape based Rapid pre-attentive vision Surrounding objects: distractors 60

61 Is there a red circle present (2) Conjunction of features Hue and Shape Can not be completed though pre-attentive vision Sequential search typical stage 2, 3 61

62 Boundary in complex scene (1) Conjunction of features Fill and Shape Left: Preattentive vision Right: not preattentive vision Sequential search typical stage 2, 3 62

63 Boundary in complex scene (2) Conjunction of features Hue and Shape Left: Preattentive vision Right: not preattentive vision (mixing) Sequential search typical stage 2, 3 63

64 Boundary in complex scene (3) Conjunction of features Hue and Brightness Left: not Preattentive (Interference) Sequential search typical stage 2, 3 Right: preattentive 64

65 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 65

66 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 66

67 Focus Wood anemone, by Håkan Dahlström (flickr.com) 67

68 Perspective Tay Rail Bridge, by Colin Broug (sxc.hu) 68

69 Occlusion Diamond Ring, By Mucahid Zengin (flickr.com) 69

70 Color Intensity & Contrast Highland view, by Colin Broug (sxc.hu) 70

71 Motion Parallax Differential motion parallax from infovis.net 71

72 Human Audio Hearing System Ear detects sound, Brain interprets sound 72

73 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 proximity similarity 73

74 Sound Perception in Human Sound is measured by pitch (frequency, Hz) and loudness (decibels, db) Most people detect sound in the ranges [20-20*10 3 ] 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 74

75 Examples of Sound Loud rock band Shouting Conversation Whisper 160 db 100 db 50 db 20 db Hearing impaired Middle ear deafness (age & gender) Inner ear deafness 75

76 "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 76

77 77

78 78

79 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. 79

80 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 80

81 Key concepts in haptics (1) 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 deacceleration. Kinaesthetic - The feeling of motion. Relating to sensations originating in muscles, tendons and joints. 81

82 Key concepts in haptics (2) 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. 82

83 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 83

84 Example 1 Adding touch to the iphone 6s More force, more (other) options Augments the interaction repertiore Haptics is a 2-way interaction Apply force Expect feedback of the force... Success? Embodied cognition... Advertised as Multi-Touch 84

85 Example 2 Adding haptics to a prostetic Feel sensations through the prosthetic Haptics is a 2-way interaction Apply force Expect feedback of the force... Feel it Embodied cognition... From DARPA prosthetics progam 28-old man Complex rewiring of cortex 85

86 Review #3 Introduction to reasoning Principles of Reasoning Principles of Gestalt Principles of Human Vision/Hearing/Touch (Perceptual) Color Vision sub-systems Discussed in generic design context Color Visual density and balance Text legibility Discussed in InfoVis/design context Visualisation Visual coding 86

87 87