12.Progettare la grafica (ii)

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

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”


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



8

Legge della “buona forma”: altri esempi

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 2013

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 corniciR.Polillo - Aprile 2013

32

Chiusura: esempio


33

34


35R.Polillo - Aprile 2013

Può essere migliorata?


36


37

A che cosa servono queste icone?

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 !

AVANTI47 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


61


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

http://www.cocacola.com/

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


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

http://www.denisechandler.com/portfolio.html

http://www.denisechandler.com/portfolio.html




http://www.webpagesthatsuck.com/

12.Progettare la grafica (ii)

Education

Transcript of 12.Progettare la grafica (ii)