7. Ingegneria e creativita'

656 views

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 - A.A.2012-13
Lezione del 26 marzo 2013
Vedi anche www.rpolillo.it

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

No Downloads
Views
Total views
656
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
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.
  • 7. Ingegneria e creativita'

    1. 1. 1 INGEGNERIA E CREATIVITÀ Corso di Interazione Uomo Macchina AA 2012-2013 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione 3 -1 12 20 ne di zio R.Polillo - Marzo 2013 E
    2. 2. Come “inventiamo” nuovi prodotti?4 R.Polillo -Marzo 2013
    3. 3. Alcune “tecniche”5  Mimesi  Ibridazione  Metafora  Variazione  Composizione R.Polillo -Marzo 2013
    4. 4. Mimesi6 “imitazione” Si costruiscono oggetti virtuali che “riproducono” in ogni dettaglio oggetti reali ampiamente diffusi R.Polillo -Marzo 2013
    5. 5. Mimesi: esempi Riproduzione precisa di uno specifico modello dell’HP!7 R.Polillo -Marzo 2013
    6. 6. 8 R.Polillo -Marzo 2013
    7. 7. 9 R.Polillo -Marzo 2013 Chi et al., CHI 2005
    8. 8. Wine app per iPad10 R.Polillo -Marzo 2013
    9. 9. Inside Photo Album per iPad11 R.Polillo -Marzo 2013
    10. 10. La libreria di iPad12 R.Polillo -Marzo 2013
    11. 11. Dj Mixer (app per iPad)13 R.Polillo -Marzo 2013
    12. 12. Orologio per iPad14 R.Polillo -Marzo 2013
    13. 13. Esempio: settaggio di un15 orologio Da Interface Hall of Shame http://bit.ly/Xlo536
    14. 14. Set time su iPhone16 R.Polillo -Marzo 2013
    15. 15. GarageBand (iPad)17 R.Polillo -Marzo 2013
    16. 16. GarageBand (per iPad)18 R.Polillo -Marzo 2013
    17. 17. GarageBand (per iPad)19 R.Polillo -Marzo 2013
    18. 18. YouTube radio20 http://bit.ly/WHXptv R.Polillo -Marzo 2013
    19. 19. 21 Questo bottone permette di cambiare la scala: l’oggetto imitato viene “potenziato” con funzioni non realizzabili nel modello reale R.Polillo -Marzo 2013
    20. 20. 22 2. Cliccare la cornetta (sic!) 1. Comporre il numero IBM Smart Phone R.Polillo -Marzo 2013
    21. 21. 23 Da: IBM, Aptiva Communication Center R.Polillo -Marzo 2013
    22. 22. Ibridazione24 “Incrociare piante o animali di specie diverse in modo da ottenere ibridi” Esempio: lavagna + proiettore ⇒ lavagna luminosa R.Polillo -Marzo 2013
    23. 23. Esempio25 Wireless Notebook Presenter Mouse 8000, di Microsoft (2006) R.Polillo -Marzo 2013
    24. 24. Samsung Camera Phone
    25. 25. Ibridazione: esempi27 player musicale + menu e form Windows-like calendario + orologio + tab + bottoni R.Polillo -Marzo 2013
    26. 26. I/O Brush (MIT)28 pennello + fotocamera http://it.youtube.com/watch?v=04v_v1gnyO8 R.Polillo -Marzo 2013
    27. 27. Pocket Guitar (2009): chitarra + iPhone29 R.Polillo -Marzo 2013
    28. 28. Mashup30 http://www.housingmaps.com (2009) R.Polillo -Marzo 2013
    29. 29. dj331 R.Polillo -Marzo 2013
    30. 30. Concept watch con FaceTime32 R.Polillo -Marzo 2013
    31. 31. dialogue box + vetro = dialogue box trasparente Mac OS X33 R.Polillo -Marzo 2013
    32. 32. Singing fingers (video)34 http://bit.ly/VxpMax R.Polillo -Marzo 2013
    33. 33. Metafora35 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 donatore ricevente R.Polillo -Marzo 2013
    34. 34. Metafora: esempi36  sei un fulmine  l’ondeggiare delle spighe  il ruggire dei motori  la gamba del tavolo  al timone dello stato R.Polillo -Marzo 2013
    35. 35. Metafora: esempio37 È ve ro , il m o nd o è tutto un p a lc o s c e nic o s ul q ua le tutti no i, uo m ini e d o nne s ia m s o lo a tto ri, c o n le no s tre us c ite e c o n le no s tre e ntra te ; o ve c ia s c uno , p e r il te m p o c he g li è s ta to a s s e g na to , re c ita m o lte p a rti, e g li a tti s o no le s ue s e tte e tà … . W. Shakespeare, As you like it R.Polillo -Marzo 2013
    36. 36. La icona crea la metafora, e suggerisce immediatamente38 la funzione del menu Word 95 R.Polillo -Marzo 2013
    37. 37. La metafora della scrivania (Macintosh, 1984)39 R.Polillo -Marzo 2013
    38. 38. (http://www.jkrowling.com/it, 2009)40 R.Polillo -Marzo 2013
    39. 39. Metafora: vantaggi41 Suggerisce idee al designer, perché trasferisce un intero “campo semantico” da un contesto all’altro, suggerendo soluzioni inattese R.Polillo -Marzo 2013
    40. 40. Esempio: la "gamba del tavolo"42 R.Polillo -Marzo 2013
    41. 41. Esempio: "metti un tigre nel43 motore" R.Polillo -Marzo 2013
    42. 42. Metafora: svantaggi44 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
    43. 43. 45 R.Polillo -Marzo 2013
    44. 44. 46 R.Polillo -Marzo 2013
    45. 45. Una tastiera che pensa?47 R.Polillo -Marzo 2013
    46. 46. Il design delle icone48 Windows Mac OS X ? ? ? ? ? R.Polillo -Marzo 2013
    47. 47. 49 R.Polillo -Marzo 2013
    48. 48. Variazione51 R.Polillo -Marzo 2013
    49. 49. Variazione: esempi52 R.Polillo -Marzo 2013
    50. 50. Paint per Windows 95 (Microsoft, 1995)53 R.Polillo -Marzo 2013
    51. 51. 54 WINDOWS 1.0 R.Polillo -Marzo 2013
    52. 52. 55 WINDOWS 2.0 R.Polillo -Marzo 2013
    53. 53. 56 WINDOWS 3.1 R.Polillo -Marzo 2013
    54. 54. 57 WINDOWS 95 R.Polillo -Marzo 2013
    55. 55. 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
    56. 56. 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
    57. 57. 60 R.Polillo -Marzo 2013 soddu2.dst.polimi.it
    58. 58. 61 R.Polillo -Marzo 2013
    59. 59. 62 R.Polillo -Marzo 2013
    60. 60. 63 R.Polillo -Marzo 2013 Basilica, C.Soddu, 1998
    61. 61. Composizione66 Design pattern COMPOSIZIONE R.Polillo -Marzo 2013
    62. 62. Design patterns: che cosa sono67  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
    63. 63. 68 R.Polillo -Marzo 2013
    64. 64. Design pattern in architettura69 “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 Da C.Alexander, A Pattern Language usino naturalmente i gradini per sedersi”. R.Polillo -Marzo 2013
    65. 65. I pattern di interazione uomo macchina: esempio70 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
    66. 66. 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
    67. 67. Schede descrittive: esempi72 • Problem • Problem summary • Solution • Example • Use when • Usage • How • Solution • Why • Rationale • More examples • [Discussion] • Implementation • [Sources] • Literature • More examples Van Welie Toxboe R.Polillo -Marzo 2013
    68. 68. Design pattern: vantaggi73  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
    69. 69. Creazione74 Ma esiste veramente la creazione dal nulla? R.Polillo -Marzo 2013
    70. 70. 75 “Per inventare, serve una buona immaginazione e un mucchio di cianfrusaglie” Thomas Alva Edison R.Polillo -Marzo 2013

    ×