1. 1
PROGETTARE LA GRAFICA
(I)
Corso di Interazione Uomo Macchina
AA 2012-2013
Roberto Polillo
Corso di laurea in Informatica
Università di Milano Bicocca
Dipartimento di Informatica, Sistemistica e Comunicazione
R.Polillo - Aprile 2013
2. Queste slides…
2
… 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 2013
3. Scopo di questa lezione
3
Discutere le problematiche i principi base del
design grafico delle interfacce, discutendo
numerosi esempi.
R.Polillo - Aprile 2013
4. Comunicazione visiva e interaction design
4
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
R.Polillo - Aprile 2013
5. Chiarire gli obbiettivi
5
La grafica di un sistema interattivo può avere obiettivi diversi,
che possono essere fra loro in conflitto:
R.Polillo - Aprile 2013
9. La grafica per la usabilità
9
“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 […]
Nel progettare l’informazione visiva si devono
considerare le seguenti caratteristiche:
Chiarezza Discriminabilità Concisione
Consistenza
Scopribilità Leggibilità Comprensibilità"
ISO 9241-12, “Presentation of information”
R.Polillo - Aprile 2013
13. Minimalismo vs massimalismo
13
"La perfezione si raggiunge non quando non
c'è più niente da aggiungere, ma quando
non c'è più niente da togliere"
Antoine de St-Exupery
R.Polillo - Aprile 2013
17. Il ruolo delle immagini
17
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)?
R.Polillo - Aprile 2013
24. Organizzazione delle pagine
24
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 ridondanze
Tenere presenti i principi della teoria della Gestalt
Usare il colore per migliorare la comprensione della pagina
R.Polillo - Aprile 2013
48. Percorsi visivi
48
Strutturare la pagina in modo da suggerire dei
percorsi visivi coerenti con i diversi casi
d'uso…
… ricordando quello che abbiamo visto
dall'analisi degli scanpath con gli strumenti di
eye tracking
R.Polillo - Aprile 2013