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

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

40. da Rudolf Arnheim, Arte e percezione visiva, 1954

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

44. R.Polillo - Aprile 201445

45. R.Polillo - Aprile 201446

46. Ricerca visiva47
R.Polillo - Aprile 2014

47. Dov’è
Waldo?
R.Polillo - Aprile 2014
48

48. Meglio organizzare la tabella in ordine alfabetico per colonne

49. Facile da
scandire?
Lettura
orizzontale
o diagonale?

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

51. Esempio: Power Point
R.Polillo - Aprile 2014
52

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

53. Direzione54
R.Polillo - Aprile 2014

54. Diagonali

60. 1
2
3
4

61. 1
2
3
4

62. Minimalismo vs
massimalismo
63
R.Polillo - Aprile 2014

63. 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

64. Minimalismo
R.Polillo - Aprile 2014
65
www.google.com

65. Minimalismo
R.Polillo - Aprile 2014
66
www.dropbox.com

66. Massimalismo
R.Polillo - Marzo 2014
www.brigaderia.com.br

67. Massimalismo
R.Polillo - Aprile 2014
68
www.glamour.it

68. Il ruolo delle immagini69
R.Polillo - Aprile 2014

69. 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

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

71. Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
72

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

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

74. Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
75

75. (segue)
R.Polillo - Aprile 2014
76

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

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

78. E con questa?
R.Polillo - Aprile 2014
79

79. Coerenza visiva80
R.Polillo - Aprile 2014

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

81. 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

82. Dialogo consistente
R.Polillo - Marzo 2014

83. R.Polillo - Marzo 2014

84. R.Polillo - Marzo 2014

85. R.Polillo - Marzo 2014

86. R.Polillo - Marzo 2014

87. Es. di incoerenza: menu che si trasformano
R.Polillo - Marzo 2014

88. Stile dei messaggi coerente: esempio
R.Polillo - Marzo 2014

89. R.Polillo - Marzo 2014

90. R.Polillo - Marzo 2014