Download - 11. Progettare la grafica
PROGETTARE LA GRAFICA
Corso di Interazione Uomo MacchinaAA 2009-2010
Roberto Polillo
Università di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
1
Gli obiettivi della comunicazione visiva
• La grafica di un sistema interattivo può perseguire obiettivi diversi:– Comprensibilità– Usabilità– Gradevolezza– Capacità di suscitare emozioni– Originalità
• Occorre grande chiarezza nella definizione dei requisiti, perché ciascuno di questi obiettivi richiede tecniche e approcci differenti, che potrebbero essere fra loro in conflitto
6
7
Un esempio analogo
8
Un esempio analogo
9
Originalità
Gradevolezza
Emozione
Comprensibilità
Usabilità
10
11
La grafica per la usabilità
“La presentazione dell’informazione visiva dovrebbe abilitare l’utente ad eseguire i compiti percettivi (per esempio, la ricerca di informazioni sullo schermo) in modo efficace, efficiente e con soddisfazione”
ISO 9241-12, “Presentation of information”
12
La grafica per la usabilità (segue)
Nel progettare l’informazione visiva si devo considerare le seguenti caratteristiche:– Chiarezza– Discriminabilità– Concisione– Consistenza– Scopribilità– Leggibilità– Comprensibilità
ISO 9241-12, “Presentation of information”
13
14
Le leggi della Gestalt
15
GESTALT
“Nella percezione visiva, il tutto è più della somma delle sue parti”
Luci “in movimento”
16
Salvador Dalì, 1935
“Face of Mae West which may be used as an apartement” 17
Le leggi della gestalt (M.Wertheimer, 1923)
• Legge della vicinanza
• Legge della somiglianza
• Legge della chiusura
• Legge della continuità di direzione (o della “curva buona”)
• Legge della pregnanza (o della “buona forma”)
• Legge dell’esperienza passata
18
Legge della vicinanza
Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni)
19
Legge della somiglianza
Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità(a parità di altre condizioni)
20
Legge della chiusura
Le linee delimitanti una superficie chiusa si percepiscono come unità più facilmente di quelle che non si chiudono(a parità di altre condizioni)
21
Esempio: conflitto fra chiusura e vicinanza
a
b
22
Legge della continbuità di direzione (o della “curva buona”)
Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre
23
Legge della “buona forma”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
24
Legge della “buona forma”: altri esempi
25
Legge dell’esperienza passataL’esperienza modella le nostre impressioni
a b
26
Legge dell’esperienza passata:altri esempi
a b 27
Leggi della gestalt:applicazione al design
delle interfacce grafiche
28
Vicinanza
29
L’ esempio precedente, ristrutturato
30
Da PowerPoint 200731
Perché questa immagine è poco comprensibile?32
(segue)
33
(segue)
34
Somiglianza
a b cYahoo (2009)British-airways (2003) Vista (2009) 35
36
Vista (2009) 37
iPhone OS version 3.0 on the iPhone 3GS 38
39
40
41
42
Siete d’accordo con l’uso dei colori nella tabella seguente?
43
(MAC OS 8)44
45
46
47
Chiusura
48
L’importanza dei riquadri: esempio (I )
49
L’importanza dei riquadri: esempio (II)
50
51
52
53
54
Colore
55
56
57
STOP EXIT
PERICOLO !
AVANTI58
59
60
Percorsi visivi: siete d’accordo con questo layout?
61
Percorsi visivi
62
1
2 3
4 5
6 7 Yarbus, 1967
63
64
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
65
RUMORE
66
RUMORE
67
L’informazione utile è solo questa
RUMORE
68
OK, ma troppo minimalista?
69
CONFUSIONE E RUMORE70
CONTRASTO?
71
72
73
CocaCola tedesca nel 2003 74
CocaCola USA nel 2003 75
www.cocacola.com nel 2003 76