7. Ingegneria e creativita
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

7. Ingegneria e creativita

on

  • 1,910 views

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2010-2011

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2010-2011

Statistics

Views

Total Views
1,910
Views on SlideShare
1,718
Embed Views
192

Actions

Likes
1
Downloads
155
Comments
0

1 Embed 192

http://www.rpolillo.it 192

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.
  • Un altro brevetto americano datato 1898, di Matthew Schooley, che pertanto precede quello della figura precedente. Tutte le immagini delle paper clip sono tratte da “The evolution of useful things”, di H.Petroski, Vintage Books, 1992
  • Un brevetto americano del 1921, di Clarence Collette, che evita alla clip di sfilarsi

7. Ingegneria e creativita Presentation Transcript

  • 1.
    • Corso di Interazione Uomo Macchina AA 2010-2011
    • Roberto Polillo
    • Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
    INGEGNERIA E CREATIVITÀ Edizione 2010-11 R.Polillo - Ottobre 2010
  • 2. Scopo di questa lezione
    • Presentare alcune tecniche che possono stimolare la creatività nel design di nuovi manufatti.
    R.Polillo - Ottobre 2010
  • 3. Come “inventiamo” nuovi prodotti? R.Polillo - Ottobre 2010
  • 4. Alcune “tecniche”
    • Mimesi
    • Ibridazione
    • Metafora
    • Variazione
    • Composizione
    R.Polillo - Ottobre 2010
  • 5. Mimesi
    • “ Imitazione”
    • Si costruiscono oggetti virtuali che “riproducono” in ogni dettaglio oggetti reali ampiamente diffusi
    R.Polillo - Ottobre 2010
  • 6. Mimesi: esempi Riproduzione precisa di uno specifico modello dell’HP! R.Polillo - Ottobre 2010
  • 7. R.Polillo - Ottobre 2010
  • 8. Chi et al., CHI 2005 R.Polillo - Ottobre 2010
  • 9. Questo bottone permette di cambiare la scala: l’oggetto imitato viene “potenziato” con funzioni non realizzabili nel modello reale R.Polillo - Ottobre 2010
  • 10. 1. Comporre il numero 2. Cliccare la cornetta (sic!) R.Polillo - Ottobre 2010 IBM Smart Phone
  • 11. Da: IBM, Aptiva Communication Center R.Polillo - Ottobre 2010
  • 12. Ibridazione
    • “ Incrociare piante o animali di specie diverse in modo da ottenere ibridi”
    • Esempio :
    • lavagna + proiettore  lavagna luminosa
    R.Polillo - Ottobre 2010
  • 13. Esempio Wireless Notebook Presenter Mouse 8000, di Microsoft (2006) R.Polillo - Ottobre 2010
  • 14. calendario + orologio + tab + bottoni player musicale + menu e form Windows-like Ibridazione: esempi R.Polillo - Ottobre 2010
  • 15. I/O Brush (MIT) R.Polillo - Ottobre 2010 pennello + fotocamera http://it.youtube.com/watch?v=04v_v1gnyO8
  • 16. Pocket Guitar (2009): chitarra + iPhone R.Polillo - Ottobre 2010
  • 17. Mashup http://www.housingmaps.com (2009) R.Polillo - Ottobre 2010
  • 18. dj3 R.Polillo - Ottobre 2010
  • 19. Mac OS X dialogue box + vetro = dialogue box trasparente R.Polillo - Ottobre 2010
  • 20. 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 - Ottobre 2010 donatore ricevente
  • 21. Metafora: esempi
    • sei un fulmine
    • l’ondeggiare delle spighe
    • il ruggire dei motori
    • la gamba del tavolo
    • al timone dello stato
    R.Polillo - Ottobre 2010
  • 22. 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 - Ottobre 2010
  • 23. Word 95 La icona crea la metafora, e suggerisce immediatamente la funzione del menu R.Polillo - Ottobre 2010
  • 24. La metafora della scrivania (Macintosh, 1984) R.Polillo - Ottobre 2010
  • 25. ( http://www.jkrowling.com/it , 2009) R.Polillo - Ottobre 2010
  • 26. Metafora: vantaggi
    • Suggerisce idee al designer, perché trasferisce un intero “campo semantico” da un contesto all’altro, suggerendo soluzioni inattese
    • Esempi:
    • la gamba del tavolo  e se mettessimo una giarrettiera a una gamba del tavolo? Oppure se gli mettessimo delle scarpe?
    • il ruggire del motore  “metti un tigre nel motore”
    R.Polillo - Ottobre 2010
  • 27. Metafora: svantaggi
    • Può confondere l’utente, perché le inevitabili incongruenze fra i due campi semnatici possono generare confusione e sfiducia
    • NB La metafora non è una similitudine!
    R.Polillo - Ottobre 2010
  • 28. R.Polillo - Ottobre 2010
  • 29. R.Polillo - Ottobre 2010
  • 30. Una tastiera che pensa? R.Polillo - Ottobre 2010
  • 31. Il design delle icone R.Polillo - Ottobre 2010 Mac OS X Windows ? ? ? ? ?
  • 32. R.Polillo - Ottobre 2010
  • 33. www.samsung.com/it , 2006 R.Polillo - Ottobre 2010
  • 34. Variazione R.Polillo - Ottobre 2010
  • 35. Variazione: esempi R.Polillo - Ottobre 2010
  • 36. Paint per Windows 95 (Microsoft, 1995) R.Polillo - Ottobre 2010
  • 37. WINDOWS 1.0 R.Polillo - Ottobre 2010
  • 38. WINDOWS 2.0 R.Polillo - Ottobre 2010
  • 39. WINDOWS 3.1 R.Polillo - Ottobre 2010
  • 40. WINDOWS 95 R.Polillo - Ottobre 2010
  • 41. Il ciclo compito-manufatto Bisogno Manufatto “ Non appena viene introdotto un nuovo manufatto, inizia una co-evoluzione dell’artefatto e di chi lo usa” D.C.Engelbart R.Polillo - Ottobre 2010
  • 42. Esempio: evoluzione del martello R.Polillo - Ottobre 2010
  • 43. Esempio: “paper clip” R.Polillo - Ottobre 2010 graffia il foglio non graffia il foglio, ma può scivolare via 1898 1900
  • 44. 1921 non scivola via R.Polillo - Ottobre 2010 1934
  • 45. R.Polillo - Ottobre 2010
  • 46. La evoluzione del software
    • Per la sua “immateriale”, il software, è il manufatto evolutivo per eccellenza:
    • - non esistono limitazioni “materiali” alle sue modifiche
    • - le sue modifiche non richiedono modifiche di impianti produttivi
    • - la versione modificata può essere distribuita immediatamente e ovunque, a costo praticamente nullo (via Internet)
    • - concetto di perpetual beta
    R.Polillo - Ottobre 2010
  • 47. Una variante: Mutazione
    • “ 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 - Ottobre 2010
  • 48. Esempio: design generativo
    • 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 - Ottobre 2010
  • 49. soddu2.dst.polimi.it R.Polillo - Ottobre 2010
  • 50. R.Polillo - Ottobre 2010
  • 51. R.Polillo - Ottobre 2010
  • 52. Basilica, C.Soddu, 1998 R.Polillo - Ottobre 2010
  • 53. R.Polillo - Ottobre 2010
  • 54. R.Polillo - Ottobre 2010
  • 55. Composizione R.Polillo - Ottobre 2010 COMPOSIZIONE Design pattern
  • 56. 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 - Ottobre 2010
  • 57. R.Polillo - Ottobre 2010
  • 58. Design pattern in architettura R.Polillo - Ottobre 2010 “ 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
  • 59. 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 - Ottobre 2010
  • 60. Pattern language per l’interazione
    • 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 - Ottobre 2010
  • 61. Schede descrittive: esempi
    • Problem
    • Solution
    • Use when
    • How
    • Why
    • More examples
    • Implementation
    • Literature
    • Problem summary
    • Example
    • Usage
    • Solution
    • Rationale
    • [Discussion]
    • [Sources]
    • More examples
    R.Polillo - Ottobre 2010 Van Welie Toxboe
  • 62. 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 - Ottobre 2010
  • 63. Creazione Ma esiste veramente la creazione dal nulla? R.Polillo - Ottobre 2010
  • 64.
    • “ Per inventare, serve una buona immaginazione e un mucchio di cianfrusaglie”
    • Thomas Alva Edison
    R.Polillo - Ottobre 2010
  • 65. 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.
    • 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.