11.Progettare la grafica (i)

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

http://www.rpolillo.it/

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

Scopo di questa lezione3

Discutere le problematiche i principi base del design grafico delle interfacce, discutendo numerosi esempi.



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


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


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 […]


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?


10

E con questa?(Sitemap dei siti della Regione Toscana)


11

E con questa?


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


13

Minimalismo


14

www.google.com

http://www.google.com/

Minimalismo


15

www.dropbox.com

http://www.dropbox.com/

Massimalismo


16

www.glamour.it

http://www.glamour.it/

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


17

Ruolo delle immagini: esempio


18

www.ibm.com

http://www.ibm.com/



19

Il ruolo delle immagini: esempio


20



21

www.fiat.com

http://www.fiat.com/



22

(segue)


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


24

Griglie e allineamenti: esempio


25


I disallineamenti generano una percezione di complessità

Griglie e allineamenti

Le slides che seguono mostrano il progressivo miglioramento del layout di una pagina Web


28

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 ….


Va bene?


45

L’ esempio precedente, ristrutturato


46

Come migliorarla?


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


48

Dov’è Waldo?


49

Percorsi visivi: siete d’accordo con questo layout?


50

Percorsi visivi: siete d’accordo con questo layout?


51

Questo è migliore?


52

PowerPoint 2008 e 2011, Mac

E questo?


53

PowerPoint 2010, Windows

11.Progettare la grafica (i)

Education

Transcript of 11.Progettare la grafica (i)