CMSC434 Intro to Human-Computer Interaction

Transcription

1 CMSC434 Intro to Human-Computer Interaction Representation and Human Information Processing Monday, March 12th, 2012 Instructor: Jon Froehlich TA: Kotaro Hara

2 Team Project #2 User Research, Task Analysis, and Sketching

3 #inspiration [

4

5

6 [

7 Shame/Fame [

8 One of Nielsen/Norman s first principles of design: Effective interfaces do not concern the user with the inner workings of the system with full option for the user to undo any activity at any time. [

9 Representation Matters

10 Experiential cognition is aided when the properties of the representation match the properties of the thing being represented. Don Norman Cognitive Scientist / Author [From: Things that Make Us Smart, 1994 ]

11

12 Semiotics noun \-ˈä-tiks\ The study of signs and symbols and their use or interpretation [Oxford Dictionary]

13 RomanNumerals

14 RomanNumerals I V X L C D M = 1 = 5 = 10 = 50 = 100 = 500 = 1000

15 RomanNumerals I V X L C D M Symbols have numerical meaning Symbol positions have (some) numerical meaning

16 What about arithmetic operations?

17 XIX + LIV ( )

18 XIX + LIV 1. Substitute for subtractives to obtain: XVIIII + LIIII 2. Concatenate to obtain: XVIIIILIIII 3. Sort to obtain: LXVIIIIIIII 4. Combine groups: LXVIIIIIIII LXVVIII LXXIII 5. Compact results by substituting subtractives Final answer = XIX + LIV = LXXIII = 73 [Algorithm from:

19 How would we do this with Arabic numerals?

20

21 What about multiplication and division?

22 19 x x 54

23 19 x x 54 76

24 19 x x

25 19 x x

26 19 x x

27 19 x x I can offload some cognition (i.e., cognitive load) to the page itself. Essentially, the effort is shared between the individual and the external representation. This is enabled by the positioning effects in the Arabic numbering system 1026

28 XIX x LIV In the Roman numbering system, multiplication & division are much harder because of representation.

29 Recall vs. Recognition

30

31 Metaphor noun /ˈmɛtəfə, -fɔː/ A word, phrase, or image applied to an object or action to represent a less tangible object or some intangible quality or idea

32 [Moggridge, Designing Interactions] TimMott At Xerox PARC, Designed Desktop Metaphor Co-founded Electronic Arts

33 [Microsoft BOB]

34 [BumpTop, CHI2006]

35 1+5 * *7 Visual grouping influenced ability to ascertain correct result [Landy & Goldstone, How Abstract is Symbolic Thought? J. of Experimental Psychology]

36 [Landy & Goldstone, How Abstract is Symbolic Thought? J. of Experimental Psychology] The authors conclude that formally symbolic reasoning is more visual than is usually proposed.

37 Good or Bad?

38 Success! Your file was successfully uploaded to msn.com/videos. The visual language conflicts with the intent of the message [Example based on p.19 in Seductive Interaction Design by Stephen P. Anderson, 2011]

39 Which window is closer to you? When designing, we must consider how the brain interprets the meaning of color, shadow, shading these are not just aesthetic choices. [Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]

40 Where does this drawer menu come from? Looks good, right? [Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]

41 Where does this drawer menu come from? Looks good, right? [Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]

42 By flipping the direction of the shadow, the design feels better [Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]

43 Human Information Processing

44 [

45 The world is its own memory -Kevin O Regan, 1992 We see very little at any given instant we sample our visual environment with swift eye movement We have very little attentional capacity, and information unrelated to our current task is quickly replaced with something that we need right now. [Colin Ware, Visual Thinking for Design, p2, 2008]

46 We do not have the whole visual world in conscious awareness. In truth, we have very little. Our illusory impression that we are constantly aware of everything happens because our brains arrange for eye movement to occur and relevant information to be picked up just as we turn our attention to something we need. Professor Colin Ware University of New Hampshire Notable Visualization Expert / Author

47 What information consumes is rather obvious: it consumes the attention of its recipients. Hence a wealth of information creates a poverty of attention, and a need to allocate that attention efficiently among the overabundance of information sources that might consume it. Professor Herbert Simon Carnegie Mellon University Nobel Prize / Turing Award

48 The Process of Seeing

49 The Human Eye The human eye reacts to light and can sense color / depth [Colin Ware, Visual Thinking for Design, p7, 2008; Wikipedia]

50 The Human Eye The retina contains two types of photoreceptors: cones and rods Rod cells are more numerous (~100m) and far more sensitive than cones responsible for night vision but have little role in color vision. Cone cells are primarily responsible for color vision, function best in relatively bright light and are densely packed in the fovea.

51 Brain pixels vary enormously over the visual field. This reflects different amounts of processing power devoted to different regions of visual space. [Colin Ware, Visual Thinking for Design, p5, 2008] At arm s length, we can resolve about 100 points on the head of a pin in the very center of the visual field called the fovea.

52 Brain pixels vary enormously over the visual field. This reflects different amounts of processing power devoted to different regions of visual space. At the edge of the visual field, we can only see something about the size of a fist at arm s length. [Colin Ware, Visual Thinking for Design, p5, 2008] At arm s length, we can resolve about 100 points on the head of a pin in the very center of the visual field called the fovea.

53 Brain pixels vary enormously over the visual field. This reflects different amounts of processing power devoted to different regions of visual space. At the edge of the visual field, we can only see something about the size of a fist at arm s length. Over half of our visual processing power is concentrated in the parafovea At arm s length, we can resolve about 100 points on the head of a pin in the very center of the visual field called the fovea. [Colin Ware, Visual Thinking for Design, p5, 2008]

54 Non-uniformity in visual processing power We only process details in the center of the visual field. We pick up information by directing our foveas using rapid eye movements. [Colin Ware, Visual Thinking for Design, p6, 2008]

55 The Human Eye : Saccade Strong eye muscles attached to each eyeball rotate it rapidly so that different parts of the visual world become imaged on the central high-resolution fovea. Angular velocity of 900 degrees/sec This rapid eye movement is called a saccade, during which vision is suppressed. [Colin Ware, Visual Thinking for Design, p7, 2008]

56 The Act of Perception

57 The Handout Find your blind spot [Colin Ware, Visual Thinking for Design, p8, 2008]

58 The Handout Visual processing pipeline involves attention [Colin Ware, Visual Thinking for Design, p8, 2008]

59 The Handout Visual processing pipeline involves attention [Colin Ware, Visual Thinking for Design, p8, 2008]

60 Human perception plays an important role in the area of visualization. An understanding of perception can significantly improve both the quality and the quantity of information being displayed. - Ware, 2000 Ware, C. Information Visualization: Perception for Design. Morgan Kaufmann Publishers, Inc., San Francisco, California, 2000.

61

62

63 Pre-attentive Processing a limited set of visual properties that are detected very rapidly and accurately by the low-level visual system [Christopher Healey,

64 Actually, not really preattentive these visual properties were initially called preattentive, since their detection seemed to precede focused attention. We now know that attention plays a critical role in what we see, even at this early stage of vision. The term preattentive continues to be used, however, since it conveys an intuitive notion of the speed and ease with which these properties are identified. Professor Christopher G. Healey North Carolina State University

65 Actually, not really preattentive these visual properties were initially called preattentive, since their detection seemed to precede focused attention. We now know that attention plays a critical role in what we see, even at this early stage of vision. The term preattentive continues to be used, however, since it conveys an intuitive notion of the speed and ease with which these properties are identified. Professor Christopher G. Healey North Carolina State University

66 Actually, not really preattentive these visual properties were initially called preattentive, since their detection seemed to precede focused attention. We now know that attention plays a critical role in what we see, even at this early stage of vision. The term preattentive continues to be used, however, since it conveys an intuitive notion of the speed and ease with which these properties are identified. Professor Christopher G. Healey North Carolina State University

67 What can be considered preattentive? Typically, tasks that can be performed on large multi-element displays in < ms Eye movements take at least 200ms to initiate. In experiments, viewers are able to accomplish tasks in ~200ms, which suggests parallel processing of information by low-level visual system [Christopher Healey,

68

69 Hue

70 Hue is not the only visual feature that is preattentive.

71

72

73 Curvature

74 Ah, interesting, so a unique visual property in the target allows it to pop out of the display

75 Find the red ball

76

77 How did you find it?

78 Why didn t this work? A conjuction target is a target made up of a combination of non-unique features and typically cannot be detected preattentively. [Christopher Healey,

79 Conjunction Target!

80 Red target circle is made of up two features: red (color) and circular (shape) Blue distractor target also circular (shape) Square distractor target also red (color)

81

82 Conjunction Target! Numerous studies have shown that this target cannot be detected preattentively. Instead, viewers must perform a time-consuming serial search to confirm the presence or absence of the red circle.

83 Preattentive (Static) Visual Features Orientation Length/Width Size Closure Curvature Hue Intersection 3D Depth Cues [This list is not comprehensive; Christopher Healey,

84 Preattentive (Static) Visual Features Density Number, Estimation Terminators Lighting Direction 3D Orientation Artistic Properties [This list is not comprehensive; Christopher Healey,