7. Ingegneria e creativita

Corso di Interazione Uomo MacchinaAA 2014-2015

Roberto Polillo

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

INGEGNERIA E CREATIVITÀ

Edizione 2014-15

Come “inventiamo” nuovi prodotti?4

R.Polillo - Marzo 2015

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 2015


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


Set time su iPhone


16

GarageBand (iPad)


17

http://bit.ly/Xlo536

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

calendario + orologio + tab + bottoni

player musicale + menu e form Windows-like

Ibridazione: esempi


25

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

Mashup26


http://www.housingmaps.com/

dj3


27

Esempio

Wireless Notebook Presenter Mouse 8000, di Microsoft (2006)

28


Pocket Guitar (2009):chitarra + iPhone

29


Cameraphone Samsung


30

I/O Brush (MIT)


31 pennello + fotocamerahttp://it.youtube.com/watch?v=04v_v1gnyO8

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

32

https://www.youtube.com/watch?v=ErpNpR3XYUw

http://www.youtube.com/watch?v=fNATuCkRWFE


33

Mac OS X

dialogue box + vetro =

dialogue box trasparente


Singing fingers (video)


35

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


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 palcoscenicosul quale tutti noi, uomini e donnesiam solo attori, con le nostre uscitee 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 menu39


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


45


Una tastiera che pensa?


Il design delle icone


48

Mac OS X

Windows

? ? ? ? ?

49


Flat icons: esempio


50

http://flaticons.net

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 2015


62


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

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 SitemapSearch 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

Education

7. Ingegneria e creativita