GRAFICA DEL WEB
fonte prof. Polillo
SISR-GRAFICA
-1-
Creatività vs usabilità
“Fancy media on websites typically fails user
testing. Simple text and clear photos not only
communicate better with users, they also
enhance users' feeling of control and thus
support the Web's mission as an instant
gratification environment.”
Jakob Nielsen
SISR-GRAFICA
-2-
Obiettivi
•Chiarezza (clarity): il contenuto informativo è veicolato velocemente
e accuratamente;
•Discriminabilità (discriminability): l’informazione visualizzata può
essere distinta con accuratezza;
•Concisione (conciseness): agli utenti viene fornita solo
l’informazione necessaria per eseguire il compito;
•Consistenza (consistency): la medesima informazione è presentata
nello stesso modo all’interno del sistema, conformemente alle
aspettative dell’utente;
•Scopribilità (detectability): l’attenzione dell’utente è diretta verso
l’informazione necessaria;
•Comprensibilità (comprehensibility): il significato è chiaramente
comprensibile, non ambiguo, interpretabile e riconoscibile.
•Leggibilità (legibility): l’informazione è facile da leggere;
SISR-GRAFICA
Tipografia: espressività o leggibilità?
Il primo obiettivo nell'uso dei font è
massimizzare la leggibilità
e la comprensibilità
SISR-GRAFICA
-4-
Leggibilità?
L’oggetto, certamente
apprezzabile dal punto di vista
estetico, per quanto riguarda
l’usabilità è tutto sbagliato.
I caratteri sono poco distinguibili
uno dall’altro,
le righe di testo sono troppo
brevi in rapporto alla dimensione
dei caratteri,
gli elementi decorativi (le lettere
iniziali di ogni frase e i decori di
fine frase) creano un “rumore”
eccessivo ….
SISR-GRAFICA
-5-
Lettura su carta e su video
 Il testo a video (72 dotsperinch) è di qualità molto inferiore al testo
a stampa (1200-2400 dpi)
 Alcuni caratteri vengono resi male sul video, a causa dell’effetto
sega causato dalla rappresentazione a pixel
 Leggiamo più lentamente e più faticosamente sul video che sulla
carta
Uno studio del 1987 (ma la tecnologia migliora velocemente…): la
lettura sullo schermo è del 25% circa più lenta della lettura sulla
carta (poiché le fissazioni (riconoscimento visivo) sono il 15% in più
per riga)
SISR-GRAFICA
-6-
Esempio
Ingrandimento della lettera
“g” del font Bembo in
corpo 10 pt,
riprodotta a diverse
risoluzioni: 72 dpi, 150 dpi,
300 dpi, 1200 dpi
SISR-GRAFICA
TIPOGRAFIA
SISR-GRAFICA
-8-
Tipi di font
•I font si suddividono in due categorie principali: graziati o senza grazie.
•I caratteri graziati (o serif) hanno particolari terminazioni dei tratti delle lettere,
chiamati appunto grazie.
L'uso delle grazie deriva dai caratteri lapidari romani, dove era molto difficile
scalpellare nel marmo angoli di novanta gradi necessari a terminare le aste. Le
grazie servivano allora a evitare (o nascondere) le sbrecciature.
•I font senza grazie sono chiamati anche bastoni, o sans-serif.
SISR-GRAFICA
Tipi di font
con grazie (serif)
Times New Roman, corpo 28
Normale, neretto, corsivo, sottolineato
senza grazie (sans serif)
spaziatura proporzionale
Arial, corpo 28
Normale, neretto, corsivo, sottolineato
spaziatura fissa
Courier, corpo 28
Normale, neretto, corsivo, sottolineato
SISR-GRAFICA
- 10 -
Con o senza grazie?
Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie hanno
una leggibilità leggermente superiore rispetto a quelli senza grazie. Pertanto,
sulla carta, sarebbe meglio usare fonti con le grazie per testi lunghi, che
altrimenti potrebbero risultare di lettura faticosa. Fonti senza grazie sono più
leggibili in testi brevi o titoli. Ma sul video?
Alcuni studi hanno mostrato che, sulla carta, i caratteri con le grazie
hanno una leggibilità leggermente superiore rispetto a quelli senza
grazie. Pertanto, sulla carta, sarebbe meglio usare fonti con le grazie
per testi lunghi, che altrimenti potrebbero risultare di lettura faticosa.
Fonti senza grazie sono più leggibili in testi brevi o titoli. Ma sul
video?
SISR-GRAFICA
- 11 -
Font più diffusi
SISR-GRAFICA
Font più diffusi
•Il Times New Roman è probabilmente il font graziato più usato sulla carta stampata. Esso fu progettato da Stanley
Morrison per conto del giornale londinese The Times, che lo adottò nel 1932 in sostituzione del font che il giornale
usava in precedenza, chiamato Times Old Roman (da cui il nome). Aveva lo scopo di essere ben leggibile anche con
caratteri di piccole dimensioni stampati sulla carta di cattiva qualità usata durante la Grande Depressione degli anni
‘30. Il disegno dei caratteri, alti e stretti, era specificamente concepito per ridurre i fastidiosi spazi bianchi derivanti
dall’allineamento “a pacchetto” dei testi nelle colonne del giornale (Figura 3b). Il Times New Roman fu usato dal Times
per quaranta anni. Dal 1972 fu sostituito più volte, sempre però con font di aspetto simile.
•Il Georgia è uno screen-font graziato, disegnato da Matthew Carter per conto della Microsoft nel 1993. Fu progettato
per essere leggibile sui monitor anche in corpo piccolo, ed è molto simile al Times New Roman, rispetto al quale ha
tuttavia diversi miglioramenti: le linee che compongono le lettere sono un po’ più spesse, e il loro spessore varia meno
all’interno di uno stesso carattere. A parità di dimensione del font, le lettere sono un po’ più larghe e alte; l’altezza della
x è lievemente più grande; le grazie sono più larghe e con tratti meno obliqui. Non ci sono legature e le lettere sono più
“verticalizzate”, per permettere una migliore resa sul monitor (Figura 7).
•L’Arial è un font senza grazie adatto sia ai monitor sia alla carta stampata. Fu progettato nel 1982 ispirata a Helvetica,
un font disegnato nel 1957 che ebbe grande successo nel mondo della grafica e del design negli anni ‘70. Arial fu
usato da Microsoft in Windows 3.1, ed è oggi molto diffuso sul Web.
•Il Verdana è uno screen-font senza grazie, quasi uno standard per i testi su monitor. Progettato da Matthew Carter
per la Microsoft per massimizzare la leggibilità anche in corpo piccolo (fino a 4 pt) e su monitor a bassa risoluzione, fu
rilasciato nel 1996 per Windows 95. Esso possiede caratteri larghi e ben spaziati, minuscole alte e ben leggibili, ed ha
il vantaggio di differenziare bene i caratteri simili, come per esempio la i maiuscola (che per questo ha le grazie), la
elle minuscola e la cifra 1, che in altri font utilizzano lo stesso glifo (unità grafica).
SISR-Grafica
Prove di leggibilità su video
Arial 10
Arial 12
(senza grazie)
Times New Roman 10
Times New Roman 12
(con grazie)
*
*
Tempo di lettura in sec
SISR-GRAFICA
- 14 -
Anti-aliasing elimina effetto gradinatura
Matrice di punti
SISR-GRAFICA
Font preferiti - esperimenti
Arial
Verdana
Courier
Times
(Bernard et al, 2001)
SISR-GRAFICA
- 16 -
Corsivo
Il corsivo comunque si legge male sul
video, perchè enfatizza l’effetto sega
SISR-GRAFICA
- 17 -
Corsivo - esempio
SISR-GRAFICA
- 18 -
Neretto e sottolineaturea
• Il neretto e il sottolineato possono essere utilizzati per
richiamare l’attenzione su parole particolari.
• Come per i testi a stampa, tuttavia, è consigliabile
limitarne l’uso ai casi di reale necessità, per evitare effetti
visivi di eccessivo disordine.
• In accordo a una convenzione molto diffusa, molti
consigliano di riservare le sottolineature ai link testuali
nelle pagine web, per evitare ambiguità.
SISR-GRAFICA
Maiuscole e minuscole
La leggibilità di un testo scritto in caratteri maiuscoli è minore di
quella di un testo in caratteri minuscoli.
Infatti, l’uso delle minuscole associa a ogni parola un pattern dato
dalle ascendenti e dalle discendenti, che probabilmente ne facilita il
riconoscimento.
SISR-GRAFICA
- 20 -
In sintesi
La leggibilità sul video dipende fortemente dal tipo
di font, e dalla sua dimensione
Normalmente si raccomanda sul video di utilizzare
fonti senza grazie, evitando comunque per quanto
è possibile il corsivo
Poichè la lettura sul video è faticosa, occorre
comunque evitare per quanto è possibile testi
lunghi
Testi lunghi in caratteri maiuscoli vanno comunque
sempre evitati
Usare poche fonti contemporaneamente, e usarle
in modo consistente per veicolare informazione
SISR-GRAFICA
- 21 -
Sopra e sotto
La leggibilità dipende dalla parte
superiore delle parole
SISR-GRAFICA
- 22 -
Maiuscole o minuscole
È POSSIBILE VERIFICARE CON ESPERIMENTI CHE LA
LEGGIBILITÁ DI UN TESTO SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA
DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E
MINUSCOLI
È possibile verificare con esperimenti che la leggibilità di
un testo scritto esclusivamente in caratteri maiuscoli è
minore di quella di un testo scritto in caratteri maiuscoli e
minuscoli
SISR-GRAFICA
- 23 -
COLORE
SISR-GRAFICA
- 24 -
Uso del colore
Aspetti percettivi
Aspetti cognitivi
Aspetti culturali
SISR-GRAFICA
- 25 -
Aspetti percettivi
Sensibilità dell’occhio ai diversi colori
Messa a fuoco
Colori caldi e colori freddi
Accostamenti di colori
Disturbi nella percezione dei colori
SISR-GRAFICA
- 26 -
Sensibilità ai colori
Sensibilità al blu bassa (e calante con l’età)



SISR-GRAFICA
- 27 -
Colori caldi e freddi
colori freddi
colori caldi
I colori caldi tendono ad avanzare, i colori freddi a recedere

SISR-GRAFICA
- 28 -
Colori caldi e freddi
SISR-GRAFICA
- 29 -
Colori caldi e freddi
SISR-GRAFICA
- 30 -
Messa a fuoco
Difficoltà di messa a fuoco contemporanea di colori “lontani”
sullo spettro (per  angolo di rifrazione sul cristallino)
Da questo esempio si vede la difficoltà di messa a fuoco
contemporanea del rosso e del blu: da molti le righe di questi
due colori vengono viste, per i motivi descritti, come se fossero
collocate a distanze diverse dagli occhi.
Questo fenomeno non si verifica se si usano due colori che
si trovino fra loro più vicini sullo spettro visibile, come si può
facilmente verificare da questo secondo esempio, che non
dovrebbe presentare l’effetto tridimensionale di cui sopra.
SISR-GRAFICA
- 31 -
Messa a fuoco
SISR-GRAFICA
- 32 -
Il colore del testo
Scegliere con cura il colore del testo in
relazione al colore dello sfondo
caratteri chiari su sfondo scuro tendono ad
apparire più grandi
caratteri scuri su sfondo chiaro tendono ad
apparire più sottili e netti
SISR-GRAFICA
- 33 -
Il colore del testo
Caratteri scuri su
Caratteri scuri su
fondo chiaro
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri scuri su
fondo chiaro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
Caratteri chiari
su fondo scuro
SISR-GRAFICA
- 34 -
Colore: linee guida
Testo chiaro su sfondo scuro
Sfondo:
Testo:
colori scuri agli estremi dello spettro;
colori chiari non saturi, al centro dello spettro
Testo scuro su sfondo chiaro
Sfondo: colori chiari non saturi, al centro dello spettro
Testo:
colori scuri, evitando il blu
SISR-GRAFICA
- 35 -
Daltonismo
Disturbi nella percezione del colore sono presenti:
– nel 9% dei maschi (1 ogni 12)
– nel 0,5% delle femmine (1 ogni 165)
Sono dovuti a difetti di pigmentazione dei coni della
retina
I disturbi più frequenti riguardano la capacità di
distinguere il rosso dal verde (circa nel 5% delle
persone), ma ci sono diversi tipi di disturbi
Non assumere che tutti gli utenti possano
distinguere correttamente i vari colori!
SISR-GRAFICA
- 36 -
Alcune indicazioni
Non usare mai rosso e verde vicini
Normalmente il giallo e il blu vengono riconosciuti
bene
Usare colori brillanti
Accostare i colori a uno sfondo appropriato:
–
–
–
–
rosso e bianco
verde e nero
turchese e nero
magenta e nero
Le linee guida sono complesse, ma oggi esistono
strumenti automatici per verificare come una immagine
verrebbe vista da un daltonico: usarli per verificare le
scelte cromatiche (es. www.vischeck.com)
SISR-GRAFICA
- 37 -
Aspetti cognitivi: punti importanti
Usare i diversi colori in modo consistente,
associando a colori diversi significati diversi
Usare comunque pochi colori contemporaneamente
SISR-GRAFICA
- 38 -
Aspetti culturali: punti importanti
Usare i colori in modo coerente con le
associazioni “normali” in una determinata
cultura
Esempio (nella nostra cultura):
ROSSO:
GIALLO:
VERDE:
GRIGIO, BIANCO:
stop, pericolo, caldo, fuoco
attenzione, rallentamento
avanti, ok, sicurezza
neutralità
SISR-GRAFICA
- 39 -
Culture diverse, associazioni diverse
(Russo & Boor, 1993)
SISR-GRAFICA
- 40 -
GESTALT
SISR-GRAFICA
- 41 -
Gestalt
La psicologia della Gestalt (la parola tedesca Gestalt significa
forma, schema, rappresentazione),
detta anche psicologia della forma, è una corrente psicologica
che si sviluppò tra gli anni '10 e gli anni '30 del secolo scorso.
I suoi esponenti si focalizzarono soprattutto sugli studi della
percezione.
L'idea portante della psicologia della Gestalt è che non è corretto
dividere l’esperienza umana nelle sue componenti elementari, da
analizzare separatamente, perché un insieme è più della
somma delle sue parti.
In particolare, questo avviene nella percezione visiva:
gli elementi che ci si presentano nel campo visivo interagiscono
fra loro in modo complesso, e noi percepiamo qualcosa che è
sostanzialmente diverso dalla loro semplice somma.
SISR-GRAFICA
Gestalt
Percepiamo prima la forma globale e non gli elementi costitutivi. La pagina
web deve avere una struttura visiva di forme e colori ben marcata
SISR-GRAFICA
- 43 -
ORIENTAMENTO
SISR-GRAFICA
- 44 -
Orientamento
Nei paesi occidentali leggiamo da sinistra
a destra, e dall’alto in basso
SISR-GRAFICA
- 45 -
Linee guida
Meglio evitare testi lunghi
Di solito si raccomanda di utilizzare (a video) font senza grazie
Evitare il corsivo
Evitare testi lunghi in caratteri tutti maiuscoli
Usare preferibilmente caratteri di corpo non inferiore a 12; altrimenti usare
interlinea doppia
Attenzione al contrasto fra colore del testo e colore dello sfondo
Preferire caratteri scuri su fondo chiaro
Non usare sfondi con texture che ostacolino la lettura
Non affiancare caratteri di tinte spettralmente lontane (problemi di messa a
fuoco contemporanea)
Non veicolare le informazioni esclusivamente attraverso il colore
(daltonismo, poca sensibilità al blu)
SISR-GRAFICA