Your SlideShare is downloading. ×
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Information Design: Semiotics and the Use of Metaphors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Information Design: Semiotics and the Use of Metaphors

3,844

Published on

You will learn how to use metaphors to enable users to better grasp the details of the conceptual models you create

You will learn how to use metaphors to enable users to better grasp the details of the conceptual models you create

Published in: Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,844
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Information Design:Semiotics andthe Use of Metaphorsby Itamar Medeiros
  • 2. Use of Metaphors Learning Objectives  You will learn how to use metaphors to enable users to better grasp the details of the conceptual models you create; Outline  Introduction  Metaphors and Conceptual Models  Metaphors and Imagery  Semiotics Theory  Use of Metaphors: Exercise  Relate  Donate { UX Workshops: Use of Metaphors } You are at: Introduction » Learning Objectives and Outline
  • 3. Introduction:Collect / Create / Relate / Donate Collect Create i @ Learn from previous Explore, compose, experiences and evaluate possible solutions Relate Donate Consult with peers and mentors ^ : Disseminating results Shneiderman, B. (February 1999), Creating Creativity for Everyone: User Interfaces for Supporting Innovation, ACM Transactions on Computer-Human Interaction 7, 1 (March 2000), 114-138. { UX Workshops: Use of Metaphors } You are at: Introduction » Collect / Create / Relate / Donate
  • 4. Use of Metaphors:First Principles of Interaction Design The following principles are fundamental to the design and implementation of effective interfaces, whether for traditional GUI environments or the web: Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » First Principles of Interaction Design
  • 5. Use of Metaphors:First Principles of Interaction Design Anticipation Latency Reduction Autonomy Learnability Color Blindness Metaphors, Use of Consistency Protect Users Work Defaults Readability Efficiency of the User Track State Explorable Interfaces Visible Navigation Fitts Law Human Interface Objects Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » First Principles of Interaction Design
  • 6. Use of Metaphors:First Principles of Interaction Design Anticipation Latency Reduction Autonomy Learnability Color Blindness Metaphors, Use of Consistency Protect Users Work Defaults Readability Efficiency of the User Track State Explorable Interfaces Visible Navigation Fitts Law Human Interface Objects Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » First Principles of Interaction Design
  • 7. Use of Metaphors If chosen well, metaphors that will enable users to instantly grasp the finest details of the conceptual model of a product/system/site. Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » Use of Metaphors
  • 8. Conceptual Models A construct of a system created by designers to represent users’ mental model, based on qualitative assumptions about its elements, their interrelationships, and system boundaries . Wikipedia (2011), Conceptual model, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Conceptual_model { UX Workshops: Use of Metaphors } You are at: Collect » Conceptual Models
  • 9. Nadin, M.,(1988), Interface design: A semiotic paradigm, in Semiotica 69-3/4.Amsterdam: Mouton de Gruyter, 1988, pp. 269-302
  • 10. Use of Metaphors Good metaphors are stories, creating visible pictures in the mind. Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » Use of Metaphors
  • 11. Use of Metaphors Bring metaphors alive by appealing to people’s perceptions–sight, sound, touch, and kinesthesia–as well as triggering their memories. Tognazzini, B. (2003), First Principles of Interaction Design, Ask Tog, retrieved August 31st, 2011 from http://www.asktog.com/basics/firstPrinciples.html { UX Workshops: Use of Metaphors } You are at: Collect » Use of Metaphors
  • 12. King of California, 2007. Film.Directed by Mike CAHILL. USA: Millennium Films
  • 13. Hannibal Rising, 2007. Film.Directed by Peter WEBBER. USA: Paramount Pictures
  • 14. Use of Metaphors:Imagery Pictorial representation will cross social and linguistic boundaries with ease when the objects being represented are relatively across cultures { UX Workshops: Use of Metaphors } You are at: Collect » Use of Metaphors: Imagery
  • 15. Use of Metaphors:Imagery Understanding what an image represents (as opposed to what it depicts) is a prerequisite for reading/creating visual messages. { UX Workshops: Use of Metaphors } You are at: Collect » Use of Metaphors: Imagery
  • 16. Semiotics The study of signs and sign processes (semiosis), indication, designation, likeness, analogy, metaphor, symbolism, signification, and communication. Wikipedia (2011), Semiotics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semiotics { UX Workshops: Use of Metaphors } You are at: Collect » Semiotics
  • 17. the question is:What is a sign?
  • 18. Signs Defined by Charles S. Peirce as something that stands for someone or something in some respect or capacity. Wikipedia (2011), Sign (semiotics), retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Sign_(semiotics) { UX Workshops: Use of Metaphors } You are at: Collect » Signs
  • 19. Signs Understanding how signs are formed, transmitted and interpreted can help the designer to analyze a communication problem. Wikipedia (2011), Sign (semiotics), retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Sign_(semiotics) { UX Workshops: Use of Metaphors } You are at: Collect » Signs
  • 20. Magritte,R.,(1929), La Trahison des images (Ceci nest pas une pipe),Painting, Oil on canvas, Canvas: Los Angeles County Museum of Art.
  • 21. Medeiros, I. (2010), Visual Communication in China: “Visitors, This Way”?, retrieved August 31st, 2011from http://designative.info/2010/05/10/visual-communication-in-china-visitors-this-way/
  • 22. Doctorow, C. (2007), When UIs attack: Do not insert receipts in above slot, retrievedAugust 31st, 2011 from http://www.flickr.com/photos/doctorow/1167985374/
  • 23. Signs Representamen (that which represents) Object (that which is represented) Interpretant (that who interprets) Wikipedia (2011), Sign (semiotics), retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Sign_(semiotics) { UX Workshops: Use of Metaphors } You are at: Collect » Signs
  • 24. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  • 25. Signs:Relate Close your eyes for a moment and think about the first image that comes to your mind when you hear the word: Automobile { UX Workshops: Use of Metaphors } You are at: Relate » Signs
  • 26. Signs:Relate What attributes would you use to describe the automobile you just imagined? Luxurious? Sexy? Comfortable? { UX Workshops: Use of Metaphors } You are at: Relate » Signs
  • 27. Wikipedia (2011), Chery QQ,, retrieved August 31st, 2011 fromhttp://en.wikipedia.org/wiki/Chery_QQ
  • 28. BMW of North America, LCC. (2008), Mini Cooper, retrievedAugust 31st, 2011 from http://www.miniusa.com/#/MINIUSA.COM-m
  • 29. Levels of Signs Syntax (the relations between the elements of the representamen); Semantics (between the representamen and the object); Pragmatics (the effectiveness of a syntax/semantics for an interpretant) Wikipedia (2011), Semantics-pragmatics-syntax trinity, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics-pragmatics-syntax_trinity { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs
  • 30. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  • 31. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  • 32. Levels of Signs:Syntax Syntax (the relations between the elements of the representamen); Semantics (between the representamen and the object); Pragmatics (the effectiveness of a syntax/semantics for an interpretant) Wikipedia (2011), Semantics-pragmatics-syntax trinity, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics-pragmatics-syntax_trinity { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs » Syntax
  • 33. McCloud, S., (1994) Understanding Comics: The Invisible Art,Harper Perennial (April 27, 1994)
  • 34. Apple Inc. (2010), About the Guidelines for Creating Great Mac OS X Apps,retrieved September 1st, 2011 fromhttp://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
  • 35. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  • 36. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  • 37. Levels of Signs:Semantics Syntax (the relations between the elements of the representamen); Semantics (between the representamen and the object); Pragmatics (the effectiveness of a syntax/semantics for an interpretant) Wikipedia (2011), Semantics-pragmatics-syntax trinity, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics-pragmatics-syntax_trinity { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs » Semantics
  • 38. Levels of Signs:Semantics The Semantic level relates to the intended meaning of signs. Wikipedia (2011), Semantics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs » Semantics
  • 39. Semantics Icon (relates to its object by resemblance); Index (refers to its object indirectly, by consequence); Symbol (refers to its object by convention alone); Wikipedia (2011), Semantics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics { UX Workshops: Use of Metaphors } You are at: Collect » Semantics
  • 40. Semantics:Icon Icon (relates to its object by resemblance); Index (refers to its object indirectly, by consequence); Symbol (refers to its object by convention alone); Wikipedia (2011), Semantics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics { UX Workshops: Use of Metaphors } You are at: Collect » Semantics » Icon
  • 41. Semantics:Index Icon (relates to its object by resemblance); Index (refers to its object indirectly, by consequence); Symbol (refers to its object by convention alone); Wikipedia (2011), Semantics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics { UX Workshops: Use of Metaphors } You are at: Collect » Semantics » Index
  • 42. Semantics:Symbol Icon (relates to its object by resemblance); Index (refers to its object indirectly, by consequence); Symbol (refers to its object by convention alone); Wikipedia (2011), Semantics, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics { UX Workshops: Use of Metaphors } You are at: Collect » Semantics » Symbol
  • 43. From the interaction design perspective:What is a sign?
  • 44. Microsoft, Inc.(2011), Icons, in Windows User Experience Interaction Guidelines,retrieved August 31st, 2011 from http://msdn.microsoft.com/en-us/library/aa511280.aspx
  • 45. Yahoo!, Inc. (2011), Yahoo! Brasil,retrieved September 1st, 2011 from http://br.yahoo.com
  • 46. Taobao, Inc. (2011), Taobao Service Center,retrieved September 1st, 2011 from http://service.taobao.com/support/main/service_center.htm
  • 47. Levels of Signs Syntax (the relations between the elements of the representamen); Semantics (between the representamen and the object); Pragmatics (the effectiveness of a syntax/semantics for an interpretant) Wikipedia (2011), Semantics-pragmatics-syntax trinity, retrieved August 31st, 2011 from http://en.wikipedia.org/wiki/Semantics-pragmatics-syntax_trinity { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs
  • 48. Design ProcessNadin, M.,(1990), Interface design: Semiotics in the Individual Sciences, Vol. II(W.A. Koch, Ed.). Bochum: Brockmeyer, 1990, pp. 418-436.
  • 49. Semiotic Representation of the Design Processes and Design LanguageNadin, M.,(1990), Interface design: Semiotics in the Individual Sciences, Vol. II(W.A. Koch, Ed.). Bochum: Brockmeyer, 1990, pp. 418-436.
  • 50. Levels of Signs:Pragmatics Let’s make it simple:  Are the elements visual language (colors / textures / imagery) of the interface familiar to the targeted audience? Syntax  Are the elements visual language (colors / textures / imagery) of the interface meaningful to the targeted audience? Semantic  Are the elements visual language (colors / textures / imagery) of the interface conveying the intended message to the targeted audience? Pragmatics { UX Workshops: Use of Metaphors } You are at: Collect » Levels of Signs » Pragmatics
  • 51. Semiotics & Interaction Design:Exercise Think of an existing product/service you’re vey happy (or unhappy!) with. Let’s assess how effective it communicate its conceptual model through the visual language applied through its interface: 1. Who do you think the primary audience of the product / service is? 2. What kind of collors / textures / imagery were used in each screen? 3. What were the intended conceptual models the product was trying to communicate? { UX Workshops: Use of Metaphors } You are at: Create » Semiotics & Interaction Design
  • 52. Nadin, M.,(1988), Interface design: A semiotic paradigm, in Semiotica 69-3/4.Amsterdam: Mouton de Gruyter, 1988, pp. 269-302
  • 53. Semiotics & Interaction Design :Relate If you could change the product/service you’ve just described, I’d like to hear about: 1. What aspects would you change? 2. How would that improve the communication of the product’s conceptual model? { UX Workshops: Basics of User Experience Design } You are at: Relate » Evaluating Experiences
  • 54. Donate:Disseminating Results Why don’t you share with me about the product/service you’re happy (or unhappy!) with: 1. What aspects would you change? 2. How would that improve the communication of the product’s conceptual model? Itamar Medeiros http://designative.info/ itamar.medeiros@designative.info { UX Workshops: Basics of User Experience Design } You are at: Donate » Disseminating Results

×