Information Design: Semiotics and the Use of Metaphors

4,908
-1

Published on

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
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,908
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Information Design: Semiotics and the Use of Metaphors

  1. 1. Information Design:Semiotics andthe Use of Metaphorsby Itamar Medeiros
  2. 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. 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. 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. 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. 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. 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. 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. 9. Nadin, M.,(1988), Interface design: A semiotic paradigm, in Semiotica 69-3/4.Amsterdam: Mouton de Gruyter, 1988, pp. 269-302
  10. 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. 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. 12. King of California, 2007. Film.Directed by Mike CAHILL. USA: Millennium Films
  13. 13. Hannibal Rising, 2007. Film.Directed by Peter WEBBER. USA: Paramount Pictures
  14. 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. 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. 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. 17. the question is:What is a sign?
  18. 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. 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. 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. 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. 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. 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. 24. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  25. 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. 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. 27. Wikipedia (2011), Chery QQ,, retrieved August 31st, 2011 fromhttp://en.wikipedia.org/wiki/Chery_QQ
  28. 28. BMW of North America, LCC. (2008), Mini Cooper, retrievedAugust 31st, 2011 from http://www.miniusa.com/#/MINIUSA.COM-m
  29. 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. 30. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  31. 31. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  32. 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. 33. McCloud, S., (1994) Understanding Comics: The Invisible Art,Harper Perennial (April 27, 1994)
  34. 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. 35. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  36. 36. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: CommunicationOriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)
  37. 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. 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. 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. 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. 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. 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. 43. From the interaction design perspective:What is a sign?
  44. 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. 45. Yahoo!, Inc. (2011), Yahoo! Brasil,retrieved September 1st, 2011 from http://br.yahoo.com
  46. 46. Taobao, Inc. (2011), Taobao Service Center,retrieved September 1st, 2011 from http://service.taobao.com/support/main/service_center.htm
  47. 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. 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. 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. 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. 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. 52. Nadin, M.,(1988), Interface design: A semiotic paradigm, in Semiotica 69-3/4.Amsterdam: Mouton de Gruyter, 1988, pp. 269-302
  53. 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. 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

×