15. Ancora sulla comunicazione visiva

Corso di Interazione Uomo MacchinaAA 2013-2014

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

ANCORA SULLA COMUNICAZIONE VISIVA

R.Polillo - Aprile 2014

1

Edizione 2

013-14


3

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.

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 2014

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 allineamenti

10



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 kiuouoiuiuoiupioupoiupo

IPOIéPOIoièièoièopii



IPOIéPOIoièiè

Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò



IPOIéPOIoièiè




IPOIéPOIoièiè


AFDGH




Siamo partiti da qui ….



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 dascandire?

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

diagonale asc

endente diagonale discendente

1

2

34

12

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

http://www.google.com/

Minimalismo


66

www.dropbox.com

http://www.dropbox.com/

Massimalismo

R.Polillo - Marzo 2014

www.brigaderia.com.br

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 consistente83


84 R.Polillo - Marzo 2014

Es. di incoerenza: menu che si trasformano


Stile dei messaggi coerente: esempio89


15. Ancora sulla comunicazione visiva

Education

Transcript of 15. Ancora sulla comunicazione visiva