powerpoint presentation€¦ · scott mccloud, understanding comics: the invisible art, 1994 what...
TRANSCRIPT
CMSC434
Representation and Metaphors
Thursday, March 28th, 2013
Instructor: Jon Froehlich
TA: Matt Mauriello
Intro to Human-Computer Interaction
Don Norman
Reading response due Tuesday
Hall of Fame Hall of Shame
[http://youtu.be/p92QfWOw88I]
Building Windows 8, http://youtu.be/p92QfWOw88I
Shame/Fame
[http://youtu.be/v4boTbv9_nU]
How Real People Will Use Windows 8, http://youtu.be/v4boTbv9_nU
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.
Representation Matters
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 ]
Semiotics noun \-ˈä-tiks\ The study of signs and symbols and their use or interpretation
[Oxford Dictionary]
What are the symbols in this image?
Scott McCloud, Understanding Comics: The Invisible Art, 1994
What can we say about these faces?
Scott McCloud, Understanding Comics: The Invisible Art, 1994
What can we say about these faces?
How are signs and symbols used in interfaces?
• To indicate functionality
• Icon
• Bjuttons
• Text
• Shapes
• Color
• Mouse cursor
Can symbols be useful to thought/cognition?
RomanNumerals
I
V
X
L
C
D
M
RomanNumerals
= 1
= 5
= 10
= 50
= 100
= 500
= 1000
RomanNumerals
I
V
X
L
C
D
M
Symbols have numerical meaning
Symbol positions have (some) numerical meaning
What about arithmetic operations?
XIX + LIV
(19 + 54)
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
19 + 54 = 73
[Algorithm from: http://turner.faculty.swau.edu/mathematics/materialslibrary/roman/]
How would we do this with Arabic numerals?
19 + 54
19
+54 3
+1
7
What about multiplication and division?
19 x 54
19
x 54
19 x 54
19
x 54
6
+3
7
19 x 54
19
x 54
6
+3
7 0 5
+4
9
19 x 54
19
x 54
6
+3
7 0 5
+1
9 + 6 2 10
+4
19 x 54
19
x 54
6
+3
7 0 5
+1
9 + 6 2 10
+4 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
XIX x LIV In the Roman numbering system, multiplication &
division are much harder because of representation.
Using the external world as a cue for your memory…
Recall vs. Recognition
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
TimMott At Xerox PARC, Designed Desktop Metaphor
Co-founded Electronic Arts
[Moggridge, Designing Interactions]
Moggridge, Designing Interactions, 2007
The Desktop Metaphor
Advantages
Disadvantages
[Microsoft BOB]
Microsoft Bob, Designing Interactions, 2007
[BumpTop, CHI2006]
Agarawala & Balakrishnan, BumpTop: Pushing the Desktop Metaphor with Physics, Piles, & the Pen, CHI2006
1+5 * 7
1 + 5*7
Visual grouping influenced ability to ascertain correct result
[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.”
[Landy & Goldstone, How Abstract is Symbolic Thought? J. of Experimental Psychology]
Good or Bad?
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]
Which window is closer to you?
[Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]
When designing, we must consider how the brain
interprets the meaning of color, shadow, shading—
these are not just aesthetic choices.
Looks good, right?
[Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]
Where does this “drawer”
menu come from?
Looks good, right?
[Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]
Where does this “drawer”
menu come from?
[Example based on p.20 in Seductive Interaction Design by Stephen P. Anderson, 2011]
By flipping the direction
of the shadow, the
design “feels” better