12.Visione e progettazione grafica (I)

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)

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

http://www.rpolillo.it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

La teoria della Gestalt3

“Nella percezione visiva, il tutto è più della

somma delle sue parti”

Luci “in movimento”

R.Polillo - Aprile 2015

Salvador Dalì, 1935

“Face of Mae West

which may be used as

an apartement”4 R.Polillo - Aprile 2015

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


Legge della continuità di direzione


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

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


Legge della “buona forma”: altri esempi


8

Legge dell’esperienza passata


9

L’esperienza passata influenza il modo con cui vediamo

una immagine

a b

Legge dell’esperienza passata: altri esempi


10

a b

Ambiguità


11

Legge della vicinanza15

Gli elementi del campo visivo che sono fra loro più vicini

tendono ad essere raccolti in unità


16 R.Polillo - Aprile 2015

Vicinanza: siete d'accordo?


17

Da PowerPoint 2007

Qual è il problema?


18

Legge della somiglianza19

Gli elementi del campo visivo che sono tra loro simili tendono

ad essere raccolti in unità


Siete d’accordo con questo uso dei colori?


21

Siete d'accordo con questo uso delle

icone?


22

Siete d'accordo con questo

design?


23

Perché questa immagine non è comprensibile?



Per farla stare su una riga

Ma la leggiamo così

Che cosa non va in questa home

page?


26

Legge della chiusura27

Le linee delimitanti una superficie chiusa si percepiscono

come unità più facilmente di quelle che non si chiudono

(a parità di altre condizioni)


Esempio: conflitto fra chiusura e vicinanza

28

a

b


L’importanza dei riquadri: esempio (I )


L’importanza dei riquadri: esempio (II)

30


Chiusura: come migliorare un

menu


31

Uso delle cornici nelle form

Con cornici

Senza cornici


32

Chiusura: esempio


33

12.Visione e progettazione grafica (I)

Education

Transcript of 12.Visione e progettazione grafica (I)