Post on 01-May-2015
Il disegno della presentazione
• Lo stile e il layout degli elementi sullo schermo
Semplicità, consistenza.
... sapere quando rompere le regole.
Il processo di produzione
AA 2004/05 Sistemi multimedialiDisegno della presentazione
2
Passi critici del disegno della presentazione
• Definire il tema visuale portante e lo stile
• Creare gli elementi per ogni schermata (background, finestre etc.)
• Creare gli elementi per il controllo (bottoni, icone, slide bar etc.)
Layout
AA 2004/05 Sistemi multimedialiDisegno della presentazione
4
Layout
• Aspetti visuali• Determina quanto le pagine siano
esteticamente piacevoli
• Aspetti funzionali• Determina anche quanto facili siano da
capire e da usare
AA 2004/05 Sistemi multimedialiDisegno della presentazione
5
Definire lo stile
AA 2004/05 Sistemi multimedialiDisegno della presentazione
6
Oggetti del layout
• Gli oggetti del layout hanno scopi diversi oltre che far parte di un arrangiamento visivo:• Oggetti strutturali
• Finestre, bordi e delimitatori
• Oggetti informativi• Parole, immagini che trasmettono contenuto
• Oggetti funzionali• Bottoni, controlli per l’interazione
AA 2004/05 Sistemi multimedialiDisegno della presentazione
7
Bottoni e controlli
• La parte tangibile dell’interfaccia• Gli oggetti con cui interagiamo
• Chiari e non ambigui
• Una opportunità per coinvolgere
• Se non si trova una immagine si usino le parole
• Ogni parte del video o regione di una immagine può essere un controllo, che non deve necessariamente essere un bottone.• Ma deve rivelarsi immediatamente.
AA 2004/05 Sistemi multimedialiDisegno della presentazione
8
Controlli parte del design
• Devono raccordarsi con lo stile e la composizione della pagina• Non necessariamente a se stanti o
bottoniere estranee
• Proporzionati all’importanza della funzione
AA 2004/05 Sistemi multimedialiDisegno della presentazione
9
AA 2004/05 Sistemi multimedialiDisegno della presentazione
10
Icone
• Immediatamente riconoscibile• Il significato ovvio ad uno sguardo.
• Internazionale• Mantenere il significato anche tra culture diverse.
• Scalabile• Funzionare anche in scala diversa
• Semplice• Figura piena e solida meglio di una immagine
AA 2004/05 Sistemi multimedialiDisegno della presentazione
11
AA 2004/05 Sistemi multimedialiDisegno della presentazione
12
Il colore
• Non usare troppi colori• Essere consistenti con i
colori scelti• Fig.1 ha colori coerenti e
fonti senza grazie• Fig.2 rosso su fondo blu
difficile lettura, blu incoerente con altri colori, times è troppo accurato
AA 2004/05 Sistemi multimedialiDisegno della presentazione
13
Troppo colore
AA 2004/05 Sistemi multimedialiDisegno della presentazione
14
Griglie
• La griglia è il sistema di riferimento che serve da guida per le posizioni degli elementi.
• Assicura che gli allineamenti siano accurati
• E consistenti nelle pagine multiple
• Fondamentali nelle pagine tipo testo
AA 2004/05 Sistemi multimedialiDisegno della presentazione
15
Posizionamento• Il posizionamento consistente è importante se
deve apparire su pagine diverse• Anche i piccoli spostamenti sono percepiti a video
più che non sulla carta stampata
• Ma una consistenza completa può produrre eccesso di uniformità e essere monotono.• Se una pagina contiene molti controlli devono
essere sempre nella stessa posizione• Se il controllo deve essere usato di frequente deve
essere nella stessa posizione• Se ci sono controlli simili allora devono essere
nella stessa posizione perché si possano distinguere dalla posizione relativa
AA 2004/05 Sistemi multimedialiDisegno della presentazione
16
Layout di pagina web
Layout inconsistente, meglio a blocchi
AA 2004/05 Sistemi multimedialiDisegno della presentazione
17
Layout di pagina web
Layout disordinato che distrae, meglio la pagina a destra
AA 2004/05 Sistemi multimedialiDisegno della presentazione
18
Lo spazio della pagina
AA 2004/05 Sistemi multimedialiDisegno della presentazione
19
Il vuoto della pagina
AA 2004/05 Sistemi multimedialiDisegno della presentazione
20
Org
aniz
zare
lo
spaz
io
AA 2004/05 Sistemi multimedialiDisegno della presentazione
21
AA 2004/05 Sistemi multimedialiDisegno della presentazione
22
Griglia della pagina
AA 2004/05 Sistemi multimedialiDisegno della presentazione
23
AA 2004/05 Sistemi multimedialiDisegno della presentazione
24
AA 2004/05 Sistemi multimedialiDisegno della presentazione
25
AA 2004/05 Sistemi multimedialiDisegno della presentazione
26
AA 2004/05 Sistemi multimedialiDisegno della presentazione
27
AA 2004/05 Sistemi multimedialiDisegno della presentazione
28
AA 2004/05 Sistemi multimedialiDisegno della presentazione
29
Indirizzi degli esempi
Siti costruiti con la griglia:
• Yale School of Medicine
• http://info.med.yale.edu/ysm/
• Information Technology Service, Medicine
• http://its.med.yale.edu/computing_services.html
• ITS-Med, Web design and development
• http://its.med.yale.edu/wdd/
• Yale-New Haven Hospital
• http://www.ynhh.org/
• Acute Coronary Syndromes
• http://info.med.yale.edu/intmed/cardio/acs/contents.html
AA 2004/05 Sistemi multimedialiDisegno della presentazione
30
AA 2004/05 Sistemi multimedialiDisegno della presentazione
31
Pagina a video
AA 2004/05 Sistemi multimedialiDisegno della presentazione
32
Dimensioni pagina
AA 2004/05 Sistemi multimedialiDisegno della presentazione
33
Emulazione della carta stampata
• Sindrome della piega
• Contenuto è invisibile
AA 2004/05 Sistemi multimedialiDisegno della presentazione
34
Scroll bars
AA 2004/05 Sistemi multimedialiDisegno della presentazione
35
Pagine vs schermi
• Si parla di pagine web, ma sono schermate.
• Non si ha una visione globale del documento come nella carta stampata.
• Uno schermo non contiene quasi mai una pagina stampata.
• Il design grafico deve essere diverso.• Meno libertà di layout.
AA 2004/05 Sistemi multimedialiDisegno della presentazione
36
Pila di schermate
• Ribaltare la disposizione delle informazioni sulla pagina.
• Le informazioni più importanti e i bottoni di navigazione in alto.
• Discendendo la pagina le notizie sono più leggere e la pagina più rarefatta.
AA 2004/05 Sistemi multimedialiDisegno della presentazione
37
AA 2004/05 Sistemi multimedialiDisegno della presentazione
38
AA 2004/05 Sistemi multimedialiDisegno della presentazione
39
AA 2004/05 Sistemi multimedialiDisegno della presentazione
40
AA 2004/05 Sistemi multimedialiDisegno della presentazione
41
AA 2004/05 Sistemi multimedialiDisegno della presentazione
42
I frames
• Non eccedere perché spesso creano problemi.• Difficile salvare le pagine e stamparle
• Meglio simularli con grafica
AA 2004/05 Sistemi multimedialiDisegno della presentazione
43
AA 2004/05 Sistemi multimedialiDisegno della presentazione
44
AA 2004/05 Sistemi multimedialiDisegno della presentazione
45
AA 2004/05 Sistemi multimedialiDisegno della presentazione
46
AA 2004/05 Sistemi multimedialiDisegno della presentazione
47
AA 2004/05 Sistemi multimedialiDisegno della presentazione
48
AA 2004/05 Sistemi multimedialiDisegno della presentazione
49
AA 2004/05 Sistemi multimedialiDisegno della presentazione
50
Principio
• Non disturbare il lettore che ha raggiunto il materiale cercato.
• Animazioni e banners disturbano la lettura.
• I banners sono spesso una necessità, ma vanno inseriti con grazia.
AA 2004/05 Sistemi multimedialiDisegno della presentazione
51
AA 2004/05 Sistemi multimedialiDisegno della presentazione
52
AA 2004/05 Sistemi multimedialiDisegno della presentazione
53
AA 2004/05 Sistemi multimedialiDisegno della presentazione
54
Sintesi
• Usare un criterio di complessità decrescente:• sulla pagina singola• sull’intero sito
• Suddividere l’informazione per schermate• Evidenziare la struttura del messaggio• Seguire il senso normale di lettura
• L’inizio delle pagine principali deve:• essere denso di links di navigazione e di contenuti• contenere una grafica che attiri l’attenzione
AA 2004/05 Sistemi multimedialiDisegno della presentazione
55
Sintesi - 2
• Le pagine interne devono essere più semplici:• lasciate che l’utente si concentri sul contenuto
• Ridurre in ogni modo il carico cognitivo dell’utente
• Evitare informazioni inutili o ridondanti
Unità stilistica
AA 2004/05 Sistemi multimedialiDisegno della presentazione
57
AA 2004/05 Sistemi multimedialiDisegno della presentazione
58
AA 2004/05 Sistemi multimedialiDisegno della presentazione
59
Obiettivo unità stilistica
• Unità stilistica e non uniformità
• Lo stile dipende da• Materiale pre-esistente e dalle decisioni del
disegner
• Il primo guida il secondo
• La diversità può essere una sfida ma essere interessante
AA 2004/05 Sistemi multimedialiDisegno della presentazione
60
AA 2004/05 Sistemi multimedialiDisegno della presentazione
61
AA 2004/05 Sistemi multimedialiDisegno della presentazione
62
Header della home page di MetaDesign
Header delle pagine interne
AA 2004/05 Sistemi multimedialiDisegno della presentazione
63
Un sistema visivo
• Una singola schermata che accomoda diversi elementi strutturali in un sistema visivo• Le immagini usate individualmente montate
nella pagina principale• Il colore della pagina principale usata come
colore chiave nelle pagine successive• Una famiglia di immagini gerarchiche (il
tutto/la parte)
AA 2004/05 Sistemi multimedialiDisegno della presentazione
64
AA 2004/05 Sistemi multimedialiDisegno della presentazione
65
AA 2004/05 Sistemi multimedialiDisegno della presentazione
66
AA 2004/05 Sistemi multimedialiDisegno della presentazione
67
AA 2004/05 Sistemi multimedialiDisegno della presentazione
68