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

Like this? Share it with your network

Share

15. Ancora sulla comunicazione visiva

on

  • 531 views

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

Statistics

Views

Total Views
531
Views on SlideShare
529
Embed Views
2

Actions

Likes
1
Downloads
35
Comments
0

1 Embed 2

http://efesto.cloudapp.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

15. Ancora sulla comunicazione visiva Presentation 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