Il documento esamina l'importanza della comunicazione visiva nell'interazione uomo-macchina, sottolineando l'importanza del design grafico e della usabilità. Viene discusso come progettare informazioni visive in modo chiaro ed efficace, considerando principi di chiarezza, coerenza e percettività. Inoltre, si evidenzia il ruolo delle immagini e la necessità di mantenere una coerenza visiva attraverso l'applicazione di stili e segnali visivi uniformi.

1. Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
ANCORA SULLA COMUNICAZIONE
VISIVA

2. Queste slides…
… 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 2015
2

3. 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 2015
3

4. Chiarire gli obbiettivi
R.Polillo - Aprile 2015
4
La progettazione grafica di un sistema interattivo può avere
obiettivi diversi, che possono essere fra loro in conflitto:

5. 5 R.Polillo - Aprile 2015

6. Un esempio analogo
R.Polillo - Aprile 20156

7. Un esempio analogo
R.Polillo - Aprile 20157

8. 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 2015
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”

9. 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 2015
9

10. Griglie logiche e allineamenti10
R.Polillo - Aprile 2015

11. R.Polillo - Aprile 201511

12. R.Polillo - Aprile 201512
I disallineamenti
generano una
percezione di
complessità

13. R.Polillo - Aprile 201513

14. Va bene?
R.Polillo - Aprile 2015
14

15. L’ esempio precedente, ristrutturato
R.Polillo - Aprile 2015
15

16.  Le slides che seguono mostrano il progressivo
miglioramento del layout di una pagina Web
R.Polillo - Aprile 2015
16

17. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201517

18. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201518

19. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201519

20. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201520

21. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201521

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 201522

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 201523

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 201524

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 201525

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 201526

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 201527

28. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201528

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 201529

30. 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 201530

31. Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii
Siamo partiti da
qui ….
R.Polillo - Aprile 201531

32. 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 201532

33. Equilibrio33
R.Polillo - Aprile 2015

34. R.Polillo - Aprile 201534

35. R.Polillo - Aprile 201535

36. R.Polillo - Aprile 201536

37. R.Polillo - Aprile 201537

38. R.Polillo - Aprile 201538

39. R.Polillo - Aprile 201539

40. R.Polillo - Aprile 201540

41. da Rudolf Arnheim, Arte e percezione visiva, 1954
R.Polillo - Aprile 201541

42. R.Polillo - Aprile 201542

43. R.Polillo - Aprile 201543

44. La “regola dei terzi” in fotografia
R.Polillo - Aprile 2015
44

45. R.Polillo - Aprile 201545

46. R.Polillo - Aprile 201546

47. Ricerca visiva47
R.Polillo - Aprile 2015

48. Dov’è
Waldo?
R.Polillo - Aprile 2015
48

49. Meglio organizzare la tabella in ordine alfabetico per colonne
R.Polillo - Aprile 201549

50. Facile da
scandire?
Lettura
orizzontale
o diagonale?
R.Polillo - Aprile 201550

51. Percorsi visivi: siete d’accordo con questo
layout?
R.Polillo - Aprile 2015
51

52. Esempio: Power Point
R.Polillo - Aprile 2015
52

53. Power Point 2010
R.Polillo - Aprile 2015
53
PowerPoint 2010,
Windows

54. Direzione54
R.Polillo - Aprile 2015

55. Diagonali
R.Polillo - Aprile 2015
55

56. R.Polillo - Aprile 201556

57. R.Polillo - Aprile 201557

58. R.Polillo - Aprile 201558

59. R.Polillo - Aprile 201559

61. 1
2
3
4
R.Polillo - Aprile 201561

62. 1
2
3
4

63. Minimalismo vs
massimalismo
63
R.Polillo - Aprile 2015

64. 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 2015
64

65. Minimalismo
R.Polillo - Aprile 2015
65
www.google.com

66. Minimalismo
R.Polillo - Aprile 2015
66
www.dropbox.com

67. Massimalismo
R.Polillo - Aprile 2015
www.brigaderia.com.br
67

68. Massimalismo
R.Polillo - Aprile 2015
68
www.glamour.it

69. Il ruolo delle immagini69
R.Polillo - Aprile 2015

70. 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 2015
70

71. Ruolo delle immagini: esempio
R.Polillo - Aprile 2015
71
www.ibm.com

72. Ruolo delle immagini: esempio
R.Polillo - Aprile 2015
72

73. Il ruolo delle immagini: esempio
R.Polillo - Aprile 2015
73

74. Ruolo delle immagini: esempio
R.Polillo - Aprile 2015
74
www.fiat.com

75. Ruolo delle immagini: esempio
R.Polillo - Aprile 2015
75

76. (segue)
R.Polillo - Aprile 2015
76

77. Siete d'accordo con questa
sitemap?
R.Polillo - Aprile 2015
77

78. E con questa?
(Sitemap dei siti della Regione Toscana)
R.Polillo - Aprile 2015
78

79. E con questa?
R.Polillo - Aprile 2015
79

80. Coerenza visiva80
R.Polillo - Aprile 2015

81. Coerenza
 Utilizzare uno stile e segnali visivi coerenti
all’interno dell’applicazione e fra applicazioni
“della stessa categoria”
R.Polillo - Aprile 2015
81

82. 82
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 - Aprile 2015

83. Dialogo consistente
83 R.Polillo - Aprile 2015

84. 84 R.Polillo - Aprile 2015

85. 85 R.Polillo - Aprile 2015

86. 86 R.Polillo - Aprile 2015

87. 87 R.Polillo - Aprile 2015

88. Es. di incoerenza: menu che si trasformano
88 R.Polillo - Aprile 2015

89. Stile dei messaggi coerente: esempio
89 R.Polillo - Aprile 2015

90. R.Polillo - Aprile 201590

91. R.Polillo - Aprile 201591