13.Progettare il testo
-
Upload
roberto-polillo -
Category
Education
-
view
2.067 -
download
0
description
Transcript of 13.Progettare il testo
![Page 1: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/1.jpg)
PROGETTARE IL TESTO
Corso di Interazione Uomo MacchinaAA 2009-2010
Roberto Polillo
Università di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
1
![Page 2: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/2.jpg)
Libro delle Ore, Francia, ca. 1440
![Page 3: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/3.jpg)
Home page, ca.2000
![Page 4: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/4.jpg)
L’usabilità del testo
Applicando la solita definizione:
“Il grado con cui esso può essere usato da specificati utenti per raggiungere specificati obbiettivi con efficacia, efficienza e soddisfazione in uno specificato contesto d’uso”
Per esempio:
Efficacia -> comprensione accurata e completa
Efficienza -> tempo medio impiegato nella lettura
![Page 5: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/5.jpg)
“Legibility”
• La facilità con cui riusciamo a discriminare le singole lettere che compongono un testo
• Considera la sua struttura tipografica, non i contenuti
• Può essere misurata sperimentalmente in modo relativamente semplice
![Page 6: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/6.jpg)
“Readability”
• Misura la sua leggibilità (forse sarebbe meglio dire comprensibilità) complessiva
• Considera quindi la sua struttura linguistica: ampiezza del lessico, sintasi e semantica
• Molto più difficile da misurare sperimentalmente
![Page 7: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/7.jpg)
Paratesto
• Tutto ciò che sta “accanto”, “di contorno” al testo, al “suo servizio”
• Es.: titoli, riassunti, tabelle, schemi, figure, decorazioni, ecc.
• Sono importantissimi ai fini della usabilità complessiva del testo
![Page 8: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/8.jpg)
Elementi di tipigrafia
![Page 9: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/9.jpg)
Font (o tipi di caratteri)Un insieme di caratteri con un certo stile grafico
![Page 10: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/10.jpg)
Font: esempi
(dal primo Macintosh, circa1984)
![Page 11: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/11.jpg)
Terminologia
![Page 12: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/12.jpg)
Risoluzione
• 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 13: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/13.jpg)
Print font e screen font
Print font: progettati per essere ben leggibili sul video (si parte da una griglia, e solo in seguito si disegnano con tratti curvilinei)
![Page 14: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/14.jpg)
Esempio
Times New Roman Verdana
![Page 15: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/15.jpg)
Lettura su carta e sul video• La lettura sulla carta e la lettura sul video sono molto diverse:
– Il supporto e l’angolo di lettura sono differenti– Il testo sul video ha risoluzione molto inferiore al testo a stampa
(es. 72-96 vs 300+ dpi)– 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 sensibilmente
Es.: Uno studio del 1987 lettura sulla carta (poichè le fissazioni sono il 15% in più per riga)
![Page 16: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/16.jpg)
Legibility
![Page 17: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/17.jpg)
Il processo di lettura
Fonte: Kevin Larson. The Science of Word Recognition
![Page 18: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/18.jpg)
Video
Eye tracking nella lettura di un testo sul video:
• http://it.youtube.com/watch?v=bW_zDILeevY
![Page 19: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/19.jpg)
Misurare la legibility• 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)
• I risultati scientifici finora ottenuti sono a volte contradditori, e indicano che non si riesce a individuare delle regole semplici da adottare in ogni situazione
• Diffidate delle indicazioni che trovate sul web: sono molto spesso prive di fondamento scientifico
![Page 20: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/20.jpg)
Legibility: che cosa si può direEssa 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 fra loro in modo complesso, e non si riesce a ricavare regole generali semplici
![Page 21: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/21.jpg)
In sintesi, che cosa si può dire…
• 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 22: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/22.jpg)
Esempio: un test di leggibilità (video)Arial 10 Arial 12 (senza grazie)
Times New Roman 10 Times New Roman 12 (con grazie)
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)
![Page 23: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/23.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
![Page 24: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/24.jpg)
Il font VerdanaProgettato 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 25: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/25.jpg)
Maiuscole o minuscole
È POSSIBILE VERIFICARE CHE LA LEGIBILITY DI UN TESTO SCRITTO ESCLUSIVAMEN-TE IN CARATTERI MAIUSCOLI È MINORE DI QUELLA DI UN TESTO SCRITTO IN CARATTERI MAIUSCOLI E MINUSCOLI
È possibile verificare che la lrgibility di un testo scritto esclusivamente in caratteri maiuscoli è minore di quella di un testo scritto in caratteri maiuscoli e minuscoli
![Page 26: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/26.jpg)
Esempio
![Page 27: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/27.jpg)
Corsivo
Il corsivo comunque si legge male sul video, perchè enfatizza l’”effetto sega” creato dai pixel discreti:
![Page 28: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/28.jpg)
Corsivo: esempio
![Page 29: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/29.jpg)
Dimensione dei caratteriUn esperimento: (Williams, Scharff)
Usare preferibilmente almeno caratteri in corpo 12
![Page 30: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/30.jpg)
AllineamentiLorem 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:
![Page 31: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/31.jpg)
Impaginazione “a pacchetto”
Può essere sgradevole in colonne strette(spazi vuoti)
![Page 32: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/32.jpg)
Tinta
• Ci sono molte opinioni, ma poche sono supportate da esperimenti scientifici 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
![Page 33: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/33.jpg)
Polarità
• Negativa: caratteri scuri so 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
![Page 34: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/34.jpg)
Ancora sui colori del testo
Ricordare che:
• caratteri di colori lontani sullo spettro vengono messi a fuoco su piani diversi
• l’occhio è poco sensibile al blu (soprattutto negli anziani)
![Page 35: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/35.jpg)
Readability
![Page 36: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/36.jpg)
Nel mezzo del cammin di nostra vita
Mi ritrovai per una selva oscura
![Page 37: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/37.jpg)
Readability indexes
Cercano di “misurare” la comprensibilità di un testo utilizzando delle misure semplici (es.: numero di parole in una frase, ecc.)
![Page 38: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/38.jpg)
L’indice Gulpease• Definito nel 1988 dal GULP (Gruppo Universitario Linguistico Pedagogico 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 gratuito di valutazione via mail su http://www.eulogos.net/it/censor/default.htm
![Page 39: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/39.jpg)
Indice Gulpease (segue)
• I risultati sono compresi tra 0 (leggibilità più bassa) e 100 (leggibilità più alta)
• Si trova che testi con indice:
- inferiore a 80 sono difficili da leggere per chi ha la licenza elementare
- inferiore a 60 sono difficili da leggere per chi ha la licenza media
- inferiore a 40 sono difficili da leggere per chi ha un diploma superiore
![Page 40: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/40.jpg)
I manuali di stile
• Manuali con indicazioni per la redazione di testi
• Ovviamente non hanno convalida speriementale
![Page 41: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/41.jpg)
Il testo nel web
• Il processo di lettura di una pagina web è abba-stanza diverso da quello di un testo normale, ed è più simile alla lettura della pagina di un quotidiano
• In pratica, l’occhio “scorre” qua e là, sofferman-dosi brevemente su quegli elementi che forni-scono “indizi” sui contenuti (vedi esperimenti di eye tracking)
• Il testo deve essere organizzato di conseguenza (“scannable text”)
![Page 42: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/42.jpg)
“Scannable text”
• Titoli e sottotitoli brevi e significativi (e non di effetto)
• Parole chiave evidenziate (neretto, sottolineato, link ipertestuali, …)
• Paragrafi brevi: un concetto per paragrafo• Pagine brevi: evitare o ridurre lo scrolling• “Metà delle parole di un testo tradizionale”• “Inverted pyramid style”• “Get to the point”: fatti, non parole
![Page 43: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/43.jpg)
Stile a piramide invertita
SINTESI
DETTAGLIO
MATERIALEAGGIUNTIVO
link
link
![Page 44: 13.Progettare il testo](https://reader036.fdocumenti.com/reader036/viewer/2022062706/557bef6ad8b42aab048b4f5a/html5/thumbnails/44.jpg)
Questo testo non è stato pensato
per il web!