Top Banner
Corso di Interazione Uomo Macchina AA 2014-2015 Roberto Polillo Corso di laurea in Informatica Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione PROGETTARE IL TESTO
55

14. Progettare il testo

Jul 16, 2015

Download

Education

Roberto Polillo
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 14. Progettare il testo

Corso di Interazione Uomo MacchinaAA 2014-2015

Roberto Polillo

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

PROGETTARE IL TESTO

Page 2: 14. Progettare il testo

Introduzione

R.Polillo - Aprile 2015

4

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:

struttura fisica (leggibilità fisica, piacevolezza,

espressività, …)

struttura linguistica (comprensibilità, …)

Page 3: 14. Progettare il testo

Libro delle Ore, Francia, ca. 14405 R.Polillo - Aprile 2015

Page 4: 14. Progettare il testo

Breviario Belleville

(1323-26)

6 R.Polillo - Aprile 2015

Page 5: 14. Progettare il testo

7 R.Polillo - Aprile 2015

Page 6: 14. Progettare il testo

8 R.Polillo - Aprile 2015

Page 7: 14. Progettare il testo

9 R.Polillo - Aprile 2015

Page 8: 14. Progettare il testo

Home page, ca.200010 R.Polillo - Aprile 2015

Page 9: 14. Progettare il testo

L’usabilità del testo

R.Polillo - Aprile 2015

11

“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 10: 14. Progettare il testo

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

12

R.Polillo - Aprile 2015

Page 11: 14. Progettare il testo

“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

13

R.Polillo - Aprile 2015

Page 12: 14. Progettare il testo

“Readability”

Misura la sua comprensibilità complessiva

Considera quindi la struttura linguistica: ampiezza

del lessico, sintassi e semantica

Molto più difficile da misurare sperimentalmente

14

R.Polillo - Aprile 2015

Page 13: 14. Progettare il testo

Paratesto

R.Polillo - Aprile 2015

15

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 14: 14. Progettare il testo

Font (o tipi di caratteri)

R.Polillo - Aprile 2015

16

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

Page 15: 14. Progettare il testo

Font: esempi

(dal primo Macintosh, circa1984)

17

R.Polillo - Aprile 2015

Page 16: 14. Progettare il testo

Terminologia

R.Polillo - Aprile 2015

19

Page 17: 14. Progettare il testo

Risoluzione

R.Polillo - Aprile 2015

20

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

Page 18: 14. Progettare il testo

Print font e screen font

R.Polillo - Aprile 2015

21

Screen font: progettati per essere ben

leggibili sul video (si parte da una griglia, e

solo in seguito si disegnano con tratti

curvilinei)

Page 19: 14. Progettare il testo

Esempio

Times New Roman

(print font)

Verdana(screen font)

22

R.Polillo - Aprile 2015

Page 20: 14. Progettare il testo

Lettura su carta e sul video

R.Polillo - Aprile 2015

23

La lettura sulla carta e la lettura sul video sonomolto diverse: Supporto e angolo di lettura differenti

Il testo sul video ha risoluzione molto inferiore al testoa stampa (es. 72-96+ vs 300+ dpi)

Su video a bassa risoluzione caratteri piccoli sonopoco leggibili

E’ opinione comune che leggiamo più lentamente e più faticosamente sul video che sulla carta – ma con il miglioramento della tecnologia questadifferenza si riduce molto velocemente

Page 21: 14. Progettare il testo

Il processo di lettura

Fonte: Kevin Larson. The Science of Word Recognition

24

R.Polillo - Aprile 2015

Page 22: 14. Progettare il testo

Video

Eye tracking nella lettura di un testo sul video:

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

https://www.youtube.com/watch?v=TwNNij89q

ro

25

R.Polillo - Aprile 2015

Page 23: 14. Progettare il testo

Misurare la legibility

R.Polillo - Aprile 2015

26

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 24: 14. Progettare il testo

La legibility può dipendere da molti

fattori

R.Polillo - Aprile 2015

27

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 25: 14. Progettare il testo

R.Polillo - Aprile 2015

28

Diffidate delle indicazioni che trovate sul

web:

sono spesso prive di fondamento scientifico

Page 26: 14. Progettare il testo

In sintesi, che cosa si può dire…

R.Polillo - Aprile 2015

29

Su video utilizzare 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 dellosfondo (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 27: 14. Progettare il testo

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)

30

R.Polillo - Aprile 2015

Page 28: 14. Progettare il testo

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

31

R.Polillo - Aprile 2015

Page 29: 14. Progettare il testo

Il font Verdana

R.Polillo - Aprile 2015

32

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 30: 14. Progettare il testo

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

33

R.Polillo - Aprile 2015

Page 31: 14. Progettare il testo

Infatti...

L’uso delle minuscole

associa ad ogni parola

un “pattern” riconoscibile

dato dalle ascendenti e

dalle discendenti

34

R.Polillo - Aprile 2015

Page 32: 14. Progettare il testo

Esempio35

R.Polillo - Aprile 2015

Page 33: 14. Progettare il testo

Corsivo

R.Polillo - Aprile 2015

36

Il corsivo comunque si legge male sul video,

perchè enfatizza l’”effetto sega” creato dai

pixel discreti:

Page 34: 14. Progettare il testo

Corsivo: esempio37

R.Polillo - Aprile 2015

Page 35: 14. Progettare il testo

Dimensione dei caratteri: un

esperimento

(Williams, Scharff)

Usare preferibilmente almeno caratteri in corpo 12

38

R.Polillo - Aprile 2015

Page 36: 14. Progettare il testo

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:

39

R.Polillo - Aprile 2015

Page 37: 14. Progettare il testo

Impaginazione

“a pacchetto”

Può essere

sgradevole in

colonne strette

(spazi vuoti)

41

R.Polillo - Aprile 2015

Page 38: 14. Progettare il testo

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

42

R.Polillo - Aprile 2015

Page 39: 14. Progettare il testo

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

43

R.Polillo - Aprile 2015

Page 40: 14. Progettare il testo

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)

44

R.Polillo - Aprile 2015

Page 41: 14. Progettare il testo

Messa a fuoco

LENTE

Blu Verde Rosso

Blu Verde Rosso

A B CFUOCO 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)

45

R.Polillo - Aprile 2015

Page 42: 14. Progettare il testo

Da questo esempio si vede la difficoltà di messa a fuococontemporanea 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 chesi 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.

46

R.Polillo - Aprile 2015

Page 43: 14. Progettare il testo

Readability

R.Polillo - Aprile 2015

47

Un problema molto più complicato

Nel mezzo del cammin di nostra vita

Mi ritrovai per una selva oscura

Page 44: 14. Progettare il testo

Readability indexes

R.Polillo - Aprile 2015

48

Cercano di “misurare” la comprensibilità di un

testo utilizzando delle misure semplici (es.:

numero di parole in una frase, ecc.)

Page 45: 14. Progettare il testo

L’indice Gulpease

R.Polillo - Aprile 2015

49

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 46: 14. Progettare il testo

VOCABOLARIO

DI BASE

(7000 lessemi)

VOCABOLARIO

COMUNE

VOCABOLARIO

FONDAMENTALE

(2000lessemi)

50 R.Polillo - Aprile 2015

Page 47: 14. Progettare il testo

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

51

R.Polillo - Aprile 2015

Page 48: 14. Progettare il testo

I manuali di stile

Indicazioni per la redazione di “buoni” testi

Ovviamente non hanno convalida

speriementale

52

R.Polillo - Aprile 2015

Page 49: 14. Progettare il testo

Linee guida: esempio

R.Polillo - Aprile 2015

53

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 50: 14. Progettare il 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”)

54

R.Polillo - Aprile 2015

Page 51: 14. Progettare il testo

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

55

R.Polillo - Aprile 2015

Page 52: 14. Progettare il testo

Stile a piramide invertita

SINTESI

DETTAGLIO

MATERIALE

AGGIUNTIVO

link

link

56

R.Polillo - Aprile 2015

Page 53: 14. Progettare il testo

Questo testo non

è stato pensato

per il web!

58 R.Polillo - Aprile 2015

Page 54: 14. Progettare il testo

“Wall of text”

Fonte: Jakob Nielsen, www.useit.com

59

R.Polillo - Aprile 2015

Page 55: 14. Progettare il testo

Questo testo non

è stato pensato

per il web!

61 R.Polillo - Aprile 2015