Perché dovresti imparare a scrivere per il web nella pubblica Amministrazione?
1) per farti trovare;
2) per farti apprezzare una volta trovato.
In questa presentazione spiego come...
SOPRA IL WEB
Scrivere in termini di:
- Legibility
- Readability
NEL WEB
Scrivere in termini di:
- Struttura
- Stile
SOTTO IL WEB
Scrivere tenendo presente:
- Responsive Web Design
- Google
MOSTRI SACRI
Scrivere per il web al tempo di:
- Video virali
- Facebook
2. Hai appena visto la 1° regola in azione:
le immagini sono tutto (o quasi)
Executive summary 1/3
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 2
4. Hai appena visto la 2° regola in azione:
arriva subito al punto, il lettore ha fretta
Executive summary 2/3
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 4
5. Ecco invece cosa non funziona
nella Pubblica Amministrazione…
Executive summary 3/3
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 5
8. Nella puntata di oggi…
• Perché scrivere bene
• Cosa vuol dire farlo
• Come si legge
SOPRA IL WEB
• Legibility
• ReadabilityNEL WEB
• Struttura
• Stile
SOTTO IL WEB
• Responsive web design
• Google MOSTRI SACRI
• Video virali
• Facebook
A
B
C
D
E
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 8
10. #1. Farsi trovare
Classifica tattiche SEO
Creazione di contenuto + 53%
[Marketing Sherpa 2013]
Prima ragione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 10
11. #2. Farsi apprezzare
Un buon contenuto
• Rende l’utente soddisfatto
• Si trasforma in azione
• Favorisce la condivisione
Seconda ragione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 11
13. Sarebbe più comodo replicare sul web quello che siamo
abituati a fare su carta
Web writers vs pantofolai
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 13
14. Nel 2013 ancora troppi siti ripropongono
i modelli della carta stampata sul web…
Nonostante tutto…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 14
15. La homepage come bacheca
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 15
16. Il sito rimanda… alla bacheca cartacea!
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 16
18. • Immagini
• Video
• Audio
• Codice
• …
Il web ospita diversi tipi di contenuto, non solo
testuali…
Oltre il testo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 18
19. Chi scrive sul web deve farlo nella consapevolezza di:
Testo, immagine, video, audio, …
Sito, blog, social network/media, email, …
Commento, like, retweet, campagna display,
viral marketing
Search Engine Optimization, Responsive
web design, tag, marcatura
#sapevatelo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 19
21. Scrivere per il web è un processo che comincia ben
prima la pubblicazione del contenuto e che prosegue
oltre
Prima dell’uovo e della gallina
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 21
22. Progetta la forma e le funzionalità del
contenitore che ospita l’informazione
Realizza tecnicamente gli strumenti che
consentono di scrivere e visualizzare i
contenuti sul web
Scrive materialmente il testo, produce il
contenuto
Rivede il contenuto e lo pubblica sul web
The uninvited 1/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 22
23. Ottimizza il contenuto per
l’indicizzazione sui motori di ricerca
Riadatta e condivide il contenuto sui
social network
Legge e interagisce con il contenuto
The uninvited 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 23
26. Lo studio sui movimenti oculari degli utenti web
condotto dal Poynter Institute ha dimostrato che:
1. L’occhio legge anche il contesto
2. Lo sguardo procede a salti
3. L’interesse si concentra su determinate zone
Movimenti oculari
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 26
27. La lettura a saltelli si chiama «scanning»
L’utente web cerca le informazioni importanti:
• scorrendo il testo rapidamente con lo sguardo
• procedendo in maniera discontinua
Scanning
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 27
28. Il focus su determinate aree della pagina si visualizza in
una «heat map»
L’utente concentra la propria attenzione nella porzione
superiore sinistra della pagina
Heat maps
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 28
29. Il modello a «F» descrive il
diminuire dell’attenzione sui
primi elementi del testo al
procedere dello sguardo
verso il basso
Il triangolo d’oro indica la
zona calda in cui si
concentra l’attenzione
Lezioni dalla heatmap
Fonte: Web Style Guide http://bit.ly/diVxVC Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 29
30. Fonte: Web Style Guide http://bit.ly/diVxVC
Lezioni dallo scanning
L’utente cerca determinati tipi
di contenuto in zone specifiche
dello schermo
Home link Cerca Banner
Carrello Aiuto Chi siamoNavigazione Link
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 30
32. La discontinuità crea «appigli» a cui aggrapparsi e
genera attenzione
Dare una mano al lettore 1/3
Il testo monoblocco è una parete alta e liscia,
impossibile da superare
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 32
33. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at aliquet nisi. Maecenas sagittis nulla vitae
viverra lobortis. Aenean leo nisl, pretium sit amet nunc id, malesuada facilisis arcu. Maecenas fermentum,
sapien in auctor facilisis, lectus dui luctus velit, eget pretium neque elit euismod risus. Cras at aliquet nisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at aliquet nisi. Maecenas sagittis nulla vitae
viverra lobortis. Aenean leo nisl, pretium sit amet nunc id, malesuada facilisis arcu. Maecenas fermentum,
sapien in auctor facilisis, lectus dui luctus velit, eget pretium neque elit euismod risus. Suspendisse auctor lectus
erat, sit amet euismod lectus hendrerit id. Aenean sed sollicitudin nunc. Donec a neque augue. Quisque ut
placerat tellus, ut fringilla felis. Aenean rhoncus semper metus vel imperdiet. Nullam ut accumsan orci.
Maecenas hendrerit metus rhoncus mi adipiscing feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing.
Donec dolor mi, lacinia id varius in, commodo quis tortor. Vestibulum interdum, nisi in varius fringilla, mi mi
consectetur orci, ut cursus ipsum lectus et sem. Vivamus volutpat massa quam. Nunc porta condimentum mauris
ornare malesuada. Mauris gravida tempus est, et ultrices libero volutpat id. Nullam vestibulum tincidunt nisi
vitae mattis. Cras aliquam neque enim, eleifend elementum diam dignissim vitae. Donec non dignissim metus, in
rhoncus arcu. Quisque laoreet, turpis vehicula vestibulum aliquet, augue quam cursus ligula, et convallis ligula
justo eu mauris. Sed ipsum dui, mollis non blandit vel, adipiscing sit amet arcu. Cras at aliquet nisi.
Nulla eu rhoncus nisl. Duis non dapibus lacus, a pellentesque urna. Donec pulvinar gravida cursus. Curabitur
ultricies tellus lacinia mollis tincidunt. Proin viverra dui molestie, malesuada augue ac, facilisis dui.
Pellentesque sit amet tortor nisi. Proin accumsan ornare laoreet. Proin eu sapien semper, ornare turpis at,
tincidunt eros. Fusce vel risus felis. Cras eu ultrices lectus, a posuere quam. Donec nec diam nec libero
accumsan dignissim. Quisque vulputate arcu quis dictum pharetra. Sed non mi at arcu pharetra venenatis non
sed felis. Pellentesque faucibus elementum turpis, in viverra ligula gravida eu. Cras at aliquet nisi.
Cras sed mi non lectus feugiat gravida. Mauris tempus luctus ipsum eu feugiat. Pellentesque laoreet felis lectus,
vel posuere ante dignissim ac. Praesent at gravida augue, nec porta leo. Quisque id ligula vitae turpis rutrum
pharetra. Vivamus ornare venenatis mauris venenatis volutpat. Fusce ullamcorper, quam non tincidunt pulvinar,
eros libero egestas justo, eu tincidunt eros nisi id magna. Phasellus sit amet dapibus nunc, eget aliquam nibh.
Donec facilisis turpis sed purus tempus, id posuere enim iaculis. Integer interdum imperdiet hendrerit. Duis
lobortis bibendum mauris in pharetra. Aenean dictum ipsum enim, ut iaculis tortor tristique id. Aliquam non
sapien sed risus mollis eleifend. Praesent sed sapien adipiscing, ultricies massa eget, volutpat lacus. Nullam sit
amet tellus vitae velit aliquam pretium.Vivamus vulputate sit amet ligula eu commodo. Cras at aliquet nisi.
Vivamus vulputate sit amet ligula eu commodo. Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 33
35. L’incipit è un ottimo modo per ancorare l’utente
frettoloso al contenuto
Dare una mano al lettore 2/3
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 35
36. La scrittura influenza la lettura attraverso:
1. Immagini
2. Titoli
3. Formattazione del testo
Dare una mano al lettore 3/3
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 36
37. La posizione nella pagina non influisce sull’attenzione
prestata alle immagini
Fonte: http://bit.ly/12mInHZ
Le immagini che ritraggono un volto umano creano
un legame visivo con i nostri occhi che ci rende più
difficile distogliere lo sguardo
Immagini: attrazione fatale
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 37
39. Se le immagini catturano il primo sguardo, i contenuti
intorno (titoli, sottotitoli, teaser, caption, ecc.) sono
il prossimo elemento testuale ad essere visto
Titoli e teaser sono i blocchi testuali più ridotti e
facilmente identificabili in termini di scanning
Fonte: http://bit.ly/15GG1Lz
La lettura rapida su web si ferma alle prime due
parole di ogni frase prima di saltare alla successiva
Dammi due parole…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 39
41. Anche la formattazione del testo fornisce appigli
(struttura) e incentiva la lettura approfondita
Fonte: http://bit.ly/FF3Qv
Ecco come la diversa formattazione dello stesso testo
riscalda e distribuisce l’attenzione del lettore
Formattare per agevolare
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 41
43. Esigenza redazionale
Struttura il contenuto in frammenti di testo,
consapevole che solo le prime lettere delle prime
parole del titolo saranno (forse) lette
Esigenza tecnologica
Struttura il contenuto in frammenti autonomi,
consapevole che altri sistemi (motori di ricerca, feed
rss) e dispositivi (tablet, smartphone) lo potranno
rielaborare diversamente da come l’hai creato
Due piccioni con una fava
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 43
46. Fonte: http://slidesha.re/9B5jqq
1. Gli aspetti di usabilità compongono lo strato
superficiale
2. La formattazione è il livello immediatamente
successivo
3. La strutturazione del testo e lo stile sono gli strati
più interni
il testo web è una cipolla
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 46
48. Per leggere il web dall’alto
Dareriferimenti
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 48
9678460@N07
49. Fonte: http://slidesha.re/9B5jqq
Scrivere per il web è più facile se si immagina la
pagina come un paesaggio visto dall’alto
Il lettore cerca dei punti di riferimento per atterrare
nella zona desiderata
Nei panni del paracadutista
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 49
50. Gli elementi grafici del testo sono molto importanti
per dare il colpo d’occhio e agevolare la lettura
Oltre a immagini, titoli e formattazione, scrivere per il
web significa intervenire su
• Spazi (es. impaginazione, struttura, allineamento)
• Metainformazione (es. data, autore, navigazione)
• Paratesto (es. titolo, sottotitolo, teaser)
Trovare la zona di atterraggio
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 50
51. Il paratesto comprende gli elementi grafici e testuali
che introducono e arricchiscono un testo
Anche l’interfaccia di un sito è composta di testo:
menu, link e pulsanti sono richiami grafico-testuali
all’azione
Paratesto e interfaccia
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 51
52. Gli elementi della pagina iniziale di un sito sono quasi
sempre riconducibili a paratesto, meta-informazioni e
interfaccia
Dominatori della home page
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 52
54. Anche nelle sezioni interne del sito e negli stessi
articoli la componente paratestuale, metainformativa
e di interfaccia è (quasi) sempre presente
La lettura sul web si divide fra testo e paratesto
L’invasione del paratesto
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 54
55. Questo è il solo testo presente fino ad ora
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 55
56. La funzione del testo web è duplice:
1. informare
2. (far) interagire/navigare
Doppio taglio
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 56
57. Questi testi sono dedicati alla navigazione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 57
58. Solo questo testo è dedicato alla navigazione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 58
60. Fonte: http://slidesha.re/103sbf3
Legibility
Per «legibility» si intende la facilità con cui riusciamo
a leggere un testo
La legibility si concentra sulla struttura tipografica,
non sui contenuti
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 60
61. Limiti del dispositivo 1/2
Monitor
La risoluzione web è la più bassa fra i dispositivi cui
siamo abituati:
• Web = 72 dpi
• Stampa = 300 dpi
• Foto = 1200 dpi
dpi: Dot Per Inches (punti per pollice) Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 61
62. Fonte: http://bit.ly/dt1eg0
Occhio
L’occhio umano mette a fuoco solo una parte dello
schermo intorno al punto in cui cade lo sguardo
Limiti del dispositivo 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 62
66. Allineamento del testo
L’allineamento del testo facilita o rende difficile la
lettura dei caratteri
L’allineamento a sinistra fornisce il giusto movimento
alle lettere e crea «appigli» per lo sguardo che
procede con lettura veloce e a salti
Il giustificato crea «buchi» e l’allineamento al centro
e a destra affatica/rallenta la lettura
Le soluzioni creative funzionano (?) meglio su carta
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 66
69. Due ragioni per guarire dalla maiuscolite
#01. Netiquette
#02. Legibiliy
Il movimento delle lettere minuscole genera schemi
interpretabili, al contrario della rigidità del maiuscolo
padrePADRE
Scrivere in maiuscolo equivale a GRIDARE
La lettura veloce ha bisogno di «appigli», forme
riconoscibili con uno sguardo…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 69
72. Stancanti e confusi
Corsivo
L’inclinazione del corsivo peggiora la visibilità del
testo web e stanca lo sguardo
Sottolineato
Il sottolineato confonde la lettura sul web: serve a
rendere riconoscibili i link, non le parti importanti
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 72
73. Normale Corsivo
Il corsivo non funziona su web
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 73
74. Normale con link Sottolineato
I link spiccano solo su un testo pulito
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 74
76. Questione di carattere
Con grazie?
No grazie!
I caratteri senza grazie sono più riconoscibili sul web
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 76
77. Normale (senza grazie: web) Con le grazie (cartaceo)
Lascia le grazie alla stampa
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 77
83. Effetto Albero di Natale
La pagina non è un albero da addobbare con colori
epilettici
Tre effetti indesiderati dei Colori
Effetto 3D
L’occhio mette a fuoco su piani diversi colori lontani
sullo spettro (es. rosso e blu)
Effetto Psichedelico
Sfondi elaborati distraggono dal testo (quando non
impediscono di leggerlo)
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 83
84. Normale Poco contrasto
Contrasto sbagliato Sfondo (disturbo)
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 84
88. Fonte: http://slidesha.re/103sbf3
Readability
La «readability» misura la facilità con cui riusciamo a
comprendere un testo
Il focus è sulla struttura linguistica (lessico, sintassi
e semantica): dalle singole lettere a parole e frasi
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 88
89. Limiti Di… pazienza
Fonte: http://bit.ly/dt1eg0
Lunghezza del testo
Il lettore web dedica maggior attenzione alla prima
schermata (768 px?)
Se scorre verso il basso è probabile che lo faccia alla
ricerca di conclusioni, a fine testo
Tutto quello che è nel mezzo si candida a essere
saltato…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 89
91. 1. Scrivi testi brevi
2. Inserisci le informazioni importanti all’inizio
3. Segnala la presenza di approfondimenti con link
Tre segreti del tuo successo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 91
92. Lo sguardo che corre veloce sul testo web ha bisogno
di «aree di sosta» per riposare
La comprensibilità del testo web aumenta infatti nei
testi:
• divisi in paragrafi brevi e uniformi
• spaziati in maniera omogenea fra loro
Come trasformareun testo monoblocco
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 92
94. Il titolo consente di raggruppare visivamente blocchi
di contenuto omogenei
Titoli e punti elenco
I punti elenco:
• sintetizzano e rendono più preciso il testo
• facilitano l’individuazione visiva dei sotto-blocchi
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 94
98. Immagini
Creano movimento, incuriosiscono, contestualizzano
l’informazione testuale in maniera rapida e leggera
Altre frecce per il tuo arco
Grassetto
Attira l'attenzione sulle parole chiave
Link
Consentono di suddividere il testo in micro blocchi di
contenuto e di interagire con il sito
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 98
100. Il grassetto usato per il web:
• evidenzia le parole chiave (non intere frasi)
• è usato con parsimonia (non dieci parole per riga)
Focus sul grassetto
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 100
101. Normale con grassetto Grassetto
Non appesantire il testo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 101
102. Il link scritto per il web:
• è pertinente al testo e agli interessi del lettore
es. "Albo pretorio" sul sito del Comune di Oristano
• segnala chiaramente dove conduce
es. "Albo pretorio" e non "clicca qui"
• mantiene le promesse
es. cliccando su "Albo pretorio" si apre l'albo pretorio
• fornisce approfondimento
es. "Scarica Delibera 27/2013"
• invita all'azione
es. "Iscriviti al feed RSS"
Focus sui link
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 102
105. Fonte: http://slidesha.re/9B5jqq
Focus sulle immagini
Quando leggiamo sul web ignoriamo la grafica
puramente decorativa perché siamo alla ricerca di
immagini:
• Gradevoli
es. stanno all'interno dei margini, non sono sgranate
• Pertinenti al testo, ma non banali
• Bilanciate con la parte testuale
es. una sola foto a notizia
• Intuitive
es. le icone sono di facile comprensione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 105
106. Guarda le
foto del mio
matrimonio! zzzzz…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 106
109. Il gioco non finisce attraendo i lettori sul contenuto
che hai scritto per il web
Adesso arriva il difficile… trattenerli con:
• struttura
• stile
Quando il gioco si fa duro
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 109
111. Gli elementi che precedono il testo web sono
• titolo
• teaser
Il testo si divide a sua volta in paragrafi, che possono
essere introdotti e sintetizzati da un sottotitolo
Titolo & teaser, sottotitolo & paragrafo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 111
113. Un buon titolo per il web:
• è breve (40 caratteri)
• invita alla lettura
• introduce tema e rema
es. Auto blu [tema]: riduzione del 99% [rema]
• funziona da contenuto autonomo
• è scritto con parole semplici e dirette
Titolo 1/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 113
114. Gli ingredienti dei titoli di successo sono:
• Date e luoghi
• Cifre e quantità
• Nomi (di persone, progetti, enti)
• Parole chiave del testo
Titolo 2/2
Fonte: http://slidesha.re/9B5jqq Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 114
116. I teaser sono brevi abstract che:
• «stuzzicano» il lettore a leggere il testo completo
• forniscono ulteriori informazioni sul contenuto
Teaser
Per scrivere un teaser è buona regola
• andare dritti al punto
• sintetizzare il testo
• «vendere» il contenuto
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 116
118. Scrivere per il web richiede adattare la struttura del
testo alla modalità di lettura
Il tema di scuola
premessa > introduzione > contesto > sviluppo > conclusione
Il metodo classico è dispersivo e non funziona sul web
L'articolo per la stampa
fatti importanti > dettagli
Il metodo anglosassone va subito al punto e funziona
TESTO
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 118
119. Piramide rovesciata
Partire dai fatti salienti
5W
Rispondere a How? What? Where? When? Why?
Regole per strutturare il testo
Fonte: http://bit.ly/zxuxlH
[How?] Ritrovati durante un'operazione di
bonifica [What?] sei manufatti etruschi di rara
bellezza [Where?] nella provincia di Livorno,
[Why?] durante la bonifica di una zona boschiva
[When?] venerdì scorso.
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 119
120. Il sottotitolo ferma lo sguardo sul paragrafo e
consente al lettore di capire se quanto segue è
interessante
La struttura a piramide rovesciata si ripete anche
all'interno di ogni singolo paragrafo che compone il
testo
Sottotitolo e paragrafo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 120
123. Bingo delle ca##ate
Termini inglesi, parole vaghe e astratte, giri tortuosi...
Cosa non funziona 1/3
«Loggati sul vortal per lo
streaming»
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 123
124. Amico-glione
Atteggiamento ammiccante, invasivo, intimo,
personale, simpatico a tutti i costi
Cosa non funziona 2/3
«Clikka fratello!!»
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 124
125. Burocratese
Linguaggio tecnico e giuridico, arcaico, pomposo,
eccessivamente formale
Cosa non funziona 3/3
«Per visionare i contenuti
audiovisivi è possibile cliccare sul
collegamento ipertestuale»
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 125
127. Lo stile del web ha la forma del parlare comune:
• Semplicità
• Brevità
• Precisione
• Leggerezza
Cosa funziona
«Guarda il video»
Fonte: http://slidesha.re/9B5jqq Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 127
128. Scaletta di stile
Frasi
• Scrivi frasi brevi (taglia le parole di troppo)
• Limita le proposizioni subordinate
Nomi e aggettivi
• Usa lessico comune (vocabolario fondamentale)
• Sfrutta le metafore
Verbi
• Elimina le nominalizzazioni
• Usa verbi in forma attiva e affermativa
• Scegli modi verbali semplici (indicativo, infinito)
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 128
130. Chi scrive per il web si rivolge a due destinatari:
1. Persone
2. Robot!
Anche i motori di ricerca e i vari
dispositivi leggono i contenuti
scritti per il web
Sai per chi scrivi?
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 130
131. Per leggere il web dal basso
Dareriferimenti
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 131
driggs
134. «Quel che vedi è quel che è» significa ottenere sulla
pagina stampata la stessa disposizione grafica degli
elementi che si visualizza sullo schermo del computer
What You See Is What You Get (WYSIWYG)
WYSIWYG si riferisce anche agli editor web che
consentono di modificare il contenuto come si
farebbe su un normale word processor
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 134
135. Oggi non esiste un solo schermo di riferimento, ma
una pluralità di dispositivi con monitor dalle
caratteristiche differenti (desktop, tablet,
smartphone)
Le cose cambiano
Scrivere per il web in termini di WYSIWYG può
essere pericoloso perché…
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 135
137. Il Responsive Web Design consente la
realizzazione di siti web in modo che le
pagine adattino automaticamente il
layout in funzione del dispositivo usato
per visualizzare i contenuti, riducendo la necessità
di ridimensionamento e scorrimento.
STESSO SITO, DIVERSE
VISUALIZZAZIONI
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 137
138. confuso?La tua stampante non è il web
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 138
150. «Importante»
Esempi di titoli sbagliati
«Urgente»
«Intervista»
«Documenti utili»
email
web
Il titolo deve far capire
immediatamente di
cosa si parla
Le meta-informazioni e
il superfluo fanno
perdere tempo,
pazienza e attenzione
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 150
153. La home page è
Ilmotorediricerca?
Fonte: http://bit.ly/4ELl5Y
David Weinberger
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 153
154. La ricerca sul web avviene per parole chiave
(keyword) e il loro uso all’interno del testo agevola
l’indicizzazione sui motori di ricerca
Gli elementi testuali rientrano fra i principali fattori
di Ranking SEO usati da Google per indicizzare i
contenuti web
Fonte: http://bit.ly/147vqGj
Indicizzazione sui motori di ricerca
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 154
155. Il tag «title» definisce il titolo della pagina nel codice
html
Oltre a essere letto dal motore di ricerca, l’utente
visualizza questo titolo nei risultati di ricerca e sul
proprio browser
Lasciare il campo vuoto equivale a spedire una email
senza oggetto e a perdere l'opportunità di essere
indicizzati e raggiunti da utenti interessati alla pagina
TITLE TAG 1/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 155
159. Scrivere per il web con un occhio di riguardo al tag
Title presuppone:
1. Inserire la keyword nel tag Title
2. Far iniziare il tag Title con la keyword
La maggior parte dei CMS genera il tag Title
automaticamente, a partire dal titolo dell’articolo
pubblicato
TITLE TAG 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 159
160. Il tag «description» definisce la descrizione della
pagina nel codice html
Oltre a essere letto dal motore di ricerca, l’utente
visualizza questo titolo nei risultati di ricerca
Se si lascia il campo vuoto, il motore di ricerca
visualizzerà i primi caratteri del contenuto della
pagina.
Description TAG 1/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 160
162. Scrivere per il web con un occhio di riguardo al tag
Description presuppone:
1. Inserire le keyword nel tag Description
La descrizione non deve riferirsi al sito in generale,
ma ai contenuti specifici della singola pagina
Description TAG 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 162
163. Capireste di cosa si parla in un articolo da questa
scritta? nome-ente.it/index.html?idnews=1978&dj
indirizzo 1/2
E se invece la scritta fosse questa sarebbe più chiaro?
nome-ente.it/bando-occupazione-giovanile-2013
Per i motori di ricerca è lo stesso: gli indirizzi web
con codici e caratteri «strani» (es.
«?idnews=1978&dj») non consentono di indicizzare i
contenuti bene quanto quelli con parole comprensibili
(es. «i-perche-di-un-successo»)
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 163
164. Scrivere per il web con un occhio di riguardo
all’indirizzo presuppone:
1. Inserire la keyword nell’url
La maggior parte dei CMS genera l’indirizzo
automaticamente, a partire dal titolo del post
indirizzo 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 164
165. Gli elementi di testo possono essere «marcati» come
più o meno rilevanti
Di solito l’intestazione si attribuisce a titoli e
sottotitoli
Quando selezioniamo
l’intestazione (Heading 1,
2, …) diamo una diversa
importanza al testo
percepibile sia dall’occhio
umano che da Google
Marcatura 1/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 165
166. Scrivere per il web con un occhio di riguardo alla
marcatura presuppone:
1. Inserire la keyword nell’Heading H1
2. Inserire le altre keyword nell’Heading H2 e H3
La maggior parte dei CMS consente di impostare
questi valori dall’editor WYSIWYG, ma li sovrascrive
tramite foglio di stile
Fonte: http://bit.ly/147vqGj
Marcatura 2/2
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 166
167. Testo alternativo per le Immagini
Chiudete gli occhi. Sapreste dirmi che numero sto
facendo con la mano?
Tenete gli occhi chiusi. Se vi rivelassi che il numero è
5 sapreste dirmelo anche senza vederlo?
Per i motori di ricerca è lo stesso: il testo alternativo
descrive l’immagine e in assenza di questa
informazione i motori di ricerca hanno difficoltà a
capire cosa rappresenta il contenuto
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 167
168. La mancanza di testo alternativo è un problema di
accessibilità oltre che di indicizzazione sui motori di
ricerca: i browser vocali leggono questa informazione
per descrivere la foto
Come per il titolo, anche in questo caso è necessario
dare un nome significativo all’immagine
«Foto.jpg»
«IMG 0880.jpeg»
Il nome deve far
capire subito di
cosa si parla
Esempi di testi alternativi sbagliati
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 168
170. Formattazione
Elenchi puntati e numerati aiutano a suddividere il
contenuto e ad aumentare la leggibilità dei testi, il
tutto a favore dell’usabilità utente
Google premia siti con buona usabilità e potrebbe
favorire i contenuti con elenchi puntati o numerati
Fonte: http://bit.ly/147vqGj Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 170
171. Testo 1/4
Prominenza della keyword
Avere la keyword nelle prime 100 parole di un testo
sembra essere un importante segnale di rilevanza
Ricorrenza della keyword (keyword density)
La parola chiave è il termine più ricorrente nel testo
Fonte: http://bit.ly/147vqGj
Esagerare con le ripetizioni potrebbe causare
penalizzazioni per spam
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 171
172. Latent Semantic Indexing (LSI)
Distribuire nel testo sinonimi e correlati alla
«keyword» (es. Apple + Steve Jobs vs Apple + Fruit)
Tempo di caricamento
Oltre al codice, anche testi troppo lunghi
appesantiscono la pagina
Fonte: http://bit.ly/147vqGj
Testo 2/4
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 172
173. Freshness
Scrivere contenuti nuovi e aggiornare quelli vecchi
Originalità
Se il contenuto è copiato da una pagina indicizzata
potrebbe finire nell’indice secondario (Supplemental
Index), ottenendo una visibilità molto ridotta
Fonte: http://bit.ly/147vqGj
Testo 3/4
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 173
174. Grammatica e scrittura
Una scrittura grammaticalmente corretta è un
segnale di qualità che aiuta a farsi classificare meglio
Valore del contenuto
Google individua e penalizza siti con contenuti di
bassa qualità che non portano valore aggiunto
Livello di lettura
Testi semplici si orientano al pubblico generico,
mentre quelli avanzati classificano il sito di nicchia
Fonte: http://bit.ly/147vqGj
Testo 4/4
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 174
175. Link
Inbound
Essere linkati da un sito esterno autorevole attraverso
una keyword facilita la miglior indicizzazione sui
motori di ricerca
Outbound
Anche i link in uscita, se coerenti, rappresentano un
indice di qualità del contenuto
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 175
178. «Virale» si riferisce alla diffusione rapida e
spontaneamente di un contenuto sul web attraverso il
passaparola
Come un virus
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 178
181. 1. Tutti ne parlano
2. In pochi sanno cosa voglia dire
3. Ancora meno si rendono conto che alcuni
contenuti non sono compatibili con la Pubblica
Amministrazione
Bla-Bla-Bla
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 181
188. Ecco il video che nella storia di YouTube ha raggiunto
il maggior numero di visualizzazioni…
Il re dei virali
Oltre 1.739.631.818
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 188
189. The winner is
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 189
190. Ecco un esempio di video della pubblica
amministrazione costruito usando alcuni ingredienti
del «viral mix»…
Un buon virale della PA
Circa 70.000
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 190
191. The wannabe is
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 191
192. Sarebbe opportuno spostare il discorso
su un altro tipo di video…
Coinvolgente, geniale, scritto per il
web, ma non «rigorosamente virale»
Il consiglio del grillo parlante
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 192
194. Esempio di Nicola Mauri
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 194
mikem
195. Se usi un nuovo media, non
riciclare vecchi schemi
Cambia approccio
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 195
197. Il modello non è di tipo broadcast
La censura si trasforma in un
boomerang
Non pretendere controllo completo
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 197
199. È possibile mettere in evidenza i contenuti, calendarizzarne la
pubblicazione e circoscriverli a destinatari specifici.
1
3
2
4
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 199
200. È possibile giocare con le
immagini a patto di
conoscere le misure giuste
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 200
201. 3
4 Foto, video e domande aumentano le condivisioni
contenuto
sintesi
costanza
tempistica Distribuisci i contenuti nei giorni/orari di punta
1
2
Resta sul pezzo, per i saluti ci sono gli amici
pertinenza5
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 201
203. Condividi e partecipa su altri
gruppi, pagine e profili
Te la canti e te la suoni?
Piero ZILIO /204Oristano,27/06/2013| Scrivere peril web nella PA(CC)by-nc-nd 203