grafica ed interfacce per la comunicazione - ?· introduzione grafica ed interfacce per la...

Download Grafica ed interfacce per la comunicazione - ?· Introduzione Grafica ed interfacce per la comunicazione…

Post on 17-Feb-2019

212 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

Grafica ed interfacce per la comunicazione

Scienze della Comunicazione

Paola Vocca

Lezione 17: Progettare il testo

Lucidi tradotti e adattati da materiale presente su

http://www.hcibook.com/e3/resources/ e

http://www.robertopolillo.it

Scopo di questa lezione

2

Fornire indicazioni su come presentare e comporre i

testi per una migliore usabilit dei sistemi che li utilizzano

Grafica ed interfacce per la comunicazione A.A. 2014/15

Introduzione

Grafica ed interfacce per la comunicazione A.A. 2014/15 3

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:

o struttura fisica (leggibilit fisica, piacevolezza, espressivit, )

o struttura linguistica (comprensibilit, )

Libro delle Ore, Francia, ca. 1440 4 Grafica ed interfacce per la comunicazione A.A. 2014/15

Breviario Belleville

(1323-26) 5 Grafica ed interfacce per la comunicazione A.A. 2014/15

6 Grafica ed interfacce per la comunicazione A.A. 2014/15

7 Grafica ed interfacce per la comunicazione A.A. 2014/15

8 Grafica ed interfacce per la comunicazione A.A. 2014/15

Home page, ca.2000 9 Grafica ed interfacce per la comunicazione A.A. 2014/15

Lusabilit del testo

Grafica ed interfacce per la comunicazione A.A. 2014/15 10

Il grado con cui esso pu essere usato da specificati

utenti per raggiungere specificati obiettivi con efficacia,

efficienza e soddisfazione in uno specificato contesto

duso

Per esempio:

o Efficacia: comprensione accurata e completa

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

11 Grafica ed interfacce per la comunicazione A.A. 2014/15

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

12 Grafica ed interfacce per la comunicazione A.A. 2014/15

Readability

Misura la sua comprensibilit complessiva

Considera quindi la struttura linguistica: ampiezza

del lessico, sintassi e semantica

Molto pi difficile da misurare sperimentalmente

13 Grafica ed interfacce per la comunicazione A.A. 2014/15

Paratesto

Grafica ed interfacce per la comunicazione A.A. 2014/15 14

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)

Grafica ed interfacce per la comunicazione A.A. 2014/15 15

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

Font: esempi

(dal primo Macintosh, circa1984)

16 Grafica ed interfacce per la comunicazione A.A. 2014/15

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)

17 Grafica ed interfacce per la comunicazione A.A. 2014/15

Terminologia

Grafica ed interfacce per la comunicazione A.A. 2014/15 18

Risoluzione

Grafica ed interfacce per la comunicazione A.A. 2014/15 19

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

Grafica ed interfacce per la comunicazione A.A. 2014/15 20

Screen font: progettati per essere ben leggibili sul

video (si parte da una griglia, e solo in seguito si

disegnano con tratti curvilinei)

Font diffusi Times New Roman font graziato pi usato sulla carta stampata. fu progettato da Stanley Morrison per conto del giornale londinese The Times, che lo adott nel 1932 in sostituzione del font Times Old Roman. Ben leggibile anche con caratteri di piccole dimensioni stampati sulla carta di cattiva qualit usata durante la Grande Depressione degli anni 30. Il disegno dei caratteri, alti e stretti, era concepito per ridurre i fastidiosi spazi bianchi derivanti dallallineamento a pacchetto dei testi nelle colonne del giornale

Georgia: screen-font graziato, disegnato da Matthew Carter per conto della Microsoft nel 1993. Fu progettato per essere leggibile sui monitor anche in corpo piccolo, ed molto simile al Times New Roman: le linee sono un po pi spesse, e il loro spessore varia meno. A parit di dimensione ,le lettere sono un po pi larghe e alte; le grazie sono pi larghe e con tratti meno obliqui. Non ci sono legature e le lettere sono pi verticalizzate, per permettere una migliore resa sul monitor .

Grafica ed interfacce per la comunicazione A.A. 2014/15 21

Arial font senza grazie adatto sia ai monitor sia alla carta stampata. Fu progettato nel 1982 ispirata a

Helvetica. Arial fu usato da Microsoft in Windows 3.1, ed oggi molto diffuso sul Web.

Verdana screen-font senza grazie, diventato quasi uno standard di fatto per i testi su monitor.

Progettato da Matthew Carter per la Microsoft per massimizzare la leggibilit anche in corpo piccolo

(fino a 4 pt) e su monitor a bassa risoluzione, fu rilasciato nel 1996 per Windows 95. I caratteri sono larghi

e ben spaziati, minuscole alte e ben leggibili, ed ha il vantaggio di differenziare bene i caratteri simili,

come per esempio la i maiuscola (che per questo ha le grazie), la elle minuscola e la cifra 1.

Esempio

Times New Roman (print font)

Verdana (screen font)

22 Grafica ed interfacce per la comunicazione A.A. 2014/15

Font proporzionali e non

Un font i cui glifi sono di larghezza variabile detto proporzionale, mentre un font con glifi di larghezza fissa detto non proporzionale (o monospace o a larghezza fissa)

I font proporzionali sono generalmente considerati pi eleganti e pi facili da leggere e sono quindi quelli pi comunemente utilizzati sulla carta stampata e sui monitor.

I font non proporzionali furono creati per le macchine per scrivere e per le stampanti a impatto, poich lo spostamento del carrello dopo la stampa di un carattere era sempre della stessa misura.

Grafica ed interfacce per la comunicazione A.A. 2014/15 23

Lettura su carta e sul video

Grafica ed interfacce per la comunicazione A.A. 2014/15 24

La lettura sulla carta e la lettura sul video sono molto

diverse:

o Supporto e angolo di lettura differenti

o Il testo sul video ha risoluzione molto inferiore al testo a stampa

(es. 72-96 vs 300+ dpi)

o 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

25 Grafica ed interfacce per la comunicazione A.A. 2014/15

Video

Eye tracking nella lettura di un testo sul video:

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

26 Grafica ed interfacce per la comunicazione A.A. 2014/15

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

Misurare la legibility

Grafica ed interfacce per la comunicazione A.A. 2014/15 27

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 dire

Grafica ed interfacce per la comunicazione A.A. 2014/15 28

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 in modo complesso, i risultati scientifici finora

ottenuti sono a volte contradditori e non si riesce a ricavare regole generali

semplici

Grafica ed interfacce per la comunicazione A.A. 2014/15 29

Diffidate delle indic

Recommended

View more >