• Like
11.Progettare la grafica (i)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

11.Progettare la grafica (i)

  • 822 views
Published

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

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
822
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
68
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. 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. Scopo di questa lezione3 Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi. R.Polillo - Aprile 2013
  • 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. 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 R.Polillo - Aprile 2013
  • 7. Un esempio analogo7 R.Polillo - Aprile 2013
  • 8. Un esempio analogo8 R.Polillo - Aprile 2013
  • 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. Siete daccordo con questa sitemap?10 R.Polillo - Aprile 2013
  • 11. E con questa? (Sitemap dei siti della Regione Toscana)11 R.Polillo - Aprile 2013
  • 12. E con questa?12 R.Polillo - Aprile 2013
  • 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. Minimalismo14 www.google.com R.Polillo - Aprile 2013
  • 15. Minimalismo15 www.dropbox.com R.Polillo - Aprile 2013
  • 16. Massimalismo16 www.glamour.it R.Polillo - Aprile 2013
  • 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. Ruolo delle immagini: esempio18 www.ibm.com R.Polillo - Aprile 2013
  • 19. Ruolo delle immagini: esempio19 R.Polillo - Aprile 2013
  • 20. Il ruolo delle immagini: esempio20 R.Polillo - Aprile 2013
  • 21. Ruolo delle immagini: esempio21 www.fiat.com R.Polillo - Aprile 2013
  • 22. Ruolo delle immagini: esempio22 R.Polillo - Aprile 2013
  • 23. (segue)23 R.Polillo - Aprile 2013
  • 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. Griglie e allineamenti: esempio25 R.Polillo - Aprile 2013
  • 26. I disallineamenti generano una percezione di complessità26 R.Polillo - Aprile 2013
  • 27. 27 R.Polillo - Aprile 2013
  • 28. Griglie e allineamenti28  Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web R.Polillo - Aprile 2013
  • 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii29 R.Polillo - Aprile 2013
  • 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii30 R.Polillo - Aprile 2013
  • 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii31 R.Polillo - Aprile 2013
  • 32. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii32 R.Polillo - Aprile 2013
  • 33. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii33 R.Polillo - Aprile 2013
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii Siamo partiti da qui ….43 R.Polillo - Aprile 2013
  • 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. Va bene?45 R.Polillo - Aprile 2013
  • 46. L’ esempio precedente, ristrutturato46 R.Polillo - Aprile 2013
  • 47. Come migliorarla?47 R.Polillo - Aprile 2013
  • 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. Dov’è Waldo?49 R.Polillo - Aprile 2013
  • 50. Percorsi visivi: siete d’accordo con questo layout?50 R.Polillo - Aprile 2013
  • 51. Percorsi visivi: siete d’accordo con questo layout?51 R.Polillo - Aprile 2013
  • 52. Questo è migliore?52 PowerPoint 2008 e 2011, Mac R.Polillo - Aprile 2013
  • 53. E questo? PowerPoint 2010, Windows53 R.Polillo - Aprile 2013