13.Progettare il testo
Upcoming SlideShare
Loading in...5
×
 

13.Progettare il testo

on

  • 2,965 views

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010

Corso di Interazione Uomo Macchina del Prof.R.Polillo - Università di Milano Bicocca - DISCO - AA. 2009-2010

Statistics

Views

Total Views
2,965
Views on SlideShare
2,548
Embed Views
417

Actions

Likes
5
Downloads
123
Comments
0

9 Embeds 417

http://www.weebly.com 257
http://www.rpolillo.it 107
http://ssit-laboratorionline.weebly.com 31
http://scuolainterpreti-web.weebly.com 9
http://ssit-scritturaetraduzioneweb.weebly.com 5
http://www.slideshare.net 3
http://mastertraduzioneonline.weebly.com 3
http://translate.googleusercontent.com 1
http://web.archive.org 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • Single Leaf from a Book of Hours, by a French Scribe 163 x 117 mm France, ca. 1440 R.Polillo, Interazione uomo macchina - Parte terza, 3
  • Belleville Breviary 1323-26 Illumination on parchment, 24,0 x 17,0 cm Bibliotheque Nationale, Paris The influence of Italian painting is marked in Pucelle's work, demonstrated by his interst in pictorial space. This is possibly the most revolutionary feature of his work. The exploitation of various rudimentary forms of perspective was a completely new feature of late thirteenth-century Italian painting, and Pucelle incorporated something of these experimments into his manuscript illuminations. The page from the Belleville Breviary shows David and Saul enclosed within a small doll's-house-like construction, painted erratically but clearly in three dimensions. R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • YAHOO, circa 1995 ? R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • It has been known for over 100 years that when we read, our eyes don’t move smoothly across the page, but rather make discrete jumps from word to word. We fixate on a word for a period of time, roughly 200-250ms, then make a ballistic movement to another word. These movements are called saccades and usually take 20-35ms. Most saccades are forward movements from 7 to 9 letters, but 10-15% of all saccades are regressive or backwards movements. Most readers are completely unaware of the frequency of regressive saccades while reading. The location of the fixation is not random. Fixations never occur between words, and usually occur just to the left of the middle of a word. Not all words are fixated; short words and particularly function words are frequently skipped. Figure 5 shows a diagram of the fixation points of a typical reader. During a single fixation, there is a limit to the amount of information that can be recognized. The fovea, which is the clear center point of our vision, can only see three to four letters to the left and right of fixation at normal reading distances. Visual acuity decreases quickly in the parafovea, which extends out as far as 15 to 20 letters to the left and right of the fixation point.   Eye movement studies that I will discuss shortly indicate that there are three zones of visual identification. Readers collect information from all three zones during the span of a fixation. Closest to the fixation point is where word recognition takes place. This zone is usually large enough to capture the word being fixated, and often includes smaller function words directly to the right of the fixated word. The next zone extends a few letters past the word recognition zone, and readers gather preliminary information about the next letters in this zone. The final zone extends out to 15 letters past the fixation point. Information gathered out this far is used to identify the length of upcoming words and to identify the best location for the next fixation point. For example, in Figure 5, the first fixation point is on the s in Roadside . The reader is able to recognize the word Roadside , beginning letter information from the first few letters in joggers , as well as complete word length information about the word joggers . A more interesting fixation in Figure 5 is the word sweat . In this fixation both the words sweat and pain are short enough to be fully recognized, while beginning letter information is gathered for and . Because and is a high frequency function word, this is enough information to skip this word as well. Word length information is gathered all the way out to angry , which becomes the location of the next fixation. R.Polillo, Interazione uomo macchina - Parte terza, 3
  • Prova con 35 partecipanti, con vista 20/20, con monitor 1024x768. Il materiale letto ad ogni prova era di circa 2 pagine di testo (1041 parole in media) M.Bernard & M.Mills, So, What Size and Type of Font Should I Use on My Website?, Usability News, Summer 2000 R.Polillo, Interazione uomo macchina - Parte terza, 3
  • Released in 1996 , Verdana was bundled with subsequent versions of Microsoft's Windows operating system , as well as their Office and Internet Explorer software on both Windows and Mac OS . In addition, it was long available for download from Microsoft's web site allowing it to be used by any system supporting TrueType fonts. As a result, it is now installed on most desktop computers. The redistributable downloadable file is still available from a third-party web site; see the External links section. Bearing similarities to humanist sans-serif typefaces such as Frutiger , Verdana was designed to be readable at small sizes on a computer screen . The lack of serifs, large x-height (heights of lower-case letters, as scaled to the letter x being exactly equal to one), wide proportions, loose letter-spacing, large counters (spaces inside partially enclosed portions of letters or symbols such as "c", "s", or curved quotation marks), and emphasized distinctions between similarly-shaped characters are chosen to increase readability. As a result, it is often chosen by web designers attempting to cram large amounts of text into a small space. Indeed, Verdana is so much more readable than other common fonts of the same sizes that some have suggested that web authors not specify it for the body text of a web page, because then the author is likely to select a font size that makes the text unreadable when Verdana is unavailable [1] . According to one long-running survey [2] , the availability of Verdana is 94% on Windows (making it the second most common font on that platform) and 92.6% on computers running Macintosh OS. As an example of the attention given to making similar letters distinguishable, the capital letter 'I' in Verdana has serifs, even though Verdana is a sans-serif font. This makes it easy to distinguish between 'l' (ell) and '1' (one). R.Polillo, Interazione uomo macchina - Parte terza, 3
  • R.Polillo, Interazione uomo macchina - Parte terza, 3
  • Vedere le Jakob Nielsen’s Alertbox: HOW USERS READ ON THE WEB (Oct 1, 1997) CONCISE, SCANNABLE, AND OBJECTIVE: HOW TO WRITE FOR THE WEB (,John Morkes & Jakob Nielsen R.Polillo, Interazione uomo macchina - Parte terza, 3

13.Progettare il testo 13.Progettare il testo Presentation Transcript

  • PROGETTARE IL TESTO Corso di Interazione Uomo Macchina AA 2009-2010 Roberto Polillo Università di Milano Bicocca Dipartimento di Informatica, Sistemistica e Comunicazione
  • Scopo di questa lezione
    • Fornire indicazioni su come è utile presentare e comporre i testi per una migliore usabilità dei sistemi che li utilizzano
  • Temi
    • Introduzione
    • Tipografia
    • Legibility
    • Readability (Comprensibilità)
  • Introduzione
  • Introduzione
    • I testi costituiscono una componente molto importante delle interfacce utente e possono influenzare grandemente la usabilità di un sistema (es.: web)
    • Possono essere analizzati da diversi punti di vista:
      • dal punto di vista della struttura fisica ( leggibilità fisica , piacevolezza , espressività , …)
      • dal punto di vista della struttura linguistica ( comprensibilità , …)
  • Libro delle Ore, Francia, ca. 1440
  • Breviario Belleville (1323-26)
  •  
  •  
  •  
  • Home page, ca.2000
  • 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
  • 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 sua struttura tipografica, non i contenuti
    • Può essere misurata sperimentalmente in modo relativamente semplice
  • “ 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
  • 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
  • Elementi di tipigrafia
  • Font (o tipi di caratteri)
    • Un insieme di caratteri con un certo stile grafico
  • Font: esempi (dal primo Macintosh, circa1984)
  • 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)
  • Terminologia
  • 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)
  • 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)
  • Esempio Times New Roman Verdana
  • 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)
  • Legibility
  • Il processo di lettura Fonte : Kevin Larson. The Science of Word Recognition  
  • Video
    • Eye 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)
    • 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
  • Legibility: che cosa si può dire
    • 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 fra loro in modo complesso, e non si riesce a ricavare regole generali semplici
  • 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) Arial 10 Arial 12 (senza grazie) Times New Roman 10 Times New Roman 12 (con grazie) * * 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) Tempo di lettura in sec
  • 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
  • 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 12
  • 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:
    • 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)
    Allineamenti (segue)
  • Impaginazione “a pacchetto” Può essere sgradevole in colonne strette (spazi vuoti)
  • 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
  • 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
  • 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)
  • Messa a fuoco 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 ) LENTE Blu Verde Rosso Blu Verde Rosso A B C FUOCO SULLA RETINA LUCE BIANCA
  • 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.
  • Readability
    • Nel mezzo del cammin di nostra vita
    • Mi 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 (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
  • VOCABOLARIO DI BASE (7000 lessemi) VOCABOLAR  COMUNE VOCABOLARIO  FONDAMENTALE  lessemi 
  • 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
  • I manuali di stile
    • Manuali con indicazioni per la redazione di testi
    • Ovviamente non hanno convalida speriementale
  • Linee guida: esempio
    • Scrivere frasi brevi
    • Usare parole del linguaggio comune
    • Usare pochi termini tecnici e spiegarli
    • Usare poco abbreviazioni e sigle
    • Usare verbi nella forma attiva e affermativa
    • Legare le parole e le frasi in modo breve e chiaro
    • Usare in maniera coerente le maiuscole, le minuscole e la punteggiatura
    • Evitare neologismi, parole straniere e latinismi
    • Uso del congiuntivo
    • Usare in maniera corretta le possibilità di composizione grafica del testo
  • 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 ”)
  • “ 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
  • Stile a piramide invertita SINTESI DETTAGLIO MATERIALE AGGIUNTIVO link link
  • Stile a piramide invertita: esempi   
  • Questo testo non è stato pensato per il web!
  • “ Wall of text” Fonte: Jakob Nielsen, www.useit.com
  • Questo testo non è stato pensato per il web!
  • Questo testo non è stato pensato per il web!