Il disegno della presentazione Semplicità, consistenza.... sapere quando rompere le regole. Lo stile e il layout degli elementi sullo schermo 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.) Il processo di produzione 2 Layout Layout Aspetti visuali Determina quanto le pagine siano esteticamente piacevoli Aspetti funzionali Determina anche quanto facili siano da capire e da usare 4 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 5 6 1
Bottoni e controlli Controlli parte del design 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. Devono raccordarsi con lo stile e la composizione della pagina Non necessariamente a se stanti o bottoniere estranee Proporzionati all importanza della funzione 7 8 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 9 10 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 11 12 2
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 13 14 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 15 Layout di pagina web Layout inconsistente, meglio a blocchi 16 Layout di pagina web Lo spazio della pagina Layout disordinato che distrae, meglio la pagina a destra 17 18 3
Il vuoto della pagina Organizzare lo spazio 19 20 Griglia della pagina 21 22 23 24 4
25 26 27 28 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 29 30 5
Pagina a video Dimensioni pagina 31 32 Emulazione della carta stampata Scroll bars Sindrome della piega Contenuto è invisibile 33 34 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. 35 36 6
37 38 39 40 I frames Non eccedere perché spesso creano problemi. Difficile salvare le pagine e stamparle Meglio simularli con grafica 41 42 7
43 44 45 46 47 48 8
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. 49 50 51 52 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 53 54 9
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 55 57 58 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 59 60 10
Header della home page di MetaDesign Header delle pagine interne 61 62 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) 63 64 65 66 11
67 68 12