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/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 5 Definire lo stile

AA 2004/05Sistemi multimediali Disegno 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 linterazione

AA 2004/05Sistemi multimediali Disegno della presentazione 7 Bottoni e controlli La parte tangibile dellinterfaccia 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/05Sistemi multimediali Disegno 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 allimportanza della funzione

AA 2004/05Sistemi multimediali Disegno della presentazione 9

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 11

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 13 Troppo colore

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 16 Layout di pagina web Layout inconsistente, meglio a blocchi

AA 2004/05Sistemi multimediali Disegno della presentazione 17 Layout di pagina web Layout disordinato che distrae, meglio la pagina a destra

AA 2004/05Sistemi multimediali Disegno della presentazione 18 Lo spazio della pagina

AA 2004/05Sistemi multimediali Disegno della presentazione 19 Il vuoto della pagina

AA 2004/05Sistemi multimediali Disegno della presentazione 20 Organizzare lo spazio

AA 2004/05Sistemi multimediali Disegno della presentazione 21

AA 2004/05Sistemi multimediali Disegno della presentazione 22 Griglia della pagina

AA 2004/05Sistemi multimediali Disegno della presentazione 23

AA 2004/05Sistemi multimediali Disegno della presentazione 24

AA 2004/05Sistemi multimediali Disegno della presentazione 25

AA 2004/05Sistemi multimediali Disegno della presentazione 26

AA 2004/05Sistemi multimediali Disegno della presentazione 27

AA 2004/05Sistemi multimediali Disegno della presentazione 28

AA 2004/05Sistemi multimediali Disegno della presentazione 29 Indirizzi degli esempi Siti costruiti con la griglia: Yale School of Medicine Information Technology Service, Medicine ITS-Med, Web design and development Yale-New Haven Hospital Acute Coronary Syndromes

AA 2004/05Sistemi multimediali Disegno della presentazione 30

AA 2004/05Sistemi multimediali Disegno della presentazione 31 Pagina a video

AA 2004/05Sistemi multimediali Disegno della presentazione 32 Dimensioni pagina

AA 2004/05Sistemi multimediali Disegno della presentazione 33 Emulazione della carta stampata Sindrome della piega Contenuto è invisibile

AA 2004/05Sistemi multimediali Disegno della presentazione 34 Scroll bars

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 37

AA 2004/05Sistemi multimediali Disegno della presentazione 38

AA 2004/05Sistemi multimediali Disegno della presentazione 39

AA 2004/05Sistemi multimediali Disegno della presentazione 40

AA 2004/05Sistemi multimediali Disegno della presentazione 41

AA 2004/05Sistemi multimediali Disegno della presentazione 42 I frames Non eccedere perché spesso creano problemi. Difficile salvare le pagine e stamparle Meglio simularli con grafica

AA 2004/05Sistemi multimediali Disegno della presentazione 43

AA 2004/05Sistemi multimediali Disegno della presentazione 44

AA 2004/05Sistemi multimediali Disegno della presentazione 45

AA 2004/05Sistemi multimediali Disegno della presentazione 46

AA 2004/05Sistemi multimediali Disegno della presentazione 47

AA 2004/05Sistemi multimediali Disegno della presentazione 48

AA 2004/05Sistemi multimediali Disegno della presentazione 49

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 51

AA 2004/05Sistemi multimediali Disegno della presentazione 52

AA 2004/05Sistemi multimediali Disegno della presentazione 53

AA 2004/05Sistemi multimediali Disegno della presentazione 54 Sintesi Usare un criterio di complessità decrescente: sulla pagina singola sullintero sito Suddividere linformazione per schermate Evidenziare la struttura del messaggio Seguire il senso normale di lettura Linizio delle pagine principali deve: essere denso di links di navigazione e di contenuti contenere una grafica che attiri lattenzione

AA 2004/05Sistemi multimediali Disegno della presentazione 55 Sintesi - 2 Le pagine interne devono essere più semplici: lasciate che lutente si concentri sul contenuto Ridurre in ogni modo il carico cognitivo dellutente Evitare informazioni inutili o ridondanti

Unità stilistica

AA 2004/05Sistemi multimediali Disegno della presentazione 57

AA 2004/05Sistemi multimediali Disegno della presentazione 58

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 60

AA 2004/05Sistemi multimediali Disegno della presentazione 61

AA 2004/05Sistemi multimediali Disegno della presentazione 62 Header della home page di MetaDesign Header delle pagine interne

AA 2004/05Sistemi multimediali Disegno 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/05Sistemi multimediali Disegno della presentazione 64

AA 2004/05Sistemi multimediali Disegno della presentazione 65

AA 2004/05Sistemi multimediali Disegno della presentazione 66

AA 2004/05Sistemi multimediali Disegno della presentazione 67

AA 2004/05Sistemi multimediali Disegno della presentazione 68