15. Ancora sulla grafica

Corso di Interazione Uomo Macchina
AA 2014-2015
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
ANCORA SULLA COMUNICAZIONE
VISIVA

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 2015
2

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
 E’ utile che anche gli informatici acquisiscano sensibilità
in quest’area.
3

Chiarire gli obbiettivi
4
La progettazione grafica di un sistema interattivo può avere
obiettivi diversi, che possono essere fra loro in conflitto:

Un esempio analogo

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 […]
8
Nel progettare l’informazione visiva si devono
considerare le seguenti caratteristiche:
Chiarezza Discriminabilità Concisione
Consistenza
Scopribilità Leggibilità Comprensibilità"
ISO 9241-12, “Presentation of information”

Organizzazione delle pagine
 Strutturare le pagine in modo facilmente
riconoscibile, semplice, ordinato, suggerendo
percorsi visivi coerenti con i casi d'uso
 Usare griglie logiche coerenti
 Curare gli allineamenti
 Evitare rumore visivo
 Evitare le ridondanze
 Tenere presenti i principi della teoria della Gestalt
 Usare il colore per migliorare la comprensione della pagina
 Coerenza, coerenza, coerenza….
9

Griglie logiche e allineamenti10

I disallineamenti
generano una
percezione di
complessità

Va bene?
14

L’ esempio precedente, ristrutturato
15

 Le slides che seguono mostrano il progressivo
miglioramento del layout di una pagina Web
16

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièièoièopii

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk
lòòkòlkòlkòkòkòkòòàò

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
AFDGH

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
Siamo partiti da
qui ….

Gkgkjhh hkjhkjh k
iuouoiu
iuoiupioupoiupo
IPOIéPOIoièiè
AFDGH
… e siamo
arrivati qui ….

Equilibrio33

da Rudolf Arnheim, Arte e percezione visiva, 1954

La “regola dei terzi” in fotografia
44

Ricerca visiva47

Dov’è
Waldo?
48

Meglio organizzare la tabella in ordine alfabetico per colonne

Facile da
scandire?
Lettura
orizzontale
o diagonale?

Percorsi visivi: siete d’accordo con questo
layout?
51

Esempio: Power Point
52

Power Point 2010
53
PowerPoint 2010,
Windows

Direzione54

Diagonali
55

1
2
3
4

Minimalismo vs
massimalismo
63

Minimalismo vs massimalismo
"La perfezione si raggiunge non quando non
c'è più niente da aggiungere, ma quando
non c'è più niente da togliere"
Antoine de St-Exupery
64

Minimalismo
65
www.google.com

Minimalismo
66
www.dropbox.com

Massimalismo
www.brigaderia.com.br
67

Massimalismo
68
www.glamour.it

Il ruolo delle immagini69

Il ruolo delle immagini
 A che cosa serve un'immagine nel contesto
della schermata complessiva?
 Come decorazione ?
 Come riempitivo?
 Per illustrare un contenuto?
 Per veicolare un messaggio?
 Per dirigere l'attenzione su un contenuto
(es.banner)?
70

Ruolo delle immagini: esempio
71
www.ibm.com

72

Il ruolo delle immagini: esempio
73

74
www.fiat.com

75

(segue)
76

Siete d'accordo con questa
sitemap?
77

E con questa?
(Sitemap dei siti della Regione Toscana)
78

E con questa?
79

Coerenza visiva80

Coerenza
 Utilizzare uno stile e segnali visivi coerenti
all’interno dell’applicazione e fra applicazioni
“della stessa categoria”
81

82
Link interni al sito Link esterni al sito Link alla home page
Search engine interna Banners pubblicitari Login /registrazione
Shopping cart Help Links ai prodotti
Bernard, 2001
Organizzazione abituale

Dialogo consistente
83 R.Polillo - Aprile 2015

Es. di incoerenza: menu che si trasformano

Stile dei messaggi coerente: esempio

15. Ancora sulla grafica

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to 15. Ancora sulla grafica

Similar to 15. Ancora sulla grafica (20)

More from Roberto Polillo

More from Roberto Polillo (14)

Recently uploaded

Recently uploaded (11)

15. Ancora sulla grafica