by
Metaphor
Simplicity
Lixia Zhang, Heekyoung Jung
How to apply metaphor
to achieve simplicity
in interaction design
Exper...
SIMPLICITY
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Lixia Zhang, Heekyoung Jung
“Breakfast Maker”
the
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Function Appearance
Lixia Zhang, Heekyoung Jung
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Simplicity
What is
SUBTITLE
DIRECT NAVIGATOR
RETURNFUNCTIONS
TOP MENU MENU
ENTER
AUDIO ANGLE/PAGE SETUP
PLAY LIST
PLAYMODE PLAY SPEED ZOOM GR...
SUBTITLE
DIRECT NAVIGATOR
RETURNFUNCTIONS
TOP MENU MENU
ENTER
AUDIO ANGLE/PAGE SETUP
PLAY LIST
PLAYMODE PLAY SPEED ZOOM GR...
SUBTITLE
DIRECT NAVIGATOR
RETURNFUNCTIONS
TOP MENU MENU
ENTER
AUDIO ANGLE/PAGE SETUP
PLAY LIST
PLAYMODE PLAY SPEED ZOOM GR...
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Operational
Simplicity
MENU
Perceived
Simplicity
Operational
Simplicity
Simplicity
What is
Lixia Zhang, Heekyoung Jung
Don Norman The complexity of Si...
MENU
Gestalt PsychologyReduction Hierarchy
(Hiding)
Lixia Zhang, Heekyoung Jung
Methods
Design
Metaphor was originally defined in
linguistics as a figure of speech in which
a word or phrase is applied to an object
or ...
Metaphor
What is
Lixia Zhang, Heekyoung Jung
As Lakoff and Johnson have argued that
metaphor is the foundation of the
conc...
Color
Graphical
Shape
Digital
Display
Lixia Zhang, Heekyoung Jung
Applied to Design
Metaphor
Color
Graphical
Shape
Digital
Display
Graphical Manipulation
}
Lixia Zhang, Heekyoung Jung
Applied to Design
Metaphor
Texture
Shape
&
Size
Operation
Physical
Feedback
Applied to Design
Metaphor
Lixia Zhang, Heekyoung Jung
Texture
Shape
&
Size
Operation
Physical Manipulation
Physical
Feedback
}
Applied to Design
Metaphor
Lixia Zhang, Heekyoung...
Relationship: Abstract
Lixia Zhang, Heekyoung Jung
Applied to Design
Metaphor
Relationship: Descriptive
Lixia Zhang, Heekyoung Jung
Applied to Design
Metaphor
Relationship: Descriptive
Lixia Zhang, Heekyoung Jung
Applied to Design
Metaphor
MetaphorManipulation
Graphical
Abstract Descriptive
Physical
Metaphor Representation
Lixia Zhang, Heekyoung Jung
Applied t...
Lixia Zhang, Heekyoung Jung
Metaphor
Experiment on
Alarm
Clock
Radio
Metaphor
Experiment on
Lixia Zhang, Heekyoung Jung
Lixia Zhang, Heekyoung Jung
Metaphor
Experiment on
MetaphorManipulation
Graphical
Abstract
Face
Dial Phone
Analogue Clock
Bottle Cap
See Saw
Zipper
Descriptive
Physical
Meta...
Graphical
Abstract
Face Analogue Clock Dial Phone
Metaphor
Experiment on
Lixia Zhang, Heekyoung Jung
Graphical
Descriptive
Face Analogue Clock Dial Phone
Metaphor
Experiment on
Lixia Zhang, Heekyoung Jung
Physical
Bottle Cap See Saw Zipper
Abstract
Metaphor
Experiment on
Lixia Zhang, Heekyoung Jung
Physical
Bottle Cap See Saw Zipper
Descriptive
Metaphor
Experiment on
Lixia Zhang, Heekyoung Jung
The clock looks like analogue clock.
The clock looks like a face.
The clock looks like dial phone.
Metaphor
Experiment on
...
The clock operates like seesaw.
The clock operates like bottle cap.
The clock operates like zipper.
Metaphor
Experiment on...
Overall perceptual simplicity
Representational efficiency
Engaging appearance
Perceived learnability
Perceived predictabil...
1. Overall perceived
simplicity
Abastract
Graphical
Descriptive
Graphical
Abstract
Physical
Descriptive
Physical
Control
G...
Tuck your chin into your chest,
and then lift your chin upward
as far as possible. 6-10
repetitions
Lower your left ear to...
1. Overall perceived
simplicity
Abastract
Graphical
Descriptive
Graphical
Abstract
Physical
Descriptive
Physical
Control
G...
1. Overall perceived
simplicity
Abastract
Graphical
Descriptive
Graphical
Abstract
Physical
Descriptive
Physical
Control
G...
Lixia Zhang, Heekyoung Jung
Findings
1. Overall perceived
simplicity
Abastract
Graphical
Descriptive
Graphical
Abstract
Ph...
Findings
Lixia Zhang, Heekyoung Jung
1. Overall perceived
simplicity
Abastract
Graphical
Descriptive
Graphical
Abstract
Ph...
Conclusion
MetaphorManipulation
Graphical
Abstract Descriptive
Physical
Metaphor Representation
Overall perceptual simplicity
Representational efficiency
Engaging appearance
Perceived learnability
Perceived predictabil...
MetaphorManipulation
Graphical
Abstract Descriptive
Physical
Metaphor Representation
Noun
Verb
Lixia Zhang, Heekyoung Jung...
Lixia Zhang, Heekyoung Jung
Conclusion
MetaphorManipulation
Graphical
Abstract Descriptive
Physical
Metaphor Representation
Thank you
ithilien525@gmail.com
www.lixiazhang.com
Upcoming SlideShare
Loading in …5
×

Simplicity by Metaphor - IASDR Tokyo 2013

799 views

Published on

Paper presentation for IASDR conference Tokyo 2013. Simplicity by Metaphor - How to apply metaphor to achieve simplicity in interaction design. Paper by Lixia Zhang and Heekyoung Jung.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
799
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Simplicity by Metaphor - IASDR Tokyo 2013

  1. 1. by Metaphor Simplicity Lixia Zhang, Heekyoung Jung How to apply metaphor to achieve simplicity in interaction design Experimental Design on:
  2. 2. SIMPLICITY Lixia Zhang, Heekyoung Jung Simplicity What is
  3. 3. Simplicity What is Lixia Zhang, Heekyoung Jung
  4. 4. Simplicity What is Lixia Zhang, Heekyoung Jung
  5. 5. Simplicity What is Lixia Zhang, Heekyoung Jung
  6. 6. Simplicity What is Lixia Zhang, Heekyoung Jung
  7. 7. Lixia Zhang, Heekyoung Jung “Breakfast Maker” the
  8. 8. Lixia Zhang, Heekyoung Jung Simplicity What is
  9. 9. Function Appearance Lixia Zhang, Heekyoung Jung Simplicity What is
  10. 10. Lixia Zhang, Heekyoung Jung Simplicity What is
  11. 11. SUBTITLE DIRECT NAVIGATOR RETURNFUNCTIONS TOP MENU MENU ENTER AUDIO ANGLE/PAGE SETUP PLAY LIST PLAYMODE PLAY SPEED ZOOM GROUP PLAY SLOW SEARCHSKIP CANCEL QUICK REPLAY MANUAL SKIP DEPTH ENHANCER MULTI RE-MASTER ADVANCED DISC REVIEW AV ENHANCER REPEAT FL SELECTQUICK OSD OPEN/CLOSE PAUSESTOP 100 7 8 9 4 5 6 1 2 3 MENU Memorize Don Norman The complexity of Simplicity Simplicity What is Lixia Zhang, Heekyoung Jung
  12. 12. SUBTITLE DIRECT NAVIGATOR RETURNFUNCTIONS TOP MENU MENU ENTER AUDIO ANGLE/PAGE SETUP PLAY LIST PLAYMODE PLAY SPEED ZOOM GROUP PLAY SLOW SEARCHSKIP CANCEL QUICK REPLAY MANUAL SKIP DEPTH ENHANCER MULTI RE-MASTER ADVANCED DISC REVIEW AV ENHANCER REPEAT FL SELECTQUICK OSD OPEN/CLOSE PAUSESTOP 100 7 8 9 4 5 6 1 2 3 MENU Simplicity What is Lixia Zhang, Heekyoung Jung Don Norman The complexity of Simplicity
  13. 13. SUBTITLE DIRECT NAVIGATOR RETURNFUNCTIONS TOP MENU MENU ENTER AUDIO ANGLE/PAGE SETUP PLAY LIST PLAYMODE PLAY SPEED ZOOM GROUP PLAY SLOW SEARCHSKIP CANCEL QUICK REPLAY MANUAL SKIP DEPTH ENHANCER MULTI RE-MASTER ADVANCED DISC REVIEW AV ENHANCER REPEAT FL SELECTQUICK OSD OPEN/CLOSE PAUSESTOP 100 7 8 9 4 5 6 1 2 3 Simplicity What is Lixia Zhang, Heekyoung Jung Perceived Simplicity Don Norman The complexity of Simplicity
  14. 14. Simplicity What is Lixia Zhang, Heekyoung Jung Operational Simplicity MENU
  15. 15. Perceived Simplicity Operational Simplicity Simplicity What is Lixia Zhang, Heekyoung Jung Don Norman The complexity of Simplicity
  16. 16. MENU Gestalt PsychologyReduction Hierarchy (Hiding) Lixia Zhang, Heekyoung Jung Methods Design
  17. 17. Metaphor was originally defined in linguistics as a figure of speech in which a word or phrase is applied to an object or action to which it is not literally applicable. The essence of metaphor is to understand and experience one kind of thing in terms of another. Metaphor What is Lixia Zhang, Heekyoung JungLixia Zhang, Heekyoung Jung
  18. 18. Metaphor What is Lixia Zhang, Heekyoung Jung As Lakoff and Johnson have argued that metaphor is the foundation of the conceptual system. It is foundation of how we understand things around us.
  19. 19. Color Graphical Shape Digital Display Lixia Zhang, Heekyoung Jung Applied to Design Metaphor
  20. 20. Color Graphical Shape Digital Display Graphical Manipulation } Lixia Zhang, Heekyoung Jung Applied to Design Metaphor
  21. 21. Texture Shape & Size Operation Physical Feedback Applied to Design Metaphor Lixia Zhang, Heekyoung Jung
  22. 22. Texture Shape & Size Operation Physical Manipulation Physical Feedback } Applied to Design Metaphor Lixia Zhang, Heekyoung Jung
  23. 23. Relationship: Abstract Lixia Zhang, Heekyoung Jung Applied to Design Metaphor
  24. 24. Relationship: Descriptive Lixia Zhang, Heekyoung Jung Applied to Design Metaphor
  25. 25. Relationship: Descriptive Lixia Zhang, Heekyoung Jung Applied to Design Metaphor
  26. 26. MetaphorManipulation Graphical Abstract Descriptive Physical Metaphor Representation Lixia Zhang, Heekyoung Jung Applied to Design Metaphor 1 2 3 4
  27. 27. Lixia Zhang, Heekyoung Jung Metaphor Experiment on
  28. 28. Alarm Clock Radio Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  29. 29. Lixia Zhang, Heekyoung Jung Metaphor Experiment on
  30. 30. MetaphorManipulation Graphical Abstract Face Dial Phone Analogue Clock Bottle Cap See Saw Zipper Descriptive Physical Metaphor Representation Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  31. 31. Graphical Abstract Face Analogue Clock Dial Phone Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  32. 32. Graphical Descriptive Face Analogue Clock Dial Phone Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  33. 33. Physical Bottle Cap See Saw Zipper Abstract Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  34. 34. Physical Bottle Cap See Saw Zipper Descriptive Metaphor Experiment on Lixia Zhang, Heekyoung Jung
  35. 35. The clock looks like analogue clock. The clock looks like a face. The clock looks like dial phone. Metaphor Experiment on Lixia Zhang, Heekyoung Jung Noun
  36. 36. The clock operates like seesaw. The clock operates like bottle cap. The clock operates like zipper. Metaphor Experiment on Lixia Zhang, Heekyoung Jung Verb
  37. 37. Overall perceptual simplicity Representational efficiency Engaging appearance Perceived learnability Perceived predictability Perceived simplicity of alarm setting control Accuracy in prediction of workflow Confidence in prediction Operational simplicity based on perception Metaphoric implication 1. The model looks simple to use 8. The functional controls of the alarm are obvious 9. The alarm clock’s interface looks inviting 4. The alarm clock’s interface looks easy to learn 5. I know how to interact with the alarm by observing the model 2. The interaction of the alarm looks simple 6. Set alarm A to 9 o’clock in the morning and read what time is alarm B set 7. I am confident that my answer above would accomplish the task 3. How do you rate the simplicity of the workflow? 10. What does the model remind you of? Lixia Zhang, Heekyoung Jung Metaphor Experiment on
  38. 38. 1. Overall perceived simplicity Abastract Graphical Descriptive Graphical Abstract Physical Descriptive Physical Control Group 78% 77% 78% 82% 75% 81% 70% 78% 75% 65% 72% 80% 75% 73% 82% 72% 73% 72% 72% 69% 66% 79% 73% 73% 70% 74% 60% 77% 77% 78% 78% 80% 80% 73% 72% 75% 82% 87% 85% 83% 77% 80% 82% 85% 87% 2. Alarm control perceived simplicity 3. Operational simplicity by perception 4. Perceived learnability 5. Perceived predictability 6. Accuracy in predicted workflow 7. Confidence 8. Representational efficiency 9. Engaging appearance Lixia Zhang, Heekyoung Jung Findings Graphical Abstract Descriptive Physical 1 2 3 4
  39. 39. Tuck your chin into your chest, and then lift your chin upward as far as possible. 6-10 repetitions Lower your left ear toward your left shoulder and then your right ear toward your right shoulder. 6-10 repetitions. Roller, C. (2011). How cognitive fluency affects decision making. UXmatters. Tuck your chin into your chest, and then lift your chin upward as far as possible. 6-10 repetitions Lower your left ear toward your left shoulder and then your right ear toward your right shoulder. 6-10 repetitions. Cognitive Fluency What is Lixia Zhang, Heekyoung Jung
  40. 40. 1. Overall perceived simplicity Abastract Graphical Descriptive Graphical Abstract Physical Descriptive Physical Control Group 78% 77% 78% 82% 75% 81% 70% 78% 75% 65% 72% 80% 75% 73% 82% 72% 73% 72% 72% 69% 66% 79% 73% 73% 70% 74% 60% 77% 77% 78% 78% 80% 80% 73% 72% 75% 82% 87% 85% 83% 77% 80% 82% 85% 87% 2. Alarm control perceived simplicity 3. Operational simplicity by perception 4. Perceived learnability 5. Perceived predictability 6. Accuracy in predicted workflow 7. Confidence 9. Engaging appearance Descriptive metaphor could not help in distinguishing the alarm controls from rest of the functions. 8. The functional controls of the alarm are obvious Lixia Zhang, Heekyoung Jung Findings Graphical Abstract Descriptive Physical 1 2 3 4
  41. 41. 1. Overall perceived simplicity Abastract Graphical Descriptive Graphical Abstract Physical Descriptive Physical Control Group 78% 77% 78% 82% 75% 81% 70% 78% 75% 65% 72% 80% 75% 73% 82% 72% 73% 72% 72% 69% 66% 79% 73% 73% 70% 74% 60% 77% 77% 78% 78% 80% 80% 73% 72% 75% 82% 87% 85% 83% 77% 80% 82% 85% 87% 2. Alarm control perceived simplicity 4. Perceived learnability 5. Perceived predictability 6. Accuracy in predicted workflow 7. Confidence 8. Representational efficiency 9. Engaging appearance 3. How do you rate the simplicity of the workflow? The control of all models contain 3 steps, their operational simplicity are the same, but people perceive them differently. Lixia Zhang, Heekyoung Jung Findings Graphical Abstract Descriptive Physical 1 2 3 4
  42. 42. Lixia Zhang, Heekyoung Jung Findings 1. Overall perceived simplicity Abastract Graphical Descriptive Graphical Abstract Physical Descriptive Physical Control Group 78% 77% 78% 82% 75% 81% 78% 75% 65% 72% 80% 75% 73% 82% 72% 73% 72% 72% 69% 66% 79% 73% 70% 74% 60% 77% 77% 78% 78% 80% 80% 73% 72% 75% 82% 87% 85% 83% 77% 80% 85% 87% 2. Alarm control perceived simplicity 3. Operational simplicity by perception 4. Perceived learnability 5. Perceived predictability 6. Accuracy in predicted workflow 8. Representational efficiency 9. Engaging appearance Accuracy in predicted workflow 1 2 3 4 1 2 3 4 Confidence in prediction Tester’s acuracy were similar in all experiment groups. However, their confidence varies. 7. I am confident that my answer above would accomplish the task 70% 73% 82% Graphical Abstract Descriptive Physical 1 2 3 4
  43. 43. Findings Lixia Zhang, Heekyoung Jung 1. Overall perceived simplicity Abastract Graphical Descriptive Graphical Abstract Physical Descriptive Physical Control Group 78% 77% 78% 82% 75% 81% 70% 78% 75% 65% 72% 80% 75% 73% 82% 72% 73% 72% 72% 69% 66% 79% 73% 73% 70% 74% 60% 77% 77% 78% 78% 80% 80% 73% 72% 75% 82% 87% 85% 83% 77% 80% 82% 85% 87% 2. Alarm control perceived simplicity 3. Operational simplicity by perception 4. Perceived learnability 5. Perceived predictability 6. Accuracy in predicted workflow 7. Confidence 8. Representational efficiency 9. Engaging appearance Tester’s confidence dropped in most groups except for the Abstract Physical group. Graphical Abstract Descriptive Physical 1 2 3 4
  44. 44. Conclusion MetaphorManipulation Graphical Abstract Descriptive Physical Metaphor Representation
  45. 45. Overall perceptual simplicity Representational efficiency Engaging appearance Perceived learnability Perceived predictability Perceived simplicity of alarm setting control Accuracy in prediction of workflow Confidence in prediction Operational simplicity based on perception Metaphoric implication 1. The model looks simple to use 8. The functional controls of the alarm are obvious 9. The alarm clock’s interface looks inviting 4. The alarm clock’s interface looks easy to learn 5. I know how to interact with the alarm by observing the model 2. The interaction of the alarm looks simple 6. Set alarm A to 9 o’clock in the morning and read what time is alarm B set 7. I am confident that my answer above would accomplish the task 3. How do you rate the simplicity of the workflow? 10. What does the model remind you of? Lixia Zhang, Heekyoung Jung Metaphor Experiment on
  46. 46. MetaphorManipulation Graphical Abstract Descriptive Physical Metaphor Representation Noun Verb Lixia Zhang, Heekyoung Jung Conclusion
  47. 47. Lixia Zhang, Heekyoung Jung Conclusion MetaphorManipulation Graphical Abstract Descriptive Physical Metaphor Representation
  48. 48. Thank you ithilien525@gmail.com www.lixiazhang.com

×