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
R.Polillo -Marzo 2013
Mimesi 6
“imitazione”Si costruiscono oggetti virtuali che “riproducono” in ogni dettaglio oggetti reali ampiamente diffusi
R.Polillo -Marzo 2013
Mimesi: esempi
Riproduzione precisa di uno
specifico modello dell’HP!
7 R.Polillo -Marzo 2013
8 R.Polillo -Marzo 2013
Chi et al., CHI 2005
9
R.Polillo -Marzo 2013
Wine app per iPad
R.Polillo -Marzo 2013
10
Inside Photo Album per iPad
R.Polillo -Marzo 2013
11
La libreria di iPad
R.Polillo -Marzo 2013
12
Dj Mixer (app per iPad)
R.Polillo -Marzo 2013
13
Orologio per iPad
R.Polillo -Marzo 2013
14
Esempio: settaggio di un orologio
15
Da Interface Hall of Shame http://bit.ly/Xlo536
Set time su iPhone
R.Polillo -Marzo 2013
16
GarageBand (iPad)
R.Polillo -Marzo 2013
17
GarageBand (per iPad)
R.Polillo -Marzo 2013
18
GarageBand (per iPad)
R.Polillo -Marzo 2013
19
Questo bottone permette di cambiare la scala: l’oggetto imitato viene “potenziato” con funzioni non realizzabili nel modello reale
R.Polillo -Marzo 2013
21
IBM Smart Phone
1. Comporre il numero
2. Cliccare la cornetta (sic!)22
R.Polillo -Marzo 2013
Da: IBM, Aptiva Communication Center
R.Polillo -Marzo 2013
23
Ibridazione
“Incrociare piante o animali di specie diverse in modo da ottenere ibridi”
R.Polillo -Marzo 2013
24
Esempio:lavagna + proiettore lavagna
luminosa
Esempio
Wireless Notebook Presenter Mouse 8000, di Microsoft (2006)
25
R.Polillo -Marzo 2013
Samsung Camera Phone
calendario + orologio + tab + bottoni
player musicale + menu e form Windows-like
Ibridazione: esempi
R.Polillo -Marzo 2013
27
I/O Brush (MIT)
R.Polillo -Marzo 2013
28 pennello + fotocamera
http://it.youtube.com/watch?v=04v_v1gnyO8
Pocket Guitar (2009):chitarra + iPhone
29
R.Polillo -Marzo 2013
dj3
R.Polillo -Marzo 2013
31
Concept watch con FaceTime
R.Polillo -Marzo 2013
32
Mac OS X
dialogue box + vetro =
dialogue box trasparente
R.Polillo -Marzo 201333
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
R.Polillo -Marzo 2013
35
donatore
ricevente
Metafora: esempi
sei un fulmine l’ondeggiare delle spighe il ruggire dei motori la gamba del tavolo al timone dello stato
R.Polillo -Marzo 2013
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
R.Polillo -Marzo 2013
37
Word 95
La icona crea la metafora, e suggerisce immediatamente
la funzione del menu38
R.Polillo -Marzo 2013
La metafora della scrivania (Macintosh, 1984)
R.Polillo -Marzo 2013
39
(http://www.jkrowling.com/it, 2009)40 R.Polillo -Marzo 2013
Metafora: vantaggi
Suggerisce idee al designer, perché trasferisce un intero “campo semantico” da un contesto all’altro, suggerendo soluzioni inattese
R.Polillo -Marzo 2013
41
Esempio: la "gamba del tavolo"
R.Polillo -Marzo 2013
42
Esempio: "metti un tigre nel motore"
R.Polillo -Marzo 2013
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!
R.Polillo -Marzo 2013
44
R.Polillo -Marzo 2013
45
46 R.Polillo -Marzo 2013
Una tastiera che pensa?
47 R.Polillo -Marzo 2013
Il design delle icone
R.Polillo -Marzo 2013
48
Mac OS X
Windows
? ? ? ? ?
49
R.Polillo -Marzo 2013
Variazione
R.Polillo -Marzo 2013
51
Variazione: esempi52
R.Polillo -Marzo 2013
Paint per Windows 95 (Microsoft, 1995)
R.Polillo -Marzo 201353
WINDOWS 1.0
54
R.Polillo -Marzo 2013
WINDOWS 2.0
55
R.Polillo -Marzo 2013
WINDOWS 3.1
56
R.Polillo -Marzo 2013
WINDOWS 95
57
R.Polillo -Marzo 2013
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”
R.Polillo -Marzo 2013
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”
R.Polillo -Marzo 2013
soddu2.dst.polimi.it60 R.Polillo -Marzo 2013
61 R.Polillo -Marzo 2013
62
R.Polillo -Marzo 2013
Basilica, C.Soddu, 199863 R.Polillo -Marzo 2013
COMPOSIZIONE
Design pattern
Composizione66
R.Polillo -Marzo 2013
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
R.Polillo -Marzo 2013
67
68
R.Polillo -Marzo 2013
Design pattern in architettura
R.Polillo -Marzo 2013
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
R.Polillo -Marzo 2013
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
R.Polillo -Marzo 2013
• Problem• Solution• Use when• How• Why• More examples• Implementation• Literature
Schede descrittive: esempi
R.Polillo -Marzo 2013
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”
R.Polillo -Marzo 2013
73
Creazione74
Ma esiste veramente la creazione dal nulla?
R.Polillo -Marzo 2013
“Per inventare, serve una buona immaginazione e un mucchio di cianfrusaglie”
Thomas Alva Edison
R.Polillo -Marzo 2013
75