11.Progettare la grafica (i)

1,042 views
980 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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,042
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
71
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

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

×