Introduzione alla progettazione web
accessibile e usabile
Marco Bertoni
www.semplicemente.org
marco@semplicemente.org

Il seminario
 Argomenti:
 Pensare i contenuti.
 Scrivere i contenuti.
 Strumenti:
 Prospettiva multidisciplinare.
 Buon senso.
2 Marco Bertoni - 2009 - www.semplicemente.org

Introduzione
3 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti!
 Le pagine web del Comune di [...] sono state realizzate
secondo le specifiche che definiscono l'HyperText Markup
Language (HTML), versione 4.01, il linguaggio per la
pubblicazione su Web e CSS2, le specifiche relative ai
fogli di stile: due tecnologie indispensabili per la
separazione dei contenuti dalla struttura del documento.
4 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la struttura 1
 La struttura di un documento è il modo in cui è
organizzato il contenuto.
 Il contenuto di un libro, per esempio, è organizzato in
titoli, sottotitoli paragrafi ecc. utilizzando convenzioni
tipografiche per rappresentarli.
 Il contenuto di una pagina web può essere strutturato in
modo analogo grazie ai linguaggi di marcatura.
5 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la struttura 2
 Ogni marcatore assegna una funzione al contenuto che
delimita e ne definisce di conseguenza le relazioni con le
restanti informazioni.
 HTML si è evoluto nel tempo alla ricerca di una sempre
maggiore separazione della struttura dallo stile di
presentazione.
6 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la struttura 3
<h2>Critica della metodologia per la verifica tecnica di
accessibilità delle applicazioni basate su tecnologie
internet</h2>
<p class="autore">Thursday 4 June 2009 <strong>Marco
Bertoni</strong>, ultimo aggiornamento: Thursday 4 June
2009.</p>
<p class="sottotitolo">A quattro anni dalla pubblicazione del
DM 8 luglio 2005 è il momento di tirare le somme.</p>
<p>Quasi due anni fa pubblicai alcuni articoli in cui analizzavo
criticamente la metodologia di verifica tecnica alla quale deve
attenersi chiunque valuti un sito per la conformità alla legge
4/2004. In questo articolo riprendo, correggo e amplio quelle
critiche. </p>
7 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la presentazione 1
 La presentazione è il modo in cui il contenuto strutturato è
reso fruibile agli utenti. E' l’insieme delle regole che indicano:
 le modalità tipografiche;
 la disposizione dei contenuti;
 i colori da utilizzare;
 ecc.
 I contenuti possono essere:
 presentati su schermo;
 stampati su carta;
 letti da un sintetizzatore vocale;
 fruiti con dispositivi tattili braille;
 ecc.
8 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la presentazione 2
p { color: red; }
h1, h2, h3, h4, h5, h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 120%;
font-weight: normal;
margin: 0 0 2px 0;
line-height: normal;
}
9 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la presentazione 3
 Le regole sono impostate utilizzando linguaggi come CSS
(Cascading Style Sheets) o la famiglia XSL (eXtensible
Stylesheet Language) per XML, e sono applicate da
programmi (o dispositivi) in grado di interpretare un
documento scritto in un dato linguaggio (per esempio un
browser o uno screen reader).
 A partire dal design tipografico di base con questi
linguaggi si possono realizzare complessi layout visivi,
insieme a modalità di presentazione alternative, senza
modificare la struttura del documento sorgente.
10 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: la presentazione 4
HTML
INTERPRETE
CSS
11 Marco Bertoni - 2009 - www.semplicemente.org

La Comunicazione Mediata
dal Computer
12 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 1
 La Comunicazione Mediata dal Computer (CMC)
 E' facile da modificare.
 E' facile da memorizzare.
 Si trasmette fedelmente: è meno sensibile ai disturbi.
 I canali si integrano facilmente (multimedialità).
13 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 2
 Può essere ASINCRONA o SINCRONA
 Alcuni esempi di CMC asincrona:
 Siti Web (ipertesti e ipermedia), forum, blog, wiki.
 Posta elettronica.
 Newsletter, newsgroup.
 Mailing list, guestbook.
 Ecc.
14 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 3
 Alcuni esempi di CMC sincrona:
 IRC e Web Chat.
 IM (Instant Messaging).
 MUD (Multi User Dungeon) e MMORPG (Massive(ly)
Multiplayer Online Role-Playing Game).
 uCommunity (o Ubiquitous Community) come Second Life.
 Ecc.
15 Marco Bertoni - 2009 - www.semplicemente.org

16 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 4
 Alcune peculiarità “negative” della CMC:
 Sono assenti gli aspetti di meta-comunicazione. Come devi
“intendere” il contenuto?
 Non c'è garanzia sull’identità dell'interlocutore. Puoi
assumere un’identità fittizia: Spoofing.
 L’alternanza dei turni non può essere definita precisamente
(nella CMC sincrona).
 Il principio di cooperazione è indebolito (non ci sono
feedback diretti e l’elaborazione del messaggio non è
immediata).
17 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 5
 Conseguenza:
 Si possono diffondere atti comunicativi disfunzionali
(discomunicazione)
18 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 6
Lurking
19 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 7
Flaming
20 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 8
Troll
21 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 9
Fisking
22 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: CMC 10
 [...] nessun dispositivo tecnologico è di per sé neutro, ma
la sua stessa esistenza modifica, spesso in modo
sostanziale, il nostro rapporto con l'ambiente, con il
lavoro, le nostre relazioni interpersonali e la nostra stessa
auto-percezione [...]
Patrizia Violi, Conversazioni Telematiche, in Galatolo,
Pallotti, La Conversazione, Cortina.
 OK, ma attenzione al determinismo tecnologico!
23 Marco Bertoni - 2009 - www.semplicemente.org

L’accessibilità
24 Marco Bertoni - 2009 - www.semplicemente.org

Il sito da sei milioni di dollari!
25 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 1
 Qualunque persona in qualunque momento della vita può
avere una condizione di salute che in un ambiente
sfavorevole diventa disabilità.
Matilde Leonardi - editor del progetto "ICF in Italia"
26 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 2
 Qualsiasi utente dovrebbe essere in grado di fruire dei
contenuti e servizi offerti da un sito web.
 Ma utenti differenti hanno bisogni differenti.
 Una persona non vedente necessita di tecnologie
assistive per navigare il web;
 chi ha disabilità motorie può trovare difficile, o
impossibile, l’utilizzo di sistemi di puntamento standard
come un mouse;
 ognuno di noi nell’arco della vita può sperimentare una
disabilità temporanea (come per esempio un braccio
rotto)
27 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 3
 I differenti livelli di abilità delle persone diventano
barriere. Che fare?
 Esistono alcune linee guida per l’accessibilità (WCAG) che
un web designer può seguire durante lo sviluppo di un
sito.
 Lo scopo di queste tecniche è quello di rendere le
informazioni e i servizi disponibili a chiunque senza
discriminazioni. Questo è il significato della parola
accessibilità del Web.
28 Marco Bertoni - 2009 - www.semplicemente.org

UN QUIZ!
29 Marco Bertoni - 2009 - www.semplicemente.org

UN ALTRO QUIZ!
30 Marco Bertoni - 2009 - www.semplicemente.org

QUIZ!
1. Una mela appoggiata alla sommità di un grattacielo e
sullo sfondo una città
2. Panorama di New York con una mela in primo piano
3. La Grande Mela (The Big Apple)
4. Una mela
5. Una mela rossa
6. ""
31 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 4
 Un esempio: il testo alternativo (attributo ALT)
 Il testo alternativo fornisce allo screen reader una
rappresentazione del contenuto informativo di un oggetto non di
testo, quando è rilevante per la comprensione dei contenuti.
 L’attributo ALT è obbligatorio per i marcatori IMG e AREA mentre
è opzionale per gli elementi INPUT e APPLET.
 Tutti i marcatori per le immagini in tutto il sito, senza distinzione,
devono contenere l’attributo ALT.
 Se le immagini sono decorative deve essere inserito nullo: alt="".
 Se l’immagine è rilevante per la comprensione del testo, deve
essere equivalente al contenuto informativo veicolato dall’oggetto
al quale si applica.
32 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 5
33 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 6
34 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 7
 Al non vedente devi veicolare la stessa informazione che
riceve il vedente.
 Questo atteggiamento “pedagogico” nei confronti del
disabile spesso è un retaggio culturale. Un po’ come chi
parla a un volume più alto, e scandendo le parole, di
fronte a un non vedente...
 E se il non vedente fosse un web designer?
35 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 8
 Un altro esempio:
 Perché le intestazioni HTML (H1, H2, H3
ecc.) sono fondamentali per l'accessibilità di
una pagina web?
36 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 9
37 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 10
38 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 11
 Lo screen reader consente di:
 muoversi attraverso gli elementi della pagina: parole, righe,
paragrafi ecc.
 Può leggere solo gli elementi di intestazione (H1, H2, H3
ecc.);
 saltare da una tabella all’altra;
 saltare da un modulo all’altro;
 leggere le liste HTML (OL, UL) indicando il livello di
annidamento.
 Ecc.
39 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 12
 Queste funzionalità sono compromesse se:
 il testo non è marcato correttamente;
 se mancano le intestazioni o sono strutturate in modo
scorretto;
 se sono assenti le etichette per i controlli dei moduli;
 se le tabelle non hanno gli attributi corretti;
 ecc.
40 Marco Bertoni - 2009 - www.semplicemente.org

QUIZ!
41 Marco Bertoni - 2009 - www.semplicemente.org

QUIZ!
42 Marco Bertoni - 2009 - www.semplicemente.org

QUIZ!
43 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 13
Copyright © Marco Bertoni 2008. Tutti i diritti sono riservati. E' vietata la riproduzione anche parziale con qualsiasi mezzo.
44 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 14
Copyright © Marco Bertoni 2008. Tutti i diritti sono riservati. E' vietata la riproduzione anche parziale con qualsiasi mezzo.
45 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 15
Copyright © Marco Bertoni 2008. Tutti i diritti sono riservati. E' vietata la riproduzione anche parziale con qualsiasi mezzo.
46 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 16
47 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 17
 Visione dei colori normale:
48 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 18
 Deuteranopia (deficit dei colori rosso e verde):
49 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: accessibilità 19
 Tritanopia (deficit dei colori blu e giallo):
50 Marco Bertoni - 2009 - www.semplicemente.org

L’usabilità
51 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 1
 L'usabilità è un attributo qualitativo che riguarda quanto
qualcosa è facile da usare. Più specificamente, si riferisce
a quanto velocemente le persone imparano a usarlo, a
quanto sono efficienti nel farlo, a quanto l'oggetto è
degno di essere ricordato, a quanti errori provoca e a
quanto piace usarlo agli utenti. Se gli utenti non
possono o non vogliono usare una
caratteristica, questa potrebbe anche non
esistere.
Nielsen, Loranger, Prioritizing Web Usability, New Riders.
52 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 2
 Alcuni problemi di usabilità del Web secondo Nielsen:
 Il colore del link non cambia quando è visitato.
 Il pulsante "Indietro" del browser è disabilitato.
 Si aprono nuove finestre del browser.
 Si aprono finestre pop-up.
 Ci sono elementi di design che sembrano pubblicità.
 Sono violate le convenzioni di design.
 I contenuti sono nebulosi e vi sono annunci "vuoti".
 Il contenuto è troppo denso e non "scansionabile".
53 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 3
 Un esempio: le modalità di lettura sul web:
 Colpo d’occhio: l’informazione visiva di una pagina nel suo
insieme dà la percezione dei contenuti e della presenza o
meno di particolari argomenti.
 Scansione del testo: le persone raramente leggono le pagine
web parola per parola; piuttosto scansionano la pagina,
selezionando singole parole e frasi (Jacob Nielsen).
54 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 4
 Suggerimenti per facilitare il colpo d’occhio:
 Organizza le pagine in zone caratteristiche per tipo di
informazione.
 Inserisci i contenuti più importanti, e quelli più recenti,
prima possibile nella struttura del documento.
 Struttura l’informazione con intestazioni ordinate
gerarchicamente dal generale al particolare.
 Utilizza con parsimonia gli elementi grafici: possono creare
rumore visivo.
55 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 5
 Suggerimenti per facilitare il colpo d’occhio:
 Inserisci sempre nella stessa posizione blocchi funzionali
comuni a tutte le pagine.
 Fai in modo che l’informazione visiva sia chiara e coerente in
tutto il sito. Per esempio:
 Gli stessi simboli grafici devono avere lo stesso significato.
 La rappresentazione tipografica di elementi strutturali deve essere
sempre la stessa.
56 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 6
 Suggerimenti per facilitare la scansione del testo:
 Utilizza le intestazioni come fossero micro-contenuti.
 Suddividi il testo in paragrafi.
 Separa tipograficamente un paragrafo dall’altro.
 Riduci il numero di parole di un paragrafo, rispetto al
numero di parole che avresti utilizzato su carta.
 Visualizza in modo tipograficamente diverso dalle altre le
parole significative in un paragrafo.
 La caratterizzazione tipografica del testo deve essere
diversa da quella utilizzata per rappresentare altri elementi
strutturali come intestazioni e link.
57 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 7
 Suggerimenti per facilitare la scansione del testo:
 Utilizza le liste (UL) per raggruppare logicamente le
informazioni, e utilizza le liste numerate (OL) quando la
successione è importante.
 Aumenta la leggibilità “fisica” del testo, dimensionando
adeguatamente interlinea e caratteri.
58 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 8
 Il buon senso:
 Per agevolare la scansione del testo occorrono titoli ben
fatti. Significativi. Comprensibili al di fuori del contesto.
Anche dopo qualche mese.
 Si può imparare molto sui titoli leggendo un buon giornale. Ma
cercando di non dimenticare che il web non è fatto di carta.
 Le parole chiave, le frasi e i collegamenti che riteniamo
importanti dovrebbero essere in qualche modo evidenziati.
Ok, ma senza esagerare: troppo = nulla.
59 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 9
 Il buon senso:
 Le categorie ripetitive di informazione devono essere
convertite in tabelle, diagrammi o grafici.
 Si usano le liste HTML ogni volta che si presenta un testo
convertibile in un elenco, per esempio una sequenza di
concetti o di passi.
 Attenzione però all’ossessione per le liste. Non va bene.
Come non è saggio trasformare qualsiasi testo in un
pomposo saggio: un inutile diagramma non rende più
credibili.
60 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 10
 Il diabolico CLICCA QUI.
 Pare che non possa mancare un “clicca qui” in un sito che
si rispetti.
 Un collegamento deve essere comprensibile anche se
estrapolato dal contesto.
 Ma se sei proprio costretto a ripeterti usa l'attributo TITLE!
61 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 11
 Per combattere la piaga del “clicca qui” una strada è
spostare la focalizzazione della frase dai collegamenti, o
dai documenti collegati, al soggetto.
 Per esempio: "I commenti condizionali servono per
indirizzare regole CSS a una specifica versione di Internet
Explorer" e non "Clicca qui, per approfondire i commenti
condizionali".
62 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 12
www.softbank.co.jp/helloworld
63 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: usabilità 13
64 Marco Bertoni - 2009 - www.semplicemente.org

65 Marco Bertoni - 2009 - www.semplicemente.org

L’architettura
dell’informazione
66 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 1
 Architettura dell’informazione
 La combinazione di organizzazione dell'informazione,
etichettatura, ricerca e sistemi di navigazione all'interno di
siti Web e Intranet.
Peter Morville, Information Architecture for the World Wide Web, Third
Edition, O'Reilly
 [...] la struttura organizzativa logica e semantica delle
informazioni, dei contenuti, dei processi e delle funzionalità
di un sistema o un'applicazione informatica.
Architettura dell'informazione. (19 marzo 2008). Wikipedia,
L'enciclopedia libera.
67 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 2
 Le tre fasi dell‘AI:
 1 - AI come trasferimento di conoscenze da discipline
storiche come biblioteconomia e architettura verso il Web.
 2 - AI strategica (o corporate) come supporto
all'organizzazione dell'informazione aziendale nel suo
complesso (non solo Web).
 3 - AI trasversale: organizzazione dell’informazione in
contesti sia fisici sia digitali.
Luca Rosati, Architettura dell'informazione, Apogeo
68 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 3
 Sistemi di organizzazione (categorie).
 Sistemi di navigazione.
 Sistemi di ricerca.
 Sistemi di etichettatura (le etichette di categorie, opzioni
e link).
69 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 4
 Le domande dell'utente a cui l‘AI deve rispondere:
 Dove sono?
 So cosa cercare, come effettuo la ricerca?
 Come esploro i contenuti del sito?
 Come posso contattare un essere umano?
 Come torno alla Home Page?
 Ecc.
70 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 5
 Sistemi di classificazione
 Struttura gerarchico-enumerativa (sistema tradizionale)
A
B C D
E F G H I L
71 Marco Bertoni - 2009 - www.semplicemente.org

Pensare i contenuti: AI 6
 Sistemi di classificazione
 Struttura multidimensionale (analitico-sintetica, a faccette)
A
B C D
E F G H I L
72 Marco Bertoni - 2009 - www.semplicemente.org http://trovabile.org/articoli/guida-alla-classificazione

Pensare i contenuti: AI 7
 Concetti e strumenti empirici dell’AI:
 Wayfinding: favorire l’orientamento.
 Trovabilità: reperire le informazioni in maniera intuitiva.
 Contenuti: vocabolari controllati, tassonomie, labelling.
 Obiettivi (task): semplificarli, capire il modello mentale degli
utenti.
 Free listing: elencare i contenuti del sito e identificare il
lessico degli utenti (lista di voci prodotte dai partecipanti:
“che cosa ti aspetti di trovare nel sito X?”)
 Card sorting: far emergere i modelli mentali degli utenti (si
presenta al partecipante una lista di elementi e si chiede di
classificarli in categorie coerenti)
Adattato da Ghiglione e Bussolon, articolo su Internet Magazine
73 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti
74 Marco Bertoni - 2009 - www.semplicemente.org

75 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: essere chiari 1
 Il mondo che abitiamo è composto dai materiali, non
della terra che ha immediatamente preceduto la
presente, ma della terra che, a partire dal presente,
consideriamo come la terza e che aveva preceduto il
terreno che si trovava sulla superficie del mare, quando la
nostra terra presente si trovava ancora sotto l'acqua
dell'oceano.
James Hutton, citato in Bill Bryson, Breve storia di (quasi) tutto, Guanda.
76 Marco Bertoni - 2009 - www.semplicemente.org

77 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: essere chiari 2
 Appare con chiarezza come non esista alcuna
corrispondenza univoca fra anelli lineari significanti o, se
si preferisce, archeoscritture, e catalisi macchinica
multidimensionale e multi referenziale. La simmetria di
scala, la trasversalità, il carattere patico e non discorsivo
dell’espansione: tutte queste dimensioni ci fanno uscire
dalla logica del terzo escluso e ci confortano nell’esodo da
quel binarismo ontologico che abbiamo precedentemente
denunciato.
Félix Guattari, Caosmosi, trad. it. di Massimiliano Guareschi, Genova, Costa
& Nolan, 2007, p. 64, citato in Mark Buchanan, L’Atomo Sociale, Milano,
Arnoldo Mondadori Editore S.p.A., 2008, p. 210.
78 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: essere chiari 3
 Il codice HTML di una pagina web può essere valido
anche se il contenuto informativo è inesatto o confuso.
 La chiarezza dell’informazione è sempre primaria per il
lettore.
 La competenza del redattore è, quindi, cruciale per
l'accesso alle informazioni.
79 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: essere chiari 4
 Le persone navigano per soddisfare uno
scopo, per eseguire compiti, per trovare
risposte a domande.
 Cercano informazioni, contenuti.
 Desiderano leggere solo quanto basta per trovare ciò di
cui hanno bisogno.
 Scremano e scansionano, in un attivo processo di
interpretazione.
80 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il modello a F 1
81 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il modello a F 2
 Su un campione di 3992 pagine solo il 42% degli utenti va
oltre la prima schermata (scrolling), mentre solo il 14% va
oltre due schermate.
Nielsen, Loranger, Prioritizing Web Usability, New Riders
82 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il modello a F 3
 Conseguenza:
 Le persone probabilmente non leggeranno
mai interamente il tuo testo.
 Soluzioni:
 Specifica l'informazione più importante nei primi due
paragrafi.
 Inizia titoli, paragrafi e liste con parole significative.
 Stratifica l'informazione:
 Da un riassunto/descrizione all'articolo vero e proprio posto in una
pagina separata.
 Dall'articolo principale a maggiori informazioni in pagine separate.
83 Marco Bertoni - 2009 - www.semplicemente.org

84 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il modello a F 5
Punto nodale,
Conclusioni.
Informazioni di supporto in
ordine di rilevanza.
Storia, sfondo.
85 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i giornalisti 1
 La chiarezza della scrittura solitamente
deriva dalla chiarezza del pensiero. Quindi
pensa a cio che vuoi dire, e dillo nel modo più semplice
possibile. Tieni sempre a mente le sei regole elementari di
George Orwell ("Politics and the English Language", 1946).
Dalla guida di stile dell'Economist.
86 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i giornalisti 2
 Non usare mai una metafora, similitudine o altra figura retorica
che sei abituato a vedere pubblicata.
 Non usare mai una parola lunga se al suo posto ne puoi usare
una corta.
 Se puoi eliminare una parola, fallo sempre.
 Non usare mai la forma passiva dove puoi usare quella attiva.
 Non usare mai parole straniere, termini scientifici o gergali se
puoi pensare a un equivalente in italiano comune.
 Infrangi subito una qualsiasi di queste regole, piuttosto che
dire cose apertamente rozze o incomprensibili.
George Orwell
87 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i giornalisti 4
 Un esempio: attiva è meglio!
 Scrivere in forma attiva consente al lettore
di focalizzarsi sull'agente. Come, per esempio, nella
frase:
Bertoni annoia il pubblico.
Leggere una frase attiva ci consente un orientamento
immediato: sappiamo chi fa cosa.
88 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i giornalisti 5
 Un esempio: attiva è meglio!
Il pubblico è annoiato.
Questa frase si focalizza sull'azione.
 Nella scrittura burocratica si tende a utilizzare molto la
voce passiva proprio per orientare l'attenzione
sull'azione piuttosto che sull'agente. Questo nell'illusione
di essere più obiettivi. Ma il risultato sono spesso frasi più
lunghe e complesse e testi criptici.
89 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i giornalisti 6
 Regole base per la chiarezza:
 Non presumere mai che il lettore sappia di cosa stai
scrivendo.
 Non dare nulla per scontato.
 Privilegia costruzioni lineari (soggetto - verbo -
complemento) e alla portata di tutti.
 Cancella ogni frase ad effetto di cui sei molto fiero.
 Prova a metterti dalla parte del lettore.
 Non usare parole roboanti e di uso non comune.
 Spiega le espressioni tecniche.
 Evita di presentarti come massimo esperto mondiale di un
argomento.
Adattato da Baldolini, Scrivere un articolo, Audino
90 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 1
 Ogni giorno [...] per un processo ormai automatico,
centinaia di migliaia di nostri concittadini traducono
mentalmente con la velocità di macchine elettroniche la
lingua italiana in un’antilingua inesistente. Avvocati e
funzionari, gabinetti ministeriali e consigli
d'amministrazione, redazioni di giornali e di telegiornali
scrivono pensano parlano nell'antilingua.
Italo Calvino citato in Agenzia delle Entrate, Manuale di scrittura
amministrativa.
91 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 2
 Il progetto Chiaro! è stato chiaramente abbandonato.
92 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 3
 Suggerimenti per la sintassi:
 Scrivi frasi brevi (20-25 parole). Una sola informazione
principale per frase.
 Scrivi frasi semplici e lineari (una sola proposizione con un
soggetto, verbo e qualche complemento).
 Scrivi frasi con verbi di forma attiva.
 Specifica sempre il soggetto (persone concrete che devono
fare qualcosa).
 Scrivi frasi di forma affermativa. Evita le doppie negazioni
(Non è inammissibile/È ammesso)
 Preferisci, se possibile, modi e tempi verbali semplici.
Adattato da DFP, Manuale di stile, il Mulino.
93 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 4
 Suggerimenti per il lessico:
 Usa parole comuni, concrete e dirette.
 Evita le nominalizzazioni (suffissi -zione, -mento, -tura, ecc.:
pagare diventa pagamento, cancellare diventa cancellazione
ecc.)
 Usa pochi termini tecnico-specialistici.
 Usa poche sigle e abbreviazioni.
 Rivedi e controlla il testo
Adattato da DFP, Manuale di stile, il Mulino.
94 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 5
 Esempio:
NO SI
Si informa che la S.V. non Non risulta che lei abbia
risulta aver provveduto a presentato i documenti.
presentare i documenti.
Agenzia delle Entrate, Manuale di scrittura amministrativa.
95 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i burocrati 5
 Esempio:
NO SI
L'obbligo di accertarsi che la Chi richiede l'autorizzazione
richiesta sia stata firmata, e alla missione ha l'obbligo di
tale controllo deve essere accertarsi, prima di partire, che
effettuato prima della partenza la richiesta sia stata firmata.
per la missione, permane in
capo a chi ha richiesto
l'autorizzazione alla missione.
Agenzia delle Entrate, Manuale di scrittura amministrativa.
96 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i pubblicitari 1
 Quando non userai più la parola “utenti” e al suo posto
avrai lettori, clienti, madri, teenager, uomini d’affari,
allora – e solo allora – potrai creare contenuti Web
eccezionali.
Jerry McGovern, Killer Web Content, A & C Black
97 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i pubblicitari 2
 Qual è l'errore che commettiamo tutti?
 Scriviamo per noi stessi e non per il lettore.
Dalla prospettiva dell'organizzazione e non da quella del
cliente o del cittadino.
 I tuoi lettori sono focalizzati sui loro bisogni, e su quelli della
loro famiglia e delle persone amate, non sui tuoi o su quelli
della tua organizzazione.
 Per farli sentire speciali devi capire che cosa interessa loro
veramente.
 Qualche volta ciò che interessa loro veramente è l’opposto
di ciò che interessa te o la tua organizzazione.
98 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i pubblicitari 3
 A chi interessa il testo che stai scrivendo? Cosa interessa al tuo
lettore?
 Il testo è convincente?
 Il testo è chiaro?
 Scrivi in modo semplice ma non semplicistico. Più conosci i tuoi
argomenti, più sarà difficile esporli in modo chiaro.
 Qual è il compito che desideri i tuoi lettori completino?
 Il testo è conciso?
 Ricorda che il tuo sito non è un romanzo giallo!
 Nascondi i dettagli. Nel dubbio eliminali.
 Hai controllato le fonti?
Adattato da Jerry McGovern, Killer Web Content, A & C Black
99 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i pubblicitari 4
100 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i pubblicitari 5
101 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il design 1
 Utilizza le convenzioni di design, i pattern.
 Fai in modo che il design sia coerente fra le pagine anche
quando il sito è gestito da team differenti.
 Utilizza gli spazi attivi nei contenuti, evitando i
muri di testo.
 Ottimizza i margini delle intestazioni.
 Usa un carattere sans-serif.
 Incrementa il valore dell’interlinea rispetto a quello
normale.
102 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: il design 2
 Consenti il ridimensionamento del testo con le normali
funzionalità del browser.
 Utilizza un layout elastico facendo attenzione alla
larghezza dell’area di lettura.
 NON SCRIVERE MAI TUTTO IN MAIUSCOLO.
 Usa la sottolineatura solo per i link.
 Usa il corsivo il meno possibile.
103 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: le intestazioni 1
 Utilizza brevi sommari insieme al titolo: aiuta la scansione
del testo e sembra che incoraggi i lettori veloci a
proseguire nella lettura della pagina (scrolling).
Fonte: Eyetracking III
 Fai corrispondere il titolo (della sezione, dell’articolo ecc.)
al testo del link che punta ad esso.
 Usa la stessa struttura della frase per tutte le intestazioni
(parallelismo: struttura ripetuta con elementi nuovi).
 Evita l’eccesso di titoli: due o tre livelli sono solitamente
più che sufficienti.
 Fai precedere lunghi articoli da una lista di collegamenti
interni corrispondenti alle intestazioni (indice).
104 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: liste e tabelle 1
 Le liste hanno voci individuali, tutte appartenenti alla
stessa categoria di informazioni, e sono strutturate su
una colonna.
 Le tabelle contengono più categorie di informazione e
hanno almeno due colonne che mostrano una
comparazione o una relazione tra i dati.
105 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: liste e tabelle 1
 Usa gli elenchi numerati quando c’è una priorità delle
voci, dalla più importante alla meno importante, quando
si presentano una serie di passi da eseguire in
successione o una serie di istruzioni.
 Usa gli elenchi non numerati negli altri casi.
 Elabora la lista secondo il principio del parallelismo per
renderla chiara e leggibile.
 Usa le tabelle quando devi comparare valori numerici.
 Usa le tabelle quando hai una serie di frasi “se/allora”.
 Se la risposta alla domanda dell’utente è
“dipende”, allora hai bisogno di una tabella.
106 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i paragrafi 1
 Il paragrafo deve essere determinato nel testo
separando brevi unità di pensiero, formate da una o più
frasi semplici o complesse.
 Visivamente deve essere separato dagli altri paragrafi da
uno spazio di ampiezza maggiore dell’interlinea.
 Una definizione di paragrafo:
 Ciascuna delle varie parti, generalmente brevi e dotate di
una certa unità di pensiero e di composizione, in cui viene
suddiviso un capitolo di un'opera (manuale di studio,
trattato scientifico, legge, ordinamento, ecc.), o anche uno
scritto in genere.
Treccani
107 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i paragrafi 2
 Una definizione di frase:
 La frase o proposizione è l’unità minima di comunicazione
dotata di senso compiuto. Tradizionalmente, si considera
dotata di “senso compiuto” una frase in cui si trovi almeno
un predicato nella forma di un verbo di modo finito, che può
essere accompagnato, quando la frase non sia impersonale
(ad es. “piove”), da un soggetto.
Luca Serianni, Grammatica Italiana, UTET
108 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i paragrafi 3
http://www.lavoro.gov.it/Lavoro/PrimoPiano/G8SocialSummit2009.htm
109 Marco Bertoni - 2009 - www.semplicemente.org

Scrivere i contenuti: i paragrafi 4
110 Marco Bertoni - 2009 - www.semplicemente.org

Grazie!
111 Marco Bertoni - 2009 - www.semplicemente.org

Licenza
 Quest'opera è stata rilasciata sotto la licenza Creative
Commons Attribuzione-Non commerciale-Non opere
derivate 2.5 Italia. Per leggere una copia della licenza
visita il sito web http://creativecommons.org/licenses/by-
nc-nd/2.5/it/ o spedisci una lettera a Creative Commons,
171 Second Street, Suite 300, San Francisco, California,
94105, USA.
 Per tutte le fotografie seguite dalla dicitura “Copyright ©
Marco Bertoni 2008”, tutti i diritti sono riservati ed è vietata la
riproduzione anche parziale con qualsiasi mezzo.
112 Marco Bertoni - 2009 - www.semplicemente.org