Post on 29-Nov-2014
description
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
R.Polillo - Aprile 2014
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
R.Polillo - Aprile 2014
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
R.Polillo - Aprile 20146
Un esempio analogo
R.Polillo - Aprile 20147
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 […]
R.Polillo - Aprile 2014
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….
R.Polillo - Aprile 2014
9
Griglie logiche e allineamenti
10
R.Polillo - Aprile 2014
R.Polillo - Aprile 201411
R.Polillo - Aprile 201412
I disallineamenti generano una percezione di complessità
R.Polillo - Aprile 201413
Va bene?
R.Polillo - Aprile 2014
14
L’ esempio precedente, ristrutturato
R.Polillo - Aprile 2014
15
Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web
R.Polillo - Aprile 2014
16
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201417
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201418
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201419
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201420
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201421
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201422
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201423
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201424
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201425
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201426
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201427
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201428
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 201429
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 201430
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
Siamo partiti da qui ….
R.Polillo - Aprile 201431
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
… e siamo arrivati qui ….
R.Polillo - Aprile 201432
Equilibrio33
R.Polillo - Aprile 2014
da Rudolf Arnheim, Arte e percezione visiva, 1954
La “regola dei terzi” in fotografia
R.Polillo - Aprile 2014
44
R.Polillo - Aprile 201445
R.Polillo - Aprile 201446
Ricerca visiva47
R.Polillo - Aprile 2014
Dov’è Waldo?
R.Polillo - Aprile 2014
48
Meglio organizzare la tabella in ordine alfabetico per colonne
Facile dascandire?
Lettura orizzontale o diagonale?
Percorsi visivi: siete d’accordo con questo layout?
R.Polillo - Aprile 2014
51
Esempio: Power Point
R.Polillo - Aprile 2014
52
Power Point 2010
R.Polillo - Aprile 2014
53
PowerPoint 2010, Windows
Direzione54
R.Polillo - Aprile 2014
Diagonali
diagonale asc
endente diagonale discendente
1
2
34
12
3
4
Minimalismo vs massimalismo
63
R.Polillo - Aprile 2014
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
R.Polillo - Aprile 2014
64
Il ruolo delle immagini69
R.Polillo - Aprile 2014
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)?
R.Polillo - Aprile 2014
70
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
72
Il ruolo delle immagini: esempio
R.Polillo - Aprile 2014
73
Ruolo delle immagini: esempio
R.Polillo - Aprile 2014
75
(segue)
R.Polillo - Aprile 2014
76
Siete d'accordo con questa sitemap?
R.Polillo - Aprile 2014
77
E con questa?(Sitemap dei siti della Regione Toscana)
R.Polillo - Aprile 2014
78
E con questa?
R.Polillo - Aprile 2014
79
Coerenza visiva80
R.Polillo - Aprile 2014
Coerenza
Utilizzare uno stile e segnali visivi coerenti all’interno dell’applicazione e fra applicazioni “della stessa categoria”
R.Polillo - Aprile 2014
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
R.Polillo - Marzo 2014
Dialogo consistente83
R.Polillo - Marzo 2014
84 R.Polillo - Marzo 2014
85 R.Polillo - Marzo 2014
86 R.Polillo - Marzo 2014
87 R.Polillo - Marzo 2014
Es. di incoerenza: menu che si trasformano
88 R.Polillo - Marzo 2014
Stile dei messaggi coerente: esempio89
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014
R.Polillo - Marzo 2014