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.

R.Polillo - Aprile 2014

2

La teoria della Gestalt3

“Nella percezione visiva, il tutto è più della somma delle sue parti”

Luci “in movimento”

R.Polillo - Aprile 2014

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

R.Polillo - Aprile 2014

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

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

R.Polillo - Aprile 2014

8

Legge della “buona forma”: altri esempi

Legge dell’esperienza passata

R.Polillo - Aprile 2014

9

L’esperienza passata influenza il modo con cui vediamo una immagine

a b

Legge dell’esperienza passata: altri esempi

R.Polillo - Aprile 2014

10

a b

Ambiguità

R.Polillo - Aprile 2014

11

R.Polillo - Aprile 201412

R.Polillo - Aprile 201413

R.Polillo - Aprile 201414

Legge della vicinanza15

Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità

R.Polillo - Aprile 2014

16 R.Polillo - Aprile 2014

Vicinanza: siete d'accordo?

R.Polillo - Aprile 2014

17

Da PowerPoint 2007

Qual è il problema?

R.Polillo - Aprile 2014

18

Legge della somiglianza19

Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità

R.Polillo - Aprile 2014

20 R.Polillo - Aprile 2014

Siete d’accordo con questo uso dei colori?

R.Polillo - Aprile 2014

21

Siete d'accordo con questo uso delle icone?

R.Polillo - Aprile 2014

22

Siete d'accordo con questo design?

R.Polillo - Aprile 2014

23

Perché questa immagine non è comprensibile?

R.Polillo - Aprile 201424

R.Polillo - Aprile 201425

Per farla stare su una riga

Ma la leggiamo così

Che cosa non va in questa home page?

R.Polillo - Aprile 2014

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 2014

Esempio: conflitto fra chiusura e vicinanza

28

a

b

R.Polillo - Aprile 2014

L’importanza dei riquadri: esempio (I )

29 R.Polillo - Aprile 2014

L’importanza dei riquadri: esempio (II)

30

R.Polillo - Aprile 2014

Chiusura: come migliorare un menu

R.Polillo - Aprile 2014

31

Uso delle cornici nelle form

Con cornici

Senza corniciR.Polillo - Aprile 2014

32

Chiusura: esempio

R.Polillo - Aprile 2014

33

34

R.Polillo - Aprile 2014

35R.Polillo - Aprile 2014

Può essere migliorata?

R.Polillo - Aprile 2014

36

R.Polillo - Aprile 2014

37

A che cosa servono queste icone?

aYahoo (2009)

British-airways (2003)

E queste?

R.Polillo - Aprile 2014

38

iPhone 3GS

R.Polillo - Aprile 201439

Uso dei colori

Usate il colore (ma non solo il colore: daltonismo) per veicolare dei significati

R.Polillo - Aprile 2014

40

41 R.Polillo - Aprile 2014

R.Polillo - Aprile 201442

Uso dei colori: esempio

R.Polillo - Aprile 2014

43

Windows Vista (2009)

Daltonismo: esempio

R.Polillo - Aprile 2014

44

(segue)

R.Polillo - Aprile 2014

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 2014

46

STOP EXIT

PERICOLO !

AVANTI47 R.Polillo - Aprile 2014

48 R.Polillo - Aprile 2014

49 R.Polillo - Aprile 2014

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)

51 R.Polillo - Aprile 2014

52 R.Polillo - Aprile 2014

53 R.Polillo - Aprile 2014

54 R.Polillo - Aprile 2014

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

Colori caldi e freddi

Si dice che i colori caldi tendano ad avanzare, i colori freddi a recedere

R.Polillo - Aprile 2014

56

R.Polillo - Aprile 201457

R.Polillo - Aprile 201458

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

Banner

Funzioni

R.Polillo - Aprile 201460

61

R.Polillo - Aprile 2014

R.Polillo - Aprile 201462

Texture di sfondo

Attenzione alle texture di sfondo, che possono ridurre fortemente la leggibilità di testi e controlli

R.Polillo - Aprile 2014

63

64 R.Polillo - Aprile 2014

Stile del design

Definite lo stile complessivo del design e siate coerente con esso (es.: brand image)

R.Polillo - Aprile 2014

65

66 R.Polillo - Aprile 2014

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

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 2014

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 2014

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 2014

72