Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1    PROGETTARE LA GRAFICA    (I)    Corso di Interazione Uomo Macchina    AA 2012-2013    Roberto Polillo    Corso di lau...
Queste slides…2    … si basano sul libro “Facile da usare”, dell’autore, dove si trovano    tutte le necessarie spiegazion...
Scopo di questa lezione3     Discutere le problematiche i principi base del     design grafico delle interfacce, discutend...
Comunicazione visiva e interaction design4       La comunicazione visiva ha un ruolo preponderante        nell’interazion...
Chiarire gli obbiettivi5    La grafica di un sistema interattivo può avere obiettivi diversi,    che possono essere fra lo...
6   R.Polillo - Aprile 2013
Un esempio analogo7                   R.Polillo - Aprile 2013
Un esempio analogo8                   R.Polillo - Aprile 2013
La grafica per la usabilità9     “La presentazione dell’informazione visiva dovrebbe     abilitare l’utente ad eseguire i ...
Siete daccordo con questa     sitemap?10                 R.Polillo - Aprile 2013
E con questa?     (Sitemap dei siti della Regione Toscana)11                             R.Polillo - Aprile 2013
E con questa?12                R.Polillo - Aprile 2013
Minimalismo vs massimalismo13     "La perfezione si raggiunge non quando non     cè più niente da aggiungere, ma quando   ...
Minimalismo14     www.google.com                      R.Polillo - Aprile 2013
Minimalismo15     www.dropbox.com                       R.Polillo - Aprile 2013
Massimalismo16     www.glamour.it     R.Polillo - Aprile 2013
Il ruolo delle immagini17        A che cosa serve unimmagine nel contesto         della schermata complessiva?          ...
Ruolo delle immagini: esempio18     www.ibm.com                   R.Polillo - Aprile 2013
Ruolo delle immagini: esempio19                 R.Polillo - Aprile 2013
Il ruolo delle immagini: esempio20                 R.Polillo - Aprile 2013
Ruolo delle immagini: esempio21     www.fiat.com                    R.Polillo - Aprile 2013
Ruolo delle immagini: esempio22                 R.Polillo - Aprile 2013
(segue)23               R.Polillo - Aprile 2013
Organizzazione delle pagine24        Strutturare le pagine in modo facilmente         riconoscibile, semplice, ordinato, ...
Griglie e allineamenti: esempio25                 R.Polillo - Aprile 2013
I disallineamenti                               generano una                               percezione di                  ...
27   R.Polillo - Aprile 2013
Griglie e allineamenti28        Le slides che seguono mostrano il progressivo         miglioramento del layout di una pag...
Gkgkjhh hkjhkjh k                               iuouoiu                               iuoiupioupoiupo                     ...
Gkgkjhh hkjhkjh k                               iuouoiu                               iuoiupioupoiupo                     ...
Gkgkjhh hkjhkjh k                               iuouoiu                               iuoiupioupoiupo                     ...
Gkgkjhh hkjhkjh k                               iuouoiu                               iuoiupioupoiupo                     ...
Gkgkjhh hkjhkjh k                    iuouoiu                    iuoiupioupoiupo                    IPOIéPOIoièièoièopii33 ...
Gkgkjhh hkjhkjh k                    iuouoiu                    iuoiupioupoiupo                    IPOIéPOIoièiè          ...
Gkgkjhh hkjhkjh k                    iuouoiu                    iuoiupioupoiupo                    IPOIéPOIoièiè          ...
Gkgkjhh hkjhkjh k                    iuouoiu                    iuoiupioupoiupo                    IPOIéPOIoièiè          ...
Gkgkjhh hkjhkjh k                    iuouoiu                    iuoiupioupoiupo                    IPOIéPOIoièiè          ...
Gkgkjhh hkjhkjh k                  iuouoiu                  iuoiupioupoiupo                  IPOIéPOIoièiè                ...
Gkgkjhh hkjhkjh k                  iuouoiu                  iuoiupioupoiupo                  IPOIéPOIoièiè                ...
Gkgkjhh hkjhkjh k                  iuouoiu                  iuoiupioupoiupo                  IPOIéPOIoièiè                ...
AFDGH                          Gkgkjhh hkjhkjh k                          iuouoiu                          iuoiupioupoiupo...
AFDGH                          Gkgkjhh hkjhkjh k                          iuouoiu                          iuoiupioupoiupo...
Gkgkjhh hkjhkjh k                                       iuouoiu                                       iuoiupioupoiupo     ...
AFDGH                          Gkgkjhh hkjhkjh k                          iuouoiu                          iuoiupioupoiupo...
Va bene?45                R.Polillo - Aprile 2013
L’ esempio precedente, ristrutturato46                    R.Polillo - Aprile 2013
Come migliorarla?47                R.Polillo - Aprile 2013
Percorsi visivi48        Strutturare la pagina in modo da suggerire dei         percorsi visivi coerenti con i diversi ca...
Dov’è Waldo?49          R.Polillo - Aprile 2013
Percorsi visivi: siete d’accordo con questo     layout?50                       R.Polillo - Aprile 2013
Percorsi visivi: siete d’accordo con questo     layout?51                        R.Polillo - Aprile 2013
Questo è migliore?52 PowerPoint 2008 e 2011, Mac                 R.Polillo - Aprile 2013
E questo?                             PowerPoint 2010,                                           Windows53                ...
Upcoming SlideShare
Loading in …5
×

11.Progettare la grafica (i)

1,145 views

Published on

Slides dal corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo - A.A.2012-

Published in: Education
  • Be the first to comment

11.Progettare la grafica (i)

  1. 1. 1 PROGETTARE LA GRAFICA (I) 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 R.Polillo - Aprile 2013
  2. 2. Queste slides…2 … 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 - Aprile 2013
  3. 3. Scopo di questa lezione3 Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi. R.Polillo - Aprile 2013
  4. 4. Comunicazione visiva e interaction design4  La comunicazione visiva ha un ruolo preponderante nell’interazione uomo-macchina: immagini, testo, animazioni, video  Quindi la cura degli aspetti grafici nell’interaction design è di grande importanza  Occorre considerare aspetti percettivi, psicologici, culturali  Grande tradizione e cultura dell’immagine, ma poche indicazioni scientificamente dimostrabili R.Polillo - Aprile 2013
  5. 5. Chiarire gli obbiettivi5 La grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto: R.Polillo - Aprile 2013
  6. 6. 6 R.Polillo - Aprile 2013
  7. 7. Un esempio analogo7 R.Polillo - Aprile 2013
  8. 8. Un esempio analogo8 R.Polillo - Aprile 2013
  9. 9. La grafica per la usabilità9 “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 […] Nel progettare l’informazione visiva si devono considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità" ISO 9241-12, “Presentation of information” R.Polillo - Aprile 2013
  10. 10. Siete daccordo con questa sitemap?10 R.Polillo - Aprile 2013
  11. 11. E con questa? (Sitemap dei siti della Regione Toscana)11 R.Polillo - Aprile 2013
  12. 12. E con questa?12 R.Polillo - Aprile 2013
  13. 13. Minimalismo vs massimalismo13 "La perfezione si raggiunge non quando non cè più niente da aggiungere, ma quando non cè più niente da togliere" Antoine de St-Exupery R.Polillo - Aprile 2013
  14. 14. Minimalismo14 www.google.com R.Polillo - Aprile 2013
  15. 15. Minimalismo15 www.dropbox.com R.Polillo - Aprile 2013
  16. 16. Massimalismo16 www.glamour.it R.Polillo - Aprile 2013
  17. 17. Il ruolo delle immagini17  A che cosa serve unimmagine nel contesto della schermata complessiva?  Come decorazione ?  Come riempitivo?  Per illustrare un contenuto?  Per veicolare un messaggio?  Per dirigere lattenzione su un contenuto (es.banner)? R.Polillo - Aprile 2013
  18. 18. Ruolo delle immagini: esempio18 www.ibm.com R.Polillo - Aprile 2013
  19. 19. Ruolo delle immagini: esempio19 R.Polillo - Aprile 2013
  20. 20. Il ruolo delle immagini: esempio20 R.Polillo - Aprile 2013
  21. 21. Ruolo delle immagini: esempio21 www.fiat.com R.Polillo - Aprile 2013
  22. 22. Ruolo delle immagini: esempio22 R.Polillo - Aprile 2013
  23. 23. (segue)23 R.Polillo - Aprile 2013
  24. 24. Organizzazione delle pagine24  Strutturare le pagine in modo facilmente riconoscibile, semplice, ordinato, suggerendo percorsi visivi coerenti con i casi duso  Usare griglie logiche coerenti  Curare gli allineamenti  Evitare rumore visivo  Evitare ridondanze  Tenere presenti i principi della teoria della Gestalt  Usare il colore per migliorare la comprensione della pagina R.Polillo - Aprile 2013
  25. 25. Griglie e allineamenti: esempio25 R.Polillo - Aprile 2013
  26. 26. I disallineamenti generano una percezione di complessità26 R.Polillo - Aprile 2013
  27. 27. 27 R.Polillo - Aprile 2013
  28. 28. Griglie e allineamenti28  Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web R.Polillo - Aprile 2013
  29. 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii29 R.Polillo - Aprile 2013
  30. 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii30 R.Polillo - Aprile 2013
  31. 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii31 R.Polillo - Aprile 2013
  32. 32. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii32 R.Polillo - Aprile 2013
  33. 33. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii33 R.Polillo - Aprile 2013
  34. 34. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò34 R.Polillo - Aprile 2013
  35. 35. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò35 R.Polillo - Aprile 2013
  36. 36. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò36 R.Polillo - Aprile 2013
  37. 37. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò37 R.Polillo - Aprile 2013
  38. 38. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò38 R.Polillo - Aprile 2013
  39. 39. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò39 R.Polillo - Aprile 2013
  40. 40. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò40 R.Polillo - Aprile 2013
  41. 41. AFDGH Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò41 R.Polillo - Aprile 2013
  42. 42. AFDGH Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò42 R.Polillo - Aprile 2013
  43. 43. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii Siamo partiti da qui ….43 R.Polillo - Aprile 2013
  44. 44. AFDGH Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò … e siamo arrivati qui ….44 R.Polillo - Aprile 2013
  45. 45. Va bene?45 R.Polillo - Aprile 2013
  46. 46. L’ esempio precedente, ristrutturato46 R.Polillo - Aprile 2013
  47. 47. Come migliorarla?47 R.Polillo - Aprile 2013
  48. 48. Percorsi visivi48  Strutturare la pagina in modo da suggerire dei percorsi visivi coerenti con i diversi casi duso…  … ricordando quello che abbiamo visto dallanalisi degli scanpath con gli strumenti di eye tracking R.Polillo - Aprile 2013
  49. 49. Dov’è Waldo?49 R.Polillo - Aprile 2013
  50. 50. Percorsi visivi: siete d’accordo con questo layout?50 R.Polillo - Aprile 2013
  51. 51. Percorsi visivi: siete d’accordo con questo layout?51 R.Polillo - Aprile 2013
  52. 52. Questo è migliore?52 PowerPoint 2008 e 2011, Mac R.Polillo - Aprile 2013
  53. 53. E questo? PowerPoint 2010, Windows53 R.Polillo - Aprile 2013

×