PROGETTARE LA GRAFICA

Corso di Interazione Uomo MacchinaAA 2009-2010Roberto Polillo

Università di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

1

Scopo di questa lezione

Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi.Seguirà una lezione specificamente dedicata agli aspetti tipografici

2

Temi

• Comunicazione visiva e interaction design

• Le leggi della Gestalt

• Esempi da discutere

3

Comunicazione visiva e interaction design

4

Comunicazione visiva e interaction design

• La comunicazione visiva ha un ruolo preponderante nell’interazione uomo-macchina: immagini, testo, animazioni, video

• Quindi la cura degli aspetti grafici nell’interaction design è di grande importanza

• Occorre considerare aspetti percettivi, psicologici, culturali

• Grande tradizione e cultura dell’immagine, ma poche indicazioni scientificamente dimostrabili

5

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