Post on 21-Nov-2014
description
Corso di Interazione Uomo MacchinaAA 2012-2013
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
PROGETTARE LA GRAFICA (II)
R.Polillo - Aprile 2013Edizi
one 2012-1
3
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.
R.Polillo - Aprile 2013
2
La teoria della Gestalt3
“Nella percezione visiva, il tutto è più della somma delle sue parti”
Luci “in movimento”
R.Polillo - Aprile 2013
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
R.Polillo - Aprile 2013
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
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
R.Polillo - Aprile 2013
8
Legge della “buona forma”: altri esempi
Legge dell’esperienza passata
R.Polillo - Aprile 2013
9
L’esperienza passata influenza il modo con cui vediamo una immagine
a b
Legge dell’esperienza passata: altri esempi
R.Polillo - Aprile 2013
10
a b
Ambiguità
R.Polillo - Aprile 2013
11
R.Polillo - Aprile 201312
R.Polillo - Aprile 201313
R.Polillo - Aprile 201314
Legge della vicinanza15
Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità
R.Polillo - Aprile 2013
16 R.Polillo - Aprile 2013
Vicinanza: siete d'accordo?
R.Polillo - Aprile 2013
17
Da PowerPoint 2007
Qual è il problema?
R.Polillo - Aprile 2013
18
Legge della somiglianza19
Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità
R.Polillo - Aprile 2013
20 R.Polillo - Aprile 2013
Siete d’accordo con questo uso dei colori?
R.Polillo - Aprile 2013
21
Siete d'accordo con questo uso delle icone?
R.Polillo - Aprile 2013
22
Siete d'accordo con questo design?
R.Polillo - Aprile 2013
23
Perché questa immagine non è comprensibile?
R.Polillo - Aprile 201324
R.Polillo - Aprile 201325
Per farla stare su una riga
Ma la leggiamo così
Che cosa non va in questa home page?
R.Polillo - Aprile 2013
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)
R.Polillo - Aprile 2013
Esempio: conflitto fra chiusura e vicinanza
28
a
b
R.Polillo - Aprile 2013
L’importanza dei riquadri: esempio (I )
29 R.Polillo - Aprile 2013
L’importanza dei riquadri: esempio (II)
30
R.Polillo - Aprile 2013
Chiusura: come migliorare un menu
R.Polillo - Aprile 2013
31
Uso delle cornici nelle form
Con cornici
Senza corniciR.Polillo - Aprile 2013
32
Chiusura: esempio
R.Polillo - Aprile 2013
33
34
R.Polillo - Aprile 2013
35R.Polillo - Aprile 2013
Può essere migliorata?
R.Polillo - Aprile 2013
36
R.Polillo - Aprile 2013
37
A che cosa servono queste icone?
aYahoo (2009)
British-airways (2003)
E queste?
R.Polillo - Aprile 2013
38
iPhone 3GS
R.Polillo - Aprile 201339
Uso dei colori
Usate il colore (ma non solo il colore: daltonismo) per veicolare dei significati
R.Polillo - Aprile 2013
40
41 R.Polillo - Aprile 2013
R.Polillo - Aprile 201342
Uso dei colori: esempio
R.Polillo - Aprile 2013
43
Windows Vista (2009)
Daltonismo: esempio
R.Polillo - Aprile 2013
44
(segue)
R.Polillo - Aprile 2013
45
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
STOP EXIT
PERICOLO !
AVANTI47 R.Polillo - Aprile 2013
48 R.Polillo - Aprile 2013
49 R.Polillo - Aprile 2013
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)
51 R.Polillo - Aprile 2013
52 R.Polillo - Aprile 2013
53 R.Polillo - Aprile 2013
54 R.Polillo - Aprile 2013
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
Colori caldi e freddi
Si dice che i colori caldi tendano ad avanzare, i colori freddi a recedere
R.Polillo - Aprile 2013
56
R.Polillo - Aprile 201357
R.Polillo - Aprile 201358
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
Banner
Funzioni
R.Polillo - Aprile 201360
61
R.Polillo - Aprile 2013
R.Polillo - Aprile 201362
Texture di sfondo
Attenzione alle texture di sfondo, che possono ridurre fortemente la leggibilità di testi e controlli
R.Polillo - Aprile 2013
63
64 R.Polillo - Aprile 2013
Stile del design
Definite lo stile complessivo del design e siate coerente con esso (es.: brand image)
R.Polillo - Aprile 2013
65
66 R.Polillo - Aprile 2013
CocaCola tedesca nel 200367 R.Polillo - Aprile 2013
CocaCola USA nel 200368 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 ambigui
R.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
R.Polillo - Aprile 2013
71
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