13.Progettare il testo
-
Upload
roberto-polillo -
Category
Education
-
view
1.101 -
download
1
description
Transcript of 13.Progettare il testo
![Page 1: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/1.jpg)
Corso di Interazione Uomo MacchinaAA 2012-2013
Roberto Polillo
Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione
PROGETTARE IL TESTO1
Edizione 2
012-13
![Page 2: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/2.jpg)
Queste slides…
… si basano sul libro “Facile da usare”, dell’autore, dove si trovano tutte le necessarie spiegazioni. Vedi www.rpolillo.it
Queste slide sono disponibili con licenza Creative Commons (attribuzione, non commerciale, condividi allo stesso modo) a chiunque desiderasse utilizzarle, per esempio a scopo didattico, senza necessità di preventiva autorizzazione:
http://creativecommons.org/licenses/by-nc-sa/3.0/it/deed.it
La licenza non si estende alle immagini fotografiche e alle screen shots, i cui diritti restano in capo ai rispettivi proprietari, che sono stati indicati, ove possibile, nelle didascalie del libro. L’autore si scusa per eventuali omissioni, e resta a disposizione per correggerle.
R.Polillo - Marzo 2013
2
![Page 3: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/3.jpg)
3
Scopo di questa lezione
Fornire indicazioni su come presentare e comporre i testi per una migliore usabilità dei sistemi che li utilizzano
R.Polillo - Marzo 2013
![Page 4: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/4.jpg)
R.Polillo - Marzo 2013
4
Introduzione
I testi costituiscono una componente molto importante delle interfacce utente e possono influenzare grandemente la usabilità di un sistemaPossono essere analizzati da diversi punti di vista: struttura fisica (leggibilità fisica, piacevolezza,
espressività, …) struttura linguistica (comprensibilità, …)
![Page 5: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/5.jpg)
Libro delle Ore, Francia, ca. 14405 R.Polillo - Marzo 2013
![Page 6: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/6.jpg)
Breviario Belleville (1323-26)
6 R.Polillo - Marzo 2013
![Page 7: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/7.jpg)
7 R.Polillo - Marzo 2013
![Page 8: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/8.jpg)
8 R.Polillo - Marzo 2013
![Page 9: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/9.jpg)
9 R.Polillo - Marzo 2013
![Page 10: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/10.jpg)
Home page, ca.200010 R.Polillo - Marzo 2013
![Page 11: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/11.jpg)
R.Polillo - Marzo 2013
11
L’usabilità del testo
“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 12: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/12.jpg)
12
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.)
R.Polillo - Marzo 2013
![Page 13: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/13.jpg)
13
“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
R.Polillo - Marzo 2013
![Page 14: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/14.jpg)
14
“Readability”
Misura la sua comprensibilità complessiva Considera quindi la struttura linguistica:
ampiezza del lessico, sintassi e semantica Molto più difficile da misurare
sperimentalmente
R.Polillo - Marzo 2013
![Page 15: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/15.jpg)
15
Paratesto
R.Polillo - Marzo 2013
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 16: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/16.jpg)
16
Font (o tipi di caratteri)
R.Polillo - Marzo 2013
Un insieme di caratteri con un certo stile grafico, es.:
![Page 17: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/17.jpg)
Font: esempi
(dal primo Macintosh, circa1984)R.Polillo - Marzo 2013
![Page 18: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/18.jpg)
18
Font: esempiArialArial blackArial narrowAvantGardeBook AntiquaBookmanBookman Old StyleCalisto MTCentury GothicComic Sans MSCopperplate Gothic BoldCopperplate Gothic LightCourierCourier New
GaramondHelveticaHelvetica NarrowImpact
Lucida ConsoleLucida HandwritingLucida SansLucida Sans UnicodeMatisse ITCNew YorkNew Century SchlbkNews Gothic MTOCR A ExtendedPalatinoTahomaTempus Sans ITCTimesTimes New RomanUnivers 45 LightVerdanaWestminsterZapfChancery
(Windows, circa 2000)R.Polillo - Marzo 2013
![Page 19: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/19.jpg)
19
Terminologia
R.Polillo - Marzo 2013
![Page 20: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/20.jpg)
20
Risoluzione
R.Polillo - Marzo 2013
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 21: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/21.jpg)
21
Print font e screen font
R.Polillo - Marzo 2013
Screen font: progettati per essere ben leggibili sul video (si parte da una griglia, e solo in seguito si disegnano con tratti curvilinei)
![Page 22: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/22.jpg)
22
Esempio
Times New Roman
(print font)
Verdana(screen font)
R.Polillo - Marzo 2013
![Page 23: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/23.jpg)
R.Polillo - Marzo 2013
23
Lettura su carta e sul video
La lettura sulla carta e la lettura sul video sono molto diverse: Supporto e angolo di lettura 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 molto velocemente
![Page 24: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/24.jpg)
24
Il processo di lettura
Fonte: Kevin Larson. The Science of Word Recognition
R.Polillo - Marzo 2013
![Page 25: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/25.jpg)
25
Video
Eye tracking nella lettura di un testo sul video:
http://it.youtube.com/watch?v=bW_zDILeevY
R.Polillo - Marzo 2013
![Page 26: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/26.jpg)
26
Misurare la legibility
R.Polillo - Marzo 2013
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 27: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/27.jpg)
R.Polillo - Marzo 2013
27
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 in modo complesso, i risultati scientifici finora ottenuti sono
volte contradditori e non si riesce a ricavare regole generali semplici
![Page 28: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/28.jpg)
28
R.Polillo - Marzo 2013
Diffidate delle indicazioni che trovate sul web:
sono spesso prive di fondamento scientifico
![Page 29: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/29.jpg)
29
In sintesi, che cosa si può dire…
R.Polillo - Marzo 2013
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 30: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/30.jpg)
30
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)
R.Polillo - Marzo 2013
![Page 31: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/31.jpg)
31
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
R.Polillo - Marzo 2013
![Page 32: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/32.jpg)
32
Il font Verdana
R.Polillo - Marzo 2013
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 33: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/33.jpg)
33
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
R.Polillo - Marzo 2013
![Page 34: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/34.jpg)
34
Infatti...
L’uso delle minuscole associa ad ogni parola un “pattern” riconoscibile dato dalle ascendenti e dalle discendenti
R.Polillo - Marzo 2013
![Page 35: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/35.jpg)
35
Esempio
R.Polillo - Marzo 2013
![Page 36: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/36.jpg)
36
Corsivo
R.Polillo - Marzo 2013
Il corsivo comunque si legge male sul video, perchè enfatizza l’”effetto sega” creato dai pixel discreti:
![Page 37: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/37.jpg)
37
Corsivo: esempio
R.Polillo - Marzo 2013
![Page 38: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/38.jpg)
38
Dimensione dei caratteri: un esperimento
(Williams, Scharff)
Usare preferibilmente almeno caratteri in corpo 12R.Polillo - Marzo 2013
![Page 39: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/39.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:
R.Polillo - Marzo 2013
![Page 40: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/40.jpg)
40
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)
R.Polillo - Marzo 2013
![Page 41: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/41.jpg)
Impaginazione “a pacchetto”
Può essere sgradevole in colonne strette(spazi vuoti)
R.Polillo - Marzo 2013
![Page 42: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/42.jpg)
42
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
R.Polillo - Marzo 2013
![Page 43: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/43.jpg)
43
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
R.Polillo - Marzo 2013
![Page 44: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/44.jpg)
44
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)
R.Polillo - Marzo 2013
![Page 45: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/45.jpg)
Messa a fuoco
LENTE
Blu Verde Rosso
Blu Verde RossoA 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)
R.Polillo - Marzo 2013
![Page 46: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/46.jpg)
46Da questo esempio si vede la difficoltà di messa a fuoco contemporanea del rosso e del blu: da molti le righe di questidue colori vengono viste, per i motivi descritti, come se fosserocollocate 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 nondovrebbe presentare l’effetto tridimensionale di cui sopra.
R.Polillo - Marzo 2013
![Page 47: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/47.jpg)
47
Readability
R.Polillo - Marzo 2013
Un problema molto più complicato
Nel mezzo del cammin di nostra vitaMi ritrovai per una selva oscura
![Page 48: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/48.jpg)
48
Readability indexes
R.Polillo - Marzo 2013
Cercano di “misurare” la comprensibilità di un testo utilizzando delle misure semplici (es.: numero di parole in una frase, ecc.)
![Page 49: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/49.jpg)
R.Polillo - Marzo 2013
49
L’indice Gulpease
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 50: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/50.jpg)
VOCABOLARIO DI BASE
(7000 lessemi)
VOCABOLAR IOCOMUNE
VOCABOLARIO FONDAMENTALE(2000 lessemi)
50 R.Polillo - Marzo 2013
![Page 51: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/51.jpg)
51
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
R.Polillo - Marzo 2013
![Page 52: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/52.jpg)
52
I manuali di stile
Indicazioni per la redazione di “buoni” testi
Ovviamente non hanno convalida speriementale
R.Polillo - Marzo 2013
![Page 53: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/53.jpg)
53
Linee guida: esempio
R.Polillo - Marzo 2013
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 54: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/54.jpg)
54
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”)
R.Polillo - Marzo 2013
![Page 55: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/55.jpg)
55
“Scannable text”
Titoli e sottotitoli brevi e significativi 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”
R.Polillo - Marzo 2013
![Page 56: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/56.jpg)
56
Stile a piramide invertita
SINTESI
DETTAGLIO
MATERIALEAGGIUNTIVO
link
link
R.Polillo - Marzo 2013
![Page 57: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/57.jpg)
1
2
3
Stile a piramide invertita: esempi
57R.Polillo - Marzo 2013
![Page 58: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/58.jpg)
Questo testo non è stato pensato
per il web!
58 R.Polillo - Marzo 2013
![Page 59: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/59.jpg)
59
“Wall of text”
Fonte: Jakob Nielsen, www.useit.comR.Polillo - Marzo 2013
![Page 60: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/60.jpg)
Questo testo non è stato pensato
per il web!
60 R.Polillo - Marzo 2013
![Page 61: 13.Progettare il testo](https://reader035.fdocumenti.com/reader035/viewer/2022081414/5481b198b4af9f500f8b476b/html5/thumbnails/61.jpg)
Questo testo non è stato pensato
per il web!
61 R.Polillo - Marzo 2013