12.Visione e progettazione grafica

Corso di Interazione Uomo MacchinaAA 2013-2014

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

VISIONE E PROGETTAZIONE GRAFICA

R.Polillo - Aprile 2014

1

Edizione 2

013-14

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

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 2014

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 2014

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 2014

32

Chiusura: esempio


33

34


35R.Polillo - Aprile 2014

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 2014



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 2014

CocaCola USA nel 200368 R.Polillo - Aprile 2014

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

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/

Education

12.Visione e progettazione grafica