Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca - Prof.R.Polillo (a.a.2014-15) - Lezione del 31 marzo 2015

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
VISIONE E PROGETTAZIONE GRAFICA (I)

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. La teoria della Gestalt
3
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”
R.Polillo - Aprile 2015

4. Salvador Dalì, 1935
“Face of Mae West
which may be used as
an apartement”4 R.Polillo - Aprile 2015

5. Le leggi della gestalt (M.Wertheimer, 1923)
5
 Legge della continuità di direzione
 Legge della buona forma
 Legge dell’esperienza passata
 Legge della vicinanza
 Legge della somiglianza
 Legge della chiusura
R.Polillo - Aprile 2015

6. Legge della continuità di direzione
R.Polillo - Aprile 2015
6
Quelle parti di una figura che formano una “curva buona” o
che vanno nella stessa direzione tendono a essere raccolti
in unità più facilmente delle altre

7. Legge della “buona forma”
7
Il campo percettivo si segmenta in modo che risultino
entità per quanto possibile equilibrate, armoniche, costi-
tuite secondo un medesimo principio in tutte le loro parti
R.Polillo - Aprile 2015

8. Legge della “buona forma”: altri esempi
R.Polillo - Aprile 2015
8

9. Legge dell’esperienza passata
R.Polillo - Aprile 2015
9
L’esperienza passata influenza il modo con cui vediamo
una immagine
a b

10. Legge dell’esperienza passata: altri esempi
R.Polillo - Aprile 2015
10
a b

11. Ambiguità
R.Polillo - Aprile 2015
11

12. R.Polillo - Aprile 201512

13. R.Polillo - Aprile 201513

14. R.Polillo - Aprile 201514

15. Legge della vicinanza
15
Gli elementi del campo visivo che sono fra loro più vicini
tendono ad essere raccolti in unità
R.Polillo - Aprile 2015

16. 16 R.Polillo - Aprile 2015

17. Vicinanza: siete d'accordo?
R.Polillo - Aprile 2015
17

18. Da PowerPoint 2007
Qual è il problema?
R.Polillo - Aprile 2015
18

19. Legge della somiglianza
19
Gli elementi del campo visivo che sono tra loro simili tendono
ad essere raccolti in unità
R.Polillo - Aprile 2015

20. 20 R.Polillo - Aprile 2015

21. Siete d’accordo con questo uso dei colori?
R.Polillo - Aprile 2015
21

22. Siete d'accordo con questo uso delle
icone?
R.Polillo - Aprile 2015
22

23. Siete d'accordo con questo
design?
R.Polillo - Aprile 2015
23

24. Perché questa immagine non è comprensibile?
R.Polillo - Aprile 201524

25. R.Polillo - Aprile 201525
Per farla stare su una riga
Ma la leggiamo così

26. Che cosa non va in questa home
page?
R.Polillo - Aprile 2015
26

27. Legge della chiusura
27
Le linee delimitanti una superficie chiusa si percepiscono
come unità più facilmente di quelle che non si chiudono
(a parità di altre condizioni)
R.Polillo - Aprile 2015

28. Esempio: conflitto fra chiusura e vicinanza
28
a
b
R.Polillo - Aprile 2015

29. L’importanza dei riquadri: esempio (I )
29 R.Polillo - Aprile 2015

30. L’importanza dei riquadri: esempio (II)
30
R.Polillo - Aprile 2015

31. Chiusura: come migliorare un
menu
R.Polillo - Aprile 2015
31

32. Uso delle cornici nelle form
Con cornici
Senza cornici
R.Polillo - Aprile 2015
32

33. Chiusura: esempio
R.Polillo - Aprile 2015
33