15. Ancora sulla comunicazione visiva

1,666 views
1,554 views

Published 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

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

15. Ancora sulla comunicazione visiva

  1. 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. 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. 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. 4. 5 R.Polillo - Aprile 2014
  5. 5. Un esempio analogo R.Polillo - Aprile 20146
  6. 6. Un esempio analogo R.Polillo - Aprile 20147
  7. 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. 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. 9. Griglie logiche e allineamenti10 R.Polillo - Aprile 2014
  10. 10. R.Polillo - Aprile 201411
  11. 11. R.Polillo - Aprile 201412 I disallineamenti generano una percezione di complessità
  12. 12. R.Polillo - Aprile 201413
  13. 13. Va bene? R.Polillo - Aprile 2014 14
  14. 14. L’ esempio precedente, ristrutturato R.Polillo - Aprile 2014 15
  15. 15.  Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web R.Polillo - Aprile 2014 16
  16. 16. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201417
  17. 17. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201418
  18. 18. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201419
  19. 19. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201420
  20. 20. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii R.Polillo - Aprile 201421
  21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Gkgkjhh hkjhkjh k iuouoiu iuoiupioupoiupo IPOIéPOIoièièoièopii Siamo partiti da qui …. R.Polillo - Aprile 201431
  31. 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. 32. Equilibrio33 R.Polillo - Aprile 2014
  33. 33. da Rudolf Arnheim, Arte e percezione visiva, 1954
  34. 34. La “regola dei terzi” in fotografia R.Polillo - Aprile 2014 44
  35. 35. R.Polillo - Aprile 201445
  36. 36. R.Polillo - Aprile 201446
  37. 37. Ricerca visiva47 R.Polillo - Aprile 2014
  38. 38. Dov’è Waldo? R.Polillo - Aprile 2014 48
  39. 39. Meglio organizzare la tabella in ordine alfabetico per colonne
  40. 40. Facile da scandire? Lettura orizzontale o diagonale?
  41. 41. Percorsi visivi: siete d’accordo con questo layout? R.Polillo - Aprile 2014 51
  42. 42. Esempio: Power Point R.Polillo - Aprile 2014 52
  43. 43. Power Point 2010 R.Polillo - Aprile 2014 53 PowerPoint 2010, Windows
  44. 44. Direzione54 R.Polillo - Aprile 2014
  45. 45. Diagonali
  46. 46. 1 2 3 4
  47. 47. 1 2 3 4
  48. 48. Minimalismo vs massimalismo 63 R.Polillo - Aprile 2014
  49. 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. 50. Minimalismo R.Polillo - Aprile 2014 65 www.google.com
  51. 51. Minimalismo R.Polillo - Aprile 2014 66 www.dropbox.com
  52. 52. Massimalismo R.Polillo - Marzo 2014 www.brigaderia.com.br
  53. 53. Massimalismo R.Polillo - Aprile 2014 68 www.glamour.it
  54. 54. Il ruolo delle immagini69 R.Polillo - Aprile 2014
  55. 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. 56. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 71 www.ibm.com
  57. 57. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 72
  58. 58. Il ruolo delle immagini: esempio R.Polillo - Aprile 2014 73
  59. 59. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 74 www.fiat.com
  60. 60. Ruolo delle immagini: esempio R.Polillo - Aprile 2014 75
  61. 61. (segue) R.Polillo - Aprile 2014 76
  62. 62. Siete d'accordo con questa sitemap? R.Polillo - Aprile 2014 77
  63. 63. E con questa? (Sitemap dei siti della Regione Toscana) R.Polillo - Aprile 2014 78
  64. 64. E con questa? R.Polillo - Aprile 2014 79
  65. 65. Coerenza visiva80 R.Polillo - Aprile 2014
  66. 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. 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. 68. Dialogo consistente R.Polillo - Marzo 2014
  69. 69. R.Polillo - Marzo 2014
  70. 70. R.Polillo - Marzo 2014
  71. 71. R.Polillo - Marzo 2014
  72. 72. R.Polillo - Marzo 2014
  73. 73. Es. di incoerenza: menu che si trasformano R.Polillo - Marzo 2014
  74. 74. Stile dei messaggi coerente: esempio R.Polillo - Marzo 2014
  75. 75. R.Polillo - Marzo 2014
  76. 76. R.Polillo - Marzo 2014

×