7.ingegneria e creativita

Corso di Interazione Uomo MacchinaAA 2013-2014

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento 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

http://www.rpolillo.it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

Scopo di questa lezione3

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 orologio

15

Da Interface Hall of Shame http://bit.ly/Xlo536 R.Polillo - Marzo 2014

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

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

I/O Brush (MIT)


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

http://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

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

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

Mac OS X

dialogue box + vetro =

dialogue box trasparente


Singing fingers (video)


35

http://bit.ly/VxpMax

http://bit.ly/VxpMax

Metaforadal 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: vantaggiSuggerisce 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


50

Variazione: esempi51


Paint per Windows 95 (Microsoft, 1995)R.Polillo - Marzo 2014

52

WINDOWS 1.0

53


WINDOWS 2.0

54


WINDOWS 3.1

55


WINDOWS 95

56


Una variante: Mutazione57

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

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

61


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

COMPOSIZIONE

Design pattern

Composizione65


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

67


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 SitemapSearch Box Tag Cloud Search Area Topic Pages Search Results


69

Pattern language per l’interazione70

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

Creazione73

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

Education