Lezione #2 di Paolo Gatti all'Università degli Studi di Teramo, Facoltà di Scienze della Comunicazione, avente come tema "Siti Web: parola visuale, analisi del lettore, usability dei testi ed accessibilità".

1. UniTE lezione #2
WINTER
Template
Siti Web
Parola visuale, analisi
del lettore, usability dei
testi ed accessibilità
dott. Paolo Gatti – pgatti@unite.it
www.paologatti.it - www.webedintorni.eu

2. Agenda
WINTER
Principi generali
Template
Comunicare sul web
Il lettore del web
Usability dei testi
Accessibilità

3. Principi generali
Il testo sul web è una “cipolla”:

4. Comunicare sul web..
Sul web non ci sono solo parole: la grafica è
parte integrante del processo di
scrittura.
Il testo, quindi, convive con:
i colori
gli spazi
le immagini
gli elementi grafici paratestuali

5. Parola visuale: pagine dense
La densità:
Provoca confusione
Allunga di tempi
Annulla l'informazione

6. Parola visuale: pagine ariose
Più semplici da leggere, più veloci e con
maggior piacere da parte dell'utente

7. Parola visuale: esempi a confronto
Tra i siti più brutti: Bakers Junction

8. Caratteristiche principali della lettura web
L’occhio è attratto dalle discontinuità
(spazi, colori...).
Si cerca di circoscrivere il contesto
(argomento, autore, data, testata,
lunghezza documento...)
Si cercano i punti di ancoraggio (link,
grassetti, foto...)
La lettura è molto finalizzata. La lettura è
un’azione
Vi riconoscete in questa analisi? Io sì!

9. Discontinuità: la lettura “a salti”
Il lettore web è un vero lettore? L’80% dei lettori
“scorre” la pagina!!

10. Il rapporto “Eyetrack”
Osservando sperimentalmente i comportamenti degli
utenti attraverso l’analisi dei movimenti oculari, dei
tempi di permanenza e dei clic sui link...

11. Il rapporto “Eyetrack”
In generale è stato rilevato che...
Cosa vi ricorda?! Il Modello ad F!

12. L'effetto della dimensione dei font
Se volete spingere a leggere più a lungo la home,
usate font piccoli (11) se volete aiutare un rapido
scan delle cose essenziali usate font grandi (12-14)

13. Rapporto tra testo e azione
Se volete spingere a leggere più a lungo la home,
usate font piccoli (11) se volete aiutare un rapido
scan delle cose essenziali usate font grandi (12-14)

14. Elementi di “ancoraggio”
Le immagini e i titoli sono il primo elemento a cui si
presta attenzione, indipendentemente dalla loro
collocazione nella pagina. Le immagini con i visi in
maniera ancora più accentuata.
All'interno del testo alcuni elementi vengono
percepiti prima di altri:
Titoli
Sottotitoli
Grassettature
Link
Punti Elenco
Testo semplice

15. Elementi di “ancoraggio”

16. Usability dei testi
Il testo sul web deve essere riadattato rispetto
alla carta stampata!
Sul video la leggibilità si riduce del 25% rispetto
alla carta stampata (Video: 72 dpi - stampa: 300
-1200 dpi).
Il testo sul web fa adeguatamente formattato per
renderlo usabile e adeguarlo alle caratteristiche del
mezzo.
Non si può limitarsi a “riversare” in html il testo
concepito su altri supporti (carta, slide, word..).
I blocchi di testo troppi fitti spaventano il lettore e
non danno “elementi di ancoraggio”.

17. Usability dei testi: consigli “per l'uso”
Di seguito una serie di consigli utili:
è meglio impaginare il testo in una sola colonna
larga circa 450/500 pixel e non oltre, così da
renderla adeguata alla lettura umana;
è opportuno limitare la lunghezza dei testi tra 500 e
3.000 caratteri per un max di 2 o 3 schermate
(ricerche confermano che la maggior parte degli
utenti non supera le 2,5 scermate); in alternativa, è
meglio utilizzare un indice o la “paginazione”;
in caso di pagine lunghe, potrebbero essere utili
bottoncini per tornare in alto;
evitare il giustificato: peggiora la leggibilità!
evitare l'allinamento al centro → allineamento a sx!

18. Usability dei testi: consigli “per l'uso” (2)
evitare i testi in maiuscolo (minore leggibilità e
secondo le netiquette, scrivere in maiuscolo vuol
dire URLARE!)
ridurre al minimo i testi in corsivo (magari solo per
parole particolari, poiché aumenta l'effetto
“seghettatura” e quindi diminuisce la leggibilità);
ridurre al minimo i testi sottolineati (meglio il
grassetto);
Font migliori: Arial, Verdana
Font peggiori: Times New Roman, Garamond

19. Usability dei testi: consigli “per l'uso” (3)

20. Usability dei testi: consigli “per l'uso” (4)
Percezione degli utilizzatori relativamente al font
utilizzato:
Le resa migliore relativamente ai tempi di lettura si
ha con caratteri con corpo 12 Verdana o Thaoma

21. Usability dei testi: consigli “per l'uso” (5)

22. Usability dei testi: consigli “per l'uso” (6)

23. Accessibilità dei siti web
L'accessibilità è quella caratteristica dei Siti Web
che li rende usabili in modo efficace e con
soddisfazione anche da persone che si trovano in
condizioni "di svantaggio", quali, per esempio, le
persone disabili, ma anche le persone anziane,
quelle con bassa scolarità, persone con
tecnologia hardware e software obsoleta,
immigrati, e così via.
L'obbiettivo è non escludere nessuno dalla
fruizione dei contenuti!

24. Accessibilità – Legge Stanca
L'accessibilità dei Siti Web è regolata in Italia da
una legge: Legge 4/2004 o Legge Stanca, dal
nome del ministro che l'ha promossa. Questa
legge, intitolata "Disposizioni per favorire
l'accesso dei soggetti disabili agli strumenti
informatici" si applica alla pubblica
amministrazione, ma costituisce anche un modello
per i privati.
La Legge definisce tutta una serie di requisiti da
rispettare e definisce delle procedure per
verificare l'accessibilità di un Sito Web.

25. Accessibilità – Legge Stanca
Oltre a tutte le pubbliche amministrazioni, le legge
Stanca obbliga altre realtà ad avere i propri siti
accessibili:
enti pubblici economici;
aziende private concessionarie di servizi pubblici;
aziende municipalizzate regionali;
enti di assistenza e di riabilitazione pubblici;
aziende di trasporto e di telecomunicazione a
prevalente partecipazione di capitale pubblico;
aziende appaltatrici di servizi informatici.

26. Aumentare l'accessibilità
Al fine di aumentare l'accessibilità di un sito web, è
bene seguire le seguenti indicazioni:
ricordare 2 principi fondamentali:
l'utente sa cosa vuole e vuole trovarlo;
l'utente non vuole perdere tempo.
rendere ben visibili in home page le informazioni più
importanti;
parlare il linguaggio dell'utente;
essere coerenti (nel linguaggio, nella grafica, negli effetti,
nella presentazione);
essere consistenti (strumenti di navigazione, colori,
caratteri, grafiche, audio, layout, …);
velocità: il sito si dovrebbe caricare in max 10 sec.

27. Valutare l'accessibilità
Uno dei primi passi per creare contenuti accessibili, è
il saper valutare l'accessibilità di un sito web:
validazione del codice HTML / XHTML (e CSS) →
HTML Validator e CSS Validator;
validare l'accessibilità → difficile automaticamente ma
The Wave è un buon punto di partenza;
controllare l'accessibilità della tastiera;
provare la pagina con uno screen reader;
Controllare la conformità della pagina alle WCAG→
WCAG Web Content Accessibility Guidelines versione
2.0 divise per priorità: 1 (A) , 2 (AA) e 3 (AAA) –
Link agli strumenti di valutazione
Prevedere test pratici con gli utenti disabili

28. That's all!
DOMANDE?! :)

29. Credits
Giacomo Mason
http://www.slideshare.net/giacomo.maso
n/usabilita-e-scrittura-dei-testi-per-il-web