7.Ingegneria e creativita'

Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
INGEGNERIA E
CREATIVITÀ
1
R.Polillo - Marzo 2014
Edizione
2013-14

Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons
(attribuzione, non commerciale, condividi allo stesso modo) a
chiunque desiderasse utilizzarle, per esempio a scopo didattico,
senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen
shots, i cui diritti restano in capo ai rispettivi proprietari, che sono
stati indicati, ove possibile, nelle didascalie del libro. L’autore si
scusa per eventuali omissioni, e resta a disposizione per
correggerle.
R.Polillo -
Marzo 20142

Scopo di questa lezione
3
Presentare alcune tecniche che possono
stimolare la creatività nel design di nuovi
manufatti.

Come “inventiamo” nuovi prodotti?
4

Alcune “tecniche”
5
 Mimesi
 Ibridazione
 Metafora
 Variazione
 Composizione

Mimesi
6
“imitazione”
Si costruiscono oggetti virtuali che “riproducono”
in ogni dettaglio oggetti reali ampiamente diffusi

Mimesi: esempi
Riproduzione
precisa di uno
specifico modello
dell’HP!
7 R.Polillo - Marzo 2014

Chi et al., CHI 2005
9

Wine app per iPad
10

Inside Photo Album per iPad
11

La libreria di iPad
12

Dj Mixer (app per iPad)
13

Orologio per iPad
14

Esempio: settaggio di un
orologio15
Da Interface Hall of Shame http://bit.ly/Xlo536

Set time su iPhone
16

GarageBand (iPad)
17

GarageBand (per iPad)
18

GarageBand (per iPad)
19

YouTube radio
20
http://bit.ly/WHXptv

Questo bottone permette di cambiare la
scala: l’oggetto imitato viene “potenziato”
con funzioni non realizzabili nel modello reale
21

IBM Smart Phone
1. Comporre il numero
2. Cliccare la cornetta (sic!)22

Da: IBM, Aptiva Communication Center
23

Ibridazione
“Incrociare piante o animali di specie diverse
in modo da ottenere ibridi”
24
Esempio:
lavagna + proiettore ⇒ lavagna luminosa

calendario + orologio
+ tab + bottoni
player musicale +
menu e form
Windows-like
Ibridazione: esempi
25

http://www.housingmaps.com (2009)
Mashup
26

Esempio
Wireless Notebook Presenter Mouse 8000, di Microsoft (2006)
28

Pocket Guitar (2009):
chitarra + iPhone
29

I/O Brush (MIT)
31
pennello + fotocamera
http://it.youtube.com/watch?v=04v_v1gnyO8

Google glasses
https://www.youtube.com/watch?v=ErpNpR3XYUw apr 2012
http://www.youtube.com/watch?v=fNATuCkRWFE feb 2013

Mac OS X
dialogue box + vetro
=
dialogue box
trasparente

Singing fingers (video)
35
http://bit.ly/VxpMax

Metafora
dal greco metaphora, trasporto, mutazione
Consiste, in sostanza, nel “mescolare” fra loro campi
semantici differenti, trasferendo proprietà e concetti
propri di un campo semantico ad un altro
36
donatore
ricevente

Metafora: esempi
 sei un fulmine
 l’ondeggiare delle spighe
 il ruggire dei motori
 la gamba del tavolo
 al timone dello stato
37

Metafora: esempio
È vero, il mondo è tutto un palcoscenico
sul quale tutti noi, uomini e donne
siam solo attori, con le nostre uscite
e con le nostre entrate; ove ciascuno,
per il tempo che gli è stato assegnato,
recita molte parti,
e gli atti sono le sue sette età
….
W. Shakespeare, As you like it
38

Word 95
La icona crea la metafora,
e suggerisce immediatamente
la funzione del menu
39

La metafora della scrivania (Macintosh, 1984)
40

Metafora: vantaggi
Suggerisce idee al designer, perché
trasferisce un intero “campo semantico”
da un contesto all’altro, suggerendo
soluzioni inattese
41

Esempio: la "gamba del tavolo"
42

Esempio: "metti un tigre nel
motore"
43

Metafora: svantaggi
Può confondere l’utente, perché le inevitabili
incongruenze fra i due campi semantici possono
generare confusione e sfiducia
NB La metafora non è una similitudine!
44

Una tastiera
che pensa?

Il design delle icone
48
Mac OS X
Windows
? ? ? ? ?

Variazione
50

Variazione: esempi
51

Paint per Windows 95 (Microsoft, 1995)
52

WINDOWS 1.0
53

WINDOWS 2.0
54

WINDOWS 3.1
55

WINDOWS 95
56

Una variante: Mutazione
57
“Fenomeno per cui in una specie si origina un
individuo che presenta alcuni caratteri diversi
dai suoi ascendenti, e li trasmette alla
discendenza”

Esempio: design generativo
58
 Progettare un manufatto e affidare al computer il
compito di generarne possibili “mutazioni
genetiche”
 “metadesign” o “design di specie”:
definire le caratteristiche essenziali di un
manufatto e affidare al computer il compito di
generarne possibili “incarnazioni”

soddu2.dst.polimi.it

Basilica, C.Soddu, 199862 R.Polillo - Marzo 2014

COMPOSIZION
E
Design
pattern
Composizione
65

Design patterns: che cosa sono
 Un design pattern è una soluzione generale a un
problema di progettazione che si ripropone in molte
situazioni, anche diverse
 Non una soluzione “finita”, ma piuttosto un modello, un
template da adattare alla specifica situazione
 Il concetto è nato in architettura
alla fine degli anni ’70
(Christopher Alexander),
e applicato all’ingegneria del
software dalla fine degli anni ‘80
66

Design pattern in architettura
68
“Colloca la scala principale in una
posizione chiave, centrale e
visibile. Tratta l’intera scala come
una stanza (o, se all’esterno,
come un cortile). Disponila in
modo che la scala e la stanza
siano una cosa sola, con la scala
che scende attorno a una o due
pareti della stanza. Allarga il
fondo della scala con finestre
aperte o balaustre, e con ampi
gradini, in modo che le persone
che scendono lungo la scala
diventino parte dell’azione della
stanza mentre sono ancora sulla
scala, e che le persone in basso
usino naturalmente i gradini per
sedersi”.
Da C.Alexander, A Pattern Language

I pattern di interazione uomo macchina: esempio
Design pattern per le funzioni di ricerca in un sito web
(van Welie)
Advanced search Search Tips
Autocomplete Site Index
FAQ Site Map
Help Wizard Footer Sitemap
Search Box Tag Cloud
Search Area Topic Pages
Search Results
69

Pattern language per l’interazione
70
I formalismi di descrizione sono diversi, ma
normalmente ogni pattern è descritto in una
scheda che fornisce
 Il problema di cui si tratta
 Il pattern che lo risolve
 Le motivazioni
 L’ambito/limitazioni di applicazione
 Esempi di uso

• Problem
• Solution
• Use when
• How
• Why
• More examples
• Implementation
• Literature
Schede descrittive: esempi
71
Van Welie
• Problem summary
• Example
• Usage
• Solution
• Rationale
• [Discussion]
• [Sources]
• More examples
Toxboe

Design pattern: vantaggi
 Raccolgono lo stato della pratica
 Suggeriscono soluzioni ai progettisti
 Formazione di un linguaggio comune
 Diffondono gli “standard di fatto”
 Evitano di “reinventare la ruota”
72

Creazione
73
Ma esiste veramente la
creazione dal nulla?

“Per inventare, serve una buona
immaginazione e un mucchio di cianfrusaglie”
Thomas Alva Edison
74

7.Ingegneria e creativita'

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a 7.Ingegneria e creativita'

Semelhante a 7.Ingegneria e creativita' (18)

Mais de Roberto Polillo

Mais de Roberto Polillo (20)

Último

Último (9)

7.Ingegneria e creativita'

Notas do Editor