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.2012-13
Lezione del 23 aprile 2013
Vedi anche www.rpolillo.it
1. 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
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 2013
2
3. La teoria della Gestalt
3
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”
R.Polillo - Aprile 2013
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 2013
6. Legge della continuità di direzione
R.Polillo - Aprile 2013
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 2013
25. R.Polillo - Aprile 201325
Per farla stare su una riga
Ma la leggiamo così
26. Che cosa non va in questa home
page?
R.Polillo - Aprile 2013
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 2013
46. Associazioni di colore
Siate coerenti con le usuali associazioni di
significato ai diversi colori
Attenzione: possono essere diverse a seconda
delle diverse culture!
R.Polillo - Aprile 2013
46
50. Contrasto di colore
Il contrasto di colore può essere usato per
dirigere l'attenzione su particolari element
R.Polillo - Aprile 2013
50
(MAC OS 8)
55. 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
R.Polillo - Aprile 2013
55
56. Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare,
i colori freddi a recedere
R.Polillo - Aprile 2013
56
59. 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ù…
R.Polillo - Aprile 2013
59
63. Texture di sfondo
Attenzione alle texture di sfondo, che possono
ridurre fortemente la leggibilità di testi e
controlli
R.Polillo - Aprile 2013
63
70. 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
71. 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
R.Polillo - Aprile 2013
71
72. Website: esempi da discutere
http://www.denisechandler.com/portfolio.html
http://naldzgraphics.net/inspirations/50-
corporate-website-examples/
http://www.webpagesthatsuck.com
R.Polillo - Aprile 2013
72