Lezione invitata del prof.M.Maiocchi al corso di "Strumenti e applicazioni del Web" - Università di Milano Bicocca - 14 maggio 2012
Sul corso vedi anche www.corsow.wordpress.com
4. COSA E’ DESIGN
Artigiano:
• Esperienza
• Competenza di prodotto
• Apprendistato
• Eccellenza “inconsapevole”
• Un pezzo per volta
• Personalizzazioni
• Costi elevati
Produzione industriale:
• Processo
• Anticipazione problemi
• Rilevanza del progetto
• Eccellenza “consapevole”
• Misure ed evoluzione
• Produzione in serie
• Modularità standardizzata
• Costi bassi
PROGETTO INDUSTRIALE: in inglese INDUSTRIAL DESIGN
5. DESIGN VS INDUSTRIAL
DESIGN
LA CAPACITA’ INDUSTRIALE DI PRODURRE IN
SERIE A BASSO COSTO PER UN NUMERO
ELEVATO DI POTENZIALI ACQUIRENTI E’ UN
FATTO SCONTATO DELL’INDUSTRIAL DESIGN
oggi
IL
DESIGN
DEVE DARE DI PIU’
6. DI QUANDO E’ ?
Il designer deve sapere cogliere il senso di una società e
di un periodo storico, per calarlo all’interno del prodotto,
rendendolo un artefatto anche comunicativo.
7. CUCCIOLI ?
Testa grande
Curve
Occhi grandi
…
Morbidezza
Tenerezza
…
Testa piccola
Massa
Occhi piccoli
…
Fierezza
Aggressività
…
Il designer deve comprendere
i meccanismi percettivi,
inserirli nel prodotto,
piegandoli al proprio obiettivo
di creare esperienze
emozionali
12. DESIGN
Function (funzione): obiettivo per
l’utente
Shape (forma ): disegno “geometrico”
Meaning (senso ): significato che
travalica la funzione
13. FUNCTION
Function (funzione): obiettivo per l’utente;
funzioni + modalità d'uso; es. aspirapolvere:
aspirare, compattare, potenza regolabile, ecc.
• efficacia sulla funzione primaria
• funzioni accessorie
• nuove funzioni rispetto al mercato
• nuove funzioni coerenti col prodotto
• uso semplice e intuitivo
• uso più semplice rispetto al mercato
• cambia il modo di uso
15. SHAPE
Shape (forma ): disegno “geometrico”; in
genere, archetipo, architettura tipologica;
relazione con funzione come comunicazione
d’uso; aspirapolvere archetipico = corpo con
tubo e spazzole; aspirapolvere-robot = disco…
• scostamento dagli archetipi
• riconoscibilità nella funzione
• forma suggerisce uso
• forma suggerisce interazione
21. Percezione
• Semplice: attivazione
delle parti più antiche del ns
cervello .)
• Complessa : processi
attibvanti la corteccia
(funzione logiche e
cognitive) capaci di
interagire con I livelli più
antichi
25. SEEKING
• impulso elementare che ci fa cercare, investigare, dare
un senso a ciò che ci circonda
• non solo per individuare ciò che soddisfa esigenze
fisiche (fame, sete, sesso, …) ma anche più astratte
(rifugio, assenza di pericolo, …), o addirittura astratte
(idee, modelli, previsioni, …)
• stato di piacere legato a circuiti della dopamina
• droghe
26.
27. Seeking e sensi
Pochi “segni” permettono di classificare i “segnali” durante il nostro SEEKING
29. SEEKING e STEREOTIPI
• La capacità di percepire e isolare dettagli
nel contesto ci aiuta a interpretare
situazioni di utilità o di pericolo
• Ciò corrisponde a una classificazione dei
segnali e alla conseguente
stereotipazione
• Lo stereotipo ci aiuta, ma cela il rischio del
pregiudizio
30.
31. Why Panksepp
•Is one of the well recognised authors
•Reduces complexity giving just 7 basic emotions
•Classify emotions according to weel defined brain
circuits excited by well defined neurotransmitter
So, when we speak of “FEAR” we intend just what
Panksepp intends, i,e, the status coming from the
arousal of a specific brain area by a specific
neurotransmitter
32. SIMPLE and COMPLEX
STEREOTYPES
Few perceptual signals
suggesting possible attacks and
danger
A complex overstructured set
of signals, building a scenario
suggesting a complete life
model and a females
subordinated to males
34. CATENA DELLE EMOZIONI
EXTERNAL SIGNALS
DIRECT
PROCESSING BY
OLD MAMMALIAN B.
DIRECT
PROCESSING BY
REPTILIAN B.
PROCESSING BY
NEO CORTEX
SEEK
ACTIVATION OF
REPTILIAN AND OLD
MAMMALIAN B.
FEAR LUSTRAGE PLAY CAREGRIEF
36. SEEKING
www.big.dk Juan Felipe Solis
www.google.it
www.milliondollarhomepage.com/ http://web.archive.org/web/20080801000000*/http://absurd.org
www.brigaderia.com.br Clarice Di Giovanni
38. PLAY
www.it.havaianas.com Clarice Di Giovanni
www.brigaderia.com.br Clarice Di Giovanni
www.durex.it
Clarice Di Giovanni
http://www.karimrashid.com Melissa Sobrado
www.softplace.it
44. Percezione semplice ed emozioni
(Vilayanur Ramachandran)
1. Peak
shift
2.
Perceptual
Grouping
and Binding
3.
Contrast
4. Isolation
5. Perceptual
problem
solving
6.
Symmetry
7. Abhorrence of
Coincidence /
Generic
Viewpoint
8. Repetition,
rhythm and
orderliness
9. Balance
10.
Metaphor
SEEKING
45. 1. Peak shift
Esagerare alcuni aspetti contro ogni equilibrio reale:
• enfasi sugli aspetti rilevanti
• eliminazione di aspetti non rilevanti
I topi di laboratorio riconoscono la “rettangolarità” quanto
più è esagerata
Scultura indiana
Ireos
Caricature
Mani nei fumetti
Acquerello di Anna Braggion Sempre 4 dita
Cinderella castle - Orlando
Parvati
46. Peak Shift
Venus of
Willendor
f
30.000 ac.
ca
Venus of
Dolui
Vestonice
10.000 ac.
ca
Mars vehicle:
not a vehiclle on
wheels, but a
wheel - ESA
(Politecnico
Milano)
McDonald Home
Page
48. 2. Perceptual Grouping and Binding
Il cervello umano tende a raggruppare a collegare
insieme fenomeni, in modo da potre ricorrere a
esperienze precedenti e situazioni note.
il Dalmata.
Esempio: i principi della Gestalt
Arcimboldo (1527?-1593)
Cadenza
1 Le vierge, le vivace et le bel aujourd'hui
2 va-t-il nous déchirer avec un coup d'aile ivre
3 ce lac dur oublié que hante sous le givre
4 le transparent glacier des vols qui n'ont pas fui!
5 Un cygne d'autrefois se souvient que c'est lui
6 magnifique mais qui sans espoir se délivre
7 pour n'avoir pas chanté la région où vivre
8 quand du stérile hiver a resplendi l'ennui
9 tout son col secouera cette blanche agonie
l0 par l'espace infligée à l'oiseau qui le nie
11 mais non l'horreur du sol où son plumage est
pris.
12 Fantôme qu'à ce lieu son pur éclat assigne,
13 il s'immobilise au songe froid de mépris
14 que vêt parmi l'exil inutile le Cygne.
Anagrammi, rime, ritmi
50. 3. Contrasto
Gli occhi sono strutturati per esaltare la
percezione dei contorni (riconoscere prede e
predatori?)
Le aree di contrasto sono dal punto di vista
informativo le più interessanti,
fisiologicamente più percepibili,
emozionalmente più significative.
Forse più “piacevoli”
P.Klee
52. Contrasto e attrazione sessuale
Russell, R. (2009) A sex difference in facial pigmentation and its exaggeration
by cosmetics. Perception, (38)1211-1219. Pion Limited, London
Chi MASCGIO e che FEMMINA?
The same photo,
with slight chages
in contrast on
eyes and lips
(mix on right)
54. 4. Isolation
Si tratta di isolare una singola
modalità percettiva, prima che
venga amplificato il segnale in
quella modalità.
L’attenzione diretta all’origine del
fenomeno ha mostrato amplificare
l’attivazione limbica.
H. Matisse - Icarus
Juicy Salif
Philip Starck
Pictures at an Exhibition di Modest
Mussorgsky
Sulla Promenade si inseriscono i vari
quadri, perfettamente isolati prima
ancora di essere percepiti
56. 5. Perceptual problem solving
Scoprire un segnale nel rumore è
sempre gratificante.
L’ambiguità richiede la soluzione di un
problema, e il trovarla dà emozione.
Renè Magritte
Salvador Dalì
57. Perceptual problem solving in architecture
Bramante: S. Maria presso S.
Satiro, Milano, c. 1485
The abse does not exists, but it is a
3D trompe l’oeil
58. Perceptual problem solving
Discrete Scale
by Shepard
Continuous Scale
by Risset
43’ 15” ca
0’35”ca
Bramante: S. Maria presso
S. Satiro, Milano, c. 1485
Mario Vargas Llosa.
La tia Julia y el escribidor (reale e virtuale)
Pantaleòn y las visitadoras (violazione dell’unità di spazio)
Elogio de la madrastra and Los cuadernos de don Rigoberto (mescolamento di canali
percettivi)
61. 6. Simmetria
Scoprire simmetrie è gratificante: occhi e cervello sembrerebbero
progettati ad hoc per percepire simmetrie, tipiche in prede e predatori
Le simmetrie sono anche un fatto di economia di conoscenza: per capire il
tutto basta capire una parte.
Potenza
dell’attrazione
per le
simmetrie:
esempi del
quadrato
magico
SATOR
-
Esempio in
Qechua
La simmetria usata per
creare problemi di
interpretazione percettiva
M.C.Escher
62. Set up by Muratami for Naoki Takizawa.
Tokyo
Symmetries
Consegna delle chiavi a San Pietro - Perugino 1482
65. 7. Odio coincidenze/interpretazioni
semplici
Il sistema umano di visione è una macchina Bayesiana (raccoglie informazioni
dall’esperienza e le riusa per ottenere le migliori predizioni, con correzioni continue).
Tra le possibili interpretazioni scegliamo la più credibile.
Coincidenze sospette appiattiscono la percezione: a causa di minor “compenso”, il
nostro sistema visivo tende a considerarle “brutte”.
72. 9. Balance (equilibrio)
Non sono fornite spiegazioni nei lavori di Ramachandran.
Nella percezione visiva possiamo ritenere che si tratti di distribuzione di
“pesi visuali”, che potrebbero avere a che fare con situazioni
potenzialmente pericolose. (si vada anche V.Kandinskij – Punto, linea,
superficie)
Cosa attrae nell’equilibrio? L’uniformità? Il dualismo? Lo squilibrio?
73. 9a. Balance (equilibrio) nel
web design
Simmetria orizzontale Simmetr.orizz.approssimata Simmetr. Radiale Asimmetria
Pesi: gli elementi piccoli “recedono” a sfondo
DA:
Le indicazioni si riducono a qualche semplice citazione di principi della Gestalt
(ma…)
76. 10. Metaphor
SUN
COLD
PALEBRIGHT
ENERGY WARM
MOON
HUMANS
EAST
Rises from Is opposite to
Lights up
Appears Is
Is
Gives
WarmsAllows
life for
Provides
Burns
STRENGHT
Is symbol
of
CHASTITY
Is symbol
of
Is
fertility
for
Prevents generation of
JULIET
COLD
PALEBRIGHT
ENERGY WARM
MOON
ROMEO
EAST
Rises from Is opposite to
Lights up
Appears Is
Is
Gives
WarmsAllows
life for
Provides
Burns
STRENGHT
Is symbol
of
CHASTITY
Is symbol
of
Is
fertility
for
Prevents generation of
But, soft! what light through yonder window breaks?
It is the east, and Juliet is the sun.
Arise, fair sun, and kill the envious moon,
Who is already sick and pale with grief,
That thou her maid art far more fair than she:
...
W. Shakespeare –Romeo and Juliet, Act III, Sc.II
METAFORA:
"figura retorica che
consiste nel trasferire a
un oggetto il termine
proprio di un altro
secondo un rapporto di
analogia“
E’ necessario inserire il
tutto in un contesto, in
uno scenario
(sovra)culturale, che fa
esplodere le relazioni in
due mappe concettuali.
Metafora è operazione
di sovrapposizione
parziale di strutture
semantiche
formalizzate.
84. 6. Cultural Constraints
G. Hofstede, G. J. Hofstede, M. Minkov, Cultures and
Organizations. Software of the Mind, McGraw-Hill, 2010
85. Power distance
The level to which a less powerful member
accepts the unequal distribution of power in
any kind of structure (family, school,
community, organisation, …)
86. Power Distance, family and school
Low
• Unequality to be reduced
• Social relations to be managed
• Interdipendence
• Parents, elder and sons are equal
• Sons do not support parents
• Students and teachers are equal
• Teachers stimulate interaction
• Teachers transfer neutral know
how
• Learning for interchange
• Policy based on secondary school
High
• Unequality favoured
• Rituals in social relations
• Dependencies
• Obedients and respectful sons
• Sons support parents
• Teacher respected outside
• Only teachers can take initiatives
• Teachers transfer personal
wisdom
• Learning depends on theachers
• Policy based on universities
Power Distance e organisations
Low
• Hierarchy = advantage
• Decentralization
• Few supervisors
• Balanced salaries
• Manager use experience and
collaborators
• Advice of subordinates is taken
into account
• Ideal leader = democratic
• Rational relationships
• Obstructed privileges
• White and bluecollars equal
High
• Hierarchy = unequality
• Centralization
• Many supervisors
• Different salaries
• Manager refers to seniors and
rules
• Subordinates obey
• Ideal leader = good father
• Emotional relationships
• Spread privileges
• Whitecollars higher than
bluecollars
Power Distance and state
Low
• Power legitimazed
• Powe separated by skill
• Large middle class
• Equal rights
• Power based on ability
• Changes by evolution
• Politics: dialogue, not violence
• Pluralism and vote
• Strong centre e weak wings
• Distribute income and leveled
by taxes
• Low perceived corruption
High
• Power ove right
• Power joined with skill
• Small middle class
• Powerful privileges
• Power based on tradition
• Changes by revolution
• Politics: violence, not dialogue
• Autocracy e cooptation
• Weak centre e strong wings
• Unequal income, emphasized
by taxes
• High perceived corruption
Behaviours
87. Power DistanceFamily/school
Low
• Unequality to be reduced
• Sons do not support parents
• Teachers stimulate interaction
• Policy based on secondary school
High
• Unequality favoured
• Sons support parents
• Only teachers can take initiatives
• Policy based on universities
• Decentralization
• Few supervisors
• Balanced salaries
• White and bluecollars equal
• Centralization
• Many supervisors
• Different salaries
• Whitecollars higher than bluecollars
Organisations
• Large middle class
• Equal rights
• Strong centre e weak wings
• Leveled income and by taxes
• Low perceived corruption
• Small middle class
• Powerful privileges
• Weak centre e strong wings
• Unequal income, and by taxes
• High perceived corruption
State
88. • Individualist:
everybody interested to himself
/ family
• Masculinity:
gender distinction for emotional
roles
• Uncertainty avoidance
Threath level in uncertainty
• Long term orientation
actions giving future results,
perseverance and frugality
Long Term 2010
0
20
40
60
80
100
120
SKorea
Taiwan
Japan
China
Belgium
Germany
Russia
Slovakia
Switzerland
Singapore
Bulgaria
Netherland
France
Italy
Austria
Croatia
Hungary
Sweden
Serbia
India
UK
Slovenia
Spain
Turkey
Greece
Brasil
Malaysia
Finland
Israel
Canadatot
Denmark
Norway
SAfrica
Philippines
Portugal
USA
Ireland
Mexico
Iran
Morocco
93. PROBLEMI APERTI
• L’emozione dinamica
– Emozione nella navigazione
– Emozione nel dialogo
• Es Call Centre
• Metafore di ruoli
• Esiste già un Emotional Web Design?
98. When useful
• In Interaction design: any interaction dialogue
could be driven by the emotional status of the
user (e.g. cash dispensers, …)
• In control and safety procedures, the interactions
should be designed to react to the operator
emotional status (e.g. nuclear reactors turning off
procedures)
• In any kind of environment, the environmental
parameters can adapt themselves to the
emotional status of the user(s) (e.g. sounds,
colours, pressure, …)
• …
100. How to measure emotions
fMRI Functional
Magnetic
Resonance
Imaging
MIT. Q Sensor measures
skin conductance,
temperature, and motion to
record a wearer’s reactions
to events
Facial Action
Coding System
(FACS): taxonomize
human facial
movements by their
appearance on the
face (P.Ekman) Body Posture
Emotional Mapping
(M. Radeta) Mapping
of the posture of limbs,
trunk and neck on
Panksepp’s Emotions
pervasiveness
precision
101. Our approach (on progress) (M.Radeta)
Theatre coding
XMLcoding
ON
PROGRESS
Mapping on Panksepp
Calibration on real cases
105. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
CARE
106. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
SEEKING
CARE
107. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
SEEKING
108. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
After
Before
SEEKING
109. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Before
After
Ospedale Oncologico Infantile
Pausilipon - Napoli
SOME MEASURES :
REDUCTION OF CHILDREN SEDATION
DURING NMR FROM ABOUT 40% TO 2%!
SEEKING
110. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Dismission folder
Control
Certainty
CARE
117. … and…
The twelve night (W.Shakespeare)
If music be the food of love, play on;
Give me excess of it, that, surfeiting,
The appetite may sicken, and so die.
That strain again! it had a dying fall:
O, it came o'er my ear like the sweet sound,
That breathes upon a bank of violets,
Stealing and giving odour! Enough; no more:
'Tis not so sweet now as it was before.
O spirit of love! how quick and fresh art thou,
That, notwithstanding thy capacity
Receiveth as the sea, nought enters there,
Of what validity and pitch soe'er,
But falls into abatement and low price,
Even in a minute: so full of shapes is fancy
That it alone is high fantastical.
118. … and…
“Macbeth does murder sleep', the innocent sleep”
(William Shakespeare)
“Mais où sont les neiges d'antan!”
(François Villon )
…
119. CONTRASTS
CIELO D'ALCAMO
Contrasto.
"Rosa fresca aulentissima ch' apari inver' la state
le donne ti disiano pulzell' e maritate:
tràgemi d'este focora, se t'este a bolontate;
per te non ajo abento notte e dia,
penzando pur di voi, madonna mia."
"Se di meve trabàgliti follia lo ti fa fare.
Lo mar potresti arompere, a venti asemenare
l'abére d'esto secolo tutto quanto asembrare:
…….
120. Metaphors and literature
Kenningar
Snorri Sturluson (1178 –1241) Edda : kenningars
See also G.de Santillana, H.von Dechend Il mulino di Amleto. Saggio sul mito e sulla struttura del
tempo, 2003 ,Adelphi.
Some example:
Revolving sky Amloð ‘s mill
Sword bloods worm
Eyes brown stars
Wind trees destroyer
To kill the enemies to feed eagles
Warrior raven feeder
Death flame-farewelled
Poetry flow from Grímnir lips (Grímnir = Odin)
Wolf Gunn horse (Gunn = a valkyrie)
Sea whales road
(seven centuries brforeMetaphor, we live by, G.Lakoff, M.Johnson)
121. Metaphors and
communication
Doctor
Patient
Family
Wellbeing Illness
accepts
fightsSearches for
treats treats
governa
attackgives life to
The secret history of war to cancer
To defeat cancer
Fight against cancer
Molecular target therapies
“Tao”
man otherconflict
harmony
rules rules
finds
finds
feeds feeds
doctor
patient cancerconflict
modus
rules rules
finds
finds
accepts accepts
Make it up with cancer
A good life with cancer
Long life with cancer
God
Man
Family
Good Evil
creates
fightsdoes
rewards punishes
rules
temptshelps
125. Power Distance, family and school
Low
• Unequality to be reduced
• Social relations to be managed
• Interdipendence
• Parents, elder and sons are equal
• Sons do not support parents
• Students and teachers are equal
• Teachers stimulate interaction
• Teachers transfer neutral know
how
• Learning for interchange
• Policy based on secondary school
High
• Unequality favoured
• Rituals in social relations
• Dependencies
• Obedients and respectful sons
• Sons support parents
• Teacher respected outside
• Only teachers can take initiatives
• Teachers transfer personal
wisdom
• Learning depends on theachers
• Policy based on universities
126. Power Distance e organisations
Low
• Hierarchy = advantage
• Decentralization
• Few supervisors
• Balanced salaries
• Manager use experience and
collaborators
• Advice of subordinates is
taken into account
• Ideal leader = democratic
• Rational relationships
• Obstructed privileges
• White and bluecollars equal
High
• Hierarchy = unequality
• Centralization
• Many supervisors
• Different salaries
• Manager refers to seniors and
rules
• Subordinates obey
• Ideal leader = good father
• Emotional relationships
• Spread privileges
• Whitecollars higher than
bluecollars
127. Power Distance and state
Low
• Power legitimazed
• Powe separated by skill
• Large middle class
• Equal rights
• Power based on ability
• Changes by evolution
• Politics: dialogue, not violence
• Pluralism and vote
• Strong centre e weak wings
• Distribute income and leveled
by taxes
• Low perceived corruption
High
• Power ove right
• Power joined with skill
• Small middle class
• Powerful privileges
• Power based on tradition
• Changes by revolution
• Politics: violence, not dialogue
• Autocracy e cooptation
• Weak centre e strong wings
• Unequal income, emphasized
by taxes
• High perceived corruption
128. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Efficiency
Effectiveness
Welcome
Optimism
Friendliness
Lines
Colours
Language
…(Ramachandran, Lakoff, …)
129. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Welcome
Cognitive Surprise
Colours
Art
Ramachandran,
Lakoff,
Rizzolatti, … Smile
130. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Welcome
Cognitive Surprise
Colours
Art
After
Before
Ramachandran,
Lakoff,
Rizzolatti, …
Smile
131. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result
Before
After
Ospedale Oncologico Infantile
Pausilipon - Napoli
SOME MEASURES :
REDUCTION OF CHILDREN SEDATION
DURING NMR FROM ABOUT 40% TO 2%!
Welcome
Cognitive Surprise
Colours
Art
Smile
Ramachandran,
Lakoff,
Rizzolatti, …
132. A case study: Breast Radiology Dept. at
Istituto Nazionale dei Tumori - Milano
Actions
• Info on service
• Access
• Waiting room
• Go
• Do
• Out
• Wait for result Colours
Language
Dismission folder
Control
Certainty