12.Progettare la grafica (ii)

Corso di Interazione Uomo Macchina
AA 2012-2013
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
PROGETTARE LA GRAFICA (II)
R.Polillo - Aprile 2013
1

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

La teoria della Gestalt
3
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”

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

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 vicinanza
15
Gli elementi del campo visivo che sono fra loro più vicini
tendono ad essere raccolti in unità

Vicinanza: siete d'accordo?
17

Da PowerPoint 2007
Qual è il problema?
18

Legge della somiglianza
19
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 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)

Esempio: conflitto fra chiusura e vicinanza
28
a
b

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

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

Può essere migliorata?
36

A che cosa servono queste
icone?
37
aYahoo (2009)
British-airways (2003)

E queste?
38
iPhone 3GS

Uso dei colori
 Usate il colore (ma non solo il colore:
daltonismo) per veicolare dei significati
40

Uso dei colori: esempio
43
Windows Vista (2009)

Daltonismo: esempio
44

(segue)
45

Associazioni di colore
 Siate coerenti con le usuali associazioni di
significato ai diversi colori
 Attenzione: possono essere diverse a seconda
delle diverse culture!
46

STOP EXIT
PERICOLO !
AVANTI
47 R.Polillo - Aprile 2013

Contrasto di colore
 Il contrasto di colore può essere usato per
dirigere l'attenzione su particolari element
50
(MAC OS 8)

Colori "caldi" e "freddi"
COLORI CALDI
azione,
urgenza
richiesta di risposta,
vicinanza
COLORI FREDDI
lontananza,
tranquillità,
informazioni di stato
Nota: le associazioni di cui sopra vengono
normalmente date per scontate, ma l’evidenza
scientifica è dubbia
55

Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare,
i colori freddi a recedere
56

Quanti colori in una pagina?
 Usate il colore con parsimonia, evitando
l'effetto "music hall"
 Se i colori sono troppo, si crea rumore visivo, e
le associazioni colore/signifcato non
funzionano più…
59

Banner
Funzioni

Texture di sfondo
 Attenzione alle texture di sfondo, che possono
ridurre fortemente la leggibilità di testi e
controlli
63

Stile del design
 Definite lo stile complessivo del design e siate
coerente con esso (es.: brand image)
65

CocaCola tedesca nel 200367 R.Polillo - Aprile 2013

CocaCola USA nel 200368 R.Polillo - Aprile 2013

www.cocacola.com nel 200369 R.Polillo - Aprile 2013

In sintesi…
Una buona grafica dovrebbe:
 essere facilmente leggibile (testi, immagini) per tutti gli
utenti a cui è destinata
 aiutarci a comprendere chiaramente la struttura di una
pagina video, trasmettendoci una sensazione di
semplicità
 aiutarci ad associare facilmente contenuti fra loro
omogenei
 utilizzare codici visivi e convenzioni familiari agli
utenti a cui è destinata
 utilizzare codici visivi coerenti all’interno del
prodotto (e del suo “ecosistema”)
 non contenere elementi ridondanti o ambiguiR.Polillo - Aprile 2013
70

Linee guida
1. Usare vicinanza, somiglianza e chiusura per
organizzare visivamente gli elementi in base alla loro
funzione e significato
2. Evitare ridondanza, confusione e rumore visivo
3. Suggerire percorsi visivi coerenti con i casi d'uso
4. Usare forme e stili di raffigurazione fra loro coerenti e
contestualmente appropriate
5. Inserire gli elementi grafici in una o più griglie logiche
progettate in modo coerente per tutta l'applicazione
71

Website: esempi da discutere
 http://www.denisechandler.com/portfolio.html
 http://naldzgraphics.net/inspirations/50-
corporate-website-examples/
 http://www.webpagesthatsuck.com
72

12.Progettare la grafica (ii)

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Similar to 12.Progettare la grafica (ii)

Similar to 12.Progettare la grafica (ii) (20)

More from Roberto Polillo

More from Roberto Polillo (20)

Recently uploaded

Recently uploaded (6)

12.Progettare la grafica (ii)