Slides dalle lezioni del corso di Interazione Uomo Macchina per il corso di laurea in Informatica - Università di Milano Bicocca (prof.R.Polillo) - Lezione del 3 aprile 2014
Esperimenti_laboratorio di fisica per la scuola superiore
12.Visione e progettazione grafica
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
VISIONE E PROGETTAZIONE GRAFICA
R.Polillo - Aprile 2014
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 2014
2
3. La teoria della Gestalt
3
“Nella percezione visiva, il tutto è più della
somma delle sue parti”
Luci “in movimento”
R.Polillo - Aprile 2014
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 2014
6. Legge della continuità di direzione
R.Polillo - Aprile 2014
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 2014
25. R.Polillo - Aprile 201425
Per farla stare su una riga
Ma la leggiamo così
26. Che cosa non va in questa home
page?
R.Polillo - Aprile 2014
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 2014
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 2014
46
50. Contrasto di colore
Il contrasto di colore può essere usato per
dirigere l'attenzione su particolari element
R.Polillo - Aprile 2014
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 2014
55
56. Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare,
i colori freddi a recedere
R.Polillo - Aprile 2014
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 2014
59
63. Texture di sfondo
Attenzione alle texture di sfondo, che possono
ridurre fortemente la leggibilità di testi e
controlli
R.Polillo - Aprile 2014
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 2014
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 2014
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 2014
72