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

1. Information Design:
Semiotics and
the Use of Metaphors
by 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

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

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

18. the question is:
What is a sign?

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

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

23. Magritte,R.,(1929), La Trahison des images (Ceci n'est pas une pipe),
Painting, Oil on canvas, Canvas: Los Angeles County Museum of Art.

24. Medeiros, I. (2010), Visual Communication in China: “Visitors, This Way”?, retrieved August 31st, 2011
from http://designative.info/2010/05/10/visual-communication-in-china-visitors-this-way/

25. Doctorow, C. (2007), When UIs attack: Do not insert receipts in above slot, retrieved
August 31st, 2011 from http://www.flickr.com/photos/doctorow/1167985374/

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

27. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: Communication
Oriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)

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

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

30. Wikipedia (2011), Chery QQ,, retrieved August 31st, 2011 from
http://en.wikipedia.org/wiki/Chery_QQ

31. BMW of North America, LCC. (2008), Mini Cooper, retrieved
August 31st, 2011 from http://www.miniusa.com/#/MINIUSA.COM-m

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

33. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: Communication
Oriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)

34. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: Communication
Oriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)

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

36. McCloud, S., (1994) Understanding Comics: The Invisible Art,
Harper Perennial (April 27, 1994)

37. Apple Inc. (2010), About the Guidelines for Creating Great Mac OS X Apps,
retrieved September 1st, 2011 from
http://developer.apple.com/library/mac/#documentation/UserExperience/
Conceptual/AppleHIGuidelines/Intro/Intro.html

38. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: Communication
Oriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)

39. Mullet, K., Sano, D., (1994). Designing Visual Interfaces: Communication
Oriented Techniques”, Prentice Hall; 1 edition (December 15, 1994)

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

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

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

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

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

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

58. From the interaction design perspective:
What is a sign?

59. Microsoft, Inc.(2011), Icons, in Windows User Experience Interaction Guidelines,
retrieved August 31st, 2011 from http://msdn.microsoft.com/en-us/library/aa511280.aspx

60. Yahoo!, Inc. (2011), Yahoo! Brasil,
retrieved September 1st, 2011 from http://br.yahoo.com

61. Taobao, Inc. (2011), Taobao Service Center,
retrieved September 1st, 2011 from http://service.taobao.com/support/main/service_center.htm

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

63. Design Process
Nadin, M.,(1990), Interface design: Semiotics in the Individual Sciences, Vol. II
(W.A. Koch, Ed.). Bochum: Brockmeyer, 1990, pp. 418-436.

64. Semiotic Representation of the Design Processes and Design Language
Nadin, M.,(1990), Interface design: Semiotics in the Individual Sciences, Vol. II
(W.A. Koch, Ed.). Bochum: Brockmeyer, 1990, pp. 418-436.

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

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

68. Nadin, M.,(1988), Interface design: A semiotic paradigm, in Semiotica 69-3/4.
Amsterdam: Mouton de Gruyter, 1988, pp. 269-302

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

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