15. Ancora sulla comunicazione visiva
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

15. Ancora sulla comunicazione visiva

  • 601 views
Uploaded on

Slides dalle lezioni del corso di Interazione Uomo Macchina per gli studenti del corso di laurea in Informatica - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 16 aprile 2014

Slides dalle lezioni del corso di Interazione Uomo Macchina per gli studenti del corso di laurea in Informatica - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 16 aprile 2014

More 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
601
On Slideshare
599
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
37
Comments
0
Likes
1

Embeds 2

http://efesto.cloudapp.net 2

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. Corso di Interazione Uomo Macchina AA 2013-2014 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione ANCORA SULLA COMUNICAZIONE VISIVA R.Polillo - Aprile 2014 1
  • 2. Comunicazione visiva e interaction design  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  E’ utile che anche gli informatici acquisiscano sensibilità in quest’area. R.Polillo - Aprile 2014 3
  • 3. Chiarire gli obbiettivi R.Polillo - Aprile 2014 4 La progettazione grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto:
  • 4. 5 R.Polillo - Aprile 2014
  • 5. Un esempio analogo R.Polillo - Aprile 20146
  • 6. Un esempio analogo R.Polillo - Aprile 20147
  • 7. La grafica per la usabilità “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 […] R.Polillo - Aprile 2014 8 Nel progettare l’informazione visiva si devono considerare le seguenti caratteristiche: Chiarezza Discriminabilità Concisione Consistenza Scopribilità Leggibilità Comprensibilità" ISO 9241-12, “Presentation of information”
  • 8. Organizzazione delle pagine  Strutturare le pagine in modo facilmente riconoscibile, semplice, ordinato, suggerendo percorsi visivi coerenti con i casi d'uso  Usare griglie logiche coerenti  Curare gli allineamenti  Evitare rumore visivo  Evitare le ridondanze  Tenere presenti i principi della teoria della Gestalt  Usare il colore per migliorare la comprensione della pagina  Coerenza, coerenza, coerenza…. R.Polillo - Aprile 2014 9
  • 9. Griglie logiche e allineamenti10 R.Polillo - Aprile 2014
  • 10. R.Polillo - Aprile 201411
  • 11. R.Polillo - Aprile 201412 I disallineamenti generano una percezione di complessità
  • 12. R.Polillo - Aprile 201413
  • 13. Va bene? R.Polillo - Aprile 2014 14
  • 14. L’ esempio precedente, ristrutturato R.Polillo - Aprile 2014 15
  • 15.  Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web R.Polillo - Aprile 2014 16
  • 16. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201417
  • 17. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201418
  • 18. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201419
  • 19. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201420
  • 20. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201421
  • 21. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201422
  • 22. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201423
  • 23. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201424
  • 24. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201425
  • 25. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201426
  • 26. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201427
  • 27. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò R.Polillo - Aprile 201428
  • 28. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH R.Polillo - Aprile 201429
  • 29. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH R.Polillo - Aprile 201430
  • 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii Siamo partiti da qui …. R.Polillo - Aprile 201431
  • 31. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièiè Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò AFDGH … e siamo arrivati qui …. R.Polillo - Aprile 201432
  • 32. Equilibrio33 R.Polillo - Aprile 2014
  • 33. da Rudolf Arnheim, Arte e percezione visiva, 1954
  • 34. La “regola dei terzi” in fotografia R.Polillo - Aprile 2014 44
  • 35. R.Polillo - Aprile 201445
  • 36. R.Polillo - Aprile 201446
  • 37. Ricerca visiva47 R.Polillo - Aprile 2014
  • 38. Dov’è Waldo? R.Polillo - Aprile 2014 48
  • 39. Meglio organizzare la tabella in ordine alfabetico per colonne
  • 40. Facile da scandire? Lettura orizzontale o diagonale?
  • 41. Percorsi visivi: siete d’accordo con questo layout? R.Polillo - Aprile 2014 51
  • 42. Esempio: Power Point R.Polillo - Aprile 2014 52
  • 43. Power Point 2010 R.Polillo - Aprile 2014 53 PowerPoint 2010, Windows
  • 44. Direzione54 R.Polillo - Aprile 2014
  • 45. Diagonali
  • 46. 1 2 3 4
  • 47. 1 2 3 4
  • 48. Minimalismo vs massimalismo 63 R.Polillo - Aprile 2014
  • 49. Minimalismo vs massimalismo "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 2014 64
  • 50. Minimalismo R.Polillo - Aprile 2014 65 www.google.com
  • 51. Minimalismo R.Polillo - Aprile 2014 66 www.dropbox.com
  • 52. Massimalismo R.Polillo - Marzo 2014 www.brigaderia.com.br
  • 53. Massimalismo R.Polillo - Aprile 2014 68 www.glamour.it
  • 54. Il ruolo delle immagini69 R.Polillo - Aprile 2014
  • 55. Il ruolo delle immagini  A che cosa serve un'immagine nel contesto della schermata complessiva?  Come decorazione ?  Come riempitivo?  Per illustrare un contenuto?  Per veicolare un messaggio?  Per dirigere l'attenzione su un contenuto (es.banner)? R.Polillo - Aprile 2014 70
  • 56. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 71 www.ibm.com
  • 57. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 72
  • 58. Il ruolo delle immagini: esempio R.Polillo - Aprile 2014 73
  • 59. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 74 www.fiat.com
  • 60. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 75
  • 61. (segue) R.Polillo - Aprile 2014 76
  • 62. Siete d'accordo con questa sitemap? R.Polillo - Aprile 2014 77
  • 63. E con questa? (Sitemap dei siti della Regione Toscana) R.Polillo - Aprile 2014 78
  • 64. E con questa? R.Polillo - Aprile 2014 79
  • 65. Coerenza visiva80 R.Polillo - Aprile 2014
  • 66. Coerenza  Utilizzare uno stile e segnali visivi coerenti all’interno dell’applicazione e fra applicazioni “della stessa categoria” R.Polillo - Aprile 2014 81
  • 67. Link interni al sito Link esterni al sito Link alla home page Search engine interna Banners pubblicitari Login /registrazione Shopping cart Help Links ai prodotti Bernard, 2001 Organizzazione abituale R.Polillo - Marzo 2014
  • 68. Dialogo consistente R.Polillo - Marzo 2014
  • 69. R.Polillo - Marzo 2014
  • 70. R.Polillo - Marzo 2014
  • 71. R.Polillo - Marzo 2014
  • 72. R.Polillo - Marzo 2014
  • 73. Es. di incoerenza: menu che si trasformano R.Polillo - Marzo 2014
  • 74. Stile dei messaggi coerente: esempio R.Polillo - Marzo 2014
  • 75. R.Polillo - Marzo 2014
  • 76. R.Polillo - Marzo 2014