Affaticamento visivo & Barbarismo grafico12
Nov. '98 (Pagine 32, 40)
1) I caratteri devono essere abbastanza grandi 2) La saturazione
dei colori di sfondo e caratteri deve essere bassa, sia per eviare fastidiosi
adattamenti al colore, sia perchè si possono produrre effetti di
profondità distraenti:
###############################
###############################
###############################
(La luce rossa a bassa frequenza e quella blu
a lunghezza d'onda corta vegono messe a fuoco su piani differenti dalle
ottiche dei nostri occhi (cristallino, cornea, umori) e si ha questa illusione
di profondità. Talvolta è un effetto voluto)
3) Lo sfondo e il testo devono aver tra di loro un contrasto giusto. Un contrasto eccessivo, come vediamo qui e all'inizio del testo, produce affaticamento della vista, uno troppo piccolo rende la lettura faticosa |
| Se si usano sfondi strutturati essi devono contenere figure sfumate e a basso contrasto. |
4) Occorre usare un font leggibile, come questo Arial, il Verdana, o simili.
5) Mantenere righe non troppo lunge: per evitare
che l'occhio perda la posizione nella riga.
Anche le figure devono rispettare regole simili, ad esempio fissare questa semplice griglia per pochi secondi produce facilmente affaticamento visivo:

Anche nel fare grafici occorre tenere di conto
di molti parametri, alcuni anche estetici.
In un sito che ho trovato lo sfondo delle pagine
era nero e i caratteri bianchi, Arial, di dimensione 0 (~corpo 11), come
l'inizio di questa pagina. Dopo poche decine di secondi di lettura cominciavo
a vedere punti e linee rilucenti, cangianti, e provavo fastidio alla vista.
Quando si ha una emicrania forte si può vedere in maniara simile.
Da cosa è provocato? i bordi netti fanno scaricare energicamente
i neuroni complessi del corpo genicolato laterale e della corteccia visiva,
adibiti alla loro rivelazione. Alla lunga tali neuroni si affaticano (o
si adattano) e riducono la loro tempesta di scariche. Il risultato è
una minore sensibilità ai bordi e una riduzione della capacità
di vedere bene.
Fenomeni simili possono essere tanto forti da
spegnere quasi completamente aree di campo visivo.
Noi tutti abbiamo una macchia cieca nel campo
visivo di ogni occhio. E' il punto dove il nervo ottico esce dalla retina.
Di solito non siamo consapevoli della sua esistenza a causa del fatto che
abbiamo due occhi, con campi visvivi in gran parte sovrapposti, e che il
cervello automaticamente riempe e completa le zone cieche prendendo dati
dalle zone circostanti. Tali fenomeni di completamento si verificano anche
per le macchie cieche prodotte artificialmente nel modo suindicato. Vedi
articoli su Le Scienze n. 287, Luglio '92, p. 56; e su Nature
350 n. 6320, 25 Apr. '91.
Test per rivelare la macchia
cieca dell'occhio destro.
Chiudere il sinistro e guardare
solo la croce da distanza ravvicinata, circa 20cm.
Quando il punto bianco cade
nella macchia cieca scompare.
David H. Hubel, in Occhio, Cervello, Visione,
NCS Zanichelli, parla tra l'altro di mappe di dominanza dei due occhi.
Mostra che se nell'infanzia un occhio non riceve immagini strutturate,
le mappe di dominanza dell'occhio normale prendono gran parte dello spazio
disponibile. Di solito ogni punto della corteccia visiva è sotto
la dominanza di uno dei due occhi. Nell'insieme queste aree hanno l'aspetto
di una zebratura. Quando un occhio prende il sopravvento le righe di un
occhio diventano molto più larghe di quello dell'altro, e coprano
una superficie maggiore. (Vedi Cap. 9 del libro di Hubel). A pag. 226 Hubel
si chiede che differenza faccia dal punto di vista delle capacità
visive questa differnza di dominanza, dato che l'acuità visiva non
cambia. Io penso che un maggior numero di neuroni possa comportare una
maggiore ridondaza funzionale, e che quindi ad esempio la vista dell'occhio
dominante si affatichi più lentamente dell'altro in situazioni come
la lettura di testi troppo contrastati.
Barbarismo grafico
Talvolta anche su riviste si trovano grafici di
pessima qualità. Per fare una prova ho creato un grafico usando
Excel
7. E' un buon programma, ma se non lo si sa ben usare può produrre
risultati come il seguente, ottenuto coi parametri di default, senza legenda:
|
|
Poi ho fatto qualche modifica in Excel, ho grabbato
e rielaborato la figura con Paint Shop Pro 5. Il risultato non è
perfetto, ma è molto meno distraente, e rispetta alcune delle idee
di Edward R. Tufte, esposte nel suo The visual display of quantitative
information, Graphics Press. Da notare che non ho eseguito modifiche
pesanti, non ho neppure cambiato tipo di grafico e la dimensione delle
barre:
|
Tipo
di rete utilizzata (gestore)
|
Tufte nel suo primo libro sulla visualizzazione
dati ha esposto una serie di regole da rispettare per produrre grafici
e figure gradevoli e informative. Possono sembare semplici, ma spesso non
vengono seguite, e i risultati sono pessimi. Non tutte queste regole sono
oggettive, in quanto concorrono sicuramente anche fattori estetici personali.
Alcune di queste regole e definizioni sono riportate
anche nel suo terzo libro Visual Explanations.
1) Tufte definisce un parametro utile per caratterizzare
un grafico, la sua densità di informazione. Si calcola misurando
quanti bit in media il grafico, o tabella o altro, mostra per centimetro
quadro di superficie del foglio. Fra i grafici più informaticamente
densi ci sono le mappe di densità, dove ad ogni pixel si associa
un valore numerico. (Da notare che comunque può essere piuttosto
difficile estrarre informazione numerica precisa da tale grafico col solo
ausilio della vista...)
Definisce anche un parametro simile, il numero
di primitive grafiche per unità di superficie. Una primitiva può
essere un segmento, un punto, un disco o un rettangolo, ecc. Un testo può
essere visto come un tutto unico, come un insieme di parole o di lettere.
2) Occorre diminuire al massimo la densità
di primitive, a parità di densità informativa.
I
nostri grafici sopra hanno superficie simile (o possono essere portati
ad averla), ma numero di primitive differente. Il primo grafico possiede,
escludendo il testo, circa 18 primitive, il secondo solo otto. Anche il
testo è meno distraente, e le percentuali hanno meno della metà
di caratteri. Secondo Tufte ridurre il numero di primitive serve per ridurre
ridondanza inutile (che ho sostituito con ridondanza utile, i valori numerici
delle barre) e confusione visiva nel grafico.
Un'altro utile parametro è il rapporto
dati/inchiostro. Cioè la quantità di informazione tracciata
sul grafico, per unità di inchiostro usato per tracciarla. Tufte
suggerisce di ridurre al minimo anche questo parametro.
Un esempio del risultato dell'applicazione di
questa regola, la si vede nella sua versione del Box Graph (grafico scatola).
Nella figura si vede la versione comune, e quella inventata da Tufte. Questo
grafico è usato per visualizzare informazioni sintetiche su distribuzioni.
Le primitive sono state ridotte da sei a tre, mantenendo le stesse informazioni.
Il grafico è molto più pulito e la differenza si vede molto
quando si hanno da affiancare parecchi Box graph.
3) Occorre essere rigorosi nel rispettare le scale di grandezza originali, e non usare scale variabli per vari assi del grafico. Inoltre bisogna possibilmente sempre fornire allegato ad una figura, scala, orientazione e dimensione delle "tacche" del grafico. Una corretta scalatura dei dati spesso può far scoprire più informazioni a chi legge il grafico.
4) Occorre rendere tutte le distinzioni
visive le più sottili possibili, ma ancora chiare e visibili. Ad
esempio utilizzando linee sottili nei garfici e colori tenui. In un grafico
di densità colorato se usiamo sfumature di colori finemente graduate,
abbiamo la possibilità di rappresentare più valori differenti.
Nel mio secondo grafico l'uso di linee sottili permette di usare linee
più spesse per distinguere il valore di 100% dagli altri. Notare
anche l'uso dell'antialiasing per ridurre il rumore visivo.
La riduzione delle differenze visibili rende
il grafico meno distraente. Ciò vale anche per tabelle. I bordi
delle celle servono per distinguere le celle tra di loro. Riducendo
al minimo tale distinzione, otteniamo tabelle più chiare.
Si può vedere un dettaglio di una tabella
prodotta da Excel, poi e rielaborata col Paint Shop:


Le linee verticali sono state tolte, e quelle orizzontali sono state ridotte di intensità.
Lo stesso vale per tabelle fatte in Html: molto
spesso i bordi delle celle potrebbero essere resi più leggeri o
eliminati del tutto:
|
|
- Torna all'indice -