7. ingegneria e creativita

Corso di Interazione Uomo MacchinaAA 2012-2013

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

INGEGNERIA E CREATIVITÀ1

R.Polillo - Marzo 2013Edizi

one 2012-1

3

Come “inventiamo” nuovi prodotti?4

R.Polillo -Marzo 2013

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 2013

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 orologio

15

Da Interface Hall of Shame http://bit.ly/Xlo536

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

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

Esempio

Wireless Notebook Presenter Mouse 8000, di Microsoft (2006)

25


Samsung Camera Phone

calendario + orologio + tab + bottoni

player musicale + menu e form Windows-like

Ibridazione: esempi


27

I/O Brush (MIT)


28 pennello + fotocamera

http://it.youtube.com/watch?v=04v_v1gnyO8



Pocket Guitar (2009):chitarra + iPhone

29


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

Mashup30


http://www.housingmaps.com/

dj3


31

Concept watch con FaceTime


32

Mac OS X

dialogue box + vetro =

dialogue box trasparente


Singing fingers (video)


34

http://bit.ly/VxpMax

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


35

donatore

ricevente

Metafora: esempi

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


36

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


37

Word 95

La icona crea la metafora, e suggerisce immediatamente

la funzione del menu38


La metafora della scrivania (Macintosh, 1984)


39

(http://www.jkrowling.com/it, 2009)40 R.Polillo -Marzo 2013

http://www.jkrowling.com/it

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


45

Una tastiera che pensa?


Il design delle icone


48

Mac OS X

Windows

? ? ? ? ?

49


Variazione


51

Variazione: esempi52


Paint per Windows 95 (Microsoft, 1995)


WINDOWS 1.0

54


WINDOWS 2.0

55


WINDOWS 3.1

56


WINDOWS 95

57


Una variante: Mutazione58

“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 generativo59

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.it60 R.Polillo -Marzo 2013

62


Basilica, C.Soddu, 199863 R.Polillo -Marzo 2013

COMPOSIZIONE

Design pattern

Composizione66


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


67

68


Design pattern in architettura


69

“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


70

Pattern language per l’interazione71

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


72

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”


73

Creazione74

Ma esiste veramente la creazione dal nulla?


“Per inventare, serve una buona immaginazione e un mucchio di cianfrusaglie”

Thomas Alva Edison


75

7. ingegneria e creativita

Education