Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce...
Transcript of Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce...
![Page 1: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/1.jpg)
Grafica ed interfacce per la comunicazione
Scienze della Comunicazione
Paola Vocca
Lezione 17: Progettare il testo
Lucidi tradotti e adattati da materiale presente su
http://www.hcibook.com/e3/resources/ e
http://www.robertopolillo.it
![Page 2: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/2.jpg)
Scopo di questa lezione
2
Fornire indicazioni su come presentare e comporre i
testi per una migliore usabilità dei sistemi che li utilizzano
Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 3: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/3.jpg)
Introduzione
Grafica ed interfacce per la comunicazione A.A. 2014/15 3
I testi costituiscono una componente molto importante
delle interfacce utente e possono influenzare
grandemente la usabilità di un sistema
Possono essere analizzati da diversi punti di vista:
o struttura fisica (leggibilità fisica, piacevolezza, espressività, …)
o struttura linguistica (comprensibilità, …)
![Page 4: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/4.jpg)
Libro delle Ore, Francia, ca. 1440 4 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 5: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/5.jpg)
Breviario Belleville
(1323-26) 5 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 6: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/6.jpg)
6 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 7: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/7.jpg)
7 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 8: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/8.jpg)
8 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 9: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/9.jpg)
Home page, ca.2000 9 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 10: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/10.jpg)
L’usabilità del testo
Grafica ed interfacce per la comunicazione A.A. 2014/15 10
«Il grado con cui esso può essere usato da specificati
utenti per raggiungere specificati obiettivi con efficacia,
efficienza e soddisfazione in uno specificato contesto
d’uso»
Per esempio:
o Efficacia: comprensione accurata e completa
o Efficienza: tempo medio impiegato nella lettura
![Page 11: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/11.jpg)
Ciò che vorremmo
• Impostare degli studi sperimentali rigorosi che ci
permettano di trarre delle indicazioni pratiche per
comporre e presentare testi in modo «ottimale»
• In pratica: definire delle misure (o indici) e studiare
come queste misure variano al variare di opportune
variabili indipendenti (es. “font”, “colore”,
“lunghezza media delle parole”, “contesto di
lettura”, ecc.)
11 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 12: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/12.jpg)
“Legibility”
La facilità con cui riusciamo a discriminare le
singole lettere che compongono un testo
• Considera la struttura tipografica, non i
contenuti
• Può essere misurata sperimentalmente in modo
relativamente semplice
12 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 13: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/13.jpg)
“Readability”
Misura la sua comprensibilità complessiva
• Considera quindi la struttura linguistica: ampiezza
del lessico, sintassi e semantica
• Molto più difficile da misurare sperimentalmente
13 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 14: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/14.jpg)
Paratesto
Grafica ed interfacce per la comunicazione A.A. 2014/15 14
Tutto ciò che sta “accanto”, “di contorno” al testo,
al “suo servizio”
• Titoli, riassunti, tabelle, schemi, figure,
decorazioni, ecc.
• Importantissimi per la usabilità complessiva del
testo
![Page 15: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/15.jpg)
Font (o tipi di caratteri)
Grafica ed interfacce per la comunicazione A.A. 2014/15 15
Un insieme di caratteri con un certo stile grafico, es.:
![Page 16: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/16.jpg)
Font: esempi
(dal primo Macintosh, circa1984)
16 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 17: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/17.jpg)
Font: esempi
Arial Arial black
Arial narrow AvantGarde Book Antiqua Bookman Bookman Old Style Calisto MT Century Gothic Comic Sans MS Copperplate Gothic Bold
Copperplate Gothic Light
Courier Courier New
Garamond Helvetica Helvetica Narrow Impact
Lucida Console Lucida Handwriting
Lucida Sans
Lucida Sans Unicode
Matisse ITC New York
New Century Schlbk
News Gothic MT
OCR A Extended
Palatino
Tahoma Tempus Sans ITC Times
Times New Roman Univers 45 Light Verdana Westminster ZapfChancery
(Windows, circa 2000)
17 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 18: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/18.jpg)
Terminologia
Grafica ed interfacce per la comunicazione A.A. 2014/15 18
![Page 19: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/19.jpg)
Risoluzione
Grafica ed interfacce per la comunicazione A.A. 2014/15 19
• La densità di punti elementari che compongono una
immagine
• Esempi:
Stampa su carta: almeno 300 dpi (dot per inch)
(ma anche 2400+) Video: 72-96 →130 ppi (pixel per inch)
![Page 20: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/20.jpg)
Print font e screen font
Grafica ed interfacce per la comunicazione A.A. 2014/15 20
Screen font: progettati per essere ben leggibili sul
video (si parte da una griglia, e solo in seguito si
disegnano con tratti curvilinei)
![Page 21: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/21.jpg)
Font diffusi Times New Roman font graziato più usato sulla carta stampata. fu progettato da Stanley Morrison per conto del giornale londinese The Times, che lo adottò nel 1932 in sostituzione del font Times Old Roman. 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 concepito per ridurre i fastidiosi spazi bianchi derivanti dall’allineamento «a pacchetto» dei testi nelle colonne del giornale
Georgia: 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: le linee sono un po’ più spesse, e il loro spessore varia meno. A parità di dimensione ,le lettere sono un po’ più larghe e alte; 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 .
Grafica ed interfacce per la comunicazione A.A. 2014/15 21
Arial font senza grazie adatto sia ai monitor sia alla carta stampata. Fu progettato nel 1982 ispirata a
Helvetica. Arial fu usato da Microsoft in Windows 3.1, ed è oggi molto diffuso sul Web.
Verdana screen-font senza grazie, diventato quasi uno standard di fatto 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. I caratteri sono 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.
![Page 22: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/22.jpg)
Esempio
Times New Roman (print font)
Verdana (screen font)
22 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 23: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/23.jpg)
Font proporzionali e non
• Un font i cui glifi sono di larghezza variabile è detto proporzionale, mentre un font con glifi di larghezza fissa è detto non proporzionale (o monospace o a larghezza fissa)
• I font proporzionali sono generalmente considerati più eleganti e più facili da leggere e sono quindi quelli più comunemente utilizzati sulla carta stampata e sui monitor.
• I font non proporzionali furono creati per le macchine per scrivere e per le stampanti a impatto, poiché lo spostamento del carrello dopo la stampa di un carattere era sempre della stessa misura.
Grafica ed interfacce per la comunicazione A.A. 2014/15 23
![Page 24: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/24.jpg)
Lettura su carta e sul video
Grafica ed interfacce per la comunicazione A.A. 2014/15 24
• La lettura sulla carta e la lettura sul video sono molto
diverse:
o Supporto e angolo di lettura differenti
o Il testo sul video ha risoluzione molto inferiore al testo a stampa
(es. 72-96 vs 300+ dpi)
o Su video a bassa risoluzione caratteri piccoli sono poco leggibili
• E’ opinione comune che leggiamo più lentamente e più
faticosamente sul video che sulla carta – ma con il
miglioramento della tecnologia questa differenza si
riduce molto velocemente
![Page 25: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/25.jpg)
Il processo di lettura
Fonte: Kevin Larson. The Science of Word Recognition
25 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 26: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/26.jpg)
Video
Eye tracking nella lettura di un testo sul video:
• http://it.youtube.com/watch?v=bW_zDILeevY
26 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 27: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/27.jpg)
Misurare la legibility
Grafica ed interfacce per la comunicazione A.A. 2014/15 27
• Si può misurare sulla base del tempo medio utilizzato da
un campione di soggetti per leggere determinati brani
di testo
• Varie tecniche (es.: ricerca della prima occorrenza di
una fra più parole date nel testo)
![Page 28: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/28.jpg)
Legibility: che cosa si può dire
Grafica ed interfacce per la comunicazione A.A. 2014/15 28
Essa può dipendere da molti fattori:
• I tipi di caratteri (font)
• La dimensione dei caratteri
• Il numero di caratteri per riga
• Gli spazi (fra caratteri, parole, righe) e i margini
• Gli allineamenti
• Il contrasto fra i caratteri e lo sfondo (luminosità, tinta)
• Il colore (?)
Questi fattori interagiscono in modo complesso, i risultati scientifici finora
ottenuti sono a volte contradditori e non si riesce a ricavare regole generali
semplici
![Page 29: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/29.jpg)
Grafica ed interfacce per la comunicazione A.A. 2014/15 29
Diffidate delle indicazioni che trovate sul web:
sono spesso prive di fondamento scientifico
![Page 30: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/30.jpg)
In sintesi, che cosa si può dire…
Grafica ed interfacce per la comunicazione A.A. 2014/15 30
• Normalmente si raccomanda di utilizzare su video font senza grazie
• Per quanto è possibile evitare il corsivo
• Per quanto è possibile evitare testi lunghi (perchè la lettura sul video è faticosa)
• Evitare testi lunghi in caratteri maiuscoli
• Usare preferibilmente caratteri in corpo 12 o maggiore
• Fare molta attenzione al contrasto fra colore del testo e colore dello sfondo (ma “contrasto” non è un concetto semplice)
• Preferire caratteri scuri su fondo chiaro
• Evitare sfondi con “texture” che ostacolino la lettura
• In un testo, non mischiare caratteri di colori spettralmente lontani (problemi di messa a fuoco contemporanea)
• Non veicolare le informazioni esclusivamente attraverso il colore (daltonismo, poca sensibilità al blu)
![Page 31: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/31.jpg)
Esempio: un test di leggibilità (video)
Tempo di lettura in sec
*
*
35 partecipanti, vista 20/20, monitor 1024x768, 2 pagine di testo (M.Bernard & M.Mills, So, What Size and Type of Font Should I Use on My Website?, Usability News,
Summer 2000) 31 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 32: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/32.jpg)
Un altro test di leggibilità (video)
Tempo medio di lettura in sec
(testi di circa 2 pag, con font di 12 punti, 22 utenti)
(Bernard et al, 2001)
Tahoma
Times
Courier
Arial
32 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 33: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/33.jpg)
Il font Verdana
Grafica ed interfacce per la comunicazione A.A. 2014/15 33
Progettato da Matthew Carter per Microsoft (1996) per essere ben
leggibile su video, anche per piccole dimensioni, oggi molto diffuso:
Caratteri larghi e
ben differenziati,
minuscole alte e
ben leggibili
I (con grazie), l e 1 ben differenziati
![Page 34: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/34.jpg)
Maiuscole o minuscole
È POSSIBILE VERIFICARE CHE LA LEGIBILITY DI UN TESTO
SCRITTO ESCLUSIVAMENTE IN CARATTERI MAIUSCOLI È
MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI
MAIUSCOLI E MINUSCOLI
È possibile verificare che la legibility di un testo scritto
esclusivamente in caratteri maiuscoli è minore di quella di
un testo scritto in caratteri maiuscoli e minuscoli
34 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 35: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/35.jpg)
Infatti...
L’uso delle minuscole
associa ad ogni parola
un “pattern” riconoscibile
dato dalle ascendenti e
dalle discendenti
35 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 36: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/36.jpg)
Esempio
36 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 37: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/37.jpg)
Corsivo
Grafica ed interfacce per la comunicazione A.A. 2014/15 37
Il corsivo comunque si legge male sul video,
perchè enfatizza l’”effetto sega” creato dai pixel
discreti:
![Page 38: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/38.jpg)
Corsivo: esempio
38 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 39: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/39.jpg)
Dimensione dei caratteri: un esperimento
(Williams, Scharff)
Usare preferibilmente almeno caratteri in corpo 12
39 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 40: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/40.jpg)
Allineamenti Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
Destra:
Sinistra:
Centro:
40 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 41: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/41.jpg)
Allineamenti (segue)
• E’ opinione corrente che l’allineamento a sinistra sia preferibile, in quanto fornisce una “ancora visiva” per i movimenti saccadici di “ritorno a capo”
• Tale opinione non sembra supportata da conferme sperimentali
• (Un recente esperimento da noi condotto non mostra alcuna differenza nei tempi di lettura di testi allineati a sx o a dx)
41 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 42: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/42.jpg)
Impaginazione
“a pacchetto”
Può essere
sgradevole in
colonne strette
(spazi vuoti)
42 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 43: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/43.jpg)
Tinta
• Molte opinioni, ma poche supportate da esperimenti rigorosi
• Alcune opinioni diffuse sono fra loro contraddittorie
• Alcuni studi mostrano che la tinta non influisce significativamente sulla leggibilità, la quale invece risulta influenzata da luminosità e contrasto con lo sfondo; altri studi mostrano risultati diversi
43 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 44: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/44.jpg)
Polarità
• Negativa: caratteri scuri su fondo chiaro
• Positiva: caratteri chiari su fondo scuro
Anche in questo caso i risultati non sono univoci,
ma sembra che prevalga la convinzione che la
polarità negativa sia più leggibile
44 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 45: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/45.jpg)
Ancora sui colori del testo
- caratteri di colori lontani sullo spettro
vengono messi a fuoco su piani diversi
- l’occhio è poco sensibile al blu (soprattutto
negli anziani)
45 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 46: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/46.jpg)
Messa a fuoco
LENTE
Blu Verde Rosso
Blu Verde Rosso
A B C
FUOCO SULLA RETINA
LUCE
BIANCA
A causa della diffrazione sul cristallino, difficoltà di messa a fuoco contemporanea,
sulla retina, di colori diversi agli estremi dello spettro (immagine stereoscopoca,
fatica)
Quindi: evitare l’uso di scritte in cui siano vicini caratteri di colori saturi agli estremi
dello spettro (es.: rosso-blu; giallo-porpora) 46 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 47: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/47.jpg)
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.
47 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 48: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/48.jpg)
Readability
Grafica ed interfacce per la comunicazione A.A. 2014/15 48
Un problema molto più complicato
Nel mezzo del cammin di nostra vita
Mi ritrovai per una selva oscura
![Page 49: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/49.jpg)
Readability indexes
Grafica ed interfacce per la comunicazione A.A. 2014/15 49
Cercano di «misurare» la comprensibilità di un testo
utilizzando delle misure semplici (es.: numero di parole in
una frase, ecc.)
![Page 50: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/50.jpg)
L’indice Gulpease
Grafica ed interfacce per la comunicazione A.A. 2014/15 50
• Definito nel 1988 dal GULP dell’Università di Roma La
Sapienza, sulla base di ricerche di Costa e De Mauro,
per la lingua italiana
• Considera solo la lunghezza delle parole e la lunghezza
delle frasi (in lettere), ed è di facile calcolo
• Complementare all’indice è la definizione del
vocabolario comune della lingua italiana, che
considera la «notorietà» del lessico (es.: vocabolario
base noto a chi ha la licenza media inferiore, circa 7000
termini)
• Servizio di valutazione via mail su
http://www.eulogos.net/it/censor/default.htm
![Page 51: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/51.jpg)
VOCABOLARIO DI BASE (7000 lessemi)
VOCABOLARIOCOMUNE
VOCABOLARIO FONDAMENTALE (2000 lessemi)
51 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 52: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/52.jpg)
Indice Gulpease (segue)
Compreso tra 0 (leggibilità più bassa) e 100 (leggibilità più alta)
- indice < 80: difficili da leggere per chi ha licenza elementare
- indice < 60: difficili da leggere per chi ha licenza media
- indice < 40: difficili da leggere per chi ha un diploma superiore
52 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 53: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/53.jpg)
I manuali di stile
• Indicazioni per la redazione di «buoni» testi
• Ovviamente non hanno convalida sperimentale
53 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 54: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/54.jpg)
Linee guida: esempio
Grafica ed interfacce per la comunicazione A.A. 2014/15 54
1. Scrivere frasi brevi
2. Usare parole del linguaggio comune
3. Usare pochi termini tecnici e spiegarli
4. Usare poco abbreviazioni e sigle
5. Usare verbi nella forma attiva e affermativa
6. Legare le parole e le frasi in modo breve e chiaro
7. Usare in maniera coerente le maiuscole,
le minuscole e la punteggiatura
8. Evitare neologismi, parole straniere e latinismi
9. Uso del congiuntivo
10. Usare in maniera corretta le possibilità di composizione grafica del
testo
![Page 55: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/55.jpg)
Il testo nel web
• Il processo di lettura di una pagina web è diverso da
quello di un testo normale, ed è più simile alla lettura della
pagina di un quotidiano
• L’occhio «scorre» qua e là, soffermandosi brevemente su
quegli elementi che forniscono «indizi» sui contenuti (vedi
esperimenti di eye tracking)
• Il testo deve essere organizzato di conseguenza
(«scannable text»)
55 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 56: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/56.jpg)
“Scannable text”
1. Titoli e sottotitoli brevi e significativi
2. Parole chiave evidenziate (neretto, sottolineato, link ipertestuali, …)
3. Paragrafi brevi: un concetto per paragrafo
4. Pagine brevi: evitare o ridurre lo scrolling
5. “Metà delle parole di un testo tradizionale”
6. “Inverted pyramid style”
7. “Get to the point” 1. (cfr. Jakob Nielsen. Alertbox)
56 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 57: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/57.jpg)
Stile a piramide invertita
SINTESI
DETTAGLIO
MATERIALE
AGGIUNTIVO
link
link
57 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 58: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/58.jpg)
1
2
3
Stile a piramide
invertita: esempi
58 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 59: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/59.jpg)
Questo testo non è stato
pensato per il web!
59 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 60: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/60.jpg)
“Wall of text”
Fonte: Jakob Nielsen, www.useit.com
60 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 61: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/61.jpg)
Questo testo non è stato
pensato per il web!
61 Grafica ed interfacce per la comunicazione A.A. 2014/15
![Page 62: Grafica ed interfacce per la comunicazione - paolavocca.it · Introduzione Grafica ed interfacce per la comunicazione A.A. 2014/15 3 I testi costituiscono una componente molto importante](https://reader031.fdocument.pub/reader031/viewer/2022022722/5c68ad9c09d3f2e4258bbb1b/html5/thumbnails/62.jpg)
Questo testo non è stato
pensato per il web!
62 Grafica ed interfacce per la comunicazione A.A. 2014/15