AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 1 E lo schermo? Errori comuni Posizionamento e dimensionamento arbitrario dei componenti posizionamento casuale e grandezza variabile dei bottoni, proporzionali alla lunghezza delle etichette bottoni grossi corrispondono a comandi più importanti di quelli piccoli? mancano gli allineamenti

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 2 Dimensione e aspetto delle icone non coordinato le icone e i bottoni sono presentati in array, quindi devono essere dimensionate in modo consistente per evitare i problemi di allineamento. spesso variano anche per layout, carattere tipografico, scala, punto di vista, densità delle immagini. E lo schermo? Errori comuni

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 3 Inconsistente presentazione dei controlli Questo problema è molto attenuato nello sviluppo di GUI per applicativi, ma molto urgente per il multimedia on e off line. Qui non esistono standard di ampia condivisione: il regno della creatività. E lo schermo? Errori comuni

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 4 Inconsistente linguaggio visivo Quando il linguaggio visivo non è applicato in modo consistente in tutto l’ambiente applicativo perde in forza comunicativa. Distacchi radicali dagli standard spesso producono effetti dannosi ben al di là del caso specifico. E lo schermo? Errori comuni

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 5 Grandezza e layout delle finestre variabili casuale il design programmato di finestre secondarie e di dialog box è raramente considerato. poiché compaiono sullo schermo isolatamente non sono considerati come parte di una serie. l’utente ne incontra decine se non centinaia al giorno, con grave danno funzionale ed estetico. E lo schermo? Errori comuni

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 6 E lo schermo? Errori comuni

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 7 La griglia canonica su schermo Creare dei layout sulla base di griglie I rapporti W/H più usati sono 4:3 e 16:9 Risoluzione 800 X 600 ancora lo standard Proibito lo scrolling orizzontale, ammesso quello verticale

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 8 La griglia canonica su schermo Ingombro esterno W max in orizzontale = 770 px H variabile secondo il rapporto scelto 4: : Testate le vostre pagine su

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 9 La griglia canonica su schermo Suddivisioni interne 1.Utlizzare il metodo dei rapporti costanti per definire il modulo-base orizzontale e verticale a.l’unità orizzontale ideale divide in 5-7 parti la larghezza della schermata. Può essere moltiplicata o suddivisa b.Il modulo orizzontale largo abbastanza per contenere la maggior parte delle labels di 1 parola. Almeno 3 volte l’unità verticale. c.L’unità verticale deve consentire una spaziatura appropriata tra controlli multi-linea e gruppi di controlli. Se le labels sono sopra invece che di fianco, l’unità verticale deve permetterlo

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 10 La griglia canonica su schermo Suddivisioni interne 2.Schizzare (anche a mano) un layout che si avvicina alle dimensioni, posizioni e orientamento degli elementi principali 3.Partire dalle pagine più affollate di informazioni: progettare quelle più scarne sarà più semplice 4.Identificare la grandezza minima (H e V) ammissibile è meglio che ri-calcolare il layout per grandezze (piccole) arbitrarie

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 11 Metodologia 5.Evitare l’impiego locale di moduli più piccoli del normale per accogliere una densità particolare di dati 6.Individuare elementi funzionali comuni che devono essere percepiti con chiarezza nelle diverse schermate 7.Le singole schermate devono assicurare la posizione consistente dei principali elementi strutturali (header, footer, nav_bar…)

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 12 La griglia canonica

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 13 Bibliografia Kevin Mullet, Darrel Sano, Designing Visual Interfaces, Prentice Hall, California (USA), 1995

AA 2004/05Prof. Paola Trapani – Progettare l’immagine coordinata - Introduzione 14 Casi studio esercitazione Il sito Web