Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità,...

transcript

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

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

• Aspetti visuali• Determina quanto le pagine siano

esteticamente piacevoli

• Aspetti funzionali• Determina anche quanto facili siano da

capire e da usare

Definire lo stile

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

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.

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

• 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

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

Troppo colore

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

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

Layout di pagina web

Layout inconsistente, meglio a blocchi

Layout di pagina web

Layout disordinato che distrae, meglio la pagina a destra

Lo spazio della pagina

Il vuoto della pagina

Griglia della pagina

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

Pagina a video

Dimensioni pagina

Emulazione della carta stampata

• Sindrome della piega

• Contenuto è invisibile

Scroll bars

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.

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.

I frames

• Non eccedere perché spesso creano problemi.• Difficile salvare le pagine e stamparle

• Meglio simularli con grafica

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.

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

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

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

Header della home page di MetaDesign

Header delle pagine interne

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)

Il disegno della presentazione Lo stile e il layout degli elementi sullo schermo Semplicità,...

Documents