Download - 11. Progettare la grafica
![Page 1: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/1.jpg)
PROGETTARE LA GRAFICA
Corso di Interazione Uomo MacchinaAA 2009-2010
Roberto Polillo
Università di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
1
![Page 2: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/2.jpg)
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
![Page 3: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/3.jpg)
7
![Page 4: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/4.jpg)
Un esempio analogo
8
![Page 5: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/5.jpg)
Un esempio analogo
9
![Page 6: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/6.jpg)
Originalità
Gradevolezza
Emozione
Comprensibilità
Usabilità
10
![Page 7: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/7.jpg)
11
![Page 8: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/8.jpg)
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
![Page 9: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/9.jpg)
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
![Page 10: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/10.jpg)
14
![Page 11: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/11.jpg)
Le leggi della Gestalt
15
![Page 12: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/12.jpg)
GESTALT
“Nella percezione visiva, il tutto è più della somma delle sue parti”
Luci “in movimento”
16
![Page 13: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/13.jpg)
Salvador Dalì, 1935
“Face of Mae West which may be used as an apartement” 17
![Page 14: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/14.jpg)
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
![Page 15: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/15.jpg)
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
![Page 16: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/16.jpg)
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
![Page 17: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/17.jpg)
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
![Page 18: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/18.jpg)
Esempio: conflitto fra chiusura e vicinanza
a
b
22
![Page 19: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/19.jpg)
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
![Page 20: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/20.jpg)
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
![Page 21: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/21.jpg)
Legge della “buona forma”: altri esempi
25
![Page 22: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/22.jpg)
Legge dell’esperienza passataL’esperienza modella le nostre impressioni
a b
26
![Page 23: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/23.jpg)
Legge dell’esperienza passata:altri esempi
a b 27
![Page 24: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/24.jpg)
Leggi della gestalt:applicazione al design
delle interfacce grafiche
28
![Page 25: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/25.jpg)
Vicinanza
29
![Page 26: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/26.jpg)
L’ esempio precedente, ristrutturato
30
![Page 27: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/27.jpg)
Da PowerPoint 200731
![Page 28: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/28.jpg)
Perché questa immagine è poco comprensibile?32
![Page 29: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/29.jpg)
(segue)
33
![Page 30: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/30.jpg)
(segue)
34
![Page 31: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/31.jpg)
Somiglianza
a b cYahoo (2009)British-airways (2003) Vista (2009) 35
![Page 32: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/32.jpg)
36
![Page 33: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/33.jpg)
Vista (2009) 37
![Page 34: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/34.jpg)
iPhone OS version 3.0 on the iPhone 3GS 38
![Page 35: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/35.jpg)
39
![Page 36: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/36.jpg)
40
![Page 37: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/37.jpg)
41
![Page 38: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/38.jpg)
42
![Page 39: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/39.jpg)
Siete d’accordo con l’uso dei colori nella tabella seguente?
43
![Page 40: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/40.jpg)
(MAC OS 8)44
![Page 41: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/41.jpg)
45
![Page 42: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/42.jpg)
46
![Page 43: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/43.jpg)
47
![Page 44: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/44.jpg)
Chiusura
48
![Page 45: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/45.jpg)
L’importanza dei riquadri: esempio (I )
49
![Page 46: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/46.jpg)
L’importanza dei riquadri: esempio (II)
50
![Page 47: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/47.jpg)
51
![Page 48: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/48.jpg)
52
![Page 49: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/49.jpg)
53
![Page 50: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/50.jpg)
54
![Page 51: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/51.jpg)
Colore
55
![Page 52: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/52.jpg)
56
![Page 53: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/53.jpg)
57
![Page 54: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/54.jpg)
STOP EXIT
PERICOLO !
AVANTI58
![Page 55: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/55.jpg)
59
![Page 56: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/56.jpg)
60
![Page 57: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/57.jpg)
Percorsi visivi: siete d’accordo con questo layout?
61
![Page 58: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/58.jpg)
Percorsi visivi
62
![Page 59: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/59.jpg)
1
2 3
4 5
6 7 Yarbus, 1967
63
![Page 60: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/60.jpg)
64
![Page 61: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/61.jpg)
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
![Page 62: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/62.jpg)
RUMORE
66
![Page 63: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/63.jpg)
RUMORE
67
![Page 64: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/64.jpg)
L’informazione utile è solo questa
RUMORE
68
![Page 65: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/65.jpg)
OK, ma troppo minimalista?
69
![Page 66: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/66.jpg)
CONFUSIONE E RUMORE70
![Page 67: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/67.jpg)
CONTRASTO?
71
![Page 68: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/68.jpg)
72
![Page 69: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/69.jpg)
73
![Page 70: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/70.jpg)
CocaCola tedesca nel 2003 74
![Page 71: 11. Progettare la grafica](https://reader033.vdocuments.site/reader033/viewer/2022061121/546efb9faf79593c0d8b591a/html5/thumbnails/71.jpg)
CocaCola USA nel 2003 75