Post on 29-Oct-2014
description
Corso di Interazione Uomo MacchinaAA 2010-2011
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
PROGETTARE LA GRAFICA1
Edizione 2
010-11
R.Polillo - Ottobre 2010
Chiarire gli obbiettivi
R.Polillo - Ottobre 2010
4
La grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto:
5 R.Polillo - Ottobre 2010
6 R.Polillo - Ottobre 2010
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”
R.Polillo - Ottobre 2010
7
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”
R.Polillo - Ottobre 2010
8
9 R.Polillo - Ottobre 2010
La teoria della Gestalt10
“Nella percezione visiva, il tutto è più della somma delle sue parti”
Luci “in movimento”
R.Polillo - Ottobre 2010
Salvador Dalì, 1935
“Face of Mae West which may be used as an apartement”11 R.Polillo - Ottobre 2010
Le leggi della gestalt (M.Wertheimer, 1923)
12
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
R.Polillo - Ottobre 2010
Legge della vicinanza13
Gli elementi del campo visivo che sono fra loro più vicini tendono ad essere raccolti in unità (a parità di altre condizioni)
R.Polillo - Ottobre 2010
14 R.Polillo - Ottobre 2010
Legge della somiglianza15
Gli elementi del campo visivo che sono tra loro simili tendono ad essere raccolti in unità(a parità di altre condizioni)
R.Polillo - Ottobre 2010
16 R.Polillo - Ottobre 2010
Legge della chiusura17
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 - Ottobre 2010
Esempio: conflitto fra chiusura e vicinanza
18
a
b
R.Polillo - Ottobre 2010
Legge della continuità di direzione (o della “curva buona”)
R.Polillo - Ottobre 2010
19
Quelle parti di una figura che formano una “curva buona” o che vanno nella stessa direzione si costituiscono in unità più facilmente delle altre
Legge della “buona forma”20
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 - Ottobre 2010
R.Polillo - Ottobre 2010
21
Legge della “buona forma”: altri esempi
Legge dell’esperienza passata
R.Polillo - Ottobre 2010
22
L’esperienza modella le nostre impressioni
a b
Legge dell’esperienza passata: altri esempi
R.Polillo - Ottobre 2010
23
a b
Vicinanza
R.Polillo - Ottobre 2010
24
L’ esempio precedente, ristrutturato
R.Polillo - Ottobre 2010
25
Da PowerPoint 2007
R.Polillo - Ottobre 2010
26
Perché questa immagine è poco comprensibile?
R.Polillo - Ottobre 2010
27
R.Polillo - Ottobre 2010
28
Per farla stare su una riga
Ma la leggiamo così
R.Polillo - Ottobre 2010
29
Somiglianza
a cYahoo (2009)
British-airways (2003)
Vista (2009)
30 R.Polillo - Ottobre 2010
Windows Vista (2009)
R.Polillo - Ottobre 2010
31
iPhone OS version 3.0 on the iPhone 3GS
R.Polillo - Ottobre 2010
32
R.Polillo - Ottobre 2010
33
R.Polillo - Ottobre 2010
34
R.Polillo - Ottobre 2010
35
R.Polillo - Ottobre 2010
36
Siete d’accordo con l’uso dei colori nella tabella seguente?
R.Polillo - Ottobre 2010
37
(MAC OS 8)
R.Polillo - Ottobre 2010
38
39 R.Polillo - Ottobre 2010
40 R.Polillo - Ottobre 2010
41 R.Polillo - Ottobre 2010
Chiusura
R.Polillo - Ottobre 2010
42
L’importanza dei riquadri: esempio (I )
43 R.Polillo - Ottobre 2010
L’importanza dei riquadri: esempio (II)
44
R.Polillo - Ottobre 2010
45 R.Polillo - Ottobre 2010
46 R.Polillo - Ottobre 2010
R.Polillo - Ottobre 201047
48
R.Polillo - Ottobre 2010
Colore49
R.Polillo - Ottobre 2010
50 R.Polillo - Ottobre 2010
51 R.Polillo - Ottobre 2010
STOP EXIT
PERICOLO !
AVANTI52 R.Polillo - Ottobre 2010
53 R.Polillo - Ottobre 2010
54 R.Polillo - Ottobre 2010
Percorsi visivi
R.Polillo - Ottobre 2010
55
1
2 3
4 5
6 7 Yarbus, 1967
R.Polillo - Ottobre 2010
56
57 R.Polillo - Ottobre 2010
Heat-map di tre pagine web (da J.Nielsen, www.useit.com/alertbox/reading_pattern)
Heat map58
R.Polillo - Ottobre 2010
Percorsi visivi: siete d’accordo con questo layout?
59
R.Polillo - Ottobre 2010
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 - Ottobre 2010
60
61 R.Polillo - Ottobre 2010
62 R.Polillo - Ottobre 2010
63 R.Polillo - Ottobre 2010
64 R.Polillo - Ottobre 2010
65 R.Polillo - Ottobre 2010
66 R.Polillo - Ottobre 2010
67 R.Polillo - Ottobre 2010
68 R.Polillo - Ottobre 2010
CocaCola tedesca nel 200369 R.Polillo - Ottobre 2010
CocaCola USA nel 200370 R.Polillo - Ottobre 2010
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.
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.