14.Progettare il testo

Corso di Interazione Uomo MacchinaAA 2013-2014

Roberto Polillo

Corso di laurea in InformaticaUniversità di Milano BicoccaDipartimento di Informatica, Sistemistica e Comunicazione

PROGETTARE IL TESTO1

Edizione 2013-14

R.Polillo - Marzo 2014

IntroduzioneI 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à, …)

Libro delle Ore, Francia, ca. 14405 R.Polillo - Marzo 2014

Breviario Belleville (1323-26)

6 R.Polillo - Marzo 2014

Home page, ca.200010 R.Polillo - Marzo 2014

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

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.)

“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

“Readability”Misura la sua comprensibilità complessiva Considera quindi la struttura linguistica:

ampiezza del lessico, sintassi e semantica Molto più difficile da misurare

sperimentalmente

Paratesto

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

Font (o tipi di caratteri)

Un insieme di caratteri con un certo stile grafico, es.:

Font: esempi

(dal primo Macintosh, circa1984)R.Polillo - Marzo 2014

Terminologia

Risoluzione

La densità di punti elementari che compongono una immagine

Stampa su carta: almeno 300 dpi (dot per inch) (ma anche 2400+); Video: 72-96 →300+ ppi (pixel per inch)

Es. Retina display: iPhone 5s: 326 ppi, MacBook Pro: 220 ppi

Print font e screen font

Screen font: progettati per essere ben leggibili sul video (si parte da una griglia, e solo in seguito si disegnano con tratti curvilinei)

Esempio

Times New Roman

(print font)

Verdana(screen font)

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

Il processo di lettura

Fonte: Kevin Larson. The Science of Word Recognition

VideoEye tracking nella lettura di un testo sul video:

http://it.youtube.com/watch?v=bW_zDILeevY

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)

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

Diffidate delle indicazioni che trovate sul web:

sono spesso prive di fondamento scientifico

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)

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)

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

Courier

Il font Verdana

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

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

Infatti...

L’uso delle minuscole associa ad ogni parola un “pattern” riconoscibile dato dalle ascendenti e dalle discendenti

Esempio

Corsivo

Il corsivo comunque si legge male sul video, perchè enfatizza l’”effetto sega” creato dai pixel discreti:

Corsivo: esempio

Dimensione dei caratteri: un esperimento

(Williams, Scharff)

Usare preferibilmente almeno caratteri in corpo 12R.Polillo - Marzo 2014

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:

Impaginazione “a pacchetto”

Può essere sgradevole in colonne strette(spazi vuoti)

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

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

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)

Messa a fuoco

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)

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.

Readability

Un problema molto più complicato

Nel mezzo del cammin di nostra vitaMi ritrovai per una selva oscura

Readability indexes

Cercano di “misurare” la comprensibilità di un testo utilizzando delle misure semplici (es.: numero di parole in una frase, ecc.)

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

VOCABOLARIO DI BASE

(7000 lessemi)

VOCABOLARIOCOMUNE

VOCABOLARIOFONDAMENTALE

(2000lessemi)

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

I manuali di stile Indicazioni per la redazione di “buoni”

testi Ovviamente non hanno convalida

speriementale

Linee guida: esempio

1. Scrivere frasi brevi2. Usare parole del linguaggio comune3. Usare pochi termini tecnici e spiegarli4. Usare poco abbreviazioni e sigle5. Usare verbi nella forma attiva e affermativa6. Legare le parole e le frasi in modo breve e chiaro7. Usare in maniera coerente le maiuscole,

le minuscole e la punteggiatura8. Evitare neologismi, parole straniere e latinismi9. Uso del congiuntivo10. Usare in maniera corretta le possibilità

di composizione grafica del testo

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”)

“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”

Stile a piramide invertita

SINTESI

DETTAGLIO

MATERIALEAGGIUNTIVO

Questo testo non è stato pensato

per il web!

“Wall of text”

Fonte: Jakob Nielsen, www.useit.comR.Polillo - Marzo 2014

Questo testo non è stato pensato

per il web!

14.Progettare il testo

Education

Transcript of 14.Progettare il testo

Il testo argomentativo Tecniche di produzione. Progettare:

Progettare il comfort climatico - Knauf Italia: Materiali per … - Sistema... · 2011-01-14 · Sistema Isolamento Termico 11/2007 Progettare il comfort climatico Sistema Isolamento

static.grainger.cn · testo 405, testo 416, testo 425 testo 435, testo 635. testo 480, testo 445 testo 445/test0 645 testo 410, testo 417, testo 420 testo 435 testo 816-1 testo 420

PROGETTARE PER COMPETENZE - istitutovinci-ispica.edu.it · • Crea un power point che illustri il menu elaborato • Puoi utilizzare internet, libri di testo, riviste, ricette •

Progettare Fotovoltaico

Testo 総合カタログ 2018...testo 405i, 405-V1 8 testo 425, 410i 9 testo 410-1,2, 416, 417 10 testo 440, 440 dP 11 testo 435シリーズ, 445 13 testo 480, 480用プローブ 14

PROGETTARE PER COMPETENZE

Progettare pensando all'utente

Progettare impianti di rivelazione incendi Progettare un ...

13. Progettare il testo

progettare impianti elettrici

L'arte di progettare

Progettare l’integrazione

RIFORMA COSTITUZIONALE TESTO A FRONTE tra: Costituzione … · 2014. 7. 14. · XVII legislatura RIFORMA COSTITUZIONALE TESTO A FRONTE tra: Costituzione vigente, testo del Governo,

PROGETTARE PER COMPETENZE NELLE INDICAZIONI · •Dato un testo di carattere storico, chiedere di selezionare le informazioni e riempire gli spazi di uno schema concettuale. •Fornire

Progettare e realizzare un testo usabile (cartaceo o digitale)

PROGETTARE PER COMPETENZE - iciseo.gov.it · PROGETTARE PER COMPETENZE ISEO 05 SETTEMBRE 2016 Alessandro Sacchella alessandro.sacchella@unicatt.it. PROGETTARE PER COMPETENZE . 3 IMPIANTO

Progettare la partecipazione

20130601001 progettare

CREATIVI SI - openartaward.it · I livelli, fusione forme colori, simboli, pennelli, Progettare brochure, ... InDesign CC Tavolo di montaggio, Pagine mastro, Finestre testo, Finestre