11. Progettare la grafica

2,478 views

Published on

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010 - Lezione 2
(vedi anche www.rpolillo.it

Published in: Education
  • Be the first to comment

11. Progettare la grafica

  1. 1. PROGETTARE LA GRAFICA Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
  2. 2. Scopo di questa lezione <ul><li>Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi. </li></ul><ul><li>Seguirà una lezione specificamente dedicata agli aspetti tipografici </li></ul>
  3. 3. Temi <ul><li>Comunicazione visiva e interaction design </li></ul><ul><li>Le leggi della Gestalt </li></ul><ul><li>Esempi da discutere </li></ul>
  4. 4. Comunicazione visiva e interaction design
  5. 5. Comunicazione visiva e interaction design <ul><li>La comunicazione visiva ha un ruolo preponderante nell’interazione uomo-macchina: immagini, testo, animazioni, video </li></ul><ul><li>Quindi la cura degli aspetti grafici nell’interaction design è di grande importanza </li></ul><ul><li>Occorre considerare aspetti percettivi, psicologici, culturali </li></ul><ul><li>Grande tradizione e cultura dell’immagine, ma poche indicazioni scientificamente dimostrabili </li></ul>
  6. 6. Gli obiettivi della comunicazione visiva <ul><li>La grafica di un sistema interattivo può perseguire obiettivi diversi: </li></ul><ul><ul><li>Comprensibilità </li></ul></ul><ul><ul><li>Usabilità </li></ul></ul><ul><ul><li>Gradevolezza </li></ul></ul><ul><ul><li>Capacità di suscitare emozioni </li></ul></ul><ul><ul><li>Originalità </li></ul></ul><ul><li>Occorre grande chiarezza nella definizione dei requisiti, perché ciascuno di questi obiettivi richiede tecniche e approcci differenti, che potrebbero essere fra loro in conflitto </li></ul>
  7. 7.
  8. 8. Un esempio analogo
  9. 9. Un esempio analogo
  10. 10. Originalità Gradevolezza Emozione Comprensibilità Usabilità
  11. 11.
  12. 12. La grafica per la usabilità <ul><li>“ La presentazione dell’informazione visiva dovrebbe abilitare l’utente ad eseguire i compiti percettivi (per esempio, la ricerca di informazioni sullo schermo) in modo efficace, efficiente e con soddisfazione” </li></ul><ul><li>ISO 9241-12, “Presentation of information” </li></ul>
  13. 13. La grafica per la usabilità (segue) <ul><li>Nel progettare l’informazione visiva si devo considerare le seguenti caratteristiche: </li></ul><ul><ul><li>Chiarezza </li></ul></ul><ul><ul><li>Discriminabilità </li></ul></ul><ul><ul><li>Concisione </li></ul></ul><ul><ul><li>Consistenza </li></ul></ul><ul><ul><li>Scopribilità </li></ul></ul><ul><ul><li>Leggibilità </li></ul></ul><ul><ul><li>Comprensibilità </li></ul></ul><ul><li>ISO 9241-12, “Presentation of information” </li></ul>
  14. 14.
  15. 15. Le leggi della Gestalt
  16. 16. GESTALT <ul><li>“ Nella percezione visiva, il tutto è più della somma delle sue parti” </li></ul>Luci “in movimento”
  17. 17. Salvador Dalì, 1935 “ Face of Mae West which may be used as an apartement”
  18. 18. Le leggi della gestalt (M.Wertheimer, 1923) <ul><li>Legge della vicinanza </li></ul><ul><li>Legge della somiglianza </li></ul><ul><li>Legge della chiusura </li></ul><ul><li>Legge della continuità di direzione (o della “curva buona”) </li></ul><ul><li>Legge della pregnanza (o della “buona forma”) </li></ul><ul><li>Legge dell’esperienza passata </li></ul>
  19. 19. Legge della vicinanza Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni)
  20. 20. Legge della somiglianza Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità (a parità di altre condizioni)
  21. 21. Legge della chiusura Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono (a parità di altre condizioni)
  22. 22. Esempio: conflitto fra chiusura e vicinanza a b
  23. 23. Legge della continbuità di direzione (o della “curva buona”) Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre
  24. 24. Legge della “buona forma” Il campo percettivo si segmenta in modo che risultino entità per quanto possibile equilibrate, armoniche, costi-tuite secondo un medesimo principio in tutte le loro parti
  25. 25. Legge della “buona forma”: altri esempi
  26. 26. Legge dell’esperienza passata L’esperienza modella le nostre impressioni a b
  27. 27. Legge dell’esperienza passata: altri esempi a b
  28. 28. Leggi della gestalt: applicazione al design delle interfacce grafiche
  29. 29. Vicinanza
  30. 30. L’ esempio precedente, ristrutturato
  31. 31. Da PowerPoint 2007
  32. 32. Perché questa immagine è poco comprensibile?
  33. 33. (segue)
  34. 34. (segue)
  35. 35. Somiglianza a b c Yahoo (2009) British-airways (2003) Vista (2009)
  36. 36.
  37. 37. Vista (2009)
  38. 38. iPhone OS version 3.0 on the iPhone 3GS
  39. 39.
  40. 40.
  41. 41.
  42. 42.
  43. 43. Siete d’accordo con l’uso dei colori nella tabella seguente?
  44. 44. (MAC OS 8)
  45. 45.
  46. 46.
  47. 47.
  48. 48. Chiusura
  49. 49. L’importanza dei riquadri: esempio (I )
  50. 50. L’importanza dei riquadri: esempio (II)
  51. 51.
  52. 52.
  53. 53.
  54. 54.
  55. 55. Colore
  56. 56.
  57. 57.
  58. 58. EXIT PERICOLO ! AVANTI STOP
  59. 59.
  60. 60.
  61. 61. Percorsi visivi: siete d’accordo con questo layout?
  62. 62. Percorsi visivi
  63. 63. Yarbus, 1967 1 2 3 4 5 6 7
  64. 64.
  65. 65. In sintesi… <ul><li>Una buona grafica dovrebbe: </li></ul><ul><li>essere facilmente leggibile (testi, immagini) per tutti gli utenti a cui è destinata </li></ul><ul><li>aiutarci a comprendere chiaramente la struttura di una pagina video, trasmettendoci una sensazione di semplicità </li></ul><ul><li>aiutarci ad associare facilmente contenuti fra loro omogenei </li></ul><ul><li>utilizzare codici visivi e convenzioni familiari agli utenti a cui è destinata </li></ul><ul><li>utilizzare codici visivi coerenti all’interno del prodotto ( e del suo “ecosistema”) </li></ul><ul><li>non contenere elementi ridondanti o ambigui </li></ul>
  66. 66. RUMORE
  67. 67. RUMORE
  68. 68. RUMORE L’informazione utile è solo questa
  69. 69. OK, ma troppo minimalista?
  70. 70. CONFUSIONE E RUMORE
  71. 71. CONTRASTO?
  72. 72.
  73. 73.
  74. 74. CocaCola tedesca nel 2003
  75. 75. CocaCola USA nel 2003
  76. 76. www.cocacola.com nel 2003

×