Post on 29-Nov-2014
description
Corso di Interazione Uomo MacchinaAA 2012-2013
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
PROGETTARE LA GRAFICA (I)
R.Polillo - Aprile 2013Edizi
one 2012-1
3
1
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 2013
2
Scopo di questa lezione3
Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi.
R.Polillo - Aprile 2013
R.Polillo - Aprile 2013
4
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
Chiarire gli obbiettivi
R.Polillo - Aprile 2013
5
La grafica di un sistema interattivo può avere obiettivi diversi, che possono essere fra loro in conflitto:
6 R.Polillo - Aprile 2013
Un esempio analogo
R.Polillo - Aprile 20137
Un esempio analogo
R.Polillo - Aprile 20138
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 2013
9
Nel progettare l’informazione visiva si devono considerare le seguenti caratteristiche:
Chiarezza Discriminabilità Concisione Consistenza
Scopribilità Leggibilità Comprensibilità"
ISO 9241-12, “Presentation of information”
Siete d'accordo con questa sitemap?
R.Polillo - Aprile 2013
10
E con questa?(Sitemap dei siti della Regione Toscana)
R.Polillo - Aprile 2013
11
E con questa?
R.Polillo - Aprile 2013
12
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 2013
13
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 2013
17
Ruolo delle immagini: esempio
R.Polillo - Aprile 2013
19
Il ruolo delle immagini: esempio
R.Polillo - Aprile 2013
20
Ruolo delle immagini: esempio
R.Polillo - Aprile 2013
22
(segue)
R.Polillo - Aprile 2013
23
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 ridondanze Tenere presenti i principi della teoria della Gestalt Usare il colore per migliorare la comprensione della
pagina
R.Polillo - Aprile 2013
24
Griglie e allineamenti: esempio
R.Polillo - Aprile 2013
25
R.Polillo - Aprile 201326
I disallineamenti generano una percezione di complessità
R.Polillo - Aprile 201327
Griglie e allineamenti
Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web
R.Polillo - Aprile 2013
28
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201329
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201330
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201331
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201332
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
R.Polillo - Aprile 201333
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201334
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201335
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201336
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201337
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201338
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201339
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
R.Polillo - Aprile 201340
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 201341
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièiè
Oièopii kòkòkòlkk lòòkòlkòlkòkòkòkòòàò
AFDGH
R.Polillo - Aprile 201342
Gkgkjhh hkjhkjh kiuouoiuiuoiupioupoiupo
IPOIéPOIoièièoièopii
Siamo partiti da qui ….
R.Polillo - Aprile 201343
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 201344
Va bene?
R.Polillo - Aprile 2013
45
L’ esempio precedente, ristrutturato
R.Polillo - Aprile 2013
46
Come migliorarla?
R.Polillo - Aprile 2013
47
Percorsi visivi
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
48
Dov’è Waldo?
R.Polillo - Aprile 2013
49
Percorsi visivi: siete d’accordo con questo layout?
R.Polillo - Aprile 2013
50
Percorsi visivi: siete d’accordo con questo layout?
R.Polillo - Aprile 2013
51
Questo è migliore?
R.Polillo - Aprile 2013
52
PowerPoint 2008 e 2011, Mac
E questo?
R.Polillo - Aprile 2013
53
PowerPoint 2010, Windows