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

http://www.rpolillo.it/

http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it

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.

R.Polillo - Aprile 2015

3

Chiarire gli obbiettivi


4

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

5 R.Polillo - Aprile 2015

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, 1954R.Polillo - Aprile 201541

La “regola dei terzi” in fotografia


44

Ricerca visiva47


Dov’è

Waldo?


48

Meglio organizzare la tabella in ordine alfabetico per colonneR.Polillo - Aprile 201549

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

34


12

3

4

Minimalismo vs

massimalismo63


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

http://www.google.com/

Minimalismo


66

www.dropbox.com

http://www.dropbox.com/

Massimalismo


www.brigaderia.com.br

67

http://www.brigaderia.com.br/

Massimalismo


68

www.glamour.it

http://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

http://www.ibm.com/



72

Il ruolo delle immagini: esempio


73



74

www.fiat.com

http://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


Es. di incoerenza: menu che si trasformano


Stile dei messaggi coerente: esempio


15. Ancora sulla grafica

Education

Transcript of 15. Ancora sulla grafica