Metaphors & Representation

Interaction DesignO 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 A T I O N

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

M e t a p h o r s & R e p r e s e n t a t i o n

1

The sign and the representation:Signs as representative via basic semiotics

M e t a p h o r s & R e p r e s e n t a t i o n

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

M e t a p h o r s & R e p r e s e n t a t i o n

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 decidewhat effect you want to achieve by the use of a particular sign.

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics

C O N N O T A T I O N(signified/mental concept)

D E N O T A T I O N(Signifier)

(I will give you)breakfast

in bed

Automaticscripting

In a certain context you often intuitively expect somethingparticular based on the signs you encode.

This proces is called scripting. Here’s an example:

(You expect)a particularkind of breakfast(you like)

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: L

akof

f& Jo

hnso

n 19

80 /

Sau

ssur

e 19

16)

SignComposed of

SignifierExistense

of the signActivates …

Signified

the mental concept, which relates to …

SignificationReference to “reality” as meaning

Now, let’s look at the conceptual scopeof denotation and connotation …

the referent

tree

(Sou

rce:

Fis

ke 1

990)

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics

Tegneter struktureret af

Signifiantbetegneren

af eksisterende tegn Aktiverer …

SignifiéDet betegnede

et mentalt koncept, der relaterer til …

SignificationRefererer til “det virkelige” som meningsfuldt

referenten

træ

(Sou

rce:

Fis

ke 1

990)

M e t a f o r & r e p r æ s e n t a t i o n

EN DANSK GUIDE TIL BEGREBERNE

The sign is arbitrary

D E N O T A T I O N(Literal concept)

Signifier

Word, soundor image

C O N N O T A T I O N(Mental concept)

Signified

Percieved

Conceptual,perceptual

and culturalcontexts

(Sou

rce:

Fis

ke 1

990)

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics

APPLE ?

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.

Tank ?

The sign activates … the mental concept, which relates to … the referent?

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics

SignComposed of

SignifierExistense

of the sign

SignifiedMental concept

Signification

This is important in relation to the way youintend to make people react to the signsin your strategic communication …

“Reality” / Meaning

SignUse of sign

(encoding/strategy)

InterpretantPercieving the sign

(decoding/scripting)

Effect of the sign(response/action)

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics

Contradictingscripting

And sometimes the strategy is to deliberately surprise youand contradict your expectations.

To experience and learn new things via signs: a new scripting proces

“What! Monkey food!?”(or)“It looks good!”

(you get served)an alternative

kind of breakfast (you

might like)

R E A C T I O NN E W S C R I P T I N G

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: L

akof

f& Jo

hnso

n 19

80)

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: F

iske

199

0 / A

nne

Met

te B

usch

201

1)

Semiotic Categories of the Sign

S E M I O T I C S I G N S

I C O N

I N D E X

S Y M B O L

The iconic sign bears a resemblance to its object.

The indexical sign has a direct connection to its object.

The symbolic sign has a rule- or convention connection to its object.

These categories often mix!

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: F

iske

199

0 / A

nne

Met

te B

usch

201

1)

S E M I O T I C S I G N S

I C O N The iconic sign bears a resemblance to its object.

Examples:

Pictograms

Outlines and shapes

Specific denotations

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: F

iske

199

0 / A

nne

Met

te B

usch

201

1)

S E M I O T I C S I G N S

I N D E X The indexical sign has a direct connection to its object.

Examples:

Smoke (of a fire)

Postures (of emotions)

Relational denotations

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: F

iske

199

0 / A

nne

Met

te B

usch

201

1)

S E M I O T I C S I G N S

S Y M B O L The symbolic sign has a rule- or convention connection to its object.

Examples:

Logos and visual signs

Words (“war” means chaos)

Objects in a certain context

Denotations and connotationsvia rules or conventions meansthat we have learned how to decode the symbol.

M e t a p h o r s & R e p r e s e n t a t i o n

The sign and the representation: Signs as representative via basic semiotics(S

ourc

e: F

iske

199

0 / A

nne

Met

te B

usch

201

1)

S E M I O T I C S I G N S

I C O N

I N D E X

S Y M B O L

Exercise

S I G N S & B R A N D I N G

T O P - D O W N

Example

T O P : The sign as a promise

D O W N : Benefactor/product

Kres

s& L

eeuw

en19

96 v

ia B

arna

rd20

05)

M e t a p h o r s & R e p r e s e n t a t i o n

S I G N S & B R A N D I N G

L E F T - R I G H T

Example

L E F T : A symbol/sign

Kres

s& L

eeuw

en19

96 v

ia B

arna

rd20

05)

R I G H T : the anchorage(picture + text)ProductBenefactor

M e t a p h o r s & R e p r e s e n t a t i o n

M e t a p h o r s & R e p r e s e n t a t i o n

2

The metaphor:The basic metaphor as representation

Metaphoricalscripting

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.

“This must mean that youreally like me!”Or“ what have Idone to you?!”

The alternativekind of

breakfast(You happen

to like now)

R E A C T I O N

A C T I O N(Signifier)

P E R C I E V E D(Signified)

M e t a p h o r s & R e p r e s e n t a t i o n

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:

“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!”

M e t a p h o r s & R e p r e s e n t a t i o n

The metaphor: The basic metaphor as representation(S

ourc

e: L

akof

f& Jo

hnso

n 19

80)

M e t a p h o r s & R e p r e s e n t a t i o n

3

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 learninghow to accomplish things—a natural, human process.”

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design(S

ourc

e: C

oope

r 200

7: 2

70)

“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.”

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design(S

ourc

e: C

oope

r 200

7: 2

70)

“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,can presumably understand the purpose of the thing.”

Remember an affordance strategy in visual metaphors.

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design(S

ourc

e: C

oope

r 200

7: 2

70 ff

)

Visual metaphors

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Nature Layout elements on a website

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)(S

ourc

e: C

oope

r 200

7: 2

70 ff

)

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.

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design(S

ourc

e: C

oope

r 200

7: 2

70 ff

)

DOS (1981)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Amiga 1000 (1985)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Apple Macintosh (1985)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Sun Workstation(1989)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Windows (1992)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Windows (1995)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Windows Bob (1995)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Word (1989: 1.0)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Pages Ipad (2012)

Thoughts (2012)

Apple Mac (2006: OS X 10.4.7)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

Ipad (Apple 2012)

M e t a p h o r s & R e p r e s e n t a t i o n

The interactive design: Metaphors in interactive design

?

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. http://en.wikipedia.org/wiki/Course_in_General_Linguistics.

Lakoff og Johnson (1980, 2002):Metaphors we live by.Chicago Press, USA.

Fiske, John (1990):Introduction to Communication Studies.Routledge. References to signs p. 47. See Google books

Resources

Buhl, Claus (2005):Det lærende brand.Børsens Forlag.

Malcolm Barnard (2005):Graphic Design as CommunicationRoutledge.

Anne Mette Busch, David Engelby (m.fl.) (2011):Kommunikation i multimediedesign.Hans Reitzels Forlag.