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/05
1
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
E lo schermo?
Errori comuni
• 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.
AA 2004/05
2
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
E lo schermo?
Errori comuni
• 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à.
AA 2004/05
3
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
E lo schermo?
Errori comuni
• 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.
AA 2004/05
4
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
E lo schermo?
Errori comuni
• 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.
AA 2004/05
5
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
E lo schermo?
Errori comuni
AA 2004/05
6
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
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/05
7
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
La griglia canonica su schermo
Ingombro esterno
425
566
• W max in orizzontale = 770 px
• H variabile secondo il rapporto scelto
4:3
770
16:9
770
• Testate le vostre pagine su
http://www.wpdfd.com/restest.htm
AA 2004/05
8
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
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/05
9
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
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/05
10
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
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/05
11
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
La griglia canonica
AA 2004/05
12
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
Bibliografia
• Kevin Mullet, Darrel Sano, Designing
Visual Interfaces, Prentice Hall,
California (USA), 1995
AA 2004/05
13
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione
Casi studio esercitazione
• Il sito Web
AA 2004/05
14
Prof. Paola Trapani – Progettare l’immagine coordinata Introduzione