CMSC434 Intro to Human-Computer Interaction. Representation and Metaphors Thursday, March 28th, 2013 Instructor: Jon Froehlich TA: Matt Mauriello

Transcription

1 CMSC434 Intro to Human-Computer Interaction Representation and Metaphors Thursday, March 28th, 2013 Instructor: Jon Froehlich TA: Matt Mauriello

2 Don Norman Reading response due Tuesday

3

4

5

6

7 Hall of Fame Hall of Shame

8 Building Windows 8,

9 How Real People Will Use Windows 8,

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

11 Representation Matters

12 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 ]

13

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

15 What are the symbols in this image?

16

17

18

19

20

21 Scott McCloud, Understanding Comics: The Invisible Art, 1994 What can we say about these faces?

22 Scott McCloud, Understanding Comics: The Invisible Art, 1994 What can we say about these faces?

23 How are signs and symbols used in interfaces? To indicate functionality Icon Bjuttons Text Shapes Color Mouse cursor

24 Can symbols be useful to thought/cognition?

25 RomanNumerals

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

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

28 What about arithmetic operations?

29 XIX + LIV ( )

30 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:

31 How would we do this with Arabic numerals?

32

33 What about multiplication and division?

34 19 x x 54

35 19 x x 54 76

36 19 x x

37 19 x x

38 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

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

40 Using the external world as a cue for your memory

41

42 Recall vs. Recognition

43

44 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

45 TimMott At Xerox PARC, Designed Desktop Metaphor Co-founded Electronic Arts Moggridge, Designing Interactions, 2007

46 The Desktop Metaphor Advantages Disadvantages

47 Microsoft Bob, Designing Interactions, 2007

48 Agarawala & Balakrishnan, BumpTop: Pushing the Desktop Metaphor with Physics, Piles, & the Pen, CHI2006

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

50 [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.

51 Good or Bad?

52 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]

53 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]

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

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

56 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]