Your SlideShare is downloading. ×
0
Corso di Interazione Uomo Macchina
AA 2013-2014
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocc...
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano
tutte le necessarie spiegazioni. Vedi...
Scopo di questa lezione
3
Presentare alcune tecniche che possono
stimolare la creatività nel design di nuovi
manufatti.
R....
Come “inventiamo” nuovi prodotti?
4
R.Polillo - Marzo 2014
Alcune “tecniche”
5
 Mimesi
 Ibridazione
 Metafora
 Variazione
 Composizione
R.Polillo - Marzo 2014
Mimesi
6
“imitazione”
Si costruiscono oggetti virtuali che “riproducono”
in ogni dettaglio oggetti reali ampiamente diffus...
Mimesi: esempi
Riproduzione
precisa di uno
specifico modello
dell’HP!
7 R.Polillo - Marzo 2014
8 R.Polillo - Marzo 2014
Chi et al., CHI 2005
9
R.Polillo - Marzo 2014
Wine app per iPad
R.Polillo - Marzo 2014
10
Inside Photo Album per iPad
R.Polillo - Marzo 2014
11
La libreria di iPad
R.Polillo - Marzo 2014
12
Dj Mixer (app per iPad)
R.Polillo - Marzo 2014
13
Orologio per iPad
R.Polillo - Marzo 2014
14
Esempio: settaggio di un
orologio15
Da Interface Hall of Shame http://bit.ly/Xlo536
R.Polillo - Marzo 2014
Set time su iPhone
R.Polillo - Marzo 2014
16
GarageBand (iPad)
R.Polillo - Marzo 2014
17
GarageBand (per iPad)
R.Polillo - Marzo 2014
18
GarageBand (per iPad)
R.Polillo - Marzo 2014
19
YouTube radio
R.Polillo - Marzo 2014
20
http://bit.ly/WHXptv
Questo bottone permette di cambiare la
scala: l’oggetto imitato viene “potenziato”
con funzioni non realizzabili nel model...
IBM Smart Phone
1. Comporre il numero
2. Cliccare la cornetta (sic!)22
R.Polillo - Marzo 2014
Da: IBM, Aptiva Communication Center
R.Polillo - Marzo 2014
23
Ibridazione
“Incrociare piante o animali di specie diverse
in modo da ottenere ibridi”
R.Polillo - Marzo 2014
24
Esempio:
...
calendario + orologio
+ tab + bottoni
player musicale +
menu e form
Windows-like
Ibridazione: esempi
R.Polillo - Marzo 201...
http://www.housingmaps.com (2009)
Mashup
26
R.Polillo - Marzo 2014
dj3
R.Polillo - Marzo 2014
27
Esempio
Wireless Notebook Presenter Mouse 8000, di Microsoft (2006)
28
R.Polillo - Marzo 2014
Pocket Guitar (2009):
chitarra + iPhone
29
R.Polillo - Marzo 2014
Cameraphone Samsung
I/O Brush (MIT)
R.Polillo - Marzo 2014
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
R.Polillo - Marzo 201434
Singing fingers (video)
R.Polillo - Marzo 2014
35
http://bit.ly/VxpMax
Metafora
dal greco metaphora, trasporto, mutazione
Consiste, in sostanza, nel “mescolare” fra loro campi
semantici differe...
Metafora: esempi
 sei un fulmine
 l’ondeggiare delle spighe
 il ruggire dei motori
 la gamba del tavolo
 al timone de...
Metafora: esempio
È vero, il mondo è tutto un palcoscenico
sul quale tutti noi, uomini e donne
siam solo attori, con le no...
Word 95
La icona crea la metafora,
e suggerisce immediatamente
la funzione del menu
39
R.Polillo - Marzo 2014
La metafora della scrivania (Macintosh, 1984)
R.Polillo - Marzo 2014
40
Metafora: vantaggi
Suggerisce idee al designer, perché
trasferisce un intero “campo semantico”
da un contesto all’altro, s...
Esempio: la "gamba del tavolo"
R.Polillo - Marzo 2014
42
Esempio: "metti un tigre nel
motore"
R.Polillo - Marzo 2014
43
Metafora: svantaggi
Può confondere l’utente, perché le inevitabili
incongruenze fra i due campi semantici possono
generare...
R.Polillo - Marzo 2014
45
46 R.Polillo - Marzo 2014
Una tastiera
che pensa?
47 R.Polillo - Marzo 2014
Il design delle icone
R.Polillo - Marzo 2014
48
Mac OS X
Windows
? ? ? ? ?
49
R.Polillo - Marzo 2014
Variazione
R.Polillo - Marzo 2014
50
Variazione: esempi
51
R.Polillo - Marzo 2014
Paint per Windows 95 (Microsoft, 1995)
R.Polillo - Marzo 2014
52
WINDOWS 1.0
53
R.Polillo - Marzo 2014
WINDOWS 2.0
54
R.Polillo - Marzo 2014
WINDOWS 3.1
55
R.Polillo - Marzo 2014
WINDOWS 95
56
R.Polillo - Marzo 2014
Una variante: Mutazione
57
“Fenomeno per cui in una specie si origina un
individuo che presenta alcuni caratteri diversi
d...
Esempio: design generativo
58
 Progettare un manufatto e affidare al computer il
compito di generarne possibili “mutazion...
soddu2.dst.polimi.it
59 R.Polillo - Marzo 2014
60 R.Polillo - Marzo 2014
61
R.Polillo - Marzo 2014
Basilica, C.Soddu, 199862 R.Polillo - Marzo 2014
COMPOSIZION
E
Design
pattern
Composizione
65
R.Polillo - Marzo 2014
Design patterns: che cosa sono
 Un design pattern è una soluzione generale a un
problema di progettazione che si ripropon...
67
R.Polillo - Marzo 2014
Design pattern in architettura
R.Polillo - Marzo 2014
68
“Colloca la scala principale in una
posizione chiave, centrale e
...
I pattern di interazione uomo macchina: esempio
Design pattern per le funzioni di ricerca in un sito web
(van Welie)
Advan...
Pattern language per l’interazione
70
I formalismi di descrizione sono diversi, ma
normalmente ogni pattern è descritto in...
• Problem
• Solution
• Use when
• How
• Why
• More examples
• Implementation
• Literature
Schede descrittive: esempi
R.Pol...
Design pattern: vantaggi
 Raccolgono lo stato della pratica
 Suggeriscono soluzioni ai progettisti
 Formazione di un li...
Creazione
73
Ma esiste veramente la
creazione dal nulla?
R.Polillo - Marzo 2014
“Per inventare, serve una buona
immaginazione e un mucchio di cianfrusaglie”
Thomas Alva Edison
R.Polillo - Marzo 2014
74
7.Ingegneria e creativita'
Upcoming SlideShare
Loading in...5
×

7.Ingegneria e creativita'

543

Published on

Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - lezione del 19 marzo 2014.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
543
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • IBM SMART PHONE
    Welcome to the future; one without distracting windows and menu bars. The RealPhone is an experiment in user interface design for a new, real-world user interface style...
    Put a telephone-type keypad on any application, and the user will pretty rapidly guess that it's a telephone application. Sure, having an image of a telephone handset helps, but it's not necessary. Make the handset a necessary control for the application, and you'll have a lot of users that are unaware that it's a control. Controls should look like controls, and they should appear manipulatable. If you can use a telephone, you can use this software. Here's where the metaphor starts to break down. No matter how similar your program appears to look like a phone, it will always operate differently. When using a real phone, you pick up the phone, verify the dial tone, then dial your number. With RealPhone you dial your number, then point to the handset and click on it to start the call. Furthermore, to speed dial a number on a real phone, you pick up the handset, then press the speed dial number. On RealPhone however, you simply click on the speed dial number, which is likely to lead to a lot of inadvertent phone calls. Inadvertent mouse clicks don't happen when using real-world phones, but they occur frequently in computer-based applications. Novice users can use it immediately... Not likely. The application does not provide an area to type the number to be dialed. It displays numbers as they are typed, but because there is no control to receive the focus, there is no indication that you can type at all. Furthermore, while the interface provides command buttons for Redial and Flash, it does not provide a command button to initiate the call once the number has been entered. The user has to click on the handset, which is so non-intuitive that few users would ever consider trying it. In order to compensate for the non-intuitiveness of the interface, RealPhone relies on extremely lengthy tooltips to provide instructions. Many of the tips are so long they cannot be read in the display time for the tooltips (less than 3 seconds).
    http://www.iarchitect.com/mshame.htm
  • The Address Book function in IBM's Aptiva Communication Center illustrates the joy the developers must have felt when they discovered the use of tabbed dialogs: The developers seem to have beside themselves with the new ability to place tab controls whereever they wanted. Tabs are placed along the top and along both sides; undoubtedly, if they were not constrained by the size of a 640x480 screen, they would have found a reason to put tabs along the bottom as well.
    Of all the various sets of tabs, only those tabs along the right side of the display are appropriate in this dialog. These allow the user to quickly "move" to an appropriate page in the address book. While not easily discernible, there are two tabs along the left-hand side of the dialog; these allow the user to toggle the display between the Address Book view, and a Speed Dial view. The "tabs" along the top are particularly deserving of attention. Of the nine "tabs", only two, Add and Change, can be argued to cause a different tab to be displayed. "Change" causes the currently selected record to be displayed in the "notebook" area of the display, and "Add" causes a blank record to be displayed in the area. The other seven "tabs" are actually command buttons, each either causing a secondary dialog to be displayed, or initiate an immediate action.
    This is the kind of design that gives tabbed dialogs a bad reputation.
  • Transcript of "7.Ingegneria e creativita'"

    1. 1. 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
    2. 2. 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
    3. 3. Scopo di questa lezione 3 Presentare alcune tecniche che possono stimolare la creatività nel design di nuovi manufatti. R.Polillo - Marzo 2014
    4. 4. Come “inventiamo” nuovi prodotti? 4 R.Polillo - Marzo 2014
    5. 5. Alcune “tecniche” 5  Mimesi  Ibridazione  Metafora  Variazione  Composizione R.Polillo - Marzo 2014
    6. 6. Mimesi 6 “imitazione” Si costruiscono oggetti virtuali che “riproducono” in ogni dettaglio oggetti reali ampiamente diffusi R.Polillo - Marzo 2014
    7. 7. Mimesi: esempi Riproduzione precisa di uno specifico modello dell’HP! 7 R.Polillo - Marzo 2014
    8. 8. 8 R.Polillo - Marzo 2014
    9. 9. Chi et al., CHI 2005 9 R.Polillo - Marzo 2014
    10. 10. Wine app per iPad R.Polillo - Marzo 2014 10
    11. 11. Inside Photo Album per iPad R.Polillo - Marzo 2014 11
    12. 12. La libreria di iPad R.Polillo - Marzo 2014 12
    13. 13. Dj Mixer (app per iPad) R.Polillo - Marzo 2014 13
    14. 14. Orologio per iPad R.Polillo - Marzo 2014 14
    15. 15. Esempio: settaggio di un orologio15 Da Interface Hall of Shame http://bit.ly/Xlo536 R.Polillo - Marzo 2014
    16. 16. Set time su iPhone R.Polillo - Marzo 2014 16
    17. 17. GarageBand (iPad) R.Polillo - Marzo 2014 17
    18. 18. GarageBand (per iPad) R.Polillo - Marzo 2014 18
    19. 19. GarageBand (per iPad) R.Polillo - Marzo 2014 19
    20. 20. YouTube radio R.Polillo - Marzo 2014 20 http://bit.ly/WHXptv
    21. 21. Questo bottone permette di cambiare la scala: l’oggetto imitato viene “potenziato” con funzioni non realizzabili nel modello reale R.Polillo - Marzo 2014 21
    22. 22. IBM Smart Phone 1. Comporre il numero 2. Cliccare la cornetta (sic!)22 R.Polillo - Marzo 2014
    23. 23. Da: IBM, Aptiva Communication Center R.Polillo - Marzo 2014 23
    24. 24. Ibridazione “Incrociare piante o animali di specie diverse in modo da ottenere ibridi” R.Polillo - Marzo 2014 24 Esempio: lavagna + proiettore ⇒ lavagna luminosa
    25. 25. calendario + orologio + tab + bottoni player musicale + menu e form Windows-like Ibridazione: esempi R.Polillo - Marzo 2014 25
    26. 26. http://www.housingmaps.com (2009) Mashup 26 R.Polillo - Marzo 2014
    27. 27. dj3 R.Polillo - Marzo 2014 27
    28. 28. Esempio Wireless Notebook Presenter Mouse 8000, di Microsoft (2006) 28 R.Polillo - Marzo 2014
    29. 29. Pocket Guitar (2009): chitarra + iPhone 29 R.Polillo - Marzo 2014
    30. 30. Cameraphone Samsung
    31. 31. I/O Brush (MIT) R.Polillo - Marzo 2014 31 pennello + fotocamera http://it.youtube.com/watch?v=04v_v1gnyO8
    32. 32. Google glasses https://www.youtube.com/watch?v=ErpNpR3XYUw apr 2012 http://www.youtube.com/watch?v=fNATuCkRWFE feb 2013
    33. 33. Mac OS X dialogue box + vetro = dialogue box trasparente R.Polillo - Marzo 201434
    34. 34. Singing fingers (video) R.Polillo - Marzo 2014 35 http://bit.ly/VxpMax
    35. 35. 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 2014 36 donatore ricevente
    36. 36. Metafora: esempi  sei un fulmine  l’ondeggiare delle spighe  il ruggire dei motori  la gamba del tavolo  al timone dello stato R.Polillo - Marzo 2014 37
    37. 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 R.Polillo - Marzo 2014 38
    38. 38. Word 95 La icona crea la metafora, e suggerisce immediatamente la funzione del menu 39 R.Polillo - Marzo 2014
    39. 39. La metafora della scrivania (Macintosh, 1984) R.Polillo - Marzo 2014 40
    40. 40. Metafora: vantaggi Suggerisce idee al designer, perché trasferisce un intero “campo semantico” da un contesto all’altro, suggerendo soluzioni inattese R.Polillo - Marzo 2014 41
    41. 41. Esempio: la "gamba del tavolo" R.Polillo - Marzo 2014 42
    42. 42. Esempio: "metti un tigre nel motore" R.Polillo - Marzo 2014 43
    43. 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 2014 44
    44. 44. R.Polillo - Marzo 2014 45
    45. 45. 46 R.Polillo - Marzo 2014
    46. 46. Una tastiera che pensa? 47 R.Polillo - Marzo 2014
    47. 47. Il design delle icone R.Polillo - Marzo 2014 48 Mac OS X Windows ? ? ? ? ?
    48. 48. 49 R.Polillo - Marzo 2014
    49. 49. Variazione R.Polillo - Marzo 2014 50
    50. 50. Variazione: esempi 51 R.Polillo - Marzo 2014
    51. 51. Paint per Windows 95 (Microsoft, 1995) R.Polillo - Marzo 2014 52
    52. 52. WINDOWS 1.0 53 R.Polillo - Marzo 2014
    53. 53. WINDOWS 2.0 54 R.Polillo - Marzo 2014
    54. 54. WINDOWS 3.1 55 R.Polillo - Marzo 2014
    55. 55. WINDOWS 95 56 R.Polillo - Marzo 2014
    56. 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” R.Polillo - Marzo 2014
    57. 57. 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” R.Polillo - Marzo 2014
    58. 58. soddu2.dst.polimi.it 59 R.Polillo - Marzo 2014
    59. 59. 60 R.Polillo - Marzo 2014
    60. 60. 61 R.Polillo - Marzo 2014
    61. 61. Basilica, C.Soddu, 199862 R.Polillo - Marzo 2014
    62. 62. COMPOSIZION E Design pattern Composizione 65 R.Polillo - Marzo 2014
    63. 63. 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 2014 66
    64. 64. 67 R.Polillo - Marzo 2014
    65. 65. Design pattern in architettura R.Polillo - Marzo 2014 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
    66. 66. 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 2014 69
    67. 67. 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 R.Polillo - Marzo 2014
    68. 68. • Problem • Solution • Use when • How • Why • More examples • Implementation • Literature Schede descrittive: esempi R.Polillo - Marzo 2014 71 Van Welie • Problem summary • Example • Usage • Solution • Rationale • [Discussion] • [Sources] • More examples Toxboe
    69. 69. 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 2014 72
    70. 70. Creazione 73 Ma esiste veramente la creazione dal nulla? R.Polillo - Marzo 2014
    71. 71. “Per inventare, serve una buona immaginazione e un mucchio di cianfrusaglie” Thomas Alva Edison R.Polillo - Marzo 2014 74
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×