1.
Metaphors & Representation
Interaction Design
O B J E C T S — S I G N S — S Y M B O L I C C O M M U N I C AT I O N

2.
Metaphors & Representation
Introduction to the tools
1. The sign and the representation:
Signs as representative via basic semiotics
2. The metaphor:
The basic metaphor as representation
3. The interactive design:
Metaphors in interactive design

3.
Metaphors & Representation
1
The sign and the representation:
Signs as representative via basic semiotics

4.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
Communication is often the work of signs which represent something
Flags represent something (but what?) … Representation anchored with a text

5.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
Semiotics is the study and the making use of signs as communication
Signs are words, written and spoken.
Signs can be seen, smelled and tasted
Signs are visual artefacts and visual representations.
Signs are cultural codes.
Semiotics is the communication strategy by which you decide
what effect you want to achieve by the use of a particular sign.

6.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
In a certain context you often intuitively expect something
particular based on the signs you encode.
This proces is called scripting. Here’s an example:
D E N O TAT I O N C O N N O TAT I O N
(Signifier) (signified/mental concept)
(Source: Lakoff & Johnson 1980 / Saussure 1916)
(I will give you) (You expect)
breakfast a particular
in bed kind of
breakfast
Automatic (you like)
scripting

7.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
Now, let’s look at the conceptual scope
of denotation and connotation …
Signification
Sign Reference to “reality” as meaning
Composed of
Signifier Signified
Existense
of the sign
Activates … the mental concept, which relates to … the referent
tree
(Source: Fiske 1990)

8.
Metafor & repræsentation
EN DANSK GUIDE TIL BEGREBERNE
Signification
Tegnet Refererer til “det virkelige”
er struktureret af
som meningsfuldt
Signifiant Signifié
betegneren Det betegnede
af eksisterende tegn
Aktiverer … et mentalt koncept, der relaterer til … referenten
træ
(Source: Fiske 1990)

9.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
The sign is arbitrary
D E N O TAT I O N C O N N O TAT I O N
(Literal concept) (Mental concept)
APPLE
?
Conceptual,
Signifier perceptual Signified
and cultural
Word, contexts Percieved
(Source: Fiske 1990)
sound
or image

10.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
A sign never has any “real” meaning, it’s what you percieve as meaningful.
The sign corresponds with your codes of reality
and the sign refers to your world.
The sign is always arbitrary and it is encoded in a certain context.
The sign activates … the mental concept, which relates to … the referent?
Tank ?

11.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
This is important in relation to the way you
intend to make people react to the signs
in your strategic communication …
Sign
Composed of
Signification
Signifier Signified “Reality” / Meaning
Existense Mental concept
of the sign
Sign Interpretant Effect of the sign
Use of sign Percieving the sign (response/action)
(encoding/strategy) (decoding/scripting)

12.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
And sometimes the strategy is to deliberately surprise you
and contradict your expectations.
To experience and learn new things via signs: a new scripting proces
NEW SCRIPTING REACTION
(you get served) “What!
an alternative Monkey food!?”
kind of (or)
(Source: Lakoff & Johnson 1980)
breakfast (you “It looks good!”
might like) Contradicting
scripting

13.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
Semiotic Categories of the Sign
SEMIOTIC SIGNS
ICON The iconic sign bears a resemblance to its object.
(Source: Fiske 1990 / Anne Mette Busch 2011)
INDEX The indexical sign has a direct connection to its object.
SYMBOL The symbolic sign has a rule- or convention connection to its object.
These categories often mix!

14.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
SEMIOTIC SIGNS
ICON The iconic sign bears a resemblance to its object.
Examples:
Pictograms
(Source: Fiske 1990 / Anne Mette Busch 2011)
Outlines and shapes
Specific denotations

15.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
SEMIOTIC SIGNS
INDEX The indexical sign has a direct connection to its object.
Examples:
Smoke (of a fire)
(Source: Fiske 1990 / Anne Mette Busch 2011)
Postures (of emotions)
Relational denotations

16.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
SEMIOTIC SIGNS
SYMBOL The symbolic sign has a rule- or convention connection to its object.
Examples:
Logos and visual signs
(Source: Fiske 1990 / Anne Mette Busch 2011)
Words (“war” means chaos)
Objects in a certain context
Denotations and connotations
via rules or conventions means
that we have learned how to
decode the symbol.

17.
Metaphors & Representation
The sign and the representation: Signs as representative via basic semiotics
Exercise
SEMIOTIC SIGNS
ICON
INDEX
SYMBOL
(Source: Fiske 1990 / Anne Mette Busch 2011)

18.
Metaphors & Representation
Example
SIGNS & BRANDING
TOP-DOWN T O P : The sign as a promise
Kress & Leeuwen 1996 via Barnard 2005)
D O W N : Benefactor/product

19.
Metaphors & Representation
Example
SIGNS & BRANDING
L E F T- R I G H T
Kress & Leeuwen 1996 via Barnard 2005)
LEFT: RIGHT:
A symbol/sign the anchorage
(picture + text)
Product
Benefactor

20.
Metaphors & Representation
2
The metaphor:
The basic metaphor as representation

21.
Metaphors & Representation
The metaphor: The basic metaphor as representation
The metaphor means …
an analogy and a connection between two different objects or ideas.
It depends on the scripting and the signs in the particular context.
An action can mean something.
ACTION PERCIEVED
(Signifier) (Signified)
REACTION
“This must
mean that you
The alternative
really like me!”
kind of
Or
breakfast
“ what have I
(You happen
done to you?!”
to like now) Metaphorical
scripting

22.
Metaphors & Representation
The metaphor: The basic metaphor as representation
The metaphor means …
an analogy and a connection between two different objects or ideas.
We can understand one aspect by the aid of another.
For example:“the city is acting like it’s on fire”
can mean that “the city is celebrating” or “the city is in panic .
”
Other examples:
The general concept of “discussion” can mean conflict.
It opens for a wide range of metaphors:
(Source: Lakoff & Johnson 1980)
“I will win this argument” or “You disagree? Ok, fire away!”
Or the concept of “good is up” and “bad is down”:
“I’m on top of the world today” vs. “I’m feeling down!”

23.
Metaphors & Representation
3
The interactive design:
Metaphors in interactive design

24.
Metaphors & Representation
The interactive design: Metaphors in interactive design
“There are three dominant paradigms in the conceptual and
visual design of user interfaces:
implementation-centric, metaphoric, and idiomatic.
The implementation centric interfaces are based on
understanding how things actually work under the hood
—a difficult proposition.
Metaphoric interfaces are based on intuiting how things work
—a risky method.
Idiomatic interfaces, however, are based on learning
how to accomplish things—a natural, human process.”
(Source: Cooper 2007: 270)

25.
Metaphors & Representation
The interactive design: Metaphors in interactive design
“There are three dominant paradigms in the conceptual and
visual design of user interfaces:
implementation-centric, metaphoric, and idiomatic.
The implementation centric interfaces are based on
understanding how things actually work under the hood
—a difficult proposition.”
(Source: Cooper 2007: 270)

26.
Metaphors & Representation
The interactive design: Metaphors in interactive design
“There are three dominant paradigms in the conceptual and
visual design of user interfaces:
implementation-centric, metaphoric, and idiomatic.
Metaphoric interfaces are based on intuiting how things work
—a risky method. “
Yes, but not impossible:
“ When we talk about metaphors in the context of user interface
and interaction design, we really mean visual metaphors: a
picture used to represent the purpose or attributes of a thing.
Users recognize the imagery of the metaphor and, by extension,
(Source: Cooper 2007: 270 ff)
can presumably understand the purpose of the thing.”
Remember an affordance strategy in visual metaphors.

27.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Visual metaphors
Nature Layout elements on a website
(Source: Cooper 2007: 270 ff)
Cooper is not fond of the metaphor:
“Artifacts like resizable windows and endlessly nested file folders are not really
metaphoric — they have no parallel in the real world. They derive their
strength only from their easy idiomatic learnability.” (Cooper 2007: 275)

28.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Cooper argues for the idiomatic approach to UX/graphic interface design:
“We understand the idiom simply because we have learned it and because it
is distinctive, not because we understand it or because it makes subliminal
connections in our minds.” (Cooper 2007: 274)
Well … that is exactly what a good metaphor is (according to Lakoff &
Johnson), but for the sake of the argument, you can choose yourself whether
you want to operate with the concept of an idiom or a metaphor.
(Source: Cooper 2007: 270 ff)

29.
Metaphors & Representation
The interactive design: Metaphors in interactive design
DOS (1981)

30.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Amiga 1000 (1985)

31.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Apple Macintosh (1985)

32.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Sun Workstation(1989)

33.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Windows (1992)

34.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Windows (1995)

35.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Windows Bob (1995)

36.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Word (1989: 1.0)
Pages Ipad (2012)
Thoughts (2012)

37.
Metaphors & Representation
The interactive design: Metaphors in interactive design
Ipad (Apple 2012)
Apple Mac (2006: OS X 10.4.7)

38.
Metaphors & Representation
The interactive design: Metaphors in interactive design
?

39.
Resources
Curriculum
Cooper, Allan (ed.) (2007):
About Face 3. The Essential of Interaction Design.
Wiley Publishing
Chapters: 13.
Other references
Cours de linguistique générale. Suassure 1916. Buhl, Claus (2005):
http://en.wikipedia.org/wiki/Course_in_General_Linguistics. Det lærende brand.
Børsens Forlag.
Lakoff og Johnson (1980, 2002):
Metaphors we live by. Malcolm Barnard (2005):
Chicago Press, USA. Graphic Design as Communication
Routledge.
Fiske, John (1990):
Introduction to Communication Studies. Anne Mette Busch, David Engelby (m.fl.) (2011):
Routledge. Kommunikation i multimediedesign.
References to signs p. 47. See Google books Hans Reitzels Forlag.