{"id":236,"date":"2013-03-19T09:23:49","date_gmt":"2013-03-19T08:23:49","guid":{"rendered":"http:\/\/www.neamesa.it\/blog\/?p=236"},"modified":"2013-06-11T10:14:14","modified_gmt":"2013-06-11T08:14:14","slug":"scrivere-per-il-web-buone-pratiche","status":"publish","type":"post","link":"http:\/\/www.neamesa.it\/blog\/scrivere-per-il-web-buone-pratiche\/","title":{"rendered":"Scrivere per il web: buone pratiche"},"content":{"rendered":"<p><a href=\"http:\/\/www.neamesa.it\/blog\/scrivere-per-il-web-buone-pratiche\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-237\" title=\"Scrivere per il web\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/testi_web.jpg\" alt=\"L'ultima pagina de Il tempo ritrovato di Marcel Proust\" width=\"300\" height=\"390\" srcset=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/testi_web.jpg 300w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/testi_web-230x300.jpg 230w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>La maggioranza degli utenti della rete naviga alla ricerca di informazioni di tipo prevalentemente testuale, \u00e8 quindi corretto affermare che l&#8217;aspetto pi\u00f9 importante di ogni sito internet \u00e8 rappresentato proprio dai suoi <strong>contenuti testuali<\/strong>.<br \/>\nNell&#8217;impostazione di ogni pagina web dunque la porzione dedicata all&#8217;area informativa vera e propria, il cosiddetto <strong>corpo pagina<\/strong>, dovrebbe essere la pi\u00f9 ampia possibile rispetto agli altri elementi (men\u00f9 di navigazione, loghi, banner, etc.) visto e considerato che gli utenti che vi sono approdati desiderano trovarvi un numero soddisfacente di informazioni di buona qualit\u00e0.<\/p>\n<p>Numerose ricerche rendono atto del fatto che la lettura a video \u00e8 del <strong>25% pi\u00f9 lenta<\/strong> rispetto alla lettura su carta, poich\u00e9 il video non consente lo stesso livello di concentrazione e focalizzazione.<!--more--><\/p>\n<h2>Come leggono gli utenti di un sito web?<\/h2>\n<p>Grazie all\u2019<strong><em>eyetracking<\/em><\/strong>, un insieme di tecniche volte allo studio dei movimenti oculari in relazione a un input da osservare, \u00e8 stato possibile testare in maniera diretta la qualit\u00e0 dell\u2019architettura dell\u2019informazione.<br \/>\nL\u2019<em>eyetracking<\/em> infatti, elaborando i dati derivati dalla fissazione oculare, dall\u2019area dello sguardo e dall\u2019area di interesse che ne deriva, genera uno <em>scan path<\/em>, ovvero una mappa di calore dei movimenti oculari.<\/p>\n<p style=\"text-align: left;\"><a href=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyetracking.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-238\" title=\"Esempio di scan path\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyetracking.jpg\" alt=\"Esempio di scan path\" width=\"400\" height=\"303\" srcset=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyetracking.jpg 400w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyetracking-300x227.jpg 300w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyetracking-396x300.jpg 396w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a>Dai risultati emersi dalle ricerche di <em>eyetracking<\/em> svolte negli ultimi 10 anni abbiamo appreso che gli utenti per leggere informazioni testuali a video hanno maturato spontaneamente un differente tipo di consultazione centrato sulla ricerca di <strong>parole chiave<\/strong> e <strong>link<\/strong>, vere e proprie <strong>ancore visive<\/strong> che risaltano all\u2019interno della pagina web.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyemovement.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-239\" title=\"Mappa dei movimenti oculari\" src=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyemovement.gif\" alt=\"Mappa dei movimenti oculari\" width=\"721\" height=\"300\" srcset=\"http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyemovement.gif 721w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyemovement-300x124.gif 300w, http:\/\/www.neamesa.it\/blog\/wp-content\/uploads\/2013\/03\/eyemovement-500x208.gif 500w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><\/p>\n<h2>Cosa bisogna scrivere e in che modo?<\/h2>\n<p>La qualit\u00e0 dei contributi testuali, la chiarezza espositiva e la loro fruibilit\u00e0 sono elementi strettamente connessi al pi\u00f9 ampio concetto di <strong>usabilit\u00e0 del web<\/strong> e contribuiscono non poco a far s\u00ec che un sito possa essere considerato di buon livello [<a title=\"Le caratteristiche di un buon sito web\" href=\"http:\/\/www.neamesa.it\/blog\/le-caratteristiche-di-un-buon-sito-web\/\">Le caratteristiche di un buon sito web<\/a>] e apprezzato dai visitatori.<\/p>\n<p><strong>Il contenuto e lo stile<\/strong><\/p>\n<ul>\n<li>Prediligere la <strong>semplicit\u00e0<\/strong>: frasi brevi, parole di facile comprensione, periodi non involuti, poche subordinate;<\/li>\n<li>Scegliere un <strong>linguaggio centrato sull&#8217;utente<\/strong> e sul <em>tone of voice<\/em>scelto per il sito;<\/li>\n<li>Evitare le <strong>ridondanze<\/strong> e le <strong>ripetizioni<\/strong>;<\/li>\n<li>Esprimere <strong>un solo concetto<\/strong> (o idea o tema) per ogni paragrafo;<\/li>\n<li>Evitare uno <strong>stile troppo creativo<\/strong> o slogan persuasivi e <strong>prediligere sempre l&#8217;informazione<\/strong>;<\/li>\n<li>Scegliere <strong>titoli<\/strong> e <strong>sottotitoli<\/strong> (o occhielli) efficaci, chiari e concisi;<\/li>\n<li>Un sito \u00e8 un <strong>ipertesto<\/strong> che si deve <strong>sviluppare in profondit\u00e0<\/strong> non in lunghezza, stratificare quindi le informazioni su pi\u00f9 livelli (o su pi\u00f9 pagine se necessario);<\/li>\n<li>Utilizzare una struttura a <strong>piramide rovesciata<\/strong>: cominciare dalla conclusione e dalle informazioni di maggior rilievo per scendere via via verso il dettaglio;<\/li>\n<li>Curare la <strong>punteggiatura<\/strong>;<\/li>\n<li>Non lasciare <strong>refusi <\/strong>che inficiano la qualit\u00e0 del sito e la stessa credibilit\u00e0 dei contenuti.<\/li>\n<\/ul>\n<p><strong>La struttura e il marcaggio html<\/strong><\/p>\n<ul>\n<li>Usare <strong>titoli con la giusta indentazione<\/strong>: a un h1 deve seguire un h2, a un h2 un h3, senza salti, questo \u00e8 fondamentale per la struttura semantica della pagina che viene letta sia dai motori di ricerca durante il processo di indicizzazione di un sito web sia dalle tecnologie assisitive usate degli utenti diversamente abili (ad esempio gli screen reader);<\/li>\n<li>Utilizzare <strong>elenchi puntati <\/strong>(ul) o <strong>elenchi numerati<\/strong> (ol) o <strong>elenchi di definizioni<\/strong> (dl) dove necessario;<\/li>\n<li>Scegliere le tabelle per la pubblicazione di <strong>dati tabellari<\/strong> (e solo per i dati tabellari);<\/li>\n<li>Spiegare sempre gli <strong>acronimi<\/strong> e gli <strong>acrostici<\/strong>.<\/li>\n<\/ul>\n<p><strong>La presentazione visiva<\/strong><\/p>\n<ul>\n<li><strong>Non eccedere con le immagini<\/strong>: contrariamente a quanto si crede le immagini attirano meno l&#8217;attenzione rispetto al testo, perci\u00f2 ben vengano come elementi di corredo purch\u00e9 non distraggano dalla lettura e non \u201crubino la scena\u201d al testo;<\/li>\n<li>Cercare sempre di ottenere un <strong>contrasto sufficiente tra lo sfondo e il testo<\/strong> evitando background che possano disturbare la lettura o renderla pi\u00f9 difficoltosa;<\/li>\n<li>Scegliere i <strong>font pi\u00f9 adatti<\/strong>: \u00e8 consigliato utilizzare font standard, in modo che possano essere visualizzati su qualsiasi sistema operativo. I font pi\u00f9 compatibili con i tre sistemi operativi (Windows, Mac e Linux) sono: Georgia, Palatino Linotype, Times New Roman, Arial, Trebuchet MS, Verdana, Courier New. I pi\u00f9 leggibili a video sono Verdana e Georgia.<\/li>\n<li>Impostare una <strong>dimensione dei font<\/strong> sufficientemente grande da non rendere faticosa la lettura a video;<\/li>\n<li><strong>Non mischiare troppi font<\/strong>: va bene scegliere una famiglia di font per i titoli e una per i testi, ma \u00e8 bene non esagerare per non dare l\u2019idea di disordinato e quindi di difficile lettura. Lo stesso discorso vale per le dimensioni dei font e per i colori;<\/li>\n<li><strong>Rinunciare al giustificato<\/strong>: diminuisce la rilevanza delle ancore visive e non invoglia l&#8217;utente a leggere il testo;<\/li>\n<li>Usare un&#8217;<strong>interlinea sufficientemente ampia<\/strong> e delle <strong>spaziature ariose<\/strong> sia per i paragrafi che per gli elenchi;<\/li>\n<li>Rendere i <strong>link subito riconoscibili <\/strong>e<strong> ben evidenti<\/strong>;<\/li>\n<li>Usare i <strong>grassetti<\/strong> con criterio e parsimonia per attirare l&#8217;attenzione creando ancore visive;<\/li>\n<li>Limitare l\u2019uso del <strong>corsivo <\/strong>ai casi di reale necessit\u00e0 (parole straniere, brevi citazioni, nomi);<\/li>\n<li>Non scrivere <strong>frasi lunghe in maiuscolo<\/strong> poich\u00e9 la lettura \u00e8 pi\u00f9 difficoltosa;<\/li>\n<li>Curare molto la coerenza visiva oltre che stilistica sia per agevolare la lettura sia per aumentare la credibilit\u00e0 dei contenuti.<\/li>\n<\/ul>\n<blockquote><p>Troppe informazioni? Serve un riassuno? Uno schema? Guarda l&#8217;<strong>infografica <\/strong><a title=\"Scrivere per il web: come l\u2019occhio vuole la sua parte\" href=\"http:\/\/www.neamesa.it\/blog\/scrivere-per-il-web-come-locchio-vuole-la-sua-parte\/\">Scrivere per il web: come l&#8217;occhio vuole la sua parte<\/a>.<\/p><\/blockquote>\n<p style=\"text-align: right;\"><em>Fiorella Sina<\/em><br \/>\n<a href=\"http:\/\/www.neamesa.it\"><em>Nea Mesa Comunicazione<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La maggioranza degli utenti della rete naviga alla ricerca di informazioni di tipo prevalentemente testuale, \u00e8 quindi corretto affermare che l&#8217;aspetto pi\u00f9 importante di ogni sito internet \u00e8 rappresentato proprio dai suoi contenuti testuali. Nell&#8217;impostazione di ogni pagina web dunque &hellip; <a href=\"http:\/\/www.neamesa.it\/blog\/scrivere-per-il-web-buone-pratiche\/\">Continua a leggere<span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,6,8],"tags":[19,33,15,12,24,40,34,13,20],"class_list":["post-236","post","type-post","status-publish","format-standard","hentry","category-comunicazione","category-internet","category-grafica","tag-comunicazione-2","tag-estetica-del-web","tag-grafica-2","tag-internet-2","tag-progettazione","tag-scrittura","tag-usabilita","tag-web","tag-web-design"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":0,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.neamesa.it\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}