Il Mio Sito Web Vincente - Marino Fadda

IL MIO SITO WEB VINCENTE

Marino Fadda

IL MIO SITO WEB VINCENTE Guida pratica a SEO e Web Marketing

EDITORE ULRICO HOEPLI MILANO

Copyright © Ulrico Hoepli Editore S.p.A. 2015 via Hoepli 5, 20121 Milano (Italy) tel. +39 02 864871 – fax +39 02 8052886 e-mail [email protected] www.hoepli.it

Seguici su Twitter: @Hoepli_1870

Tutti i diritti sono riservati a norma di legge e a norma delle convenzioni internazionali

ISBN EBOOK 978-88-203-7025-1

Progetto editoriale e realizzazione: Maurizio Vedovati – Servizi editoriali ([email protected])

Realizzazione digitale: Promedia, Torino

SOMMARIO

L’autore Introduzione Il peccato originale dei siti tradizionali Il libro

Parte 1 – Siti che non funzionano e siti che convertono CAPITOLO

I siti tradizionali non riescono ad attrarre L’importanza di trovarsi nelle prime posizioni dei risultati di ricerca Risultati qualitativi Risultati quantitativi Conclusioni CAPITOLO

I siti tradizionali non riescono ad accogliere La struttura dei siti web tradizionali Il nuovo navigatore online Come i siti accolgono il nuovo navigatore online Conclusioni CAPITOLO

I siti tradizionali non riescono a convertire Il sito che non converte

Conclusioni CAPITOLO

Siti che attraggono, accolgono e convertono Un sito che funziona Prima situazione: il sito non riesce ad attrarre Seconda situazione: il sito non riesce ad accogliere Terza situazione: il sito non riesce a convertire I canali di provenienza del traffico Traffico diretto Traffico indiretto Traffico social Traffico a pagamento Traffico di ricerca organica L’ottimizzazione del traffico: la Search Engine Optimization L’ottimizzazione del sito: la Conversion Optimization Ottimizzare il traffico e le conversioni: il processo di conversione Conclusioni CAPITOLO

Il saggio di conversione L’ottimizzazione del saggio di conversione Il saggio di conversione: che cosa misurare Qual è un buon saggio di conversione? Conclusioni

Parte 2 – Attrarre traffico qualificato: la Search Engine Optimization CAPITOLO

Come i motori di ricerca classificano i risultati Come funzionano i motori di ricerca? Il Search Index Come Google classifica i risultati Conclusioni CAPITOLO

Come Google classifica i siti: la pertinenza Il codice HTML La struttura della pagina HTML Come viene valutata la “pertinenza” Le componenti dell’header di una pagina HTML La sezione “head” La sezione “body” Conclusioni CAPITOLO

Keyword research: come scegliere le parole chiave La keyword research La raccolta delle parole chiave L’inizio della ricerca: il brainstorming Altre fonti di ricerca La concorrenza Strumenti sul Web Conclusione della raccolta Identificazione delle parole chiave Google Keyword Planner L’analisi dei concorrenti L’ottimizzazione della pagina del sito La SEO on-page e off-page Conclusioni

CAPITOLO

L’autorità del sito: PageRank e link popularity Il PageRank La qualità dei link Il passaggio di PageRank La pertinenza del contenuto tra chi indirizza il link e chi lo riceve L’anchor text Tipo di link Come Google valuta l’autorità di un sito Quanto è importante il PageRank? Conclusioni CAPITOLO

SEO off-page: la link building Quanti backlink ci occorrono Indirizzo dei siti Numero di link presenti nella pagina Link che trasferiscono PageRank Come studiare i concorrenti Link building Link liberi Link creati I blog Le web directory Gli article marketing Link sollecitati Link pagati Conclusioni CAPITOLO

La SEO: una sintesi

Attrarre traffico verso il sito: i motori di ricerca Come posizionare il sito nei primi posti di Google: la SEO SEO on-page SEO off-page Conclusioni

Parte 3 – La Conversion Optimization CAPITOLO

Le pagine web devono essere costruite come delle landing page Come costruire le pagine del sito Pagine come landing page Il percorso del nostro visitatore L’elemento di conversione Conclusioni CAPITOLO

Come si legge sul Web Sul Web non si legge molto Sul Web si esplora il testo Gli elementi d’attrazione Titolo della pagina e sottotitoli Parole scritte in grassetto Parole con un colore diverso da quello del testo I link Elenchi puntati Pagine non prevalentemente testuali Conclusioni CAPITOLO

Come guidare lo sguardo del visitatore: la gerarchia visiva La gerarchia visiva I punti focali Esempi di gerarchia visiva Quali sono le caratteristiche che definiscono il peso visivo La dimensione Il contrasto tonale Il colore Lo spazio vuoto La prospettiva Come dare preminenza a un elemento Altri elementi che guidano lo sguardo La direzione degli occhi della persona che è guardata Le frecce Conclusioni CAPITOLO

Dove collocare il modulo e la call to action Sopra o sotto la piega? Dove collocare il modulo e la call to action Come far capire che c’è del contenuto “sotto la piega” “Sopra la piega” non è uguale per tutti i visitatori Conclusioni CAPITOLO

Scrivere sul Web: il testo della pagina Testi brevi e concisi La piramide invertita Come scrivere Sottotitoli Paragraf

Frasi Parole e frasi in grassetto Elenchi puntati Frasi attive Parole chiave Conclusioni CAPITOLO

Come costruire dei titoli che convertono I titoli attirano subito l’attenzione Dove posizionare titolo e immagine Alcune regole per scrivere titoli efficaci Il formato grafico La lunghezza del titolo Le parole chiave La promessa Come formulare il titolo Un errore comune Conclusioni CAPITOLO

Il modulo I componenti di un modulo Lunghezza del modulo La lunghezza del modulo: le esigenze degli utenti La lunghezza del modulo: le esigenze di chi sottopone il modulo Il bilanciamento tra quantità e qualità Quali informazioni richiedere La profilazione progressiva I campi “opzionali” La collocazione delle etichette

Verticalmente sopra il campo Allineamento a sinistra Allineamento a destra All’interno dei campi Conclusioni Una o due colonne? Come aumentare le conversioni online: i moduli “narrativi” I moduli narrativi creano un contesto che interessa al lettore I moduli narrativi imitano strettamente la sequenza di pensiero del lettore I moduli narrativi riducono la frizione visiva Come mettere in evidenza il modulo Il titolo La privacy Conclusioni CAPITOLO

La call to action La call to action Il design della call to action La dimensione Il colore Il posizionamento nello spazio della pagina Il testo della call to action Il valore trasmesso dalla call to action La call to action non deve essere generica Il punto di vista dell’utente Quante call to action? Quando collocare la call to action Conclusioni CAPITOLO

Le immagini Le immagini devono avere uno scopo Le immagini devono essere “reali” Le immagini dei visi delle persone attraggono di più Le immagini non devono avere troppi soggetti Le immagini dovrebbero avere le didascalie Le immagini non dovrebbero ostacolare la lettura del testo Conclusioni CAPITOLO

Gli elementi di distrazione Che cosa succede quando ci concentriamo su qualcosa Gli elementi di distrazione nel Web Il menu di navigazione Conclusioni CAPITOLO

Conclusioni Prima considerazione Seconda considerazione Terza considerazione Quarta considerazione Quinta e ultima considerazione

Bibliografia Informazioni sul Libro

Alla mia cara moglie Maria Grazia

L’autore

Marino Fadda ha lavorato nel marketing e nella comunicazione presso alcune aziende leader in Italia. Da oltre vent’anni è impegnato nella consulenza di marketing e comunicazione rivolta a imprese medie e piccole. Tiene corsi di formazione in azienda, presso enti e associazioni di categoria. Negli ultimi anni si è interessato in modo particolare al problema dell’acquisizione dei clienti attraverso le tecniche del web marketing, specializzandosi in alcune tematiche sviluppate di recente negli Stati Uniti e ancora poco conosciute in Italia: demand generation, lead generation, marketing automation e ottimizzazione del sito web per la conversione (Conversion Optimization). Ha approfondito alcuni di questi argomenti nel libro, pubblicato nel 2012, “Demand generation. Fidelizzare il cliente potenziale nel business to business” (Franco Angeli Editore). Da diversi anni cura il blog Demand generation. Acquisire i clienti con il Web marketing.

INTRODUZIONE

Se state leggendo questo libro probabilmente avete una di queste esigenze: dovete creare un nuovo sito – direttamente o tramite agenzia – e vorreste sapere come progettarne uno che funzioni bene; avete già un sito, ma non siete soddisfatti perché funziona male e non produce risultati positivi (nuovi contatti, nuovi clienti ecc.); per professione vi occupate di creare siti web e volete sapere come si possono costruire dei siti migliori; amate Internet e vi interessa approfondire tutti gli argomenti più importanti che riguardano il Web. Se avete queste esigenze, vi rassicuro subito: state leggendo il libro giusto. Questo libro è stato infatti scritto per venire incontro a persone che, come voi, hanno bisogno di capire come si deve costruire un sito web che funzioni. E vi posso assicurare che costituite un folto gruppo, dato che non è facile costruire un sito che funzioni, che cioè riesca a convertire i suoi visitatori in contatti, clienti, richieste di preventivo ecc. Non è un caso che la maggior parte degli attuali siti siano costruiti in modo tale che non riescano a fare ciò per cui sono stati progettati: convincere le persone a stabilire un contatto con l’azienda. Spesso attraggono persone che non sono quelle a cui il sito vorrebbe rivolgersi e che, di conseguenza, appena giunte, non trovano niente che le interessi: quindi, abbandonano rapidamente il sito, senza compiere alcuna azione, se non quella di cliccare sul pulsante “indietro” del proprio browser o su quello che chiude la finestra. Oppure, quando i siti riescono ad attrarre persone interessate al loro contenuto, non riescono poi a stabilire un contatto, a trasformare questi anonimi visitatori in clienti potenziali o effettivi. In casi come questi – che sono la maggioranza –, quando cioè il sito non funziona, spesso si investono i propri soldi per cercare di portare un numero maggiore di visitatori, pensando che il problema sia costituito dal loro numero e non da problemi interni. O ancora, si interviene direttamente sul sito facendo dei cambiamenti che spesso sono solo il risultato di azioni svolte a tentoni, senza un piano preciso, senza obiettivi

precisi. Nei casi estremi, si abbandona l’agenzia che aveva costruito il sito e ci si rivolge a una nuova per modificarlo completamente. Qualche volta questi cambiamenti aiutano. Nella maggior parte dei casi, non producono alcun risultato positivo, dato che non eliminano i limiti contenuti nella prima versione del sito. Sono cioè viziati dal peccato originale che aveva compromesso l’efficacia della vecchia versione.

Il peccato originale dei siti tradizionali Purtroppo, le condizioni che impediscono ai siti tradizionali di funzionare non dipendono solamente da qualche specifico componente, pur importante, come possono essere per esempio: un miglior layout; una migliore organizzazione dei contenuti; delle immagini più pertinenti. Questi componenti possono senz’altro influire, ma non sono i fattori determinanti: infatti, i limiti più importanti di questi siti stanno alla base, nel modo in cui sono impostati e pensati. Quindi, se si cambia qualche componente, ma l’impostazione resta la stessa, i risultati non possono che continuare a essere negativi. In definitiva, il peccato originale dei siti web tradizionali consiste nel non essere stati progettati per attirare, accogliere e convertire chi naviga online. Certo, questi sono gli obiettivi finali che si “crede” di perseguire quando si costruisce un sito: peccato, però, che quello che generalmente si fa per sviluppare il sito non serva per raggiungerli. E anche se si riesce a ottenere un numero soddisfacente di visitatori, se poi il sito non li converte in contatti non ci resta nulla in mano: i visitatori restano sempre e solo degli utenti che non compiono alcuna azione, se non quella di dare un’occhiata alle pagine. Questo è quello che accade alla maggior parte dei siti web: non riescono a convertire. Le cose non devono però necessariamente andare così mediocremente. Esistono siti web che funzionano bene e che riescono a convertire un numero importante di visitatori. Sono costruiti per attrarre le “giuste” persone, per fare trovare quello di cui hanno bisogno e per convincerle a compiere l’azione desiderata: entrare in contatto con l’impresa. Questi siti che convertono sono costruiti seguendo un approccio completamente diverso da quello che ha contraddistinto i siti tradizionali. Purtroppo, le tecniche e gli strumenti che servono per costruire un sito che converta sono ancora poco diffuse nel nostro Paese e, quindi, molto spesso, chi sviluppa il sito non ha le conoscenze adeguate. Nel libro vi descriverò queste tecniche e questi strumenti, in modo da aiutarvi a

costruire un sito che converta. Vi aiuterò a liberarvi dalle vecchie idee, che non funzionano più – ammesso che abbiano funzionato in passato – e ad abbracciare una nuova prospettiva. Vi fornirò degli esempi concreti di tutto ciò di cui parlerò. Ogni argomento del libro è infatti accompagnato da immagini, tratte da siti web reali, che permettono di comprendere più facilmente ciò che vi esporrò. Spero che, in questo modo, la lettura risulti più piacevole e che sia più facile ricordare i punti principali evidenziati nel libro, che ho scritto nel modo in cui mi piacerebbe leggere i testi che consulto per lavoro: spiegando tutto in modo chiaro, non dando nulla per scontato, fornendo dei riscontri visivi a tutto ciò che viene affermato, favorendo la memorizzazione dei concetti più importanti, evitando di usare lunghi blocchi di testo che affaticano la lettura e si dimenticano facilmente. Tutto ciò ha richiesto molto impegno e molto tempo. Spero che apprezzerete questa modalità di scrittura.

Il libro Il libro descrive come si dovrebbe costruire un sito che funzioni, che cioè riesca a convertire. Nei primi tre capitoli del libro vedremo che la maggior parte dei siti tradizionali non funziona perché: 1. non riesce ad attrarre traffico; 2. anche se raggiunge questo obiettivo, non riesce ad accogliere; 3. anche se i primi due punti vengono soddisfatti, non riesce quasi mai a convertire. Negli altri capitoli del libro spiegherò come costruire un sito web che funziona, cioè che superi i limiti dei siti tradizionali e, quindi: 1. attragga visitatori qualificati; 2. li accolga in modo da soddisfare le loro esigenze; 3. li converta in clienti potenziali (o effettivi). In particolare, nella seconda parte, spiegherò che per attrarre una quantità significativa di traffico è opportuno ricorrere agli strumenti della Search Engine Optimization (“Ottimizzazione per i motori di ricerca”). Pur essendo un argomento abbastanza complesso, l’ho affrontato presupponendo che chi legge questo libro non sappia nulla e non abbia particolari nozioni tecniche. Ho cercato di fornire le indicazioni più importanti, in modo che il lettore potesse padroneggiare l’argomento in maniera soddisfacente, tanto da poter intervenire direttamente sul suo sito o almeno dare indicazioni a chi lo ha costruito. Credo che questo modo di esporre la Search Engine Optimization offra qualcosa di nuovo al lettore italiano. Infatti, a mio avviso, i libri pubblicati in Italia:

sono stati scritti per gli addetti ai lavori, e quindi sono molto tecnici; oppure trattano l’argomento in maniera più teorica che pratica, fornendo di conseguenza poche indicazioni operative facilmente applicabili anche da chi non sa nulla di questi argomenti. La terza parte del libro spiega come ottimizzare il sito per la conversione, cioè come accogliere e convertire i visitatori in clienti potenziali o effettivi. Parlo, quindi, di Website Conversion Optimization (“Ottimizzazione della conversione del sito web”), di solito abbreviata in Conversion Optimization. È la parte più innovativa e, come ho spiegato precedentemente, è anche quella meno conosciuta. Infatti, la maggior parte di questi argomenti è trattata e discussa soprattutto negli Stati Uniti e, per adesso, ha trovato poca accoglienza nel nostro Paese. Eppure è di fondamentale importanza per costruire un sito efficiente e che funzioni. Nei capitoli che costituiscono quest’ultima parte del libro spiegherò come le persone leggono sul Web e come, pertanto, sia necessario organizzare le pagine del sito in modo da soddisfare queste modalità di lettura. In particolare, descriverò: come devono essere organizzate le pagine; come guidare lo sguardo del lettore in modo che arrivi in modo naturale a compiere l’azione che abbiamo previsto; come costruire gli elementi più importanti di una pagina web – titoli, testi, moduli, call to action e immagini – in modo da ottimizzare il saggio di conversione del sito. Il libro non è stato progettato per fornire una raccolta di concetti e di suggerimenti. È stato invece ideato per fornire una guida pratica, che accompagni il lettore nella comprensione dei meccanismi che regolano il funzionamento di un sito web che converte, aiutandolo a metterli in pratica. Il mio obiettivo è quello di aiutarvi a: ottimizzare il vostro sito, passo dopo passo, dando indicazioni in modo semplice, chiaro e con molti esempi concreti; guardare al sito web in un modo nuovo, come la maggior parte dei vostri concorrenti non ha mai fatto, perché è molto più facile ragionare come si è sempre operato piuttosto che abbracciare un nuovo modo di pensare, anche se è più efficace del vecchio. Per questo motivo, il libro si rivolge a tutte le persone che, a vario titolo, hanno a che fare con un sito web: proprietari di siti, imprenditori, responsabili marketing, consulenti, webmaster, web designer ecc. Per la sua scrittura semplice, corredata di molti esempi pratici, si rivolge anche a quelle persone che non hanno nozioni tecniche di base e vogliono approfondire questi argomenti senza faticare troppo.

PARTE 1

SITI CHE NON FUNZIONANO E SITI CHE CONVERTONO

CAPITOLO 1

I SITI TRADIZIONALI NON RIESCONO AD ATTRARRE

Di solito, quando si vuole costruire un sito, si segue questo percorso: 1. ci si rivolge a qualcuno che si crede sia esperto nella costruzione di siti web; 2. gli si spiega quali caratteristiche deve avere il sito e quali contenuti devono essere presenti; 3. dopo un po’ di tempo, si prende visione dei primi layout creati dall’esperto e, probabilmente, si richiede qualche modifica; 4. successivamente, si approva il layout finale; 5. a questo punto, se non lo si è già fatto, si consegnano all’esperto i testi completi da inserire nelle pagine del sito; 6. infine, si esaminano le bozze finali del sito, si richiede qualche ulteriore modifica e poi si approva il sito definitivo. Il risultato è un sito che probabilmente soddisfa le aspettative di chi lo ha richiesto: un bel design e il contenuto organizzato come è stato convenuto. L’homepage racconta che cosa fa l’azienda; la pagina “Chi siamo” contiene una breve storia della società; le pagine dei prodotti o dei servizi descrivono in maniera chiara e sintetica le caratteristiche e i benefici principali; la pagina dei “Contatti” ha un bel modulo da inviare e così via. Il tutto corredato da immagini suggestive. Di solito, la valutazione finale che si fa è quella di possedere un sito bello, ben fatto e che darà dei risultati. Questa valutazione, però, si basa soprattutto su un giudizio “estetico”. Infatti, non si può esprimere un giudizio sull’efficacia del sito perché, di solito, chi ha richiesto la realizzazione non ha le conoscenze tecniche necessarie. Per adesso, l’unica considerazione possibile è questa: sito bello = sito efficace. I problemi arrivano dopo qualche mese, quando ci si rende conto che il sito non funziona: le persone che lo visitano ed entrano in contatto con l’azienda sono un numero veramente molto basso, e non valgono neanche una parte dei soldi spesi per costruirlo. A questo punto, ci si chiede che cosa fare: si deve modificare il sito? O fare della pubblicità online per promuoverlo? Oppure, sarebbe meglio rivolgersi a un altro esperto per progettarne uno nuovo, mettendo da parte quello esistente? Probabilmente,

si opterà per una di queste soluzioni. Dopo qualche mese, però, la situazione o non è cambiata o è cambiata di poco: le persone che visitano il sito e contattano l’azienda sono sempre troppo poche. A questo punto ci si mette le mani nei capelli perché non si sa più che cosa fare. Se siete arrivati a questo stadio, o ci state per arrivare, vi tranquillizzo subito: il problema è molto semplice da comprendere (un po’ meno da risolvere). Nella maggior parte delle volte, il problema del vostro sito è che quest’ultimo è stato sviluppato come sono sempre stati sviluppati i siti nel passato e come continuano a essere spesso sviluppati ancora oggi. È stato cioè progettato con tre grossi limiti: 1. non riesce ad attrarre un numero significativo di visitatori “qualificati”, cioè di soggetti veramente interessati agli argomenti del sito; 2. quando è capace di attrarli, non riesce poi ad accoglierli, cioè a offrire quello di cui hanno bisogno; 3. quando è capace di accoglierli, non riesce comunque a convertirli, cioè a produrre un numero significativo di contatti (clienti potenziali o effettivi). Una parte dei siti tradizionali soffre di tutti e tre questi limiti; la maggior parte soffre degli ultimi due. In tutti questi casi, il risultato è sempre lo stesso: il sito non funziona. Nel prosieguo del libro vedremo che esistono gli strumenti per affrontare con successo questi tre problemi. Prima, però, è necessario esaminarli più in profondità. In questo capitolo analizzerò il primo limite, cioè il non riuscire ad attrarre la quantità desiderata di traffico. Nei due capitoli successivi analizzerò gli altri due limiti.

L’importanza di trovarsi nelle prime posizioni dei risultati di ricerca Di solito, la maggior parte del traffico che arriva sul sito proviene dai motori di ricerca.1 Che cosa significa? Per spiegarlo ricorro a un esempio. Nella Figura 1.1 è mostrata la pagina dei risultati di Google che appare in seguito alla ricerca del termine “google plus impact on seo”. Se chi sta effettuando la ricerca clicca su uno dei risultati che appaiono – per esempio, sul secondo – arriverà sulla pagina web collegata al link (in questo caso, una pagina del sito di Search Engine Watch): la visita di questa persona a questa pagina costituisce un esempio di traffico che arriva tramite i motori di ricerca.

Figura 1.1 – Come arriva il traffico al sito tramite i motori di ricerca. La maggior parte del traffico che arriva sui nostri siti utilizza questo canale. Quindi, dobbiamo capire come funziona in modo da: 1. comprendere perché molti siti tradizionali non ottengono i risultati sperati; 2. sapere che cosa dobbiamo fare per avere molto traffico in arrivo dai motori di ricerca. Per capirlo, esaminiamo i risultati di alcune ricerche eseguite utilizzando la tecnica dell’eye-tracking (“monitoraggio dei movimenti oculari”), ottenute cioè utilizzando una speciale attrezzatura che osserva dove si spostano gli occhi delle persone che partecipano al test quando guardano una pagina web. I movimenti degli occhi vengono quindi rappresentati sulle heat map, cioè delle riproduzioni della pagina analizzata in cui sono evidenziate le zone dove si è focalizzato lo sguardo delle persone. Nella pagina dei risultati dei motori di ricerca (SERP, Search Engine Results Page), le zone dove lo sguardo si è fissato sono importanti perché molto spesso conducono a dei clic, che a loro volta rimandano al sito web, portando traffico. Come vedremo, le indagini sono tutte concordi nel sostenere che le prime posizioni nella classifica dei risultati di ricerca sono quelle più viste e sono quelle che hanno un maggior numero di clic. Descriverò prima i risultati qualitativi ottenuti dalle ricerche di eye-tracking e poi i risultati quantitativi.

Risultati qualitativi Una delle prime ricerche è stata condotta nel 2006 dal famoso esperto di usabilità Jakob Nielsen, che sottopose alcune SERP a 232 persone. I risultati verificarono che lo sguardo dei partecipanti al test si focalizzava sempre sui primi quattro risultati e che l’attenzione diminuiva sensibilmente quando si osservavano i successivi.2 In genere, le persone non guardavano, o lo facevano poco, gli ultimi due risultati visualizzati nella pagina. Un risultato simile è stato ottenuto qualche anno dopo da SEOmoz in uno studio condotto osservando otto persone. Come si può osservare nella heat map riprodotta nella Figura 1.2, lo sguardo delle persone si è concentrato anche in questo caso sui primi risultati, perdendo via via di interesse.3

Figura 1.2 – Risultato dello studio condotto da SEOmoz. Sempre nel 2011, la società Mediative ha preso in considerazione diverse parole chiave, e quindi diverse SERP, e le ha sottoposte a 12 persone. 4 Come si può osservare nella Figura 1.3, i risultati sono identici: nelle SERP lo sguardo si concentra sempre sui primi risultati. Nel 2014, la stessa società ha effettuato un nuova ricerca che ha coinvolto 53 persone. I risultati confermano quelli raggiunti nei test effettuati in passato. Come si può osservare nella Figura 1.4, il 60% dei clic complessivi provengono dai primi 4 risultati e il 32,5% sono prodotti dal primo risultato.

Figura 1.3 – Uno dei risultati dello studio condotto da Mediative su differenti parole chiave.

Figura 1.4 – Risultati della ricerca effettuata nel 2014 da Mediative. Questi studi conducono tutti alla stessa conclusione: quando effettuano una ricerca sul Web, le persone si soffermano sui primi risultati forniti dal motore di ricerca – soprattutto i primi quattro – e poi perdono via via di interesse, che diventa quasi nullo quando si arriva a fondo pagina.

Risultati quantitativi Oltre a queste indagini – che mostrano dove si focalizza lo sguardo degli utenti quando guardano la SERP – ne esistono delle altre che si concentrano sui clic che vengono effettuati sui link presenti nei risultati di ricerca. Anche in questi casi, gli studi eseguiti confermano che i primi risultati sono quelli che ricevono la maggiore attenzione, generando il maggior numero di clic. Nella Figura 1.5 sono stati raccolti gli studi più importanti eseguiti negli ultimi otto anni. Come si può osservare, tutti i test concordano nell’attribuire i valori più elevati ai

primi risultati presenti nella SERP.5

Figura 1.5 – Risultati delle principali ricerche eseguite negli ultimi 8 anni sui ClickThrough Rate nella SERP. Naturalmente, le ricerche sono state condotte utilizzando metodologie differenti, che giustificano almeno in parte le differenze nei risultati ottenuti. Però, nonostante ciò, i primi 5 risultati ricevono sempre la maggior parte dei clic: si va dai 43, 37% della ricerca eseguita da Slingshot nel 2011 ai 76,65% della ricerca eseguita da Chitika nel 2010. Mi soffermo brevemente sull’ultima ricerca eseguita nel 2014 da Caphyon, sia perché è l’ultima sia per la sua estensione: 465.020 parole chiave e 5176 siti web esaminati in America e in altre aree intercontinentali (Figura 1.6).

Figura 1.6 – Risultati della ricerca realizzata da Caphyon nel 2014 sui Click-Through Rate nella SERP. Come si può osservare, il 71,3% dei clic si concentra sulla prima pagina. La pagina 2 e la pagina 3 ottengono solamente il 5,6% dei clic. Il restante 23% dei clic è appannaggio dei risultati a pagamento (di cui parlerò nel capitolo 4). Nella prima pagina, i primi 5 risultati ottengono il 67,6% dei clic e i risultati dalla 6a alla 10a posizione raccolgono solo il 3,73% dei clic. In definitiva, anche questa recentissima ed estesa ricerca conferma l’importanza di essere nelle prime posizioni su Google.

Conclusioni Come si può osservare, la maggior parte degli studi sono concordi nel sostenere che le persone: 1. guardano quasi sempre solo la prima pagina dei motori di ricerca, raramente la seconda e quasi mai la terza; 2. si soffermano e cliccano soprattutto sui primi risultati. Quindi, per avere una significativa quantità di traffico, occorre che per una determinata parola chiave il sito, o meglio le sue pagine, si trovino tra i primi risultati registrati dai motori di ricerca, preferibilmente nelle prime quattro-cinque posizioni. Dopo la decima posizione, il traffico sarà molto scarso.

Di conseguenza, se il sito non riesce ad attrarre molto traffico, il problema è probabilmente riconducibile a una insoddisfacente posizione nei risultati dei motori di ricerca. Molti siti soffrono di questa condizione. Vedremo più avanti, nella seconda parte, come si può cercare di arrivare nelle prime posizioni dei motori di ricerca (attraverso la SEO) e, quindi, riuscire ad avere una quota significativa di traffico.6

1. Secondo una ricerca eseguita dalla società di web marketing Conductor, che ha osservato per un anno 30 siti appartenenti a 6 diversi settori, in media il traffico che proviene dai motori di ricerca supera il 60% delle visite complessive di un sito: Safran N., “Update: Organic Search is Actually Responsible for 64% of Your Web Traffic”, www.conductor.com/blog/2014/07/update-organic-search-actually-responsible-64-web-traffic/ (14 luglio 2014). Approfondirò questo argomento nel capitolo 4. 2. Nielsen J., “F-Shaped Pattern for Reading Web Content”, www.nngroup.com/articles/f-shaped-pattern-readingweb-content/ (17 aprile 2006). 3. Meyers P.J., “Eye-Tracking Google SERPs – 5 Tale of Pizza”, moz.com/blog/eye-tracking-google-serps (5 ottobre 2011). 4. Everdell I., “Bottom Sponsored Ads on Google – How Effective Are They?”, blog.mediative.com/en/2011/11/14/google-bottom-sponsored-ads/ (14 novembre 2011). 5. S. Petrescu P., “Google Organic Click-Through Rates in 2014”, moz.com/blog/google-organic-click-throughrates-in-2014 (01 ottobre 2014). 6. In alcuni casi il sito può trovarsi nelle prime posizioni dei risultati, ma avere lo stesso pochissimo traffico. Spesso questo capita perché il volume di ricerca, per la parola chiave per cui si è nelle prime posizioni, è molto basso (meno di 100-150 ricerche mensili).

CAPITOLO 2

I SITI TRADIZIONALI NON RIESCONO AD ACCOGLIERE

La struttura dei siti web tradizionali Anche se dovessero riuscire ad attrarre una significativa quantità di traffico, i siti web tradizionali possono presentare un altro importante limite: non sono costruiti per accogliere questi visitatori. Infatti, la maggior parte dei siti è sviluppata immaginando che i visitatori entrino sempre dalla porta principale, la homepage. Di conseguenza, questa pagina è organizzata in modo da sintetizzare i principali argomenti contenuti nel sito con dei link che rimandano alle pagine più importanti. In questo modo, l’homepage diventa la principale pagina di transito verso le altre pagine del sito. Osservate, per esempio, l’homepage del Senato americano, dove sono evidenziati i contenuti delle principali pagine del sito: Legislative Activities, Senators, Committees ecc. (Figura 2.1). Per accedere a questi contenuti bisogna cliccare sul titolo dei contenuti o sull’immagine. In questo sito, come nella maggior parte di quelli tradizionali, dall’homepage – che è la prima pagina che viene vista dai visitatori – la struttura si articola seguendo una logica ad “albero”, con le pagine organizzate in maniera gerarchica. Un esempio di questa struttura gerarchica è illustrato nella Figura 2.2.

Figura 2.1 – L’homepage del sito del Senato americano.

Figura 2.2 – La struttura ad “albero” di un sito web tradizionale. Di solito, i siti di questo tipo sono sviluppati presupponendo che il visitatore veda per prima cosa l’homepage e poi prosegua, visitando le altre pagine e seguendo la sua

struttura gerarchica. Di conseguenza, le pagine interne del sito sono costruite immaginando che chi arriva su una pagina abbia già visto quella che la precede nel collegamento gerarchico. Per esempio, la pagina “Product 1” sarà progettata immaginando che, quando il visitatore vi arriva, abbia già visto l’homepage e, probabilmente, anche la pagina “Our product” (Figura 2.3).

Figura 2.3 – Il probabile percorso seguito dal visitatore per arrivare alla pagina “Product 1”. In questo modo, chi progetta il sito immagina che il visitatore arrivi a ogni pagina del sito dall’interno, dopo aver visto almeno l’homepage e, quindi – molto importante – conoscendo già qualcosa del sito. Di conseguenza, le pagine interne sono costruite per visitatori che già conoscono qualcosa del sito, perché si ritiene che abbiano visto almeno l’homepage.

Il nuovo navigatore online Questa prospettiva, che poteva essere valida fino a qualche anno fa, non tiene però conto di come oggi la maggior parte degli utenti arriva su un sito. Infatti, nella maggior parte dei casi, i visitatori non entrano dall’homepage, ma da una delle diverse pagine del sito:

al crescere del traffico proveniente dalla ricerca e dai social media, l’homepage, intesa come la porta d’ingresso ai contenuti di un sito, è diventata ormai obsoleta.1 Di conseguenza, come ha scritto Gerry McGovern, autore del best seller The Stranger’s Long Neck: “Ogni pagina del sito è una homepage per qualcuno. Dobbiamo pensare andando oltre la tradizionale homepage.”2 Per comprendere meglio queste affermazioni, vediamo qual è il percorso seguito dai nuovi navigatori online.

Prima fase La persona clicca su un link, o digita una parola chiave nel motore di ricerca con l’obiettivo di trovare delle informazioni su un argomento specifico. Immaginiamo che il nostro ricercatore stia cercando delle informazioni relative all’argomento “transactional email”. Pertanto, digita queste parole nel box di un motore di ricerca, per esempio Google.

Figura 2.4 – Box di ricerca di Google.

Seconda fase Appare una prima pagina con dieci risultati. La persona esamina velocemente i primi, dando uno sguardo a titoli e descrizioni, e clicca sul titolo che gli sembra più vicino alla sua ricerca. Continuando nel nostro esempio, immaginiamo che il titolo che interessa al nostro ricercatore – e che cliccherà – sia quello di MailChimp (Figura 2.5).

Figura 2.5 – Primi risultati di Google per la ricerca “transactional email”.

Terza fase Il visitatore darà una rapida scorsa alla pagina che si apre. Se corrisponde a ciò che si aspettava, inizierà a leggere. Se, invece, la pagina non è pertinente con ciò che stava cercando, abbandonerà probabilmente il sito. Di solito, il visitatore impiega pochi secondi per capire se è arrivato sulla pagina giusta, quella che corrisponde a ciò che sta cercando. Secondo l’esperto di usabilità Jakob Nielsen:3 “La probabilità che il visitatore lasci la pagina durante questi pochi secondi è molto elevata, perché in genere si è molto scettici sulla sua bontà, dato che si incontrano spesso un numero notevole di pagine web progettate in modo mediocre. Le persone sanno che la maggior parte delle pagine web sono inutili e cercano di evitare in tutti i modi di perdere tempo.” Nel nostro esempio, la pagina corrisponde a quanto apparso nei risultati di ricerca e, quindi, verrà almeno in parte letta (Figura 2.6).

Figura 2.6 – La pagina “What is transactional email?” di MailChimp.

Quarta fase Anche se ha trovato la pagina interessante, il visitatore abbandonerà il sito se non troverà altri motivi per restarci: cioè, collegamenti ad argomenti connessi con quello che sta cercando. Il visitatore, infatti, è arrivato su questa pagina con un’esigenza ben specifica ed è interessato in modo particolare a risolvere questo problema. Per esempio, nella pagina di MailChimp, dopo aver letto il testo, il nostro ricercatore non troverà motivi specifici per restare nel sito, dato che l’unico altro elemento presente – oltre al testo – è costituito dal menu di navigazione posto in alto nella pagina. Ma, perché chi è interessato alle “email transactional” dovrebbe cliccare sui pulsanti “Features”, “Pricing”, “Support”, “Blog” o “More”, dato che non hanno alcun collegamento con l’argomento che sta cercando? Di conseguenza, il nostro ricercatore, dopo aver letto almeno una parte della pagina, andrà subito via dal sito. Si può quindi sostenere che adesso le pagine interne del sito diventano le principali porte di entrata al sito e,

spesso, sono anche le uniche pagine che vengono viste. Pertanto, il percorso seguito dai visitatori non è più quello rappresentato nella Figura 2.3 ma, bensì, quello riprodotto nella Figura 2.7.

Figura 2.7 – Adesso i visitatori arrivano direttamente dall’esterno alle pagine interne del sito. Di conseguenza, i visitatori non passano più per l’homepage, non ne hanno bisogno né lo desiderano. Se volete comprare un basso elettrico su Amazon, desiderate arrivare sulla homepage dei bassi elettrici, non sulla homepage degli strumenti musicali o sulla homepage di Amazon.4 Riassumendo, oggi le persone arrivano sui siti con modalità ed esigenze differenti dal passato. In particolare: hanno poco tempo; hanno necessità conoscitive ben precise; non vogliono passare attraverso l’homepage, o attraverso una successione di pagine intermedie; vogliono arrivare subito alla pagina a cui sono interessati; dopo aver letto (almeno in parte) la pagina in cui sono arrivati, se non trovano qualcos’altro relativo al loro interesse, la abbandoneranno e, probabilmente, anche il sito.

Come i siti accolgono il nuovo navigatore online I siti web tradizionali sono costruiti in modo tale da non riuscire a soddisfare le esigenze di chi fa delle ricerche online, perché presuppongono che chi arriva nelle pagine interne abbia già visto qualche altra pagina del sito. Ma, nella maggior parte dei casi, questi visitatori non hanno ancora visto nulla. Facciamo un esempio concreto. Immaginiamo di voler fare una ricerca sulle “finiture per esterni”. Nella pagina dei risultati del motore di ricerca scegliamo, tra i vari link, quello che ci conduce alla pagina riprodotta nella Figura 2.8.

Figura 2.8 – Pagina di arrivo di un risultato ottenuto nella SERP per le parole chiave “finiture per esterni”. Incominciamo a leggere il testo (indicato dalla freccia): “1. Scegli dal primo menu a tendina la famiglia di prodotti, apparirà un secondo menu […].”

Stop: di che cosa si sta parlando? Non lo sappiamo, perché questa pagina non è stata costruita pensando a un visitatore che proviene dall’esterno del sito. È una pagina progettata per accogliere un visitatore che sta già navigando all’interno del sito e conosce (almeno un po’) l’azienda. Noi, invece, non sappiamo nulla dell’azienda né del sito, non capiamo dove siamo atterrati, siamo confusi e disorientati, e non troviamo quello che stiamo cercando. Risultato: probabilmente abbandoneremo subito questo sito. Vediamo un altro esempio. Questa volta, immaginiamo di fare una ricerca sulle “pitture per l’edilizia”. Uno dei primi titoli che appare nella pagina dei risultati di Google conduce alla pagina riprodotta nella Figura 2.9.

Figura 2.9 – Pagina di arrivo di un risultato ottenuto nella SERP per le parole chiave “pitture per l’edilizia”. Come si può osservare, sia il sottotitolo della pagina (“Creare un’atmosfera personalizzata con Röfix Colori”) sia la prima frase (“Röfix è il vostro partner […]”) fanno presumere che chi legge questa pagina conosca già l’azienda a cui appartiene il sito. Pertanto, chi arriva dall’esterno sarà spiazzato e confuso, dato che sta solo cercando informazioni sulle “pitture per l’edilizia” e non gli interessa nulla di “Röfix”. Allora, che cosa dobbiamo fare? Andare sull’homepage o cliccare, nel menu di navigazione, il link “L’azienda” o, forse, “Prodotti”? Troppo complicato: forse sarà meglio non perdere tempo e abbandonare il sito. Anche questo sito è stato progettato senza pensare al nuovo navigatore online. Vediamo, infine, che cosa succede se facciamo una ricerca per “lead generation”. Tra i primi risultati di Google appare un link che ci rimanda a una pagina della società Marketo (Figura 2.10).

Figura 2.10 – Pagina di arrivo di un risultato ottenuto nella SERP per le parole chiave “lead generation”. Come si può osservare, la pagina è focalizzata proprio sulla “lead generation”: ci spiega che cosa è la “lead generation (”What is lead generation?”) e perché è importante (“Why is lead generation important?”). Quindi, anche chi non sa nulla della società Marketo, può leggere e comprenderne il contenuto. Questa pagina è infatti stata costruita presupponendo che il visitatore non conosca l’azienda e non abbia visto gli altri argomenti trattati nel sito. Quindi, il visitatore può arrivare dall’esterno del sito e comprendere il testo senza sapere niente della società e del sito. Diversamente dagli altri due esempi, questa pagina è stata costruita in modo da

accogliere anche le persone che arrivano dall’esterno e che non sono transitate per l’homepage o attraverso altre pagine del sito. Purtroppo, però, i siti web che hanno questa impostazione sono la minoranza. Infatti, la maggior parte dei siti sono pensati per visitatori che navigano all’interno del sito, passando da una pagina a un’altra.

Conclusioni In passato, le persone arrivavano sul sito attraverso l’homepage. Da lì si spostavano per visitare le altre pagine, seguendo la struttura gerarchica. Di conseguenza, i siti erano progettati tenendo conto di questa modalità di navigazione: l’homepage doveva fornire una visione d’insieme e permettere di raggiungere facilmente le altre pagine secondo una modalità gerarchica. Per esempio: Homepage > pagina delle categorie dei prodotti > pagina di una categoria di prodotto (A) > pagina di un prodotto di questa categoria (a). Chi sviluppava il sito, progettava le pagine presupponendo che il visitatore seguisse questo percorso gerarchico. Di conseguenza – facendo riferimento al nostro esempio – si presupponeva che chi arrivava alla pagina del prodotto (a) dovesse essere prima passato per l’homepage, per la pagina generica delle categorie e per la pagina specifica della categoria (A). La pagina (a) era quindi progettata dando per scontato che il visitatore conoscesse tutte quelle che la precedevano gerarchicamente. Questa modalità progettuale è ancora viva e governa la maggior parte dei siti presenti oggi sul Web. Però, da alcuni anni, chi visita un sito segue un approccio completamente differente. Di solito questo nuovo visitatore proviene da un motore di ricerca e atterra su una pagina specifica, non necessariamente l’homepage. Di conseguenza, molto spesso, chi atterra su una pagina dall’esterno non ha mai visto il sito e non sa nulla dell’azienda. Si verifica quindi questo contrasto: la pagina è stata costruita per un visitatore che conosce il sito e l’azienda; il visitatore che arriva sulla pagina non conosce nulla del sito e dell’azienda. Quindi, la pagina non è adatta ad accogliere il nuovo navigatore online: il visitatore non si sente a suo agio, non riesce a comprendere dove è atterrato e se ne va. Questo è il secondo limite della maggior parte degli attuali siti: non riescono ad accogliere il traffico in arrivo.

1. Friedman A., “Is the homepage dead?”, www.cjr.org/realtalk/is_the_homepage_dead.php (17 gennaio 2013).

2. McGovern G., “The continued decline of the homepage”, www.gerrymcgovern.com/new-thinking/continueddecline-homepage (30 novembre 2014). 3. Nielsen J., “How Long Do Users Stay on Web Pages?”, www.nngroup.com/articles/how-long-do-users-stay-onweb-pages/ (12 settembre 2011). 4. McGovern G., op. cit.

CAPITOLO 3

I SITI TRADIZIONALI NON RIESCONO A CONVERTIRE

Nel caso in cui i visitatori arrivino su un sito progettato per accoglierli bene, si troveranno probabilmente di fronte il terzo limite, quello più importante e decisivo: il sito non riesce a convertire questi navigatori in clienti potenziali o effettivi.

Il sito che non converte Quando si costruisce il proprio sito aziendale o professionale, di solito, si ha in mente – o lo si dovrebbe avere – un obiettivo preciso, come per esempio: vendere qualcosa; entrare in contatto con potenziali clienti; spingere i visitatori a richiedere un appuntamento; invitare i visitatori a registrarsi a qualche servizio. Questi obiettivi mirano a “convertire” i visitatori in qualcosa di diverso: in clienti potenziali o in clienti effettivi. Per questo motivo, sono chiamati obiettivi di conversione: un sito esiste fondamentalmente per raggiungere uno, o alcuni, di questi obiettivi di conversione. Se non converte, il sito è inutile. Purtroppo, la maggior parte dei siti è inutile, dato che il loro principale problema è proprio questo: non riescono a convertire, non riescono cioè a trasformare i visitatori in clienti potenziali o effettivi. Perché accade? Perché nelle pagine che dovrebbero svolgere questa funzione manca il punto di conversione. Manca, cioè, lo strumento che permette ai visitatori di diventare clienti potenziali o effettivi. Più specificamente, manca: il modulo per fornire i propri dati (Figura 3.1); o il pulsante per compiere un’azione, manca cioè la call to action (Figura 3.2).

Figura 3.1 – Un modulo di richiesta.

Figura 3.2 – Esempio di due call to action.

Se nella pagina manca il punto di conversione, come possiamo convertire i visitatori? Senza uno di questi due strumenti, l’unica azione che il visitatore può compiere – oltre ad andarsene via dal sito – resta quella di cliccare su uno dei link eventualmente presenti nella pagina, come quelli contenuti nel menu di navigazione. È questo che vogliamo? Che il visitatore clicchi su uno dei link, uno dei tanti presenti nella nostra pagina? Per fare poi che cosa? Per trovarsi in un’altra pagina dove ci sono altri link che rimandano ad altre pagine? E, quando il visitatore se ne va, che cosa ci rimane? Nulla. Provate a dare un’occhiata ad alcuni siti, scegliendoli in maniera casuale: noterete che, molto spesso, l’unica pagina che ha un obiettivo di conversione è quella dei “Contatti”. E, frequentemente, questa pagina contiene solo un indirizzo di posta elettronica impersonale, qualcosa di simile a info@nomedellasocietà.it: nulla cioè che motivi il visitatore a contattarli. Nella Figura 3.3 è mostrato un esempio di questo tipo di pagina.

Figura 3.3 – Esempio di una pagina dei contatti con un indirizzo di posta elettronica impersonale.

In tutte le altre pagine di questi siti tradizionali raramente troviamo delle possibilità per entrare in contatto con l’azienda. Vediamo un esempio. Ho scelto il sito di una società che opera nel settore dell’edilizia. Il sito è semplice e pulito. L’homepage offre un breve testo che introduce ai prodotti dell’azienda (Figura 3.4). Nel lato destro sono presenti alcuni box con immagini (“News”, “Focus”, “Referenze”). In alto, ci sono dei link collegati alle varie categorie dei prodotti dell’azienda. Come si può notare, sono tutti link che rinviano a un’altra pagina. Non c’è un modulo che raccolga i dati del visitatore o una specifica call to action: non c’è cioè alcun punto di conversione. L’unica azione che il visitatore può compiere – dopo aver letto il testo – è quella di cliccare su un link o andarsene via dal sito. Passiamo adesso alla pagina dedicata alla descrizione dell’azienda: è composta da un testo di media lunghezza con due foto (Figura 3.5). Neanche qui troviamo un punto di conversione: nessun modulo, nessuna call to action. Quindi, il visitatore ha, come prima, poche scelte: dopo aver letto il testo, o clicca su un link o a va via dal sito.

Figura 3.4 – Esempio di homepage senza punti di conversione.

Figura 3.5 – Esempio di una pagina “Azienda” senza punti di conversione. Spostiamoci a osservare una pagina di prodotto. Purtroppo, come si può osservare nella Figura 3.6, anche qui non c’è alcun punto di conversione, ma solo dei link a “Schede Tecniche”, “Schede di Sicurezza” e simili.

Figura 3.6 – Esempio di una pagina di prodotto senza punti di conversione. Possiamo continuare a navigare sulle altre pagine. Noteremo che, in tutto il sito, solo la pagina “Contatti” contiene un modulo ed è quindi l’unica a contenere un punto di conversione (Figura 3.7).

Figura 3.7 – Esempio di una pagina “Contatti”. Nelle altre pagine, se il visitatore clicca su uno dei link presenti – ammesso che abbia uno specifico interesse – arriverà su un’altra pagina che non ha alcun punto di conversione, ma solo dei link. Può quindi solo cliccare su uno di questi e così via. Il risultato più probabile è che il visitatore vada subito via, dopo aver visitato una o forse due pagine, senza fare alcuna azione, perché nessuno gli ha chiesto di fare qualcosa. Ho preso questo caso come esempio di un sito che non ha strumenti espliciti di conversione. Ma, se girate sul Web, ne troverete tantissimi costruiti allo stesso modo o in maniera simile: anche se è presente un modulo o una call to action in qualche pagina, è come se non l’avessero, dato che o hanno dimensioni minime oppure sono scarsamente visibili. Osservate, per esempio, la Figura 3.8. Secondo voi, quanto è visibile la call to action posizionata in basso sulla destra (che ho evidenziato con una freccia)?

Figura 3.8 – Esempio di pagina con una call to action poco visibile. La maggior parte dei siti che si trovano oggi su Internet sono costruiti con queste modalità. Allora non ci si deve meravigliare se questi siti non convertono: non c’è nulla che spinga un visitatore a essere convertito in un contatto (e tanto meno in un cliente).

Conclusioni Un sito produce dei risultati solo se raggiunge i suoi obiettivi. E questi si esprimono quasi sempre in obiettivi di conversione: si vuole, cioè, convertire il visitatore anonimo in una persona identificabile perché fornisce i suoi dati personali, richiede un

appuntamento, compra qualcosa. Se la persona acquista subito qualcosa, diventa automaticamente un cliente. Se invece fornisce i suoi dati – perché richiede un appuntamento o perché vuole registrarsi alla newsletter, oppure vuole scaricare qualche documento ecc. – può essere considerato un cliente potenziale con cui entrare in contatto (per cercare di trasformarlo successivamente in un cliente effettivo). In questo modo, l’anonimo visitatore è stato convertito in una persona identificabile, provvista (almeno) di nome, cognome e indirizzo di contatto. Convertire un visitatore anonimo in un cliente potenziale o effettivo è l’obiettivo finale della maggior parte dei siti web. Purtroppo, però, i siti che sono costruiti per raggiungere realmente questi risultati sono veramente pochi. La maggior parte non riesce a raggiungerli perché non è stata sviluppata per tale fine. Infatti, nelle loro pagine non è presente alcun punto di conversione, manca cioè lo strumento che consente di rendere i visitatori dei clienti effettivi o potenziali: cioè, il modulo di contatto o il pulsante per compiere un’azione. Di conseguenza, questi siti non producono risultati, non funzionano. Alla loro base c’è un approccio mentale particolare in cui il fattore “conversione” non è minimamente considerato. Vi descrivo un esempio da manuale di questa mentalità, di cui sono stato diretto testimone. Immaginate di ricevere una newsletter da una famosa società automobilistica in cui, tra le varie notizie, viene dato un grande risalto alla nuova versione di un suo modello di punta: foto bellissima, dal forte impatto emotivo. Risultato: cliccate sul link e arrivate sulla pagina del sito in cui si descrive brevemente questa nuova versione (Figura 3.9). Potete osservare la bella foto dell’auto e leggere alcune informazioni che vi incuriosiscono ulteriormente. A questo punto, vi viene voglia di avere più dettagli: cercate nella pagina un link o un modulo che vi permetta di ottenere maggiori informazioni ma, sorpresa, non c’è nulla! Increduli, ispezionate tutto il sito: niente. Se volete avere più informazioni dovete andare sul sito ufficiale dell’Audi, cercare il modello A 1 ecc. Tante grazie, sarà per la prossima volta, quando cioè Audi capirà l’importanza di avere dei punti di conversione nei suoi siti online. La differenza esistente tra questi siti costruiti in modo tradizionale e quelli ottimizzati per la conversione è ben rappresentato nella Figura 3.10. In conclusione, la mancanza di punti di conversione è il terzo limite della maggior parte dei siti attuali.

Figura 3.9 – La pagina del sito “Audi Experience” dedicata all’Audi 1.

Figura 3.10 – Differenza esistente tra i vecchi siti e quelli ottimizzati per la conversione.

CAPITOLO 4

SITI CHE ATTRAGGONO, ACCOLGONO E CONVERTONO

Un sito che funziona Nei capitoli precedenti abbiamo visto che i siti tradizionali possono presentare tre grandi limiti: 1. spesso non riescono ad attrarre; 2. molto spesso non riescono ad accogliere; 3. quasi sempre non riescono a convertire. La presenza anche di uno solo di questi limiti pregiudica la funzionalità e il successo del sito. Vediamo che cosa succede.

Prima situazione: il sito non riesce ad attrarre Se il sito riesce ad attrarre solo una piccola quantità di traffico, conta poco che sia ben costruito e sappia accogliere e convertire nel modo migliore il traffico in entrata: il numero di persone “convertite” sarà sempre molto basso, perché sono poche quelle che arrivano. È come avere un bellissimo negozio, con merce ben esposta e personale cortese ed esperto, collocato però in una via poco trafficata, senza insegne e senza alcuna segnalazione: avrà pochi visitatori e, quindi, anche poche vendite.

Seconda situazione: il sito non riesce ad accogliere Se invece il sito riesce ad attrarre un’elevata quantità di traffico, ma non è ben ottimizzato per soddisfare i bisogni dei visitatori e, quindi, non riesce ad accoglierli, che cosa accade? Accade che molti visitatori, non sentendosi a proprio agio o non trovando ciò di cui hanno bisogno, lo abbandoneranno senza compiere alcuna azione. È come avere un negozio male illuminato, con merce esposta in maniera confusa, con personale scortese, che però è collocato in una via ad alto traffico, con una bella e grande insegna: arrivano tante persone che però vanno via subito senza comprare nulla.

Terza situazione: il sito non riesce a convertire Se il sito riesce ad attrarre una quantità elevata di traffico ed è stato progettato per accoglierlo, ma non riesce a convertirlo, che cosa accade? Accade che non ha punti di conversione, non ha cioè moduli o call to action. O se li ha, sono poco visibili. Quindi, il traffico, anche se numeroso e soddisfatto per i contenuti che ha trovato, non riesce a individuare alcuno strumento che gli permetta di entrare in contatto con l’azienda. È come avere un bellissimo negozio, con merce ben esposta, ben illuminato, collocato in una via molto trafficata, con una bella insegna e tante altre segnalazioni. Con un unico grave problema: non c’è alcun venditore (sono malati, si sono licenziati, sono in sciopero ecc.): pertanto, tutte le persone che sono entrate numerose nel bel negozio, pur volendo comprare qualcosa, non possono farlo. Possiamo quindi affermare che un sito web, per funzionare e aver successo, deve soddisfare queste tre condizioni: 1. attrarre il maggior numero di visitatori qualificati, cioè persone veramente interessate all’offerta; 2. accogliere questi visitatori in modo che non vadano subito via; 3. convincere questi visitatori qualificati a compiere l’azione desiderata da chi gestisce il sito, cioè la “conversione”. Per esempio: acquistare dei prodotti o dei servizi, fornire i propri dati di contatto, iscriversi a un servizio e così via. Di conseguenza, il primo compito che ci aspetta – se vogliamo sviluppare un sito che funzioni – è costituito dall’ottimizzazione del traffico. Il nostro secondo compito è costituito dall’ottimizzazione del sito per la conversione. Vediamo nel dettaglio questi due compiti.

I canali di provenienza del traffico Per avere un sito che funzioni, la prima condizione che dobbiamo soddisfare consiste nell’attrarre una quota elevata di traffico qualificato. Per ottenere questo obiettivo dobbiamo: 1. individuare i canali di provenienza del nostro traffico; 2. capire come possiamo intervenire su di essi in modo da massimizzare il traffico in ingresso. Per quanto riguarda il primo punto, possiamo individuare cinque principali canali: traffico diretto; traffico indiretto (da altri siti); traffico social;

traffico a pagamento; traffico di ricerca organica. Sui primi tre canali possiamo fare ben poco, soprattutto se non siamo una società molto famosa. L’ultimo canale è quello che produce la quota maggiore di traffico ed è quello su cui dobbiamo impegnarci di più. Vediamo nel dettaglio perché.

Traffico diretto Con questa espressione ci riferiamo a quelle persone che conoscono l’azienda e che la ricercano: digitando il suo indirizzo online nel motore di ricerca; cliccando sul link che hanno salvato tra i “Preferiti” del browser. Naturalmente, è più facile che ci si ricordi un marchio famoso che non uno poco conosciuto e che, quindi, si possa conoscere l’indirizzo web. In quest’ultimo caso, il numero di persone – che vengono a conoscenza dell’indirizzo del nostro sito, se lo ricordano e poi lo digitano nel motore di ricerca perché hanno bisogno di qualcosa – è abbastanza limitato e poco si può fare per aumentarlo. È molto probabile, invece, che la maggior parte delle aziende – quelle che sono poco conosciute al pubblico – abbiano una quota molto bassa di traffico diretto e non possano aumentarla, a meno che non utilizzino massicciamente lo strumento pubblicitario.

Traffico indiretto Il traffico indiretto è quello che arriva da altri siti che hanno un link indirizzato alle nostre pagine (Figura 4.1). Anche in questo caso, il traffico che arriva da questo canale può essere considerato come una misura della popolarità dell’azienda: infatti, i link da altri siti sono indirizzati più facilmente verso quelli conosciuti (e che hanno dei contenuti interessanti). Non è un caso che, spesso, chi ha un’alta quota di traffico diretto abbia anche una significativa quota di traffico indiretto. La maggior parte delle aziende che sono poco conosciute difficilmente può aspirare ad avere una quota significativa di traffico indiretto. In più, di solito, questi link arrivano in maniera spontanea e, quindi, è molto difficile riuscire ad attrarre attivamente del traffico tramite questo canale.

Figura 4.1 – Il sito Crunchbase ha un link indirizzato al sito Apple.

Traffico social Con questa espressione ci si riferisce al traffico che arriva tramite i social media, come Facebook, Twitter, LinkedIn ecc.: sono cioè persone che hanno cliccato sul link contenuto in qualcosa che abbiamo pubblicato su questi media. Per esempio, nella Figura 4.2 potete vedere un tweet e nella Figura 4.3 un post su LinkedIn. Se qualcuno clicca sui link contenuti in questi due messaggi, viene inviato a un sito: il traffico che arriva in questo modo sul sito è traffico “sociale”. Questo traffico è strettamente condizionato: 1. dal numero dei contenuti pubblicati: meno se ne pubblicano, minore sarà il numero di persone che cliccherà sui link; 2. dagli argomenti trattati: più gli argomenti sono interessanti e popolari, maggiore sarà la loro condivisione; 3. dalla notorietà dell’azienda: i contenuti pubblicati da soggetti poco noti sono letti e cliccati da un minor numero di persone. Di conseguenza, per avere una quantità significativa di traffico “sociale” di solito è necessario:

1. essere un’azienda molto famosa; 2. pubblicare molti contenuti “interessanti”. È chiaro che, per la maggior parte delle imprese, che sono poco conosciute e che hanno un’attività sociale in genere molto limitata, questa fonte di traffico è numericamente poco significativa, oltre a essere difficilmente controllabile. A questo punto ci restano gli ultimi due canali di traffico.

Figura 4.2 – Esempio di un tweet che ha un link collegato a un sito.

Figura 4.3 – Esempio di un post su LinkedIn che ha 2 link collegati a un sito.

Traffico a pagamento Questo traffico proviene dalle inserzioni pubblicitarie pubblicate sul Web. La forma più conosciuta di pubblicità a pagamento è quella chiamata Pay-Per-Click (cioè, si paga solo per i clic fatti sull’annuncio), di cui il più famoso esempio è Google

AdWords. Come la maggior parte di voi saprà, Google AdWords è un servizio online di pubblicità che permette di inserire spazi pubblicitari all’interno delle pagine di ricerca di Google. Questi annunci sono visualizzati solitamente in alto e a destra dei risultati di ricerca (Figura 4.4). Non vi descrivo il funzionamento di Google AdWords, che penso conosciate già. Quello che voglio evidenziare sono tre limiti di questo canale: 1. i risultati delle campagne pubblicitarie sono limitati nel tempo, dato che i benefici svaniscono nel momento in cui vengono disattivate: pertanto, per avere un traffico costante, bisogna averle sempre attive; 2. il costo delle campagne pubblicitarie può quindi diventare molto elevato; 3. la percentuale di clic, rispetto alle visualizzazioni dell’annuncio, è molto bassa. Secondo alcuni studi, la percentuale degli utenti che clicca sugli annunci a pagamento è compresa tra il 6% e il 20%.1 Più dell’80% preferisce cliccare sui risultati “organici”, cioè quelli ottenuti dal posizionamento stabilito dall’algoritmo del motore di ricerca (Figura 4.5). Questi limiti ci indicano che, nella maggior parte dei casi, il traffico a pagamento influisce relativamente poco sul traffico complessivo ed è anche molto costoso, se eseguito in maniera continuativa.

Figura 4.4 – Gli spazi pubblicitari presenti in una pagina dei risultati di Google.

Figura 4.5 – Percentuale di clic per i risultati organici e per quelli a pagamento di Google.

Traffico di ricerca organica È il traffico che ha origine dai link presenti nei risultati dei motori di ricerca dopo aver digitato una parola o una frase (Figura 4.6).

Figura 4.6 – Risultato visualizzato a seguito della digitazione di una frase di ricerca.

Questo traffico, come abbiamo visto nel capitolo 1, è strettamente collegato al posizionamento delle pagine del sito nei risultati di ricerca. In generale, si può dire che migliore è questa posizione, più elevata è la quota di traffico che arriva da questo canale. A questo punto vi devo dare due belle notizie. La prima è che noi possiamo intervenire per raggiungere un buon posizionamento nella pagina dei risultati. Infatti, per essere nelle prime posizioni della SERP – o, almeno, per tentare di esserlo – non ci si può affidare al caso, ma bisogna utilizzare degli strumenti particolari (vedi paragrafo successivo). Quindi, a differenza degli altri canali, qui possiamo lavorare proficuamente. La seconda bella notizia è che il traffico organico non solo arriva a coprire oltre l’80% dei clic provenienti dai risultati dei motori di ricerca (come abbiamo appena visto), ma produce anche la quota maggiore del traffico complessivo. Secondo la ricerca di Conductor, citata nel primo capitolo, in media le percentuali di traffico che arrivano in un sito sono le seguenti (Figura 4.7): traffico di ricerca organica: 64%; traffico indiretto, cioè da altri siti (referral): 15%; traffico diretto: 12%; traffico a pagamento (paid search): 6%; traffico social: 2%. La maggior parte del traffico arriva quindi tramite la ricerca organica (64%). Di conseguenza: noi possiamo intervenire per attrarre la quota maggiore del traffico complessivo, quella che arriva tramite la ricerca organica. Vediamo come.

Figura 4.7 – Percentuali medie del traffico che arriva a un sito (ricerca realizzata dalla società Conductor).

L’ottimizzazione del traffico: la Search Engine Optimization Per attrarre una quantità significativa di traffico dalla ricerca organica, il nostro sito deve trovarsi nelle prime posizioni dei risultati di ricerca. Per raggiungere queste posizioni, dobbiamo svolgere delle particolari attività. Queste ricadono sotto il termine di Search Engine Optimization (Ottimizzazione per i motori di ricerca), comunemente abbreviato in SEO. Con l’acronimo SEO ci si riferisce quindi a un insieme di attività che vengono svolte per migliorare la visibilità e il posizionamento di un sito o di una pagina web nei risultati di un motore di ricerca. La SEO si basa su tre specifiche attività: individuazione delle parole chiave (keyword research) utilizzate dai clienti potenziali; ottimizzazione del contenuto delle principali pagine del sito sulla base delle parole chiave individuate; acquisizione di link esterni al sito (link building). Se non facciamo alcuna SEO, probabilmente il numero dei visitatori sarà molto

limitato; se, al contrario, utilizziamo in modo corretto questi strumenti, molto probabilmente riusciremo a ottenere un numero significativo di visitatori. Vedremo queste tre attività nella seconda parte di questo libro. Per adesso, mi interessa evidenziare che, per ottimizzare il traffico che arriva nel nostro sito, dobbiamo utilizzare gli strumenti che ci vengono forniti dalla SEO.

L’ottimizzazione del sito: la Conversion Optimization Una volta che abbiamo ottimizzato il traffico – e quindi siamo in condizione di attrarre una quantità significativa di traffico – dobbiamo ottimizzare il sito in modo tale che riesca: ad accogliere questi visitatori nel modo migliore; e, successivamente, convincerli a compiere l’azione desiderata da chi gestisce il sito, cioè la “conversione” (da visitatori a clienti potenziali o effettivi). Anche in questo caso esistono degli strumenti che ci permettono di svolgere tale compito. Questi strumenti ricadono sotto il termine di Website Conversion Optimization (Ottimizzazione della conversione del sito). La Website Conversion Optimization – comunemente abbreviata in Conversion Optimization – è il processo che aiuta a ottimizzare il sito web in modo da accogliere e convertire nel modo migliore i suoi visitatori, facendogli compiere l’azione desiderata. Si basa su diverse attività che riguardano principalmente: l’impostazione delle pagine; il loro design; il contenuto (testo, titoli, immagini); i moduli di richiesta e le call to action. Analizzerò queste attività nella terza parte del libro.

Ottimizzare il traffico e le conversioni: il processo di conversione Nella Figura 4.8 è sintetizzato il processo di conversione, costituito dalle fasi di attrazione, accoglienza e conversione del traffico. Questo processo può essere così descritto: 1. per avere una significativa quota di traffico qualificato, il sito deve trovarsi nei primi risultati di ricerca; 2. questo risultato si può ottenere utilizzando gli strumenti della SEO;

3. le persone che cliccano sul link del nostro sito, presente nei primi risultati di ricerca grazie alla SEO, arrivano come “visitatori”;

Figura 4.8 – Il processo di conversione. 4. per accogliere questi visitatori, trattenerli nel sito e fargli compiere l’azione desiderata – comprare, registrarsi, compilare un modulo ecc. – si deve ottimizzare il sito utilizzando gli strumenti della Conversion Optimization; 5. grazie all’ottimizzazione del sito, alcuni visitatori, coinvolti dal contenuto e dal layout della pagina in cui sono atterrati, si “convertono”, cioè compiono l’azione desiderata e diventano clienti potenziali o compratori. La SEO influisce sulla prima parte del processo; la Conversion Optimization condiziona la seconda parte del processo e permette di arrivare al risultato finale, la “conversione”.

Conclusioni Per costruire un sito che funzioni, per prima cosa dobbiamo attirare una quantità significativa di traffico qualificato, cioè interessato ai contenuti e ai prodotti (o ai servizi) offerti. Per raggiungere questo obiettivo, dobbiamo cercare di posizionarci nei primi risultati dei motori di ricerca. Molto difficilmente il nostro sito arriverà in queste posizioni in maniera casuale. La maggior parte delle volte sarà necessario utilizzare delle tecniche specifiche, che ricadono sotto il nome di Search Engine Optimization (SEO). Una volta che si è riusciti a far arrivare il traffico qualificato sul nostro sito,

dobbiamo accoglierlo in maniera adeguata, in modo che trovi subito ciò di cui ha bisogno e che compia l’azione per cui abbiamo progettato il sito: fornire dei dati, richiedere un appuntamento, acquistare ecc. Per avere un sito che funzioni e che, quindi, converta, occorre seguire delle tecniche specifiche che ricadono sotto il nome di Conversion Optimization. Nel prosieguo del libro analizzerò questi due processi.

1. Per esempio: Danny Goodwin, “Organic vs. Paid Search Results: Organic Wins 94% of Time”, searchenginewatch.com/article/2200730/Organic-vs.-Paid-Search-Results-Organic-Wins-94-of-Time (23 agosto 2012); Clay Shossow, “SEO vs PPC – Which Provides You the Better Value?”, www.newmediacampaigns.com/page/seo-vsppc-which-provides-you-the-better-value (5 dicembre 2008).

CAPITOLO 5

IL SAGGIO DI CONVERSIONE

L’ottimizzazione del saggio di conversione Il processo di conversione, descritto nel precedente capitolo, trova espressione numerica nel saggio di conversione, che è il principale indicatore del funzionamento di un sito. Il saggio di conversione esprime la percentuale di visitatori che, arrivati su una pagina, compie l’azione desiderata. L’azione desiderata dipende dal tipo di sito e dai suoi obiettivi. Per esempio: in un sito di e-commerce, la conversione avviene quando il visitatore conferma un ordine (e diventa un cliente); in un sito di lead generation – dove l’obiettivo finale consiste nella raccolta dei dati personali dei visitatori, per poterli successivamente contattare –, la conversione avviene quando il visitatore immette i dati richiesti in un modulo e lo invia (diventando un cliente potenziale); in altri siti – soprattutto quelli di consulenti, commercialisti ecc. –, la conversione avviene quando il visitatore richiede un appuntamento (diventando un cliente potenziale). Il saggio di conversione è rappresentato numericamente dal rapporto tra il numero di persone che compiono l’azione desiderata (conversione) – cioè, il numero di ordini confermati, di moduli inviati, di appuntamenti richiesti ecc. – e il numero complessivo di visitatori che arrivano sulla pagina (moltiplicato per 100): saggio di conversione = (numero di conversioni / numero di visitatori) × 100 Nella Figura 5.1 è esemplificato un semplice calcolo del saggio di conversione: avendo 20 visitatori sulla pagina e una sola conversione (in questo caso rappresentata da un’azione di vendita), il saggio di conversione è uguale al 5% (1 vendita/20 visitatori).

Figura 5.1 – Il saggio di conversione. Il numeratore del saggio di conversione – che esprime il numero di conversioni – è chiaramente condizionato dalla capacità del sito di accogliere e convertire il traffico in arrivo: maggiore è questa capacità, più alto sarà il numeratore. Pertanto, per ottimizzare (massimizzare) il numeratore, dobbiamo ottimizzare la capacità del sito di convertire, cioè, come abbiamo visto nel precedente capitolo, dobbiamo sviluppare la Conversion Optimization. Il denominatore del saggio di conversione dipende invece dalla capacità del sito di attrarre traffico: maggiore è la quantità di traffico attratta, più alto sarà il denominatore. Considerato che, come abbiamo visto nel precedente capitolo, il traffico proveniente dalla ricerca organica copre oltre il 60% di tutto il traffico, possiamo affermare che il denominatore della formula del saggio di conversione dipende principalmente dal traffico di ricerca organica. Pertanto, come abbiamo visto, per ottimizzare (massimizzare) il denominatore, dobbiamo sviluppare la SEO. Di conseguenza: l’ottimizzazione del saggio di conversione (CRO, Conversion Rate Optimization) si ottiene attraverso l’ottimizzazione del traffico (e, quindi, con la Search Engine Optimization) e attraverso l’ottimizzazione della

conversione (e, quindi, con la Conversion Optimization) (Figura. 5.2).

Figura 5.2 – L’ottimizzazione del saggio di conversione è il risultato della ottimizzazione del traffico e della conversione. Come ho già scritto, il resto del libro si concentrerà sul processo di conversione e analizzerà gli strumenti che ci permettono di ottimizzare il traffico (SEO) e quelli che ci permettono di ottimizzare la conversione (Conversion Optimization). In questo modo, al termine del libro, avrete gli strumenti per costruire un sito che funziona.

Il saggio di conversione: che cosa misurare Il numeratore e il denominatore della formula del saggio di conversione hanno un significato chiaro, ma dobbiamo stare attenti quando li utilizziamo. Nel caso del denominatore, come calcoliamo il numero di “visitatori”? 1. Solo come visitatori unici? 2. O per tutte le volte che una persona è arrivata sul sito durante il periodo di misurazione? Esempio: se Carlo visita il sito 5 volte e Maria lo visita solo una volta, bisogna contare 2 visitatori oppure 6? Anche se entrambi i modi possono essere ritenuti appropriati, salvo casi particolari, la regola migliore è quella che calcola solo i visitatori unici.1 Nel caso delle conversioni realizzate (numeratore della formula), si pone un problema analogo. Possiamo infatti: 1. calcolare come “unica” una persona che si converte, senza contare le conversioni che ha compiuto nel periodo di misurazione: pensate, per esempio, al caso di chi compie più acquisti in un sito di e-commerce; 2. oppure contare tutte le conversioni compiute da una stessa persona. Quindi: se Carlo compra tre volte e Maria una volta, le conversioni sono 4 oppure 2? Anche in questo caso, la regola probabilmente migliore è quella che prende in considerazione solo la persona che compie la conversione e non il numero di volte in cui compie quell’azione. State comunque attenti a rispettare questa condizione:

qualunque sia il metodo che avete utilizzato per calcolare il numero di visitatori, usate sempre lo stesso anche per calcolare il numero di conversioni. Esiste poi il problema del periodo di tempo da prendere in considerazione per la misurazione: un giorno, una settimana, un mese, tre mesi…? Premessa: non esiste un periodo di tempo ideale, dato che questo può dipendere da diverse condizioni. Possiamo però indicare due limiti: 1. dovrebbe essere abbastanza lungo da tenere conto sia delle fluttuazioni casuali che di quelle strutturali, come per esempio i possibili cali del traffico nel fine settimana; inoltre, deve poter fornire dei dati significativi; 2. non dovrebbe però essere troppo lungo, altrimenti non si potrebbero fare dei controlli tempestivi. Di conseguenza, a mio avviso, la durata del periodo da prendere in considerazione può essere compresa tra il mese e il trimestre. Un consiglio: se non è troppo breve, si può prendere in considerazione il tempo medio utilizzato per compiere il processo d’acquisto.

Qual è un buon saggio di conversione? Questa è una domanda che probabilmente avete in testa fin dall’inizio di questo capitolo. Purtroppo, anche in questo caso, non esiste una risposta univoca. Infatti, il saggio di conversione è condizionato da vari fattori, oltre a quelli che abbiamo appena visti. Per esempio, fattori importanti sono: il mercato in cui si opera: per esempio, prodotti che si acquistano d’impulso hanno un saggio di conversione maggiore di quelli che richiedono un lungo periodo di riflessione; i prodotti presi in considerazione: un conto è acquistare un prodotto che costa 5 euro e un altro è acquistarne uno che costa 500 euro. Nel primo caso, un saggio di conversione del 2% potrebbe essere ritenuto molto basso, mentre nel secondo caso potrebbe essere considerato un traguardo soddisfacente; l’obiettivo di conversione: è chiaro che completare un modulo per scaricare un white paper è un’operazione che si fa molto più facilmente rispetto all’acquisto di un prodotto che costa anche pochi euro; il numero dei campi da riempire nel modulo di contatto (se è presente, cosa che mi auguro): il saggio di conversione diminuisce all’aumentare dei campi (come vedremo nel capitolo 18). Fatte queste premesse, prendete quindi con prudenza i risultati presentati nella Figura 5.3 che si riferiscono all’indagine condotta da MarketingSherpa nel 2012 per conoscere i saggi di conversione di un campione di imprese appartenenti a differenti settori.2

Figura 5.3 – Saggi di conversione per settore industriale (indagine MarketingSherpa). Come potete osservare, si va da un massimo del 10% per i servizi professionali e finanziari al 2% delle organizzazioni non profit. Altre ricerche hanno preso in considerazione le due principali tipologie di siti web: ecommerce e lead generation.3 Secondo queste ultime, si ritiene che: il saggio medio dei siti di e-commerce si collochi tra 1,5% e 2,9%; il saggio medio dei siti di lead generation sia più elevato di quello degli ecommerce, e sia compreso tra 3% e 8%. Tenete comunque conto che conoscere questi saggi medi può essere un’utile indicazione, ma niente di più. Infatti, questo dato non ci fornisce alcun indizio della redditività, che alla fine è la sola misura che conta. Di conseguenza, quello che avremmo bisogno di conoscere è il saggio di conversione che consente di ottenere dei ricavi soddisfacenti dai clienti potenziali acquisiti, o dai clienti effettivi conquistati, o dagli appuntamenti fissati ecc. E questo saggio lo si può stimare caso per caso, in base alle caratteristiche della nostra impresa e alle condizioni in cui opera. Forse, l’indicazione migliore è quella fornita da J. Nielsen quando dice che “un buon saggio di conversione è rappresentato da un saggio che è più alto di quello che si è avuto in passato”.4

Conclusioni Il saggio di conversione è la misura dell’efficacia del sito: un valore molto basso indica che il sito non funziona, uno elevato indica invece che il sito sta funzionando e che sta rispettando gli obiettivi per cui è stato sviluppato. Purtroppo, non è possibile indicare la misura “ottimale” del saggio di conversione di un sito. Alcuni studi, come abbiamo visto, hanno fornito delle misure che possono servire come riferimento. In ogni caso, è sempre molto utile raffrontare il dato attuale con quello raggiunto nel passato, ponendosi come obiettivo il suo costante miglioramento. È importante monitorare costantemente il saggio di conversione e analizzare il comportamento delle sue due componenti: il traffico in arrivo sul sito e il numero di conversioni realizzate. Per questo motivo, vi dovreste porre costantemente queste domande: il saggio di conversione è soddisfacente? il numero di visitatori è sufficiente? sto attirando traffico “qualificato”? il numero di conversioni è buono? che cosa posso fare per aumentare il traffico e le conversioni? Per esperienza, ho constatato che in genere i titolari dei siti hanno scarsa consapevolezza delle metriche necessarie per monitorare il funzionamento del proprio sito. Di conseguenza, anche il saggio di conversione ha scarsa diffusione ed è poco conosciuto. Non fate questo errore. Tenetelo sempre sotto controllo e cercate di migliorarlo costantemente.

1. Questi valori possono essere conosciuti attraverso alcuni strumenti di misurazione collegati al sito. Il più famoso tra quelli gratuiti è Google Analytics (www.google.it/intl/it/analytics/). Al momento dell’iscrizione viene fornito un codice di tracciamento che deve essere inserito all’interno delle pagine del proprio sito. Questo codice consente di raccogliere i dati di navigazione degli utenti, che poi sono elaborati e mostrati all’interno della piattaforma. L’inserimento del codice è abbastanza semplice. Comunque, se per sviluppare il sito vi siete rivolti a un esperto, questa persona lo potrà inserire facilmente (anzi, se è un vero esperto, dovrebbe averlo fatto prima di pubblicare il sito e dovrebbe avervi fornito i dati per accedervi). Consiglio assolutamente di collegare il vostro sito a Google Analytics. 2. Burstein D., “Marketing Research Chart: Average Website Conversion Rates, by Industry”, www.marketingsher-pa/article/char/average-website-conversion-rates-industry (23 ottobre 2012). 3. Gold K., “What is the Average Conversion Rate?”, www.search marketingstandard.com/what-is-the-averageconversion-rate (22 agosto 2013). 4. Nielsen J., “Conversion Rates”, www.nngroup.com/articles/conversion-rates/ (24 novembre 2013).

PARTE 2

ATTRARRE TRAFFICO QUALIFICATO: LA SEARCH ENGINE OPTIMIZATION

CAPITOLO 6

COME I MOTORI DI RICERCA CLASSIFICANO I RISULTATI

In questa seconda parte vedremo che cosa dobbiamo fare per ottimizzare (o massimizzare) il traffico che arriva al nostro sito tramite la ricerca organica. In pratica, questo significa che vedremo che cosa bisogna fare per provare ad avere il nostro sito nelle prime posizioni dei risultati di ricerca, dato che questa è la modalità con cui si ottiene la maggiore quantità di traffico. Come abbiamo già visto, gli strumenti che si devono utilizzare per riuscire in questa operazione sono racchiusi nell’espressione Search Engine Optimization. Quindi, la SEO è l’oggetto di questa seconda parte. Per prima cosa vedremo come i motori di ricerca costruiscono l’ordine di classifica nelle pagine dei risultati.1 Dopo aver spiegato come avviene ciò, sapremo che cosa dobbiamo fare per provare a collocare il nostro sito nelle prime posizioni della SERP. Notate che ho scritto: “per provare a collocare”. Infatti, la SEO ci suggerisce quello che è necessario fare per ottimizzare il sito, ma non possiamo essere certi che riusciremo a collocarlo nelle prime posizioni, dato che questo risultato è influenzato da diverse variabili, come spiegherò più avanti. In ogni caso, di sicuro la SEO ci consente di ottenere la migliore posizione raggiungibile alle condizioni attuali. In questo e nei capitoli 7 e 9 spiegherò come vengono classificati i risultati nella SERP. Nei capitoli 8 e 10, spiegherò invece che cosa bisogna fare per provare a essere nelle prime posizioni di Google.

Come funzionano i motori di ricerca? Nel primo capitolo, abbiamo visto che, per avere occorre che il sito si trovi nelle prime posizioni “casa vacanze” e premo il tasto “Invio”, Google primi tre risultati avranno tra il 60% e l’80% dei domanda è:

una significativa quantità di traffico, della SERP. Per esempio, se digito mi presenta un elenco di risultati. I clic complessivi. A questo punto, la

Che cosa si deve fare per provare a essere nelle prime posizioni di Google? Per rispondere dobbiamo cercare di capire come il motore di ricerca ha costruito questa classifica e, più in particolare, quali sono i motivi per cui ha posizionato alcuni siti ai primi posti (Figura 6.1).

Figura 6.1 – La pagina dei risultati di Google per la ricerca “casa vacanze”. Dobbiamo quindi capire come funzionano i motori di ricerca. Quando interroghiamo un motore di ricerca, i risultati appaiono rapidamente, nel giro di uno o due secondi. A prima vista, sembrerebbe che Google esamini tutte le pagine

web e ne estragga i risultati in quella piccola frazione di tempo. Però se, per trovare traccia delle parole che sono state digitate nel suo box di ricerca, Google fosse costretto a esaminare in modo sequenziale ogni parola nei milioni di documenti presenti nel Web, impiegherebbe parecchie ore. In realtà, quasi tutto il lavoro svolto dai motori di ricerca avviene prima che qualcuno digiti la query (l’interrogazione fatta e che corrisponde alle parole chiave digitate nel box: nel nostro caso, la query è “casa vacanze”). Infatti, i motori di ricerca setacciano quotidianamente il Web, e archiviano una copia delle pagine all’interno di un enorme database – diviso a sua volta in tanti database più piccoli – chiamato comunemente Search Index (“Indice di Ricerca”). Tutto il Search Index è contenuto in numerosi server: Google, per esempio, possiede oltre 600.000 server, presenti su più di 70 data center. Per costruire questo enorme database, e tenerlo aggiornato, i motori di ricerca si servono di due strumenti: 1. gli indirizzi dei siti web forniti direttamente da chi ha creato un sito e che informano del nuovo “nato” (Figura 6.2);2 2. particolari software, chiamati spider (= ragno), crawler (= elemento che striscia), o robot, che esaminano la Rete in maniera automatizzata e metodica.

Figura 6.2 – La pagina dove si comunica a Google che è stato pubblicato un nuovo sito. Quando si sente parlare per la prima volta di questi software si ha qualche difficoltà a immaginarseli. Per questo motivo, provate a pensare che siano simili a ciò che è raffigurato nella Figura 6.3.

Questi software si muovono lungo la Rete di Internet seguendo i link che collegano i siti tra di loro: per loro i link sono le strade su cui si possono spostare. Una volta che lo sviluppatore del sito ha segnalato a Google (tramite la pagina che abbiamo visto prima) la presenza di un nuovo sito, questi programmi: si muovono lungo la Rete; raggiungono i nuovi siti da visionare; esaminano l’homepage; ne fanno una copia che viene archiviata (Figura 6.4).

Figura 6.3 – Raffigurazione caricaturale di un crawler (o spider).

Figura 6.4 – Copia delle pagine web eseguita dal crawler. Perché il crawler trovi, oltre alla homepage, anche le altre pagine del sito, occorre che queste siano collegate con dei link diretti, dato che, come ho appena detto, questi software si spostano sulla Rete seguendo questi collegamenti. Di conseguenza, se esistono delle pagine che non sono collegate da link, verranno ignorate dal crawler e non saranno indicizzate: per i motori di ricerca, semplicemente non esistono. Nella Figura 6.5 possiamo osservare il percorso seguito dal crawler quando esamina un sito simile a quello appena descritto. Abbiamo questi passaggi: 1. Google gli indica di andare all’indirizzo web corrispondente alla pagina A (homepage del sito); 2. dopo averla visionata, copiata e inviata al database, il crawler si sposta verso le pagine B ed E seguendo i due link; 3. le copia e le invia al database; 4. il crawler non può però esaminare le pagine C e D perché, non essendo collegate da link alle pagine che ha precedentemente visto, non può “vederle” e, quindi, per lui e, di conseguenza, anche per Google, queste pagine non esistono.

Figura 6.5 – Le pagine C e D non possono essere viste dal crawler. Se nelle pagine che ha potuto osservare – in questo caso, le pagine A, B ed E – ci sono dei link esterni, che cioè rimandano ad altri siti, e se questi non sono mai stati esaminati prima, il crawler li memorizza e, in un secondo tempo, ne esamina le pagine di arrivo. Questa modalità è quella che permette ai siti, che non sono stati segnalati ai motori di ricerca, di essere rintracciati dai crawler. Infatti, se un nuovo sito non è stato segnalato ai motori di ricerca, potrà essere visionato solo se un altro sito, già registrato dal crawler, indirizza un link a una sua pagina. Per esempio, nel caso rappresentato nella Figura 6.6, il sito posizionato in alto sulla destra potrà essere analizzato dal crawler solo se il proprietario ha comunicato a Google l’indirizzo. In caso contrario, il crawler non potrà andare a visitarlo perché non può raggiungerlo. Di conseguenza, per Google questo sito non esiste e non lo potrà classificare.

Figura 6.6 – Il sito collocato in alto sulla destra non è collegato ad alcun link. A scadenze differenziate, i crawler visitano nuovamente i siti già archiviati. Per esempio, i siti che aggiornano costantemente le loro pagine sono quelli che vengono visti più di frequente.

Il Search Index Come ho detto in precedenza, le pagine copiate dal crawler sono archiviate nel Search Index. Possiamo immaginare questo database come composto da diversi archivi – uno per ogni parola o frase chiave (keyword o keyphrase) –, a loro volta classificati in ordine alfabetico.3 Ogni archivio – associato a una specifica keyword – contiene le pagine web trovate dal crawler contenenti quel termine. Quindi, per tornare al nostro esempio di “casa vacanze”, il Search Index ha: un archivio in cui sono raccolte le pagine che contengono la keyword “casa”; un archivio che raccoglie le pagine che contengono la keyword “vacanze”; un archivio che raccoglie le pagine che contengono la keyword “casa vacanze” (in questo caso, è probabile che ci siano anche pagine già contenute nei

precedenti due archivi). In ogni archivio le pagine sono classificate secondo un ordine, che sarà poi quello che verrà seguito per costruire le pagine dei risultati: cioè, la pagina archiviata con il numero 1 sarà quella che si troverà al primo posto nella prima pagina dei risultati di ricerca per quella keyword; la pagina archiviata con il numero 2 si troverà al secondo posto e così via.

Come Google classifica i risultati A questo punto, vi chiederete:

Come definisce Google l’ordine di raccolta e di visualizzazione delle pagine? Cioè, come stabilisce quale risultato deve apparire nella prima posizione nella sua pagina dei risultati, quale al secondo posto, e così via? Risposta: utilizzando un algoritmo – cioè qualcosa di simile a un’equazione matematica – che esprime un insieme di regole ben definite: considera questo elemento e quello, aggiungi quest’altro, moltiplica… Questo algoritmo viene chiamato ranking algorithm, cioè algoritmo di classificazione. Ogni motore di ricerca ha il proprio algoritmo, composto da specifiche regole (o fattori). Ciò spiega perché i motori di ricerca mostrano differenti risultati per una stessa keyword. Il successo di Google si deve soprattutto al fatto che il suo algoritmo è stato costruito in maniera tale da dare i risultati più attinenti ai termini ricercati, in confronto agli altri motori di ricerca. Naturalmente, le formule degli algoritmi usati dai motori di ricerca non sono pubbliche. Pertanto, non si conoscono esattamente i singoli fattori utilizzati, che d’altra parte sono molto numerosi (l’algoritmo di Google, per esempio, ne contiene più di 200). Però, attraverso esperimenti, test, analisi dei brevetti depositati dai principali motori di ricerca e dichiarazioni rese dai loro rappresentanti, la community degli esperti ha imparato a conoscere alcuni dei principali fattori utilizzati per costruire l’algoritmo di classificazione dei più famosi motori di ricerca.4 In base a queste analisi, si può ragionevolmente affermare che l’importanza di una pagina, ai fini della sua classificazione nei risultati di ricerca, è valutata da Google secondo due principali categorie: 1. la pertinenza del contenuto presente nella pagina rispetto al termine ricercato;

2. l’autorevolezza del sito che contiene la pagina. Di conseguenza, per ogni parola chiave, Google: 1. ordina le pagine tenendo conto della loro pertinenza (dalla più pertinente alla meno pertinente); 2. sceglie, tra quelle più pertinenti, le pagine web che presentano una maggiore autorevolezza; 3. posiziona queste pagine ai primi posti della SERP. Per valutare la “pertinenza”, Google prende in considerazione la presenza delle parole chiave nella pagina e la posizione in cui sono collocate (tratterò questo argomento nel prossimo capitolo). Per valutarne l’“autorevolezza”, si basa soprattutto sul numero e sulla qualità dei link che vi arrivano dai siti esterni (tratterò questo argomento nel Capitolo 9).

Conclusioni I motori di ricerca esaminano costantemente il Web e archiviano le pagine tenendo conto delle parole chiave contenute. Ritornando al nostro esempio, se qualcuno digita “casa vacanze” e preme il tasto “Invio”, in una frazione di secondo il motore di ricerca: 1. analizza le parole digitate: ordine delle parole, ortografia, segni di punteggiatura, uso di lettere maiuscole e così via; 2. decide quali termini ricercare nel suo database, per esempio: a) parole al singolare e/o plurale (oltre “casa vacanze”, può scegliere “case vacanze”, “casa vacanza”, “case vacanza”, e così via); b) parole in ordine invertito (“vacanze casa”, “vacanza casa” ecc.); 3. ricerca nel suo database le parole chiave che ha scelto; 4. estrae, dagli archivi che contengono queste parole chiave, le pagine, ordinate in base alla loro importanza (pertinenza + autorevolezza); 5. visualizza i risultati sullo schermo di chi ha effettuato la ricerca, ordinandoli in base alla loro importanza (pertinenza + autorevolezza). In sintesi, si può quindi dire che i motori di ricerca svolgono quattro principali funzioni: 1. scansione del Web; 2. archiviazione delle pagine; 3. valutazione della pertinenza e dell’autorevolezza delle pagine; 4. presentazione dei risultati di ricerca.

Nel prossimo capitolo vedremo come Google valuta la pertinenza delle pagine web.

1. Anche se quello che dirò è quasi sempre valido per tutti i principali motori di ricerca, nel prosieguo del libro farò riferimento solo a Google, dato che in Italia copre circa il 90% delle ricerche effettuate tramite i motori di ricerca. 2. Per informare Google che è stato pubblicato un nuovo sito, bisogna andare a questa pagina: www.google.it/add_url.html. 3. Nel prosieguo utilizzerò “parola chiave” o keyword per riferirmi sia a una singola parola chiave che a una frase chiave. 4. Uno dei motivi, per cui noi non possiamo essere certi di riuscire a posizionare un sito nelle prime posizioni, è dovuta proprio alla non conoscenza di tutti i fattori che compongono gli algoritmi dei motori di ricerca.

CAPITOLO 7

COME GOOGLE CLASSIFICA I SITI: LA PERTINENZA

Nel capitolo precedente abbiamo visto che Google classifica le pagine web in base a due elementi: 1. la pertinenza del contenuto; 2. l’autorevolezza del sito. In questo capitolo analizzerò il primo elemento. Google valuta la pertinenza della pagina in base alla presenza delle parole chiave e alla loro collocazione. Per poter vedere come svolge questa funzione dobbiamo prima descrivere brevemente come è scritta una pagina web.

Il codice HTML Il testo contenuto in una pagina web non è scritto come appare alla nostra vista. I browser – come Internet Explorer, Firefox, Chrome, Safari ecc. –, per mostrare le pagine come le vediamo, hanno bisogno che siano opportunamente “formattate”, cioè scritte in un particolare linguaggio: l’HTML (HyperText Markup Language). Questo linguaggio fa sì che in tutto il mondo qualsiasi browser possa comprendere e visualizzare il contenuto di una pagina in modo corretto, perché è un linguaggio standard. Se, invece, ogni browser ne utilizzasse uno proprio, bisognerebbe scrivere le pagine web in più linguaggi diversi fra loro. Per esempio, Microsoft, che è proprietaria del browser Internet Explorer, potrebbe utilizzare il suo format di scrittura (Word); Apple, che è proprietaria del browser Safari, potrebbe utilizzare il suo software di scrittura (Pages) e così via. L’HTML mette tutti d’accordo, perché tutti i browser lo capiscono. L’HTML è il linguaggio che indica al programma di navigazione come visualizzare sia il contenuto testuale sia quello non testuale. Per esempio: dove collocare il testo (in alto, a sinistra, al centro ecc.); dove collocare le immagini o i video (di fianco al testo, sopra il testo ecc.); come visualizzare il testo: quali parole sono in grassetto, quali sono in corsivo,

quando andare a capo e così via. In pratica, il browser vede una parola – per esempio, “computer” – senza capire che è scritta in grassetto. Che cosa si deve fare per indicargli che una parola è scritta in grassetto? Dobbiamo aggiungere un’etichetta – chiamata tag – davanti e dopo la parola. Il tag è racchiuso tra parentesi angolari, cioè tra i simboli “”; all’interno di esse si deve indicare il comando che deve essere interpretato dal browser. Nel nostro caso, per indicare al browser che la parola è scritta in grassetto, dobbiamo scrivere (“b” è la prima lettera dell’inglese bold = grassetto). Per indicare che l’uso del grassetto è finito dobbiamo utilizzare il comando . Infatti, deve essere sempre indicato il punto di conclusione nell’interpretazione di un dato comando con il tag di chiusura (che coincide con il tag di apertura ma con all’interno una barra: “”). Ancora un esempio: per indicare dove inizia un nuovo paragrafo dobbiamo scrivere (“p” è la prima lettera dell’inglese paragraph). Per indicare che il paragrafo è finito, dobbiamo scrivere . Attraverso altri tag si indica al browser come visualizzare tutto il contenuto della pagina. Per vedere come è scritta una pagina web, basta fare clic con il tasto destro del mouse in un punto qualsiasi della pagina che si sta guardando. Si aprirà un menu simile a quello visualizzato nella Figura 7.1 (dipende dal browser che si sta utilizzando).

Figura 7.1 – Il menu che appare se si clicca con il tasto destro del mouse su una pagina web. Cliccando su “Visualizza sorgente pagina”, viene aperta la schermata HTML della pagina, che sarà simile all’esempio mostrato nella Figura 7.2.

Figura 7.2 – Esempio del linguaggio HTML di una pagina web. Naturalmente, se non siete esperti di HTML, resterete confusi e disorientati. Non preoccupatevi: non voglio insegnarvi il linguaggio HTML. Quello che vi sto spiegando vi può servire per: controllare se il vostro sito è stato ottimizzato per la SEO; dare eventuali istruzioni a chi vi ha sviluppato il sito (non necessariamente chi progetta siti web conosce anche la SEO); oppure, poter intervenire direttamente, nel caso che abbiate un sito che sia stato costruito utilizzando un CMS (Content Management System), cioè un software che facilita la gestione del sito dato che non richiede conoscenze tecniche. In questo caso, basta accedere alla dashboard e utilizzare i comandi che vi consentono di ottimizzare il sito senza conoscere il linguaggio HTML (Figura 7.3).

Figura 7.3 – Esempio della dashboard di un sito dove si può intervenire sul linguaggio HTML senza conoscerlo. Nell’esempio illustrato nella Figura 7.3 bisogna scrivere, nelle diverse caselle, le informazioni che descriverò più avanti in questo stesso capitolo. Credetemi: in questo caso è veramente tutto molto semplice.

La struttura della pagina HTML Quando si prepara la pagina web nel linguaggio HTML,1 la prima cosa da fare consiste nel digitare il tag : in questo modo, si comunica al browser in quale linguaggio verrà scritta la pagina. Allo stesso modo, quando si termina di scrivere il contenuto della pagina, bisogna comunicare al browser che la pagina è finita: si dovrà pertanto utilizzare il tag di chiusura, cioè . All’interno di questi due tag, la pagina web si divide in due distinte sezioni (Figura 7.4): l’intestazione (header) e il corpo (body).

Figura 7.4 – Struttura di una pagina HTML. L’intestazione (header) è delimitata dai tag e . Al suo interno occorre indicare: 1. il titolo associato alla pagina; 2. alcune informazioni di servizio (metadata), che non vengono visualizzate dal browser ma che sono utili per i motori di ricerca (descrizione del contenuto della pagina, parole chiave utilizzate ecc.). Il corpo (body) è delimitato dai tag e . Al suo interno verrà scritto il testo della pagina e verranno inseriti i tag previsti per la sua formattazione: questo contenuto verrà visualizzato dal browser. Dopo questa breve introduzione al codice HTML, siamo pronti per capire come i motori di ricerca valutano la “pertinenza” di una pagina web per una specifica keyword.

Come viene valutata la “pertinenza” Quando i motori di ricerca ricevono dal crawler la copia di una pagina, devono esaminarla per capire qual è l’argomento trattato, in modo da poterla richiamare quando vengono digitate le parole chiave pertinenti. Il problema consiste nel fatto che i motori di ricerca non sono esseri umani e, quindi, non possono fare come facciamo noi che,

per comprendere un argomento, interpretiamo il significato logico delle frasi. Devono quindi affidarsi a qualche “scorciatoia”, a qualcosa che la loro tecnologia gli permette di fare, pur con tutti i limiti del caso. Il metodo utilizzato si basa sul presupposto che chi scrive il testo di una pagina collochi alcuni dei termini che sintetizzano l’argomento in alcune specifiche posizioni. Per esempio, è probabile che il titolo della pagina – che di solito ha il compito di riassumere l’argomento – contenga delle parole collegate al testo. Quindi, se sto parlando di “sistemi termoisolanti”, probabilmente nel titolo scriverò qualcosa di simile: “I nuovi sistemi termoisolanti”, “Come funzionano i sistemi termoisolanti”, “Quale sistema termoisolante scegliere” e così via. Di conseguenza, quando esaminano una pagina HTML, i motori di ricerca controllano tutte le posizioni dove dovrebbero essere scritte le parole chiave che descrivono l’argomento. Se in tutte queste posizioni trovano le stesse parole chiave, i motori di ricerca ritengono che l’argomento della pagina sia strettamente pertinente con questi termini. Se, invece, trovano le stesse parole chiave solo in alcune di queste posizioni, riterranno che l’argomento della pagina sia abbastanza pertinente con questi termini. Di conseguenza, nell’archivio contenente tutte le pagine con le stesse parole chiave, il motore di ricerca classificherà la pagina “strettamente pertinente” molto più in alto rispetto a quella “abbastanza pertinente”. Per sapere dove dobbiamo collocare le nostre keyword, abbiamo quindi la necessità di sapere quali sono le posizioni che il motore di ricerca esamina nella sua ricerca.

Dove ricerca Google le parole chiave per capire qual è l’argomento della pagina? Vediamo quindi quali sono questi posizioni. Per farlo, partiamo dalla suddivisione della pagina in due sezioni come mostrato nel precedente paragrafo.

Le componenti dell’header di una pagina HTML La sezione “head” Questa sezione, delimitata dai tag e , si trova all’inizio della pagina HTML e si compone di diversi tag. I motori ricercano le parole chiave in alcuni precisi tag (Figura 7.5):

1. nel title tag ; 2. nei meta tag, che comprendono il description tag e il keywords tag.

Figura 7.5 – La sezione “head” di una pagina HTML. Vediamoli più da vicino.

Il title tag Ogni pagina scritta nel codice HTML deve avere un titolo. Quindi, quando iniziamo a scrivere in codice HTML, una delle prime cose che si deve fare è scrivere il titolo del documento. Questo deve essere contenuto tra i tag e , cioè tra i title tag (Figura 7.6).

Figura 7.6 – Esempio di title tag. Di solito, il titolo indica qual è il contenuto della pagina. Di conseguenza, i motori di ricerca ritengono che il title tag contenga le parole chiave. Il title tag viene visualizzato dai browser nella loro barra del titolo. Nella Figura 7.7 viene mostrato come il title tag appare con i browser Firefox e Chrome.

Figura 7.7 – Visualizzazione sul browser del title tag. C’è anche un’altra posizione dove il title tag viene mostrato:

nell’intitolazione dei risultati mostrati nelle pagine dei risultati, sotto forma di link. Nella Figura 7.8 è mostrato come il title tag viene visualizzato nella SERP.

Figura 7.8 – Visualizzazione del title tag nei risultati di Google. Per tutti questi motivi, il title tag costituisce uno dei più importanti elementi presi in considerazione dai motori di ricerca per valutare la “pertinenza” di una pagina web. Di conseguenza, occorre che le nostre parole chiave siano assolutamente presenti in questa sezione. Dobbiamo però seguire alcuni “accorgimenti”, dato che i motori di ricerca, e Google in particolare, tengono conto delle seguenti condizioni: 1. Corrispondenza tra titolo e contenuto Il titolo deve rappresentare un’accurata descrizione del contenuto della pagina. Per questo motivo, deve essere attinente a esso. Se non vi è alcun legame, e quindi non riprende alcune delle parole utilizzate nel testo, Google può penalizzarlo non prendendolo in considerazione. 2. Unicità del titolo Non deve esistere più di una pagina con il titolo scelto, altrimenti Google fa fatica a capire come questa pagina si distingua dalle altre e può pensare che il contenuto sia stato duplicato. 3. Posizione delle parole chiave Alcuni studi dimostrano che gli utenti cliccano maggiormente i risultati di ricerca che hanno le parole chiave – cioè quelle che l’utente ha digitato nel box di ricerca – all’inizio del titolo. Per questo motivo, Google attribuisce un valore maggiore alle parole poste all’inizio del title tag. Consideriamo per esempio il titolo “Come

migliorare il posizionamento su Google: la search engine optimization”. Se le nostre parole chiave – cioè quelle per cui vogliamo che il motore di ricerca ci collochi tra i primi risultati di ricerca – sono “search engine optimization”, sarebbe meglio scrivere il titolo in questo modo: “Search engine optimization: come migliorare il posizionamento su Google”. 4. Numero delle parole chiave Non bisogna eccedere con il numero delle parole chiave inserite nel title tag. Infatti, se sono troppe, può accadere che Google non le prenda in considerazione. Per esempio, MSNBC ha utilizzato questo title tag per la sua homepage: Breaking News, Weather, Business, Health, Entertainment, Sports, Politics, Travel, Science, Technology, Local, US & World news-MSNBC.com Google non ha preso in considerazione il title tag indicato da MSNBC perché era composto da troppe keyword (Figura 7.9). Quindi, meglio non utilizzare più di 4-5 parole chiave.

Figura 7.9 – Risultato di ricerca per il termine “msnbc”. 5. Numero di caratteri Dopo l’ultimo cambiamento nel design della SERP, Google mostra solamente i primi 55 caratteri del title tag.2 Anche se alcuni esperti consigliano di focalizzarsi più sull’efficacia del titolo che sull’estensione, a mio avviso è meglio costruire il title tag in modo che non superi questo limite, per evitare che venga tagliato e, quindi, perda di significato. Il meta description tag Proseguiamo con l’analisi del codice HTML della nostra pagina web. Dopo il title tag, dobbiamo scrivere alcuni meta tag. I meta tag sono dei particolari tag che: 1. non sono visualizzati nella pagina web; 2. forniscono però ai motori di ricerca delle informazioni importanti.

La sezione head può contenere diversi meta tag ma, ai fini del posizionamento nella SERP, ai motori di ricerca ne interessano solo due: il description tag e il keyword tag.3 Vediamoli in dettaglio, iniziando dal meta description tag. Nel meta description tag (“meta tag di descrizione”) chi sta progettando la pagina HTML deve scrivere un sintetico riassunto del suo contenuto. Per questo motivo, i motori di ricerca ritengono che questo meta tag debba per forza contenere le parole chiave del testo: se sto parlando di “sistemi termoisolanti” e devo fornire una breve descrizione dell’argomento, è chiaro che scriverò almeno una volta quelle parole nella descrizione. Il meta tag, che appare come nella Figura 7.10, inizia sempre con questi attributi: . Subito dopo occorre scrivere la breve descrizione dell’argomento trattato nella pagina.

Figura 7.10 – Esempio di come deve essere scritto il meta description tag nel codice HTML. In passato, questo meta tag aveva una grande importanza per i motori di ricerca, perché lo esaminavano con l’intento di scoprire le parole chiave. Purtroppo, però, i webmaster iniziarono a riempirlo di keyword che non avevano alcuna attinenza con l’argomento della pagina, con l’intento di ingannare i motori di ricerca. Da allora, questo meta tag è stato considerato meno importante e poco influente per la ricerca delle parole chiave. In ogni caso, è sempre meglio scrivere bene il meta description tag, inserendo in modo appropriato le parole chiave, per due motivi: perché, anche se piccolo, conserva comunque un valore per alcuni motori di

ricerca; perché questo meta tag viene spesso mostrato nei risultati della SERP, dopo il title tag. L a Figura 7.11 illustra come il meta description tag viene mostrato nei risultati di ricerca sotto il titolo.

Figura 7.11 – Come appare il meta description tag nei risultati di ricerca. (Fonte: fluxedigitalmarketing.com/the-beginners-guide-to-on-site-and-off-site-seo).

Figura 7.12 – Esempio di meta description tag scritto in un CMS. Vediamo un esempio pratico. Nella Figura 7.12 il meta description tag è stato scritto nella pagina dedicata di un CMS, un sistema che come ho già spiegato permette di gestire un sito senza bisogno di utilizzare il linguaggio HTML. Quindi, nel campo “Description”, che corrisponde al meta description tag, è stata scritta una breve descrizione del prodotto. Una parte di questo meta description tag – chiamata snippet – appare nei risultati di ricerca, come mostrato nella Figura 7.13

Figura 7.13 – Come appare il meta description tag nei risultati di ricerca. Anche in questo caso, nei suoi risultati di ricerca, Google visualizza un numero massimo di caratteri: 155 (inclusi gli spazi). Di conseguenza, quando scriviamo la descrizione della pagina, non dobbiamo superare questo numero di caratteri, perché altrimenti si avrà il risultato illustrato dalla Figura 7.13: la frase viene troncata e non se ne capisce il senso. Per controllare come Google potrebbe visualizzare il vostro meta description tag potete utilizzare un tool di simulazione, come per esempio SEOmofo (www.seomofo.com/snippet-optimizer.html). Inoltre, come possiamo osservare sempre nella Figura 7.13, le parole chiave – quelle che sono state utilizzate nel box di ricerca – appaiono in grassetto, rendendo la loro visibilità molto elevata: in questo modo, l’utente percepisce che la pagina dovrebbe essere molto pertinente con ciò che sta cercando ed è quindi spinto a cliccare sul link del risultato. Secondo alcuni esperti, una significativa quantità di clic può avere una buona influenza sulla posizione nella SERP. Per questi motivi, è importante scrivere bene il description tag, inserendo le keyword. Infatti: 1. chi clicca sul risultato del motore di ricerca è una persona che arriverà sul nostro sito: di conseguenza, più persone vi cliccano, maggiore sarà il numero di coloro che arriveranno sul nostro sito successivamente; 2. inoltre, più si clicca sul risultato di ricerca, maggiori sono le possibilità che i motori di ricerca ne tengano conto ai fini del posizionamento nella SERP; 3. le persone sono spinte a cliccare sul risultato, oltre che dal titolo, anche in base a che cosa c’è scritto nello snippet; 4. in questo senso, la presenza delle parole chiave nello snippet è di fondamentale importanza per suggerire la pertinenza della pagina con quello che l’utente sta cercando, e quindi spingerlo a cliccare. Dobbiamo però fare una precisazione: qualche volta, i motori di ricerca non mostrano il meta description tag nello snippet. Per esempio, non lo utilizzano se ritengono che: non dia una descrizione accurata della pagina; non contenga le parole chiave; venga utilizzato in altre pagine del sito. E, naturalmente, non possono mostrarlo se ci si è dimenticati di scriverlo, cosa che accade spesso, dato che chi sviluppa il sito a volte non ne conosce l’importanza. In questi casi, il motore di ricerca, mostra al suo posto una piccola porzione del testo

della pagina: spesso le prime parole del testo. Quindi, per scrivere un valido description tag – che abbia buone possibilità di essere mostrato nello snippet e che possa (forse) influire sull’algoritmo di classificazione dei motori di ricerca – bisogna non cadere negli errori appena descritti. Si consiglia inoltre di: 1. scrivere un testo che sia fluido, scorrevole, che rinforzi e sostenga il title tag, che sia privo di toni “pubblicitari” o “spettacolari”, che descriva il contenuto della pagina e che sia persuasivo; 2. inserire le parole chiave – se è possibile – all’inizio del descritpion tag, senza esagerare con le ripetizioni: devono avere un senso e non devono condizionare la leggibilità del testo. Il meta keywords tag Dopo aver scritto il meta description tag, dovremmo inserirne un altro: il keywords tag, che è l’altro meta tag preso in considerazione dai motori di ricerca (Figura 7.14).

Figura 7.14 – Il meta keywords tag è collocato subito dopo il meta description tag. In questo meta tag si devono scrivere le parole chiave che compaiono nel contenuto della pagina e con le quali si vorrebbe apparire nelle classifiche dei motori di ricerca. Il keywords tag deve essere scritto in questo modo: Dato che in questo meta tag si devono scrivere le parole chiave del testo, i motori di ricerca lo hanno sempre preso in considerazione per capire l’argomento della pagina. Tuttavia, anch’esso ha perso nel tempo la sua importanza, per gli stessi motivi che abbiamo indicato per il description tag: avendo capito l’importanza che rivestiva per le

classifiche dei motori di ricerca, i webmaster hanno iniziato a riempirlo di parole chiave non attinenti. Oggi, la maggioranza degli esperti ritiene che abbia poco valore per alcuni motori (come Yahoo!) e nessuno per altri (Google). Però, considerato anche che Google non ha una politica molto chiara su questo meta tag e che negli ultimi tempi ha rilasciato dichiarazioni contrastanti, consiglierei di inserirlo sempre e di scriverlo con attenzione, rispettando alcune regole:4 1. le parole chiave scelte devono apparire anche nel contenuto della pagina, nel meta description tag e (almeno alcune) nel title tag; 2. le parole chiave inserite per prime nel meta tag sono probabilmente considerate più importanti dai motori di ricerca; 3. non si deve eccedere con il numero delle parole chiave: al massimo 8-10; 4. si dovrebbero separare le diverse keyword con delle virgole, per esempio: “marketing automation software, marketing automation, marketing software”.

La sezione “body” Dopo aver scritto la sezione head, dobbiamo passare alla seconda sezione: la body. In essa – delimitata dal tag di apertura e dal tag di chiusura – viene riportato il testo della pagina web, con i tag specifici che ne consentono la corretta visualizzazione da parte dei browser (Figura 7.15). Google ritiene che chi scrive una pagina web, probabilmente, riporterà le parole chiave in alcune specifiche posizioni, come per esempio: nel titolo del testo; nei sottotitoli; nelle parole evidenziate; nei link interni; all’interno del testo nella descrizione delle immagini. Pertanto, ricercherà le parole chiave in queste posizioni. Vediamo più in dettaglio dove Google cerca le parole chiave, e di conseguenza in quali posizioni dobbiamo collocare le nostre.

Figura 7.15 – La sezione body viene subito dopo la sezione head.

Titoli e sottotitoli: gli heading tag (“tag di intestazione”) Il testo contenuto in una pagina web dovrebbe necessariamente avere un titolo. Se poi è lungo, può essere utile suddividerlo in sottotitoli. Di solito, il titolo è scritto con un carattere più grande rispetto ai sottotitoli, che a loro volta hanno un carattere più grande rispetto al testo. Entrambi sono spesso in grassetto o in corsivo e si staccano in modo evidente dal resto del testo. Nel linguaggio HTML, i titoli e i sottotitoli presenti nella pagina web devono essere inseriti con particolari tag, chiamati heading tag (“tag di intestazione”). Il titolo deve essere scritto all’interno dei tag e e non deve essere utilizzato più di una volta.5 I sottotitoli devono essere scritti all’interno dei tag e . Se abbiamo bisogno di inserire nel testo ulteriori sottotitoli di livello inferiore si può ricorrere ai tag e . Il numero posto dopo la lettera “h” indica l’importanza del titolo e, quindi, la grandezza del carattere con cui appariranno. Questa grandezza decresce dal tag h1, il più importante, al tag h6, il meno importante (di solito però ci si ferma all’h2 o all’h3). Nella Figura 7.16 si può osservare come si presentano i tre principali heading in una

particolare pagina web.

Figura 7.16 – Visualizzazione degli heading tag in una pagina web. Siccome il titolo del contenuto fornisce spesso una sintesi dell’argomento trattato nella pagina, e i sottotitoli una sintesi dell’argomento trattato all’interno delle sezioni, per Google questi elementi sono molto importanti per capirne l’argomento. Di conseguenza, cerca le parole chiave in queste intestazioni, dando a esse la stessa scala di “importanza” che abbiamo visto poco sopra: l’heading tag h1 ha il maggior valore ai fini del posizionamento nella SERP; segue l’heading h2 e così via. Quindi, se è possibile, e se ha senso, oltre che nel tag h1, si dovrebbe cercare di inserire le parole chiave anche negli altri heading tag utilizzati. Per concludere, occorre osservare che, anche se non avviene sempre, a volte il tag h1 ripete il testo del title tag (Figura 7.17). Non sappiamo, però, se Google attribuisca un maggior valore a questa corrispondenza.

Figura 7.17 – Corrispondenza tra title tag e heading tag h1.

I tag di evidenziazione Google ritiene che le parole scritte in grassetto e in corsivo, dato che hanno un’importanza maggiore del testo normale, possano contenere le parole chiave, e per questo motivo le cerca anche all’interno di queste parti evidenziate, dando più importanza al primo rispetto al secondo. Ecco perché, senza esagerare – non solo per non ridurre la leggibilità del testo, ma anche perché Google penalizza gli abusi – è utile utilizzare le nostre parole chiave all’interno dei tag di evidenziazione: o (per il grassetto) e o (per il corsivo). Naturalmente, chi usa un CMS per gestire il suo sito non ha bisogno di utilizzare questi tag: basta che scriva in grassetto o in corsivo le parole che vuole evidenziare nel testo della pagina.

L’image alt tag Se nella pagina sono presenti delle immagini, Google pensa che debbano essere pertinenti con l’argomento trattato nel testo. Purtroppo, però, Google come tutti gli altri motori di ricerca, non “vede” le immagini ma può leggerne solo la componente testuale. Per inserire un’immagine in una pagina HTML bisogna inserire il seguente tag (image tag): (questo tag non ha bisogno di chiusura). Google capisce che dove c’è l’image tag c’è un’immagine, ma non riesce ancora a

capire a che cosa si riferisca. Per indicare qual è l’argomento delle immagini si deve scrivere, all’interno dell’image tag, un particolare attributo (image alt tag). Questo tag appare così: alt=breve descrizione dell’immagine. Nella Figura 7.18 si può osservare come appare l’image alt tag in una pagina HTML.

Figura 7.18 – Esempio di un’image alt tag. In questo tag si deve fornire una breve descrizione dell’immagine. Leggendo questo elemento, i motori di ricerca capiscono che cosa vi è raffigurato. E, dato che ritengono che l’immagine sia aderente con il contenuto della pagina, pensano di conseguenza che lo sia anche la sua descrizione. Pertanto, i motori ricercano le parole chiave all’interno di questo tag. Per esempio, nella precedente Figura 7.18, l’image alt tag è: “Find us on Facebook”. In questo caso, i motori di ricerca, leggendo l’image alt tag, ritengono che l’immagine si riferisca a Facebook. E, quindi, pensano che l’argomento della pagina potrebbe essere collegato a quel social network. Dato che i motori di ricerca, nel valutare la pertinenza di una pagina, danno un grande valore a questo attributo, è importante: inserire sempre l’alt image tag; e – se ha senso, cioè se l’immagine può essere descritta con le nostre parole chiave – è bene inserire le keyword nella descrizione dell’immagine. Attenzione, però: non si deve utilizzare la stessa descrizione per immagini diverse, perché i motori di ricerca ci puniranno. Evidenzio che, molto spesso, chi sviluppa il sito, non conoscendo la sua importanza, commette il grave errore di non utilizzare l’image alt tag. Per verificare che l’image alt tag sia stato utilizzato, e vedere eventualmente quale descrizione sia stata inserita, basta passare il mouse sopra l’immagine: in caso positivo, sopra l’immagine sarà leggibile l’image alt tag (Figura 7.19).

Figura 7.19 – Passando il mouse sopra l’immagine appare l’image alt tag (se è stato utilizzato).

I link interni I link interni sono quelli che collegano fra loro due pagine dello stesso sito web. I motori di ricerca ritengono che quello che è scritto nella parte cliccabile del link (chiamato anchor text) descriva l’argomento della pagina d’arrivo e, quindi, attribuiscono grande importanza a questi collegamenti. Di conseguenza, è utile: inserire dei link interni nel proprio sito; riportare nel testo del link le nostre parole chiave (naturalmente collegate al contenuto della pagina di arrivo). Nel codice HTML, un link viene espresso in questo modo: anchor text. Nella Figura 7.20 è mostrato un esempio di come è scritto l’anchor text in una pagina HTML e come viene visualizzato dal browser.

Figura 7.20 – Esempio di anchor text scritto nel linguaggio HTML e visualizzato dal

browser. Chi utilizza un CMS deve semplicemente riportare nel testo del link le parole chiave utilizzate nella pagina d’arrivo.

Densità delle parole chiave In passato, il fattore più importante che influiva nelle classifiche dei motori di ricerca era rappresentato dalla presenza delle parole chiave all’interno del testo. Ma, come abbiamo già visto anche per altri fattori, dopo un po’ di tempo, i webmaster hanno iniziato a eccedere, ripetendo troppo frequentemente le stesse parole chiave e rendendo i testi poco leggibili: il loro ragionamento si basava sul fatto che, se i motori di ricerca davano importanza alla loro presenza all’interno del testo, più alto era il numero delle loro occorrenze, più alta sarebbe stata la posizione delle loro pagine nella SERP. Naturalmente, i motori di ricerca hanno subito punito questi abusi, incominciando a dare poca importanza a questo fattore. Oggi, alcuni esperti ritengono che i motori di ricerca diano ancora un piccolo peso alla presenza delle parole chiave nel testo, se non se ne abusa: quindi si consiglia di non superare orientativamente il limite del 4%, cioè ripetere le parole chiave al massimo 4 volte ogni 100 parole. Si consiglia anche di variarle, usando singolari e plurali, sinonimi e acronimi (per esempio, “SEO” invece di “Search Engine Optimization”). Gli esperti ritengono che venga data più importanza alla loro presenza all’inizio del testo, perché si crede che le principali vengano sempre inserite nella prima parte di un documento. L’inserimento delle parole chiave e la loro ripetizione non deve naturalmente pregiudicare la leggibilità del testo.

Conclusioni Per capire qual è l’argomento di un pagina web, Google fa un ragionamento più o meno come questo (sebbene non sia molto corretto, rende bene l’idea): Dato che il titolo della pagina dovrebbe descriverne il contenuto, le parole che lo compongono devono avere un grande valore (ipotizziamo un valore di 10). I sottotitoli probabilmente contengono delle parole che sintetizzano l’argomento del testo sottostante. È abbastanza sicuro, ma meno di quanto si presume con il titolo della pagina. Di conseguenza, le parole contenute nei sottotitoli devono avere un valore minore (ipotizziamo un valore di 7). Le parole scritte in grassetto potrebbero contenere delle parole collegate all’argomento della pagina, ma è ancora meno probabile. Pertanto, queste parole

devono avere un valore minore (ipotizziamo un valore di 5). E così via. Alla fine, Google conta i punteggi raccolti e deduce che l’argomento della pagina è quello espresso dalle parole che hanno riportato il punteggio più alto. Non si conoscono tutti gli elementi che Google prende in considerazione per capire l’argomento di una pagina. Gli esperti, però, concordano sul fatto che attribuisca un valore maggiore alle parole posizionate in questi tag: title tag (titolo della pagina); heading tag (intestazioni); image alt tag (descrizione delle immagini contenute nella pagina); anchor text dei link interni (parte cliccabile del link); tag di evidenziazione (parole in grassetto e in corsivo). Secondo gli esperti (ma sono divisi a tal proposito), Google dà invece poco o nessun valore a: meta description tag; meta keywords tag; densità delle parole chiave all’interno del testo. Di conseguenza, se si vuole posizionare una pagina nella SERP per alcune particolari parole chiave, occorre inserire queste keyword negli elementi e nei tag appena citati, seguendo le regole riportate in questo capitolo. Consiglio di inserire le parole chiave anche nelle tre posizioni su cui c’è contrasto tra gli esperti, considerando che l’algoritmo di classificazione varia continuamente e, quindi, niente esclude che Google possa rivedere in futuro le sue posizioni. L a Figura 7.21 visualizza il risultato del ragionamento che bisogna seguire per ottimizzare una pagina per i motori di ricerca. E, cioè: 1. abbiamo una pagina che ha come argomento il “blue cheese”; 2. di conseguenza, vorremmo provare ad arrivare nelle prime posizioni dei risultati di Google per la frase chiave “blue cheese”; 3. in base a quanto si sa sul funzionamento di Google, dobbiamo riportare questa frase chiave nelle posizioni evidenziate nella Figura 7.21. Sottolineo ancora una volta che, per ottimizzare le pagine del vostro sito, non dovete necessariamente conoscere il codice HTML. Ve ne ho accennato perché penso che in questo modo potrete padroneggiare meglio la SEO e perché, anche se non dovete sviluppare un sito da soli, è meglio acquisire familiarità con i suoi elementi principali. Inoltre, credo che non basti capire che cosa fare, ma che sia anche importante capire perché farlo. In questo modo, non imparate meccanicamente una serie di regole, ma avete una comprensione generale del funzionamento della SEO che vi permetterà di trovare una soluzione adeguata per qualsiasi situazione. La cosa

importante è che vi ricordiate quali sono le posizioni dove collocare le parole chiave e quali condizioni occorre rispettare. Potrete così indicarle a chi vi ha sviluppato il sito o intervenire direttamente se, come ho scritto in precedenza, avete un sito che utilizza un CMS (Content Management System), cioè un software che permette di gestire il sito senza avere conoscenze specifiche del linguaggio HTML.6

Figura 7.21 – Esempio di come dovrebbe essere ottimizzata una pagina web.

1. Per scrivere una pagina web si possono utilizzare diversi programmi gratuiti o a pagamento, alcuni dei quali si possono utilizzare senza conoscere l’HTML. 2. Meyers P.J., “New Title Tag Guidelines & Preview Tool”, moz.com/blog/new-title-tag-guidelines-preview-tool (20 marzo 2014). Per verificare come Google visualizzerà il vostro title tag potete utilizzare un simulatore come, per esempio, quello disponibile a questo indirizzo: moz.com/learn/seo/title-tag. 3. Spesso, chi sviluppa un sito non presta particolare attenzione a questi meta tag e, quindi, li scrive in modo che non possono essere utilizzati dai motori di ricerca.

4. A proposito della politica poco chiara di Google si può leggere: Dr. Rankwell, “Return of Meta tag keywors?”, www.hortonwebdesign.com/seo/return-of-meta-tag-keywords/ (23 gennaio 2013); Miller M., “Google Wants You To Use Keyword Metags … No, really”, searchenginewatch.com/article/2207067/Google-Wants-You-To-UseKeyword-Metatags…-No-Really (20 settembre 2012). 5. La lettera “h” del tag riprende l’iniziale della parola inglese heading. 6. Tra i CMS più famosi ricordo: WordPress, Joomla, Drupal, Fork CMS, ModX, Weebly.

CAPITOLO 8

KEYWORD RESEARCH: COME SCEGLIERE LE PAROLE CHIAVE

La keyword research Come abbiamo visto nel precedente capitolo, per provare ad arrivare nelle prime posizioni della SERP è necessario inserire le parole chiave in alcune particolari posizioni della pagina: titolo della pagina, sottotitoli, parole evidenziate ecc. La domanda, a questo punto, è:

Come dobbiamo scegliere queste parole chiave? A prima vista, la risposta potrebbe sembrare molto semplice. Se, per esempio, ho una pagina che parla di “sistemi di isolamento” e voglio provare a essere nelle prime posizioni dei motori di ricerca per questa frase, occorre che la utilizzi nel title tag, negli heading tag, nei tag di evidenziazione ecc. Purtroppo, però, la risposta non è così facile, per due motivi. Il primo motivo lo possiamo capire se proviamo a digitare le parole “sistemi di isolamento” su Google (Figura 8.1).

Figura 8.1 – Visualizzazione del numero di pagine che contengono il termine ricercato. Come possiamo notare, ci viene segnalato che esistono circa 673.000 pagine che utilizzano queste parole.1 Ciò significa che, se dobbiamo ottimizzare la nostra pagina web per queste keyword, dovremmo fronteggiare una concorrenza vastissima: sarebbe quindi molto difficile riuscire a entrare nelle prime pagine dei risultati, poiché ci sono così tante pagine che si disputano questa posizione. Dobbiamo dunque cercare qualche termine che sia simile a “sistemi di isolamento” e che non abbia troppa concorrenza. Il secondo motivo consiste nel fatto che, nella maggior parte dei casi, i termini che usiamo sono quelli che vengono comunemente utilizzati in azienda. Purtroppo, però, spesso questi termini non corrispondono a quelli usati dalle persone comuni e, quindi, a ciò che digitano quando formulano un’interrogazione nel box di ricerca dei motori. C’è, infatti, il più delle volte una grande distanza tra le parole usate dagli addetti ai lavori e quelle usate dai clienti. Per esempio, noi potremmo pensare di scrivere un articolo per la ricerca di “colf”. Però, se le persone utilizzano normalmente l’espressione “collaboratrice domestica” e svolgono le ricerche utilizzando questi termini, la nostra pagina probabilmente non comparirà nei risultati delle ricerche. Di conseguenza, se noi ottimizziamo la nostra pagina web con delle parole chiave che non corrispondono a quelle che vengono digitate nei motori di ricerca, non avremo alcun traffico (Figura 8.2).

Figura 8.2 – Non c’è alcun traffico dai motori di ricerca se le parole usate nel sito

(“Words you use on your website”) sono diverse da quelle utilizzate dai clienti nella loro ricerca (“Words your customers use when searching”). Questo è lo scenario peggiore. (Fonte: www.wordtracker.com). Dobbiamo, quindi, individuare le parole chiave che sono utilizzate maggiormente da chi fa una ricerca sui motori (Figura 8.3).

Figura 8.3 – “Utilizzo le stesse parole che le persone usano nelle loro ricerche”. (Fonte: www.wordtracker.com). In questo modo, se ottimizziamo la nostra pagina web con le giuste keyword, sarà più probabile che possa ottenere una quota significativa di traffico. Infatti, è evidente che le parole comunemente usate dalle persone sono anche quelle che hanno il più alto volume di ricerca; al contrario, quelle meno usate sono quelle con un bassissimo volume di ricerca (Figura 8.4).

Figura 8.4 – Il traffico web può essere significativo (“Plenty of search engine traffic”) se le parole usate nel sito (“Words you use on your website”) corrispondono a quelle utilizzate dai clienti quando fanno una ricerca (“Words your customers use when searching”). In questo caso, il sito fornisce quello che i clienti desiderano. (Fonte: www.wordtracker.com). Quindi, le parole chiave da utilizzare nel sito devono rispettare due condizioni fondamentali: 1. essere molto utilizzate nella fase di ricerca, e quindi essere molto popolari (alto volume di ricerca); 2. essere poco competitive, il che significa che ci sono poche pagine web che utilizzano quella keyword (bassa concorrenza). Per individuare questo genere di parole chiave dobbiamo seguire un processo – chiamato keyword research – che si compone di tre fasi: 1. raccolta di tutte le possibili parole chiave; 2. identificazione delle parole chiave con più alto potenziale; 3. analisi dei siti che concorrono nelle prime posizioni di Google per queste parole chiave. Ognuna di queste fasi assorbe tempo e impegno. Da questo punto di vista, non esistono precisi limiti. Posso solo dire che il tempo e l’impegno da destinare a questo processo sono legati esclusivamente alle nostre disponibilità, sapendo che più ci dedichiamo a questo lavoro, migliori saranno probabilmente i risultati. La keyword research può

essere svolta per: ottimizzare solo alcune pagine del sito, di solito quando esiste già; ottimizzare tutto il sito che si sta sviluppando. Nel prosieguo del capitolo prenderò in considerazione la ricerca delle parole chiave per una specifica pagina web, indipendentemente che si abbia già un sito o che lo si debba ancora sviluppare.

La raccolta delle parole chiave In questa prima fase occorre individuare tutte le possibili parole chiave che potrebbero essere utilizzate nella pagina che dobbiamo ottimizzare. O, più precisamente, quelle che sono usate nei motori di ricerca quando le persone cercano informazioni relative all’argomento trattato nella nostra pagina. Vediamo come si deve svolgere questa fase.

L’inizio della ricerca: il brainstorming Per iniziare, la cosa migliore è quella di costituire un gruppo formato dalle persone che in azienda sono maggiormente a contatto con i clienti e che, quindi, ne dovrebbero conoscere il linguaggio. Con questo gruppo si dovrebbe fare un brainstorming, con l’obiettivo di buttare giù un primo elenco di parole e frasi che si ritiene siano usate dal nostro target relativamente all’argomento contenuto nella nostra pagina. Alla fine di questo incontro, trascriveremo un primo elenco su un foglio di calcolo tipo Excel o Numbers.

Altre fonti di ricerca Altri utili suggerimenti sulle parole chiave utilizzate possiamo ricavarle: f dai giornali di settore; dai blog e dai forum che trattano gli argomenti a cui siamo interessati; dai social media. In quest’ultimo caso, possiamo osservare le conversazioni che si sono sviluppate intorno agli argomenti o alle parole chiave che ci interessano. Per esempio, con Twitter si può utilizzare il suo strumento di ricerca (Figura 8.5) o quello fornito dallo strumento di social search Toopsy.2

Figura 8.5 – Il box di ricerca di Twitter. Digitiamo nel box di ricerca di uno di questi due strumenti una parola o una frase che ci interessa e clicchiamo sul pulsante “Cerca”. Ci appare subito una lunga schermata in cui possiamo leggere i tweet nei quali compaiono i termini digitati. Per esempio, nella Figura 8.6 potete vedere una parte di quello che appare quando digitiamo le parole “sistemi isolamento” nel box di ricerca di Twitter.

Figura 8.6 – Risultato della ricerca eseguita su Twitter per “sistemi isolamento”. Leggendo con pazienza questi tweet abbiamo la possibilità di osservare il linguaggio e le parole usate durante queste conversazioni: probabilmente si scopriranno nuove parole chiave e/o si avranno delle importanti conferme su alcune di quelle già raccolte. La stessa cosa possiamo farla anche con Google+, mentre Facebook attualmente ha un pessimo motore di ricerca. È importante evidenziare che le parole utilizzate in queste conversazioni sono anche quelle che le persone poi digitano quando fanno una ricerca sui motori di ricerca. Se, quindi, un nostro termine fa registrare poche conversazioni, è probabile che sia poco utilizzato.

La concorrenza Una fonte importante per raccogliere delle utili parole chiave è rappresentata dalla

nostra concorrenza. Può, quindi, essere utile dargli un’occhiata se abbiamo un po’ di tempo. Digitiamo nel box di ricerca di Google alcune delle parole chiave che al momento riteniamo più interessanti per il nostro sito. Nella SERP compariranno alcuni dei nostri concorrenti. Il nostro obiettivo consiste nell’individuare quali parole chiave sono utilizzate da questi competitor, in modo da cercare di aumentare il nostro elenco di keyword. Per raggiungere questo obiettivo possiamo utilizzare uno tra questi due strumenti gratuiti (entrambi ottimi): SEOBook Keyword Density Analizer; David Naylor Search Marketing.3 Immaginiamo di aver ricercato su Google “sistemi isolamento a cappotto”. Uno dei primi risultati che ci appare è quello della società Sto Italia. Per scoprire quali parole chiave sono utilizzate nella sua homepage, digitiamo l’URL in SEOBook (Figura 8.7).

Figura 8.7 – Il box di ricerca di SEOBook. Ci appare la schermata della Figura 8.8, dove vengono presentate le combinazioni di keyword più utilizzate, costituiti da una, due e tre parole (David Naylor arriva fino a 4 parole).

Figura 8.8 – Risultati della ricerca effettuata su SEOBook. Qui possiamo verificare se, tra i risultati presentati, ci sono delle keyword che possiamo inserire nel nostro elenco. Quando abbiamo finito, continuiamo inserendo le URL di altri siti concorrenti.

Strumenti sul Web A questo punto, se avete ancora energie e tempo a disposizione, potete utilizzare alcuni tool che aiutano a estendere e migliorare le nostre ricerche. Ne suggerisco uno, completamente gratuito: Übersuggest.4 Il suo funzionamento è molto semplice. Quando si arriva nella sua homepage, si digita nel primo box di ricerca la parola chiave per cui vogliamo avere dei suggerimenti. Poi, si sceglie la lingua, la sorgente da cui ricercare (nel nostro caso, “web”) e infine si clicca su “Suggest” (Figura 8.9).

Figura 8.9 – L’homepage di Übersuggest. Ipotizziamo di inserire le parole chiave “sistemi isolamento” e osserviamo cosa Übersuggest ci suggerisce (Figura 8.10).

Figura 8.10 – Pagina dei risultati di Übersuggest. Come si può notare, il tool ci restituisce un elenco di risultati (in tutto 87) divisi in

gruppi, ottenuti aggiungendo, alla combinazione digitata, le parole che iniziano con una data lettera dell’alfabeto (prima “a” poi “b” poi “c” e così via, fino all’ultima lettera dell’alfabeto, naturalmente utilizzando solo le lettere per cui è possibile costruire dei termini che abbiano senso). Così, per esempio, nel gruppo “sistemi isolamento + c” avremo: sistemi isolamento cappotto, sistemi isolamento cassonetti, sistemi isolamento casa e così via. Inoltre, cliccando sul simbolo “+” che precede una combinazione, ci appaiono ulteriori suggerimenti. Übersuggest può quindi fornirci utili suggerimenti per arricchire il nostro elenco di parole chiave.

Conclusione della raccolta Come si sarà potuto notare, la raccolta delle parole chiave può richiedere molto tempo e molto impegno. Da questo punto di vista, come ho rilevato in precedenza, il limite è rappresentato solo da quanto tempo e da quanto impegno siamo disposti a dedicarvi (o possiamo dedicarvi). Se lavoriamo da soli, o con un supporto limitato, probabilmente potremo compiere solo alcune ricerche, senza scendere troppo in profondità. L’importante è sapere che più ampie e approfondite sono le nostre ricerche, migliori potranno essere i risultati (e le probabilità che le pagine del sito si posizionino nei primi posti della SERP). Comunque, quando decidiamo che la nostra raccolta di parole chiave deve ritenersi conclusa, possiamo riportare nel nostro foglio di calcolo tutte quelle che ci sembrano utili. A questo punto, disporremo di un elenco composto da qualche decina di parole chiave. Probabilmente, sarà presente qualche duplicato che dovremo eliminare. Dovremo anche escludere tutte le parole chiave che sono inutilizzabili. Alla fine di questo lavoro, è probabile che ci rimangano una o due decine di parole chiave, che: 1. sono pertinenti con gli argomenti del nostro sito; 2. sono utilizzate probabilmente dai nostri clienti effettivi e potenziali. Possiamo quindi passare alla seconda fase della nostra keyword research: l’individuazione delle parole chiave da utilizzare nella nostra pagina.

Identificazione delle parole chiave Per effettuare questa scelta, dobbiamo capire quali, tra le parole chiave raccolte, sono le migliori, cioè quelle con cui avremmo più probabilità di classificarci ai primi posti dei risultati dei motori di ricerca. Dobbiamo quindi sapere: 1 . qual è il volume delle loro ricerche, per prevedere quanto traffico possono attrarre; 2. qual è la loro competitività, per individuare quante pagine web hanno già queste

parole chiave e, quindi, quante probabilità abbiamo di classificarci ai primi posti della SERP. Le parole chiave che dobbiamo scegliere sono quelle che, tra tutte quelle contenute nel nostro elenco, hanno la migliore combinazione tra bassa competitività e alto volume di traffico. Per effettuare questa selezione dobbiamo utilizzare uno strumento per la ricerca delle parole chiave (keyword research tool), che ci indicherà: la popolarità, cioè il numero di ricerche eseguite mensilmente usando queste keyword; la competitività, cioè il numero di pagine che contengono queste keyword. Sul mercato ci sono vari strumenti che consentono di compiere queste analisi, ognuno con le sue forze e le sue debolezze. Siccome utilizzano in genere differenti motori di ricerca per estrapolare i loro dati, i risultati forniti da questi strumenti possono essere significativamente differenti. Per esempio, chi si basa solo sui risultati riportati da Google otterrà valori diversi da chi utilizza Bing o Yahoo! o una combinazione di due o di tutti e tre questi motori di ricerca. La maggior parte di questi tool sono americani e a pagamento. Tra questi, sono pochi quelli che eseguono ricerche anche in italiano. Posso segnalare Wordtracker, Keyword Discovery e Market Samurai.5 Tutti e tre offrono delle prove gratuite e, quindi, possono essere provati prima di essere acquistati. Personalmente, mi trovo molto bene con Market Samurai: costa molto meno degli altri due – 149 dollari per l’acquisto del software completo – e offre ottimi risultati anche con la nostra lingua (gli altri due qualche volta non riconoscono le parole chiave ricercate). L’unico vero limite di Market Samurai è che utilizza come motore di ricerca Bing che, da noi, è molto meno utilizzato rispetto a Google e Yahoo!. Di conseguenza, i dati che fornisce devono essere presi come indicazioni relative e non assolute: il volume delle ricerche reali sarà naturalmente più alto di quello presentato da Market Samurai, mentre le posizioni relative tra i diversi termini non dovrebbero essere molto differenti (per esempio, se una keyword ha il più alto volume di ricerca in Google, è probabile che lo abbia anche con Bing).

Google Keyword Planner In Italia, comunque, il tool più utilizzato è senz’altro lo “Strumento di pianificazione delle parole chiave” di Google (Keyword Planner), che da circa un anno ha integrato il famosissimo “Strumento per le parole chiave” con lo “Strumento per la stima del traffico”. È gratuito ed è integrato al programma di inserzioni pubblicitarie AdWords, essendo finalizzato soprattutto ad aiutare gli inserzionisti. Però, può essere utilizzato anche se non si è un inserzionista e non si è interessati alla pubblicità online.

È lo strumento che vi consiglio di utilizzare, se non volete ricorrere a quelli a pagamento indicati prima. Vediamo che cosa occorre fare. Primo passo Per usarlo occorre avere un account AdWords. 6 Se non l’avete già, potete ottenerlo facilmente registrandovi con le vostre credenziali di Google (Figura 8.11); se non avete neanche queste, dovete prima crearvi un account Google.7

Figura 8.11 – La pagina dove registrarsi per accedere a Google AdWords. Risolte queste formalità, potete entrare nel pannello del programma. Cliccate su “Strumenti” e poi su “Strumento di pianificazione delle parole chiave” (che potete tranquillamente utilizzare anche se non state creando una campagna pubblicitaria) (Figura 8.12).

Figura 8.12 – Pannello di gestione di Google AdWords.

Secondo passo Verrete inviati in una pagina dove potete scegliere tra quattro possibilità. Per i nostri scopi, la funzione che ora ci interessa è la terza: “Visualizza i dati e le tendenze del volume di ricerca” (sotto “Pianifica il tuo budget e ottieni informazioni per le parole chiave”) (Figura 8.13).

Figura 8.13 – Pagina dello “Strumento di pianificazione delle parole chiave”. Clicchiamo su questa funzione. Arriviamo su una nuova schermata, dove dobbiamo scrivere le parole chiave a cui siamo interessati. Immaginiamo di averne selezionate 7 al termine della nostra ricerca per “sistemi isolamento a cappotto” (Figura 8.14). Tenete conto che, se dovete trascrivere un lungo elenco di keyword, potete cliccare sul pulsante “Scegli file” in modo da caricare direttamente le vostre parole chiave da un file, senza così doverle riscrivere. Clicchiamo adesso sul pulsante “Mostra volume di ricerca” in basso sulla sinistra. Nella schermata che appare, clicchiamo su “Idee per le parole chiave” (Figura 8.15). Come si può notare, appaiono le nostre sette parole chiave e alcune colonne. Di queste, quelle che ci interessano sono le prime due. La prima colonna indica la “Media delle ricerche mensili”, cioè quante volte in un mese gli utenti hanno eseguito una ricerca su Google per quella esatta combinazione. Possiamo osservare che le parole chiave sono classificate in maniera decrescente in base al valore di ricerche mensili e che due keyword non registrano traffico. Per prima cosa escludiamo dalla nostra selezione queste due keyword e rivolgiamo la nostra attenzione alle cinque rimaste.

Figura 8.14 – Pagina dello “Strumento di pianificazione delle parole chiave” in cui inserire le keyword.

Figura 8.15 – Risultato della nostra ricerca di sette parole chiave. Una parola con alto traffico ci segnala due cose: 1. esiste un’alta domanda per l’argomento indicato; 2. questo è l’esatto linguaggio che molte persone stanno utilizzando per cercare maggiori informazioni su questo argomento. Considerando il nostro esempio, le keyword con il più alto volume di ricerche mensili sono “isolamento a cappotto” (1300 ricerche). Sembrerebbe quindi naturale scegliere questa combinazione per ottimizzare la nostra pagina web, perché ha il più alto numero di ricerche medie mensili tra tutte quelle che abbiamo sottoposto al test. E, quindi, è quella che ci dovrebbe assicurare il traffico maggiore. Però, dobbiamo considerare anche quello che è indicato nella seconda colonna: “Concorrenza”. Questa colonna visualizza un valore identificato da una scala (“Basso”, “Medio” e “Alto”) che individua quanti siti concorrenti competono per quelle parole chiave.8 Quando la concorrenza è “Alta”, non converrebbe ottimizzare la pagina in

questa direzione, dato che avremmo pochissime possibilità di classificarci nella prima pagina dei risultati di ricerca. È molto più logico cercare delle keyword con concorrenza “Media” o, meglio ancora, “Bassa”. Nel nostro esempio, le prime keyword, “isolamento a cappotto”, hanno una concorrenza “Media”, quindi potrebbero andare abbastanza bene. Però, l’ideale sarebbe trovare delle parole chiave che abbiano un alto volume di ricerca e una concorrenza “Bassa”. Dobbiamo perciò estendere la nostra ricerca per vedere se riusciamo a trovare delle keyword che rispettino queste condizioni.

Terzo passo Ritorniamo allora alla prima schermata dello “Strumento di ricerca delle parole chiave” e questa volta clicchiamo sulla prima funzione, “Cerca nuove parole chiave utilizzando una frase, un sito web o una categoria” (Figura 8.16). Appare la stessa schermata che abbiamo visto in precedenza, quando abbiamo digitato sulla terza funzione. Inseriamo le nostre keyword – “isolamento a cappotto” – e clicchiamo su “Mostra volume di ricerca”. Si apre una nuova schermata in cui dovremo cliccare sull’etichetta in alto “Idee per la parole chiave”, in modo da visualizzare un elenco di suggerimenti costruiti a partire dalle nostre keyword, con il relativo valore di ricerca e la concorrenza. Nel nostro caso sono 56. Siccome noi siamo interessati a quelle con una concorrenza “Bassa”, inseriamo questo dato nel box di sinistra “Filtri per le parole chiave” (Figura 8.17). A questo punto ci appare la schermata in Figura 8.18. Si può osservare che le uniche parole chiave che fanno registrare volumi di ricerca buoni – “cappotto” con 4400 e “isolamento” con 720 – sono troppo generiche, e quindi non possono sostituire le nostre keyword “isolamento a cappotto”. Di conseguenza, queste ultime sono quelle che dobbiamo prendere in considerazione.9 Forse, penserete che questo nostro lavoro sia finalmente terminato. Abbiamo infatti trovato quello che stavamo ricercando: le parole chiave pertinenti con l’argomento della nostra pagina, con alto valore di ricerca e concorrenza non alta. Purtroppo vi devo dare una brutta notizia: la nostra ricerca non è ancora terminata!

Figura 8.16 – Pagina dello “Strumento di pianificazione delle parole chiave”.

Figura 8.17 – Risultato della nostra ricerca con il box “Filtri per le parole chiave”.

Figura 8.18 – Risultato della nostra ricerca.

L’analisi dei concorrenti Prima di utilizzare il risultato che abbiamo ottenuto per ottimizzare la nostra pagina web, dobbiamo osservare attentamente come sono ottimizzate le pagine che stanno nelle prime posizioni della SERP. In questo modo, potremo capire quante probabilità avremmo di classificarci prima di loro. Infatti, anche se la concorrenza è bassa, in alcuni casi potrebbe essere difficile riuscire ad arrivare nelle prime posizioni. Quindi, la domanda che dobbiamo porci è:

Che cosa sta facendo la concorrenza con la SEO? Vediamo come dobbiamo procedere.

1. Ricerca su Google Digitiamo “isolamento a cappotto” nel box di ricerca di Google. Ci appariranno i risultati della Figura 8.19.

Figura 8.19 – Risultato della ricerca “isolamento a cappotto” su Google. Per prima cosa possiamo notare che nelle prime posizioni l’unico sito che di certo non potremo mai superare è uno solo: quello di Wikipedia, troppo famoso e sicuramente con un Page Rank elevato. Vediamo adesso come gli altri siti presenti sono ottimizzati per la SEO: infatti, per battere questi concorrenti, un modo molto efficace consiste nell’ottimizzare la nostra pagina meglio della loro. Pertanto, dobbiamo verificare se, nelle loro pagine, la frase “isolamento a cappotto” si trova nel title tag, nelle heading ecc., cioè in tutte le posizioni che sono utili per la SEO.

2. Esame visivo del primo sito

Clicchiamo sul primo link presente nella SERP, dopo Wikipedia e le immagini: “Guida isolamento a cappotto: meglio esterno o interno…”. Quando si visualizza la pagina (Figura 8.20), esaminiamo se la nostra keyword è contenuta in alcune delle posizioni che sono utili per la SEO. Osserviamo subito che la keyword completa: è presente nel titolo (heading h1) e in vari sottotitoli (heading h2 e h3); è presente all’inizio dell’articolo, anche se inframezzata da altre parole; non è mai evidenzaita in grassetto; non è presente in nessuna immagine (lo scopriamo passando il mouse sopra le immagini). Questa prima analisi ci indica che la pagina non è stata ottimizzata bene per la SEO.

Figura 8.20 – La pagina che appare dopo aver cliccato su “Guida isolamento a cappotto: meglio esterno o interno …”. 3. Esame del codice HTML della pagina Possiamo comunque andare più in dettaglio esaminando il codice HTML. Esistono diversi strumenti che permettono di analizzare gratuitamente il codice delle pagine. Per esempio: SEO Site Checkup (forse il migliore), SEO Workers e WooRank.10 Per avere l’analisi del codice, basta digitare l’indirizzo del sito da analizzare nel box di ricerca che appare nella homepage di uno di questi tre tool. Apparirà una schermata simile a quella della Figura 8.21. Come si può osservare, questa schermata ci fornisce altre utili indicazioni sull’ottimizzazione della pagina: qual è il punteggio SEO (SEO score), se il title tag e il meta tag description vanno bene e così via. Adesso abbiamo tutte le indicazioni sul grado di ottimizzazione del sito che si trova nella prima posizione dei risultati di Google.

Figura 8.21 – Pagina dei risultati di SEO Site Checkup. 4. Esame degli altri siti Ripetiamo quest’analisi con gli altri tre siti nelle prime posizioni. Meno questi sono ottimizzati per la SEO, maggiori saranno le probabilità che la nostra pagina si collochi davanti a loro nella SERP una volta che l’avremo ottimizzata. Dopo aver effettuato questa ricerca, avremo tutti gli elementi per decidere se le nostre keyword possono essere utilizzate per ottimizzare la pagina per i motori di ricerca.

L’ottimizzazione della pagina del sito

Quando avremo trovato le parole chiave giuste – che cioè hanno un alto volume di ricerca, bassa concorrenza e scarsi competitor nei risultati di ricerca – dovremo procedere con l’ottimizzazione della pagina del nostro sito, come abbiamo visto nel precedente capitolo. Per prima cosa, imposteremo il testo definitivo, inserendo opportunamente le nostre keyword all’inizio del testo e al suo interno, evidenziandole una o due volte in grassetto. Cercheremo, quindi, di inserire nel testo termini simili. Successivamente, le inseriremo anche: nel titolo (heading h1) e in uno o due sottotitoli (heading h2) (se li abbiamo previsti); nell’image alt tag (se c’è un’immagine e se è pertinente); nel title tag; nel description e nel keywords meta tag. Infine, dobbiamo ricordarci che quando scriveremo il contenuto delle altre pagine del sito, dovremo cercare di inserire – quando ha senso – un link a questa pagina, mettendo nel testo del link la nostra parola chiave.

La SEO on-page e off-page Come abbiamo visto in un precedente capitolo, Google classifica le pagine in base al loro grado di importanza. E questa valutazione è fatta in base a due categorie: la pertinenza del contenuto presente nella pagina con le parole chiave digitate; l’autorevolezza del sito. In questo e nel precedente capitolo abbiamo visto come si deve lavorare per rispondere alla prima condizione. Questa attività di ottimizzazione è svolta tutta all’interno delle pagine del sito. Pertanto è chiamata SEO on-page, cioè ottimizzazione per i motori di ricerca compiuta all’interno della pagina. Per rispondere alla seconda condizione, cioè costruire un sito “autorevole”, si deve lavorare all’esterno delle pagine del sito. Pertanto, quest’attività è chiamata SEO off-page, cioè ottimizzazione per i motori di ricerca compiuta all’esterno della pagina. Si ritiene che la prima influisca per circa il 30-40% sulla classifica di un sito nella classifica di Google, mentre la seconda sia responsabile per circa il 60-70%. Nei capitoli 9 e 10 descriverò la SEO off-page.

Conclusioni Per cercare di essere nelle prime posizioni della SERP, una condizione necessaria è che il sito sia ottimizzato con parole chiave che descrivono i suoi contenuti. Queste parole chiave devono utilizzare i termini che sono usati dalle persone quando compiono una ricerca per questi argomenti, per esempio: se ho una pagina che parla di computer portatili, è inutile che cerchi di ottimizzarla per il termine “laptop”, se le persone utilizzano più comunemente la parola “notebook”. Dobbiamo, quindi, utilizzare parole chiave che: 1. siano pertinenti con il contenuto della nostra pagina web; 2. siano utilizzate comunemente da chi fa una ricerca sui motori. Le parole chiave che sono comunemente usate dalle persone sono quelle maggiormente ricercate nei motori di ricerca, cioè sono quelle che hanno il più alto volume di ricerca; mentre, al contrario, quelle meno usate sono quelle con un bassissimo volume di ricerca. Le parole chiave da ricercare devono rispettare una seconda condizione: devono avere una bassa concorrenza. Per trovare le giuste combinazioni dobbiamo seguire un processo – chiamato keyword research – che si compone di tre fasi principali: 1. raccolta di tutte le possibili parole chiave; 2. identificazione delle parole chiave con più alto potenziale; 3. verifica dei siti concorrenti. Il processo di ricerca è un lavoro che richiede molto tempo e impegno, ma è uno sforzo che, se fatto bene, dovrebbe dare frutti preziosi. Infatti, una buona ottimizzazione del sito è una condizione necessaria per poter essere nelle prime posizioni delle pagine dei risultati dei motori di ricerca e, in questo modo, poter avere un traffico significativo verso il proprio sito.

1. Nella realtà, Google, come gli altri motori di ricerca, visualizza solamente qualche decina di pagine. Non c’è quindi modo di verificare la precisione del numero mostrato. Secondo alcuni esperti, i motori usano questo stratagemma per evidenziare la grandezza del loro database, ma i numeri reali sono molto al disotto di quelli indicati. 2. twitter.com/search-home; topsy.com/. 3. tools.seobook.com/general/keyword-density/; www.zippy.co.uk/keyworddensity/ 4. ubersuggest.org/. 5. www.wordtracker.com/; www.keyworddiscovery.com/; www.marketsamurai.com/. 6. www.google.it/adwords/. 7. accounts.google.com/signup?hl=it.

8. In realtà il valore indica il numero di inserzionisti i cui annunci sono stati pubblicati per ciascuna parola chiave. In genere, questi valori rispecchiano quelli dei siti che utilizzano queste parole chiave. Cioè, per esempio, se per una parola chiave gli inserzionisti sono molti e, quindi, il valore della concorrenza è “Alto”, probabilmente anche il numero di siti che utilizza questa keyword è alto. 9. Al di là dell’esempio che ho appena riportato, fate riferimento alla funzione “Cerca nuove parole chiave utilizzando una frase, un sito web o una categoria” quando non siete soddisfatti delle keyword che avete e volete verificare se ne esistono di migliori. 10. seositecheckup.com/; www.seoworkers.com/tools/; www.woorank.com/

CAPITOLO 9

L’AUTORITÀ DEL SITO: PAGERANK E LINK POPULARITY

Come sappiamo, Google classifica i siti che poi presenta nei risultati di ricerca in base alla loro importanza, e questa è determinata: 1. dalla pertinenza del contenuto con le parole chiave digitate; 2. dall’autorevolezza del sito. N e l capitolo 7 abbiamo esaminato il tema della pertinenza. Adesso dobbiamo occuparci del tema dell’autorevolezza.

Il PageRank Prima dell’avvento di Google, i motori di ricerca esistenti – come Altavista e Lycos – classificavano un sito web basandosi soprattutto sul numero di volte che la parola chiave ricercata era presente nella pagina (keyword density): maggiori erano le occorrenze nella pagina, maggiori erano le probabilità che questa si posizionasse tra i primi risultati dei motori di ricerca (per quella keyword). Come abbiamo visto, questo sistema aveva funzionato abbastanza bene fino a quando i webmaster non avevano compreso che, per salire ai primi posti nei risultati di ricerca, bastava riempire le loro pagine di parole chiave. Alla fine del 1998 i fondatori di Google, Larry Page e Sergey Brin, introdussero una nuova modalità di classificazione delle pagine che riusciva a superare i limiti dei motori di ricerca tradizionali, garantendo allo stesso tempo un’accuratezza nei risultati di ricerca nettamente migliore. I fondatori di Google presero ispirazione da quello che accade nel mondo accademico, dove generalmente si ritiene che i testi più autorevoli siano quelli che ricevono un numero significativo di citazioni. Secondo loro, lo stesso ragionamento poteva essere seguito sul Web, sostituendo le citazioni con i link: i contenuti migliori tendono infatti ad attrarre un numero significativo di link. Per Brin e Page, ogni link ricevuto costituisce un attestato di fiducia, un riconoscimento della propria competenza, un voto. È come se delle persone stessero raccomandando un sito o un articolo, allo stesso modo con cui si potrebbe

raccomandare un buon idraulico o un buon professionista perché si ha fiducia in lui. Sono queste raccomandazioni, questi attestati di fiducia che permettono al motore di ricerca di capire che quel contenuto è prezioso, che è importante e autorevole. Più raccomandazioni (link) si hanno, più si è degni di fiducia, più si è autorevoli (Figura 9.1).

Figura 9.1 – Più link sono collegati al sito, maggiore è la sua autorevolezza. Quindi, secondo Brin e Page, le migliori pagine sono quelle che ricevono più link, perché i collegamenti ricevuti attestano l’autorità del sito. Queste pagine sono quindi le più popolari e devono stare più avanti nelle posizioni dei risultati di ricerca, rispetto a quelle che lo sono meno. Ecco perché si parla anche di link popularity (“popolarità da link”). Però, oltre alla quantità, Brin e Page consideravano anche la qualità dei link ricevuti. Infatti, non tutti i collegamenti hanno lo stesso valore: alcuni hanno più valore di altri. Per esempio, un link che proviene da una prestigiosa università ha più valore di quello che proviene da un sito anonimo, perché la prima ha più autorità, gode di maggior fiducia e prestigio, di conseguenza il suo collegamento deve contare di più di quello fornito dal secondo. Ma come può un motore di ricerca valutare il prestigio e l’autorità del sito che invia il link? Lo spiegherò nei prossimi paragrafi. Per adesso, sappiamo che un sito avrà un posizionamento sui risultati dei motori di ricerca in base: al numero di link ricevuti (backlink o inbound link);

all’importanza dei siti che inviano i link. Questi due criteri sono incorporati nel PageRank, o indice di popolarità, che costituisce la più grande innovazione di Google.1 Il PageRank (per semplicità, lo indicherò anche con la sigla PR) è rappresentato da un valore numerico che viene attribuito alle pagine di un sito web per valutarne l’importanza. Questo valore, che esprime il numero (quantità) e l’autorevolezza (qualità) dei link ricevuti, può andare da un minimo di 0 (come avviene nel caso di siti appena pubblicati e, quindi, poco o per nulla popolari) a un massimo di 10 (tipico di siti popolarissimi) (Figura 9.2).

Figura 9.2 – Il PageRank di una pagina è condizionato dal numero e dalla qualità dei link che riceve. Il PageRank di qualsiasi pagina web è un dato pubblico che può essere conosciuto attraverso diversi tool, come per esempio PR Checker – digitando l’URL del sito nel suo box di controllo – oppure installando la Google Toolbar sul proprio browser (solo per Windows). 2 In questo secondo caso, una volta installata la barra, è possibile visualizzare il PageRank della pagina web nella quale si sta navigando (Figura 9.3).

Figura 9.3 – Il PageRank visualizzato nella Google Toolbar. La valutazione della pagina viene mostrata in una piccola barra di colore completamente bianco (PageRank = 0), verde (PageRank = 10) o una loro combinazione, a seconda del valore (PageRank da 1 a 9). Si può quindi sostenere che, con la nascita di Google, la rilevanza di una pagina non dipendeva più solo dal suo contenuto – e quindi dal numero di volte che una keyword era presente nella pagina – ma anche dal numero e dalla qualità dei link ottenuti. Questa intuizione è alla base del successo di Google. Prima di concludere questo argomento, è necessaria una breve precisazione: il PageRank è un valore che è attribuito a singole pagine e non all’intero sito. Di conseguenza, non esiste un PageRank del sito. Di solito, quando si legge un’espressione del tipo “il sito ha un PageRank 5” si intende dire che “la homepage del sito ha un PageRank 5”. Inoltre, le pagine di uno stesso sito hanno PageRank molto diversi tra loro e non è corretto fare una “media”.

La qualità dei link Per valutare la qualità di un link, Google prende in considerazione diversi fattori. Analizzerò i quattro ritenuti più importanti.

Il passaggio di PageRank Ogni pagina web ha un PageRank (come abbiamo visto da 0 a 10). Quando questa ha link indirizzati verso altre pagine, trasferisce una parte del valore del suo PageRank. Quanto valore trasferisce? Nel complesso, un po’ meno di quello completo: all’incirca dall’85% al 90%, dato che un po’ se lo tiene per sé.3 Se questa pagina ha un solo link in uscita, passa tutto il valore trasferibile del suo PR, come mostrato nella Figura 9.4, dove la pagina B riceve tutto il PR che la pagina A può passare.4

Figura 9.4 – Passaggio di PR attraverso un link. Questo vuol dire che, a parità di altri elementi (come vedremo più avanti), un link ricevuto da una pagina che possiede un PageRank alto “vale” più di uno proveniente da una pagina con un valore più basso. Quindi, di solito è meglio ricevere pochi link ma importanti, che molti ma di basso valore. Lo scenario si complica un po’ quando una pagina ha più di un link in uscita. In questo caso, il PageRank che è trasferibile viene diviso tra tutte le pagine che ricevono i link. Nella Figura 9.5, le pagine B e C ricevono ognuna la metà (0,5) di tutto il PageRank che può essere trasferito [f(x)].

Figura 9.5 – Passaggio di PR attraverso due link. Se avessimo una terza pagina (D) che riceve un altro collegamento da A, allora il PageRank trasferito da questa a ognuna delle altre tre pagine sarebbe stato del 33% e non del 50%.

La pertinenza del contenuto tra chi indirizza il link e chi lo riceve Google attribuisce un valore più alto al link che proviene da un sito che tratta argomenti simili a quelli del sito ricevente. Facciamo un esempio: immaginiamo che due siti (A e B), con identico PageRank, abbiano un link indirizzato a un terzo (C). A tratta gli stessi argomenti di C; B, invece, tratta vari argomenti, poco correlati a quelli di C. In questo

caso, per Google il valore del link di A è superiore a quello di B. Se, per esempio, il mio sito tratta di pittura moderna, i link che provengono da un museo o da una rivista d’arte hanno più valore di quelli che potrebbero provenire da un sito di generiche news.

L’anchor text Come abbiamo visto, con l’espressione “anchor text” ci si riferisce alle parole contenute in un link. L’anchor text è importante perché aiuta il motore di ricerca a contestualizzare il link e, di conseguenza, Google lo utilizza per cercare di comprendere l’argomento della pagina che lo riceve. Consideriamo due differenti link provenienti da due siti diversi ma indirizzati verso uno stesso sito, quello di Mario Rossi. Il primo usa come anchor text “Mario Rossi”; il secondo, invece, utilizza le parole “Mario Rossi esperto di finanza aziendale”. Entrambi i link indicano chiaramente che la pagina di destinazione si può posizionare per le parole chiave “Mario Rossi”; ma solo il link proveniente dal secondo sito fornisce un appoggio al fatto che Mario Rossi è un esperto di “finanza aziendale” e, quindi, aiuterà a posizionare la pagina anche su queste parole chiave. Google dà molto valore ai link con una specifica keyword nell’anchor text. Fino a un certo punto, però: troppi link in entrata con lo stesso anchor text vengono giudicati come spam, perché ritenuti innaturali e, quindi, li può penalizzare non prendendoli in considerazione.

Tipo di link Un link “unidirezionale” ha più valore di uno “ricambiato”. Il link unidirezionale è quello che va da un sito a un altro; un link “ricambiato” è quello che due siti si scambiano reciprocamente, cioè quando A indirizza un link a B e B indirizza un link ad A. Quest’ultimo tipo ha sempre un suo valore, ma minore rispetto a quelli “unidirezionali”, in quanto Google ha il dubbio che ci sia stato uno “scambio di link” tra i due siti. Immagina, cioè, che ci sia stato un accordo di questo tipo: “Tu indirizzi un link al mio sito e io ne indirizzo uno al tuo.”

Come Google valuta l’autorità di un sito Per Google, l’autorità di un sito è data: dal numero di link in entrata; dalla qualità dei link ricevuti. Come abbiamo appena visto, Google valuta la qualità di un link che un sito riceve in base ad alcuni elementi:

il PageRank del sito che invia il link; il numero di link in uscita; la pertinenza del contenuto esistente tra la pagina che indirizza il link e la pagina che lo riceve; l’anchor text; il tipo di link utilizzati (unidirezionali o ricambiati). Questi elementi hanno un “peso” diverso e, quindi, influiscono in modo differente nella “qualità” di un link. Quindi: Qualità di un link =

PR del sito contenente il link/n° di link in uscita Pertinenza del contenuto Anchor text del link Tipo di link

+ + + +

Semplificando molto, possiamo dire che l’autorità di un sito è espressa da questa formula: Autorità del sito = (qualità link 1) + (qualità link 2) + (qualità link 3) + … Come abbiamo detto, Google misura l’autorevolezza del sito dandole un valore che va da 0 a 10. Questo valore trova espressione nel PageRank. Quindi, Autorità del sito = PageRank.

Quanto è importante il PageRank? Il PageRank è stato ideato per avere un’idea del grado di “autorità” di una pagina web. Le pagine considerate più autorevoli hanno maggiori possibilità di raggiungere una posizione migliore nei risultati delle ricerche. Tuttavia, questa condizione è necessaria ma non sufficiente. Infatti, il PageRank non è che uno dei tanti parametri presi in considerazione da Google per decidere la posizione di una pagina.5 Per tale motivo un suo valore alto non garantisce necessariamente una posizione migliore rispetto a una pagina con valore più basso. Capita spesso, infatti, che pagine con PageRank basso superino in posizione quelle con un PageRank più alto ma con contenuti meno ottimizzati (cioè, con SEO on-page approssimativa). Per questa ragione, non dobbiamo pensare che il PageRank delle pagine del nostro sito sia il mezzo principale per ottenere buoni risultati. Si tratta di un elemento che acquisisce importanza solo se è accompagnato dalla presenza di altre caratteristiche essenziali, come i contenuti e il grado di ottimizzazione delle pagine.

Conclusioni Il PageRank e la link popularity sono argomenti molto complessi che, qui, ho cercato di semplificare per renderli facilmente comprensibili – spero! –, correndo il rischio di qualche imprecisione tecnica. Nella realtà, entrano in gioco molte altre variabili, anche se quelle che ho qui sintetizzato sono le variabili che in genere si ritengono più importanti. Riassumendo: i link in entrata costituiscono il fattore più importante preso in considerazione da Google per valutare l’autorità delle pagine di un sito web; l’autorità di una pagina dipende dal numero e dalla qualità dei link ricevuti; la qualità di un link dipende da diversi fattori, tra cui: il PageRank del sito che indirizza il link, la pertinenza del contenuto esistente tra la pagina che indirizza il link e quella che lo riceve, il numero di link in uscita dallo stesso sito, l’anchor text e il tipo di link utilizzati (unidirezionali o ricambiati). Google calcola in una frazione di secondo quanti siti hanno un link diretto verso il nostro e il valore di ognuno di essi. Questa operazione non è svolta ogni giorno, ma può svolgersi ogni 15-30 giorni. Nel prossimo capitolo vedremo come si può provare ad aumentare il numero e la qualità dei link in entrata – attività che viene chiamata link building – in modo da migliorare l’autorità del nostro sito.

1. Il termine “PageRank” – che significa “grado d’importanza della pagina” – deriva in realtà dal nome di uno dei suoi inventori, Larry Page. 2. www.prchecker.info/check_page_rank.php; www.google.com/intl/it/toolbar/ie/index.html. 3. Questi valori sono stati indicati proprio da Google: Cutts M., “PageRank sculpting”, www.mattcutts.com/blog/pagerank-sculpting/ (15/06/2009). 4. Enge E., Spencer S., Fishkin R., Stricchiola J.C., The Art of SEO, O’Reilly, 2012, pp. 288-296. 5. Come ho scritto in precedenza, si ritiene che i fattori presi in considerazione da Google siano più di 200. Brian Dean ha provato a elencarli, prendendo in considerazione sia quelli verificati sia quelli su cui c’è incertezza: Dean B., “Google’s 200 Ranking Factors: The Complete List”, backlinko.com/google-ranking-factors (15 gennaio 2015).

CAPITOLO 10

SEO OFF-PAGE: LA LINK BUILDING

Come abbiamo visto nel capitolo 9, per un buon posizionamento nei risultati di Google è necessario: 1. avere un buon numero di link provenienti da altri siti; 2. i link devono essere di qualità, devono cioè provenire da siti che hanno un buon PageRank e che hanno un contenuto attinente al sito di destinazione. Occorre quindi che il sito abbia un numero significativo di buoni link in entrata (backlink). L’attività svolta per attrarre link da altri siti viene chiamata link building, che letteralmente significa “costruire link”. È un’attività che richiede tempo, impegno e costanza. Però, se eseguita bene, migliorerà senz’altro il posizionamento del sito nei risultati di Google.

Quanti backlink ci occorrono Il primo passo da fare nello svolgimento di questo compito consiste nel valutare approssimativamente quanti link abbiamo bisogno di acquisire. Per conoscere questo valore dobbiamo considerare i siti che stanno nelle prime posizioni dei risultati di ricerca di Google – almeno quelli che non sono troppo famosi, dato che è praticamente impossibile superare siti come Wikipedia – e cercare di conoscere la quantità e la qualità dei loro backlink. Una volta ottenuta questa informazione, dobbiamo cercare di raggiungere e possibilmente superare il numero e la qualità dei backlink dei nostri concorrenti. Per esempio, se uno dei siti che si trovano nelle prime posizioni di Google ha 6 link che provengono da siti con PageRank 5, e 5 che provengono da siti con PageRank 4, dobbiamo cercare di attrarre un numero di link superiore: almeno 7 link che provengono da siti con PageRank 5 e 6 con PageRank 4. In questo modo dovremmo riuscire ad avere una link popularity superiore alla loro. Naturalmente, questa condizione è necessaria per posizionarci sopra questi siti nella SERP, ma non è detto che sia sufficiente, dato che, come abbiamo visto, concorrono anche altri fattori di ranking (soprattutto quelli della SEO on-page). Comunque, come detto, questa condizione è assolutamente necessaria.

Oltre al numero di backlink e al PageRank, abbiamo bisogno di raccogliere altre informazioni: 1. l’indirizzo di tutti i siti dai quali arrivano questi backlink ai nostri competitor; 2. quanti link in uscita ci sono nelle pagine da cui partono questi backlink; 3. quali link trasferiscono PageRank.

Perché abbiamo bisogno di tutte queste informazioni? Vediamo a che cosa ci servono tutte queste informazioni.

Indirizzo dei siti L’indirizzo dei siti che inviano un link al nostro competitor ci serve per due motivi principali: 1. perché Google preferisce che i link provengano da siti differenti: in pratica, se voi avete dieci link che provengono da un unico sito, e il vostro concorrente ne possiede dieci che però provengono da dieci siti differenti, Google giudicherà migliore il secondo (con approssimazione, possiamo dire che darà al vostro sito un solo voto, mentre il competitor avrà 10). Per questo motivo, bisogna cercare di avere link da siti differenti; 2. perché probabilmente dovremmo cercare di avere anche noi dei link da questi siti e, quindi, dobbiamo conoscerne l’indirizzo web (l’URL).

Numero di link presenti nella pagina Oltre al PageRank è importante anche il numero di link che partono da una pagina. Infatti, come ho scritto in precedenza, se una pagina ha un link a una vostra pagina, e non ne ha altri in uscita, trasferisce quasi tutto il valore del suo PageRank a voi. Se, invece, ha vari link in uscita, allora il valore che trasferisce è diviso tra tutti questi. Più link partono dalla pagina dell’altro sito, minore sarà il valore trasferito alla vostra pagina (chiamato link juice). Semplificando un po’, immaginiamo che il sito A e il sito B abbiano una pagina ciascuno con lo stesso PageRank (= 5), ma che la pagina di A abbia solo un link in uscita, mentre quella di B abbia cinque link in uscita. Il link di A avrà (e trasferirà) un valore vicino a 5, mentre un link di B avrà (e trasferirà) un valore vicino a 1 (PageRank 5/5 link). Di conseguenza, dovendo scegliere da quale sito avere un link, è meglio ottenerlo dal sito A.

Link che trasferiscono PageRank Esistono alcuni link che non trasferiscono PageRank e, per questo motivo, non hanno valore per il posizionamento del sito nella SERP. Sono quelli a cui viene assegnato l’attributo “nofollow” (“non seguire”). Questo tipo di collegamento è stato creato per combattere il fenomeno dello spam all’interno dei commenti nei blog. Infatti – dato che quando si scrive un commento a un post, in genere, il modulo consente di inserire un indirizzo web – succede spesso che, per trasferire il PageRank del blog, vengano lasciati dei commenti privi di senso o non in reale relazione con il post: il vero obiettivo è quello di inserire un link indirizzato al proprio sito. Questa situazione è prodotta da software che “sparano” decine di commenti standard verso siti con link “dofollow”, che cioè trasferiscono PR. Per provare a scoraggiare questo fenomeno, alcuni amministratori di blog assegnano, nel codice HTML, l’attributo “nofollow” ai link all’interno dei commenti, impedendo ai motori di ricerca di prenderli in considerazione e ai software di postare commenti senza senso. Dato che, per il posizionamento su Google, i link che hanno l’attributo “nofollow” non hanno alcun valore, dobbiamo prendere in considerazione i backlink del competitor che ne sono privi, quelli chiamati “dofollow”. Questa considerazione ci consente di precisare meglio qual è il numero esatto dei backlink, posseduti dal competitor, che dobbiamo tentare di superare: dal numero complessivo dei backlink dobbiamo sottrarre il numero dei “nofollow”.

Come studiare i concorrenti

Come possiamo raccogliere tutte queste informazioni? Si potrebbe pensare che, per raccogliere tutte queste informazioni, sia necessario un impegno notevole e una mole di tempo considerevole. Per fortuna non è così. In realtà, sono sufficienti pochi minuti. Dobbiamo infatti: 1. digitare su Google la nostra parola chiave; 2. nella pagina dei risultati, osservare quali sono i siti che si trovano nelle prime 4-5 posizioni (siti competitor); 3. sottoporre ad analisi questi siti – esclusi quelli molto popolari, come Wikipedia – utilizzando uno dei tanti tool a disposizione su Internet, gratuiti o a pagamento.1

La maggior parte dei tool sono a pagamento. Tra i migliori troviamo: Ahrefs, Majestic SEO, SEOmoz, Raven Tools, Open Site Explorer. Tra i tool gratuiti, ve ne suggerisco due ottimi: Backlink Checker di Small SEO Tools (smallseotools.com/backlink-checker/); Backlink Watch (www.backlinkwatch.com/). Basta digitare nella loro homepage l’indirizzo del sito da analizzare e in pochi secondi appare l’elenco dei backlink del sito, con indicato il PageRank e gli attributi “nofollow” o “dofollow”. Purtroppo, però, questi tool riportano solo una parte dei backlink del sito analizzato (di solito intorno ai 2/3). Potete, però, usarli per avere, in maniera semplice e rapidissima, una prima idea di quello che dovrete fare. Il migliore tool gratuito – anche se un po’ più complesso – è SEO SpyGlass (disponibile anche nella versione a pagamento). È un tool eccellente che permette di analizzare in modo completo i backlink di un sito. Per scaricarlo, basta andare sulla pagina www.seo-spyglass.com, cliccare su “Download FREE” e fornire il nome e l’email (Figura 10.1).

Figura 10.1 – La pagina da cui scaricare SEO SpyGlass.

Entro 24 ore riceverete il link per il download del software (per Windows, Mac e Linux). Cliccando sul collegamento fornito, il programma verrà rapidamente scaricato sul vostro computer e sarà subito pronto per essere utilizzato. Quando lo avviamo, ci appare una schermata molto semplice dove dobbiamo digitare l’indirizzo del sito che vogliamo analizzare. Dopo qualche minuto, ci apparirà la schermata dei risultati contenente tutti i backlink trovati e la visualizzazione di altri dati. Per avere i dati completi, dobbiamo selezionare tutti i backlink che vogliamo analizzare e cliccare su “Update Factors” (Figura 10.2).2

Figura 10.2 – La pagina dei risultati parziali di SEO SpyGlass. A questo punto, compare la pagina completa dei risultati da cui, cliccando “Backlink Details”, per ogni backlink possiamo visualizzare (Figura 10.3): l’indirizzo della pagina che contiene il link; il possesso o meno dell’attributo “nofollow”; il PageRank della pagina; il numero di link esterni.

Figura 10.3 – La pagina completa dei risultati di SEO SpyGlass. Abbiamo così tutti i dati che ci servono. Possiamo confrontarli con quelli del nostro sito – se lo abbiamo già, altrimenti dovremo partire da zero – e decidere quanti e quali link ci servono. Per esempio: tre link con PageRank 4, due link con PageRank 3 e così via. A questo punto siamo pronti per iniziare la nostra attività di acquisizione dei link.

Link building I link diretti verso un sito possono essere divisi in: link liberi, quando cioè sono indirizzati a un sito senza nessun condizionamento, semplicemente perché lo si considera degno di essere segnalato ai propri visitatori; link creati, quando si svolgono delle attività per convogliare link verso il proprio sito; link sollecitati, quando si contattano altri siti per chiedere di indirizzare un link a una propria pagina web; link pagati, quando si paga per avere un link collegato a una pagina del proprio sito. Prima dell’avvento di Google, i link erano tutti “link liberi”. Infatti, non avendo valore per il posizionamento sui motori di ricerca, un sito indirizzava un collegamento a un altro sito solamente se i propri visitatori ne potevano trarre dei benefici, se cioè potevano trovare dei contenuti interessanti. Dopo la nascita di Google, l’interesse ad avere dei link in entrata è diventato fortissimo, perché aiutano a posizionarsi in alto nelle classifiche. Come vedremo, è possibile influire su tutti i tipi di link in entrata.

Link liberi Come si possono attrarre link da altri siti in modo naturale? Semplice: costruendo una pagina in modo da meritarsi di avere dei link: cioè, quando questa ha del contenuto

importante, originale, unico. Certo, è facile a dirsi, molto più difficile farlo. In linea di massima, si può comunque dire che, per provare ad avere link da altri siti, dovremmo cercare di costruire delle pagine che: forniscano delle informazioni difficili da trovare altrove; vengano percepite come scritte da un’autorevole fonte di informazione, da un esperto nella materia; offrano un punto di vista particolare (anche controcorrente); siano strutturate sotto forma di un articolo e, meglio ancora, sotto forma di white paper o ebook; siano facilmente comprensibili e piacevoli da leggere. Naturalmente, la creazione di contenuti di qualità è la condizione necessaria per attrarre l’attenzione. Non possiamo però sapere con certezza se qualcuno indirizzerà un link a questa pagina.

Link creati Mentre la prima modalità è difficilmente controllabile – dobbiamo cercare di creare contenuti di qualità e attendere che arrivino dei link –, questa seconda modalità è molto più condizionata dalle nostre capacità, perché si basa sull’attività che svolgiamo per convogliare dei link verso il nostro sito. Vediamo quali sono i principali strumenti che si possono utilizzare per creare dei link indirizzati al proprio sito.

I blog I blog possono essere un formidabile strumento per attrarre dei link al proprio sito, grazie all’utilizzo di due tecniche:

1. Commentare il blog di altri autori La maggior parte dei blog permette di lasciare un commento alla fine di un post. In genere, insieme al commento è richiesto anche l’indirizzo del proprio sito web. In questo modo, si riesce a inserire il link al proprio sito (che è la ragione principale del commento) (Figura 10.4).

Figura 10.4 – Esempio di un modulo per commenti. Come ho scritto nel precedente capitolo, ci sono dei blog che utilizzano l’attributo “nofollow”: in questi casi, il link al sito non avrebbe valore per i motori di ricerca. Quindi, i blog da cercare sono quelli che: 1. non hanno l’attributo “nofollow” sui link in uscita; 2. hanno un buon PageRank (in ogni caso, superiore al nostro, se abbiamo già un sito). Per scoprire velocemente se i link di un blog hanno l’attributo “nofollow”, basta cliccare con il tasto destro del mouse su uno di quelli presenti nei commenti; appare un menu con varie voci, tra cui “Ispeziona elemento”; cliccando su questa voce, apparirà il link scritto in HTML. Potrete leggerlo rapidamente. In genere, è scritto in questo modo: Facebook Dove: a href indica al browser che quello che segue è un link; “http://www.facebook.com” indica l’indirizzo della pagina a cui rimanda; Facebook indica il nome o la frase con cui viene visualizzato il link (anchor text); indica al browser che il comando del link è terminato. Se il link è “nofollow” apparirà così: Facebook

Quindi, conterrà l’attributo rel=“nofollow” scritto subito dopo l’indirizzo della pagina a cui il link rimanda. In questo caso, ai fini SEO, è inutile lasciare un commento.

2. Farsi ospitare su un blog Quando un nostro post è ospitato sul blog di altri autori (guest blog) si ha la possibilità di poter includere un link in chiusura, di solito nelle note sull’autore del post. È un lavoro duro, perché occorre scrivere qualcosa che sia tanto interessante da essere accettato e pubblicato da un buon blog. Ricordiamoci, comunque, che i blogger stanno sempre cercando del contenuto interessante da pubblicare. Consiglio di: 1. iniziare a seguire con attenzione e regolarmente alcuni autorevoli blog, che hanno un buon PageRank, inserendo dei commenti ben meditati e significativi in alcuni dei loro post; 2. seguire gli autori sui social network in cui sono presenti, come Twitter, LinkedIn, Facebook, Google+, cercando di instaurare un contatto diretto; 3. dopo un po’ di tempo, scrivere un post di circa 500-600 parole pertinente con gli argomenti del blog prescelto; 4. contattare il titolare del blog tramite email, sottoponendogli il post, insieme con un vostro breve profilo da pubblicare con il vostro testo e contenente un link al vostro sito (che è il motivo principale dell’offerta del post); 5. spiegare, nell’email di contatto, perché il blog a cui sottoponete il vostro post è interessante, e perché ci si considera competenti sugli argomenti trattati; 6. infine, dichiararsi disponibili a ospitare un suo post sul proprio blog (nel caso se ne possegga uno).

Le web directory Le web directory sono dei siti che pubblicano degli elenchi di società, divise per aree tematiche. Per essere presenti in questi elenchi bisogna iscriversi compilando uno specifico modulo, in cui vengono richieste alcune informazioni, tra cui anche l’URL del proprio sito (Figura 10.5). In questo modo, una volta pubblicato il proprio profilo – in base ai dati contenuti nel modulo d’iscrizione – si avrà un link di collegamento al proprio sito (che è il nostro obiettivo). Nella Figura 10.6, si può vedere una schermata del portale Directory Aziende, con evideziata la voce “Visita il sito” con il link diretto. In Italia esistono decine di directory, ma per avere un elenco di quelle riservate alle imprese potete digitare su Google la frase “directory+imprese”. Per qualcosa di più specifico, invece di “imprese” digitate, dopo “directory+”, il nome del settore a cui siete interessati. In ogni caso, un elenco delle principali directory italiane – con indicazione di quali “passano” il PageRank – si può avere a questo indirizzo:

liste.giorgiotave.it/directory/. Dopo il commento sui blog, la creazione di link tramite web directory è la formula più semplice per acquisire link. E richiede pochissimo tempo.

Figura 10.5 – Esempio di modulo di registrazione a un portale (in questo caso, Directory Aziende).

Figura 10.6 – Schermata di una pagina del portale Directory Aziende.

Gli article marketing Con l’espressione “article marketing” ci si riferisce a una modalità nella quale: 1. si scrive un articolo su un determinato argomento; 2. a conclusione, si inserisce un breve profilo dell’autore contente un link diretto al proprio sito (che è il motivo per cui stiamo operando in questo modo); 3. si distribuisce l’articolo ad alcuni siti specializzati per la distribuzione e la pubblicazione; 4. questi siti pubblicheranno l’articolo e, di solito, lo distribuiranno ad altri siti specializzati: 5. quando l’articolo viene pubblicato, comparirà anche il profilo dell’autore con il link al suo sito (trasferendo così il PR del sito di article marketing alla pagina a cui è indirizzato il link). Esistono molti siti che si occupano di ricevere, pubblicare e distribuire ad altri siti questo tipo di articoli. Digitate su Google “siti di article marketing” e avrete disponibili vari elenchi.

Dei buoni elenchi si possono trovare anche a questi indirizzi: liste.giorgiotave.it/article-marketing/; www.w3facile.com/web-marketing/lista-article-marketing-directory.html; seoline.it/2012/01/lista-di-siti-article-marketing-aggiornata-questo-mese.php. Dato che Google penalizza i siti che pubblicano contenuti duplicati, è importante creare dei testi unici almeno per ogni sito di article marketing. Per evitare la fatica – considerevole – di scrivere ogni volta un articolo originale per ciascun sito, si possono utilizzare dei software specifici, chiamati spinner, che riescono a creare diverse versioni “uniche” partendo da un testo base. Un buon software, capace di leggere anche l’italiano, è The Best Spinner (thebestspinner.com/). Suggerisco di individuare i migliori siti di article marketing, evitando di distribuire in modo casuale i testi, così da avere dei link di qualità; e, poi, iniziare a inviare articoli “originali” una volta alla settimana. Questa attività richiede molto tempo e molto impegno. Vi suggerisco di prenderla in considerazione solo dopo le altre due che ho descritto prima: web directory e blog.

Link sollecitati Per avere dei link, possiamo anche richiederli esplicitamente. Si tratta di: 1. selezionare dei siti che possono essere importanti per noi; 2. contattarli; 3. richiedere che indirizzino un link a una nostra pagina. A prima vista può sembrare una pratica destinata all’insuccesso, ma non è così. Pur essendo un’attività abbastanza impegnativa, può dare degli ottimi risultati. Avvertenza: bisogna prendere in considerazione solo i siti che hanno del contenuto collegato al nostro sito e che siano credibili. Vediamo a chi si può richiedere un link.

I propri partner Per iniziare, consiglio di pensare ai propri partner di business, dato che è più facile attrarre link da siti che ci conoscono piuttosto che da quelli con i quali non si ha alcun rapporto. Bisogna fare un elenco di tutte le imprese con cui si è in rapporto: fornitori, intermediari, clienti. Inizialmente, si dovranno prendere in considerazione le imprese con cui si ha un rapporto di comando, cioè quelle aziende per cui si è un partner essenziale: saranno quelle che forniranno un link immediatamente, perché ci tengono particolarmente ad avere un rapporto con noi. Si chiederà un link diretto a una nostra determinata pagina, con uno specifico anchor text. Poi, si potranno prendere in esame le imprese che si conoscono, ma con cui si ha un

rapporto meno diretto. In entrambi i casi, si può prima avanzare la richiesta per telefono, facendola poi seguire da un’email con il dettaglio della richiesta. In genere, è abbastanza difficile avere un rifiuto. I nostri competitor su Google Dopo aver preso in considerazione i nostri partner d’affari, possiamo passare a considerare i nostri concorrenti. Se abbiamo effettuato l’analisi descritta nel paragrafo “Come studiare i concorrenti”, abbiamo l’elenco e l’indirizzo dei siti che hanno un link collegato ai nostri concorrenti. A questo punto, possiamo esaminarli uno a uno, cercando di capire quali sono i loro contenuti, quanto sono autorevoli, quanto può essere facile contattare qualcuno – titolare del sito, webmaster ecc. – per richiedere un link, e si selezioneranno quelli ritenuti più adatti. Si dovrà quindi scrivere un’email al webmaster, al titolare o a un responsabile di ogni sito per richiedere un link al nostro sito. È molto importante avere qualcosa da offrire in cambio: un proprio link indirizzato al loro sito, delle informazioni utili, uno sconto riservato ai loro utenti, e così via. Il modo più semplice è spesso rappresentato da uno scambio di link. In questo caso, prima indirizzeremo un link al sito a cui dobbiamo proporre lo scambio, e poi lo contatteremo chiedendo di averne uno indirizzato a una nostra pagina. Come ho già scritto, dobbiamo tenere conto, però, che lo scambio di link non è molto apprezzato da Google: il valore di un link unidirezionale (da un sito a un altro) ha più valore di uno ricambiato, soprattutto se avviene tra siti che non hanno contenuti simili. Per questo motivo, quando si propone uno scambio, se è possibile, sarebbe meglio fare ricorso ai link a “tre vie”. In pratica, A richiede un link a B; in cambio, A indirizza a B un link da un altro suo sito o blog (C). In questo modo i due link sono, di fatto, unidirezionali. Probabilmente, si riceveranno molte risposte negative, ma non importa. Quello che conta è che qualche sito vi risponda favorevolmente, in modo da accrescere con il tempo il numero dei backlink di qualità e sviluppare positivamente il processo di link building. Tenete conto che la richiesta di un link senza reciprocità viene accolta più facilmente se proviene da un sito ben costruito, professionale e autorevole. La richiesta di link effettuata a siti che non ci conoscono è un’attiva faticosa. Se la si prende in considerazione, consiglio di svolgerla solo con siti che hanno un PageRank molto alto. COME SCRIVERE L’EMAIL DI RICHIESTA DEL LINK

Per costruire il contenuto dell’email bisogna seguire alcune semplici indicazioni. Oggetto Non si deve scrivere “Richiesta di link” o simili: questo è un modo sicuro perché l’email sia cestinata. Meglio scrivere qualcosa di diverso, come “Collaborazione editoriale”, “Richiesta di una vostra collaborazione” ecc. Nome del destinatario Bisogna conoscere il nome del destinatario, perché un’email che inizia con “Caro webmaster” non sarebbe probabilmente letta. Molto meglio, se non si ha il nome, cercare il numero di telefono e fare prima una telefonata. Nome del mittente L’email dovrebbe iniziare specificando il nome del mittente: “Buongiorno sig. ..., mi chiamo…”. Apprezzamento del sito Subito dopo, bisogna far vedere che si è esaminato il sito con attenzione e spiegare per quali motivi ci è piaciuto. Questa è una parte importantissima: bisogna dedicarci del tempo e non si deve essere enfatici, ma precisi e chiari. Descrizione del proprio sito A questo punto, dobbiamo dare alcuni dettagli sul nostro sito. Si inizia con una frase come questa: “La sto contattando in relazione al mio sito [nome sito], che si trova a questo indirizzo [URL]”. Segue un breve paragrafo che descrive il sito, in modo sintetico e non dispersivo. Descrizione della nostra proposta Occorre spiegare qual è la nostra richiesta e che cosa offriamo in cambio: scambio di link, sconto agli utenti del sito ecc. Nel caso dello scambio di link, si fornirà l’URL della nostra pagina in cui è stato collocato il link. In questo specifico caso, si potrà scrivere qualcosa di simile: “Come le ho detto, ho apprezzato molto il suo sito e, per questo motivo, ho inserito un link al suo sito nella pagina con URL .... Sono lieto che questo link possa costituire un piccolo contributo per migliorare il posizionamento del suo sito nei risultati di Google. Se poi avrà modo di apprezzare il mio sito, le sarei molto grato se decidesse anche lei di indirizzare un link al mio sito…”

Descrizione del nostro link A questo punto occorre spiegare come deve essere fatto il link indirizzato al nostro sito, specificando: 1. l’URL della pagina a cui deve essere indirizzato; 2. l’anchor text da utilizzare. Conclusione Al termine dell’email, fornite un numero di telefono e ringraziateli per il tempo speso.

Link pagati Infine, i link si possono anche comprare. I vantaggi sono principalmente tre: 1. è un modo facile di avere dei link indirizzati al proprio sito: bisogna solo selezionare da chi comprarli e poi pagare quanto richiesto; 2. sono molto utili quando si deve migliorare il proprio posizionamento nei motori di ricerca in fretta e non si può aspettare che arrivino quelli sollecitati; 3. si può specificare l’anchor text del link che viene comprato. Google non contrasta questa politica, se è fatta con l’obiettivo di ottenere del traffico al proprio sito, cioè se è fatta a fini pubblicitari, e se il sito che vende i link utilizza l’attributo “nofollow” per i suoi link. Non apprezza, invece, questa politica se è fatta per aumentare il proprio posizionamento nelle sue classifiche e penalizza chi utilizza queste tattiche abbassandone il ranking. Per individuare i link pagati, Google si affida ad alcuni “modelli di comportamento”. Per esempio, se un sito fino a ora ha avuto solo link da siti con PageRank inferiori a 3 e, all’improvviso, in pochi giorni, ottiene 5 link da siti con PageRank superiore a 5, li può considerare “sospetti”, perché rientrano in uno dei suoi modelli di comportamento non gradito sui link comprati e, quindi, li può tenere in sospeso. Attualmente, si può correre il rischio di acquistare dei link solo se: viene fatto un poco alla volta, lasciando passare del tempo tra un acquisto e l’altro; lo si fa da siti che hanno un PageRank non troppo superiore al proprio; sono siti che trattano argomenti simili al proprio; non si utilizza sempre lo stesso ancor text: Google infatti ritiene “non naturale” ricevere troppi link con lo stesso anchor text. Per fare questo tipo di acquisti ci si può affidare ad alcuni broker, presenti su Internet,

che vendono set di link per qualche centinaio di euro al mese. Esistono anche molti siti americani che offrono link in forma gratuita. State attenti: dato che provengono da Paesi diversi dal nostro, se ne ricevete troppi, Google vi penalizzerà perché capisce che non sono link “naturali”. Per quanto mi riguarda, anche se può portare buoni risultati, non mi sento di consigliare questa tecnica, sia per ragioni etiche, sia perché Google sta migliorando costantemente la sua capacità di monitoraggio. Può, quindi, penalizzare i siti che usano questa pratica, facendoli retrocedere nelle sue classifiche.

Conclusioni Un processo di link building si svolge quasi sempre in modo lento. Infatti, attrarre link di qualità non è facile, occorre molto tempo e molta pazienza. I risultati possono però essere molto importanti. Non solo si può migliorare la posizione del proprio sito nella classifica dei motori di ricerca ma, cosa forse anche più importante, si può riuscire ad attrarre traffico qualificato che poi può essere convertito in base agli obiettivo del sito. Inoltre, spesso, non occorre ottenere molti link. Per migliorare il PageRank possono bastarne una decina con PageRank superiore al vostro. Nel capitolo 9 ho spiegato come si può riconoscere facilmente il PageRank di una pagina web utilizzando alcuni tool gratuiti o la Google Toolbar. A questo punto, le nostre attività di SEO sono terminate. Dobbiamo aspettare qualche giorno, al massimo 30 o 40 giorni, per vedere i risultati finali, perché Google ci può mettere un po’ di tempo prima di visitare il sito (dipende da quando è stata fatta l’ultima sua visita). Tenete comunque conto che l’attività di SEO non termina mai. Dovrete controllare costantemente la posizione delle pagine del vostro sito, perché possono arrivare nuovi concorrenti e anche perché Google modifica spesso il suo algoritmo. Vi consiglio un ottimo tool gratuito che, in pochi minuti, vi permette di controllare la vostra posizione sui tre principali motori di ricerca (Google, Yahoo! e Bing) per 10 specifiche keyword: Keyword Position Tool di Small SEO Tools (smallseotools.com/keyword-position/). Tra i tool gratuiti che si possono scaricare, il migliore è l’eccellente SERank (www.ragesw.com/products/search-engine-rank.html), che visualizza anche i cambiamenti avvenuti nella classifica delle keyword esaminate tra le ultime due analisi. Quale che sia lo strumento scelto, il consiglio è di usarlo almeno una volta al mese.

1. Consiglio di analizzare almeno il primo sito presente nei risultati (dopo i siti famosi, se sono presenti). Se avete tempo, sarebbe poi utile sottoporre ad analisi almeno il sito successivo. 2. SEO SpyGlass viene aggiornato di solito almeno una volta l’anno. Quella che vi sto descrivendo è la versione rilasciata nel 2014. Non posso naturalmente sapere se la prossima versione conserverà queste impostazioni.

CAPITOLO 11

LA SEO: UNA SINTESI

L’argomento trattato in questa seconda parte è estremamente complesso e articolato. Mi sembra pertanto una buona cosa riassumerlo brevemente.

Attrarre traffico verso il sito: i motori di ricerca Per avere un sito che funzioni, occorre per prima cosa avere un buon numero di persone che lo visitano e queste possono arrivare attraverso diversi canali. Il più importante di questi, e quello che possiamo influenzare meglio, è rappresentato dai motori di ricerca: cioè lo strumento usato da quelle persone che fanno una ricerca e cliccano sui risultati riportati nella SERP (pagina dei risultati dei motori di ricerca). Quindi, il traffico maggiore arriva sul sito quando una persona: 1. cerca delle informazioni riguardo a un determinato argomento; 2. digita le parole chiave – che riassumono l’argomento ricercato – nel box del motore di ricerca e clicca “invio”; 3. clicca su uno dei risultati che appaiono nella SERP. Diversi studi hanno evidenziato che la quota maggiore di traffico arriva se il sito appare nelle prime posizioni della SERP. Pertanto, il modo migliore per avere una quantità significativa di traffico verso il proprio sito si può ottenere solo se quest’ultimo appare nelle prime posizioni della pagina dei risultati.

Come posizionare il sito nei primi posti di Google: la SEO I motori di ricerca classificano i siti nella SERP valutando una serie estesa di fattori, alcuni interni al sito, altri esterni. È possibile influire su una buona parte di questi fattori e le tecniche che sono state sviluppate per svolgere questo lavoro sono racchiuse sotto l’espressione Search Engine Optimization (SEO). La SEO può essere definita come l’insieme di tutte le attività necessarie per ottenere il posizionamento ottimale nella SERP e, quindi, generare il maggior numero possibile di visite provenienti dai motori di ricerca. Si può dividere in due differenti componenti: 1. la SEO on-page (oppure on-site), che racchiude le tecniche che operano

all’interno delle pagine del sito e che riguardano l’ottimizzazione delle parole chiave all’interno del codice HTML; 2. la SEO off-page (oppure off-site), che comprende le tecniche che operano all’esterno del sito, favorendo l’arrivo di link di qualità da altri siti. Per avere i migliori risultati in termini di posizionamento sui motori di ricerca occorre sviluppare entrambe queste componenti. Dato che i motori di ricerca utilizzano centinaia di parametri per costruire gli algoritmi di organizzazione dei risultati, nessuno può garantire di riuscire a posizionare un sito in cima ai risultati di Google, Yahoo! e Bing: nessuno infatti conosce la formula magica per un buon posizionamento. È quindi impossibile poter dare garanzie in tal senso, visto che sono troppe le variabili in gioco e non tutte sono note. Però, utilizzando bene la SEO si è sicuri che si otterranno i migliori risultati nel posizionamento del proprio sito. La SEO non finisce quando si inizia a vederne i risultati. Anche quando si arriva in cima, il lavoro non è terminato, visto che bisognerà fare in modo di mantenere il posizionamento raggiunto. In realtà, il processo della SEO non termina mai. Conclusa la fase d’implementazione, la più laboriosa, questo processo diventerà un’attività operativa come le altre. Nota finale: una buona posizione nella SERP non necessariamente si traduce nel raggiungimento dei propri obiettivi (conversioni). La SEO conduce il visitatore sulla porta del sito, ma saranno i contenuti a dargli il benvenuto e, eventualmente, a trattenerlo.

SEO on-page Per ogni pagina del sito che si vuole posizionare nei risultati dei motori di ricerca, occorre individuare le parole chiave. Queste parole chiave: 1. definiscono l’argomento della pagina e, quindi, sono pertinenti con questo contenuto; 2. devono corrispondere a quello che le persone digitano quando fanno una ricerca su questo argomento e, quindi, sono quelle che hanno un alto volume di ricerca; 3. devono essere poco competitive, cioè ci devono essere poche pagine web che utilizzano le stesse parole chiave (bassa concorrenza). Per ricercare le giuste parole chiave dobbiamo seguire un processo – chiamato keyword research – che si compone di tre fasi principali: 1. la raccolta di tutte le possibili parole chiave, attraverso: a. il brainstorming con le persone che in azienda sono a contatto con i clienti;

b. la consultazione di blog, forum e social media; c. la verifica delle parole chiave utilizzate dai concorrenti; d. l’utilizzo di alcuni tool che ci suggeriscono parole chiave simili; 2. l’identificazione di quali, tra le parole chiave che abbiamo raccolto, hanno un alto volume di ricerca e una bassa concorrenza (attraverso alcuni tool, come lo “Strumento di pianificazione delle parole chiave” di Google AdWords); 3. l’analisi dell’ottimizzazione dei siti che si trovano nelle prime posizioni della SERP (per le parole chiave selezionate). Questo processo finisce dopo che sono state individuate le keyword che: 1. hanno un alto volume di ricerca; 2. hanno una bassa concorrenza; 3. sono utilizzate da siti che, collocati nelle prime posizioni della SERP, sono poco o male ottimizzati per la SEO. A questo punto le parole chiave devono essere inserite nelle posizioni della pagina che per Google hanno maggior importanza. E cioè, nel: title tag, il titolo della pagina (possibilmente al suo inizio); heading tag h1, il titolo dell’articolo, e nell’heading tag h2, il sottotitolo (se è previsto e se ha senso); testo della pagina (varie volte, ma senza superare la regola del 4% ed evidenziandole una o due volte in grassetto); image alt tag (se si utilizza almeno un’immagine nella pagina); meta description tag; meta keyword tag; link che, da altre pagine del sito, rimandano a questa pagina.

SEO off-page Anche se è fondamentale avere pagine ottimizzate, raramente ciò è sufficiente per ottenere i risultati desiderati. Dobbiamo quasi sempre passare alla seconda parte della SEO, quella che si compie esternamente al sito, la SEO off-page, che riguarda essenzialmente la gestione dei link che puntano al nostro da altri siti. Il nostro sito dovrebbe avere dei link in entrata e questi dovrebbero essere di qualità, cioè provenire da siti autorevoli. L’autorevolezza di un sito è espressa dal suo PageRank, una formula che esprime un “voto” da 0 a 10. Questa valutazione è determinata in base al numero dei link ricevuti e alla loro qualità. Come si nota, tutto ruota intorno alla “qualità” dei link. Da che cosa è determinata? Google valuta la qualità di un link in base ad alcuni elementi: il PageRank della pagina che invia il link;

il numero di link in uscita da quella stessa pagina; la pertinenza del contenuto esistente tra la pagina che indirizza il link e quella che lo riceve; l’anchor text del link; il tipo di link utilizzati (unidirezionali o ricambiati). Il nostro compito è quello di cercare di acquisire link che abbiano una buona qualità, che cioè provengano da siti le cui pagine abbiano: un PageRank superiore al nostro; nessuno o, al massimo, pochi link indirizzati ad altri siti oltre al nostro; un contenuto pertinente con il nostro; l’anchor text contenente la parola chiave (possibilmente); la caratteristica dell’unidirezionalità. Possiamo acquisire link in vari modi: commentando il blog di altri autori; facendo ospitare un nostro post su blog che trattano argomenti simili ai nostri; iscrivendoci alle web directory; pubblicando article marketing; sollecitando dei link dai partner e da altri siti (come quelli che li inviano ai nostri competitor nella SERP); acquistandoli (sconsigliato). Per sapere quanti link dovremmo ottenere e di quale qualità, dobbiamo analizzare i siti che si trovano nelle prime posizioni della SERP. Per compiere quest’analisi, possiamo ricorrere ad alcuni software gratuiti o a pagamento. Un ottimo software gratuito è rappresentato da SEO SpyGlass. Questo software ci permette di conoscere, per ogni sito sottoposto ad analisi, il numero complessivo di backlink; l’indirizzo della pagina che invia il link; il possesso o meno dell’attributo “nofollow”; il PageRank della pagina; il numero di link esterni. In questo modo, possiamo conoscere quanti backlink possiedono i siti che si trovano nelle prime posizioni della SERP e la loro qualità. Per avere un sito che sia ottimizzato meglio (per la SEO off-page) dei siti che si trovano nelle prime posizioni della SERP, bisognerà acquisire un numero di link superiore per quantità e per qualità a quelli dei siti nostri competitor nella SERP. La SEO off-page è un procedimento più lungo e difficile di quella on-page, poiché non abbiamo il controllo diretto sui siti degli altri. Però, deve essere fatta. Se volete, potete iniziare con l’acquisizione di pochi link, soprattutto quelli che si

possono ottenere dalle web directory e dai propri partner. Dopo 20-30 giorni, osservate come si posiziona il vostro sito nella SERP per le diverse parole chiave. Se la situazione non è soddisfacente, proseguite con l’acquisizione di altri link.

Conclusioni Se le attività on-page e off-page sono state eseguite bene, le pagine ottimizzate per la SEO dovrebbero trovarsi nella prima pagina dei risultati di Google. Se non è così, vuol dire che è necessario intervenire ancora, di solito dalla parte offpage. La misura del nostro intervento ci è data dalla distanza che separa la nostra pagina dai risultati presenti nelle prime posizioni della SERP. Controllate sempre bene il PageRank dei siti che vi precedono e il valore della loro SEO on-page. Se volete superarli, dovete necessariamente sviluppare una SEO migliore della loro.

PARTE 3

LA CONVERSION OPTIMIZATION

CAPITOLO 12

LE PAGINE WEB DEVONO ESSERE COSTRUITE COME DELLE LANDING PAGE

Come costruire le pagine del sito Il traffico che abbiamo attratto tramite i motori di ricerca arriva su una delle pagine del nostro sito. A questo punto, il problema è:

Come dobbiamo costruire questa pagina in modo che riesca a convertire? La risposta a questa domanda costituisce l’argomento di questa terza parte. Per adesso, possiamo dire che le pagine devono essere progettate in modo da soddisfare le esigenze del moderno navigatore online che, come abbiamo visto: 1. arriva dall’esterno, senza conoscere nulla del sito; 2. vuole trovare subito quello che sta cercando: è infatti interessato a uno specifico argomento; 3. la sua iniziale intenzione è quella di andare via dopo aver letto l’articolo. Queste pagine devono quindi essere costruite in modo che: 1. funzionino come pagina d’entrata del sito web, immaginando che il visitatore arrivi dall’esterno del sito, e non dall’interno, come invece si presuppone nella maggior parte dei siti tradizionali; 2. funzionino in maniera autonoma e autosufficiente, in modo da essere facilmente comprensibili anche da un visitatore che non ha visto prima d’ora nessun’altra pagina del sito; 3. facciano capire subito qual è l’argomento, per evitare che il navigatore si senta spaesato e abbandoni rapidamente il sito.

Queste sono le principali caratteristiche che le pagine del sito devono avere per soddisfare il visitatore. Le pagine devono però soddisfare anche un’altra condizione, questa volta legata alle necessità di chi ha sviluppato il sito. È certamente bello che le nostre pagine vengano lette, apprezzate, condivise. Però, se il risultato è solo questo, che cosa ci resta? Nulla. Abbiamo costruito un sito-vetrina che è bello da vedere, ma dove non si può fare altro: di conseguenza, i visitatori se ne vanno senza che ci resti nulla di loro. È chiaro, però, che noi vogliamo qualcosa di più: vogliamo che chi arriva sul nostro sito compri qualcosa, ci dia i suoi dati personali, richieda un appuntamento ecc. Cioè, vogliamo che il visitatore entri in qualche modo in contatto con noi e che ci dia i dati per poterlo contattare successivamente. Vogliamo che si converta da anonimo visitatore in persona che si è qualificata, che ha cioè un nome, un cognome, un indirizzo e che possa poi diventare un cliente potenziale o effettivo. Quindi, come abbiamo visto nel capitolo 3, la nostra pagina web deve essere costruita in modo da presentare almeno un punto di conversione, dove il visitatore possa compiere l’azione da noi desiderata. Dirò di più: la pagina deve essere costruita in modo da spingere il visitatore a compiere quello che è previsto nel punto di conversione.

Pagine come landing page Queste considerazioni ci indicano che le pagine del nostro sito dovrebbero essere strutturate come se fossero delle landing page. Secondo la definizione di Wikipedia, la landing page è a single web page that appears in response to clicking on a search engine optimezed search result or an online advertisement. The landing page will usually display directed sales copy that is a logical extension of the advertisement, search result or link [...]. The general goal of a landing page is to convert site visitors into sales or leads.1 Quindi, una landing page è una pagina che: 1. è strutturata in modo indipendente dal sito (“a single web page”); 2. viene raggiunta dopo aver cliccato un link presente nei risultati di ricerca o in una pubblicità online (“ that appears in response to clicking on a search engine optimezed search result or an online advertisement”); 3. mostra un contenuto che è un’estensione del link (“ The landing page will usually display directed sales copy that is a logical extension of the advertisement,

search result or link”); 4. ha, come obiettivo principale, quello di convertire i visitatori in clienti effettivi o potenziali (“ The general goal of a landing page is to convert site visitors into sales or leads”). Il quarto punto ci suggerisce che la landing page, come scrive bene Corey Eridon:2 1. deve avere un elemento di conversione che è generalmente rappresentato da un modulo da compilare per ottenere qualcosa in cambio; 2. è organizzata principalmente per catturare i dati del visitatore attraverso questo modulo (Figura 12.1).

Figura 12.1 – L’elemento principale di una landing page è il modulo (form) che serve per acquisire i dati dei clienti potenziali (lead). In alcuni casi, potrebbe non esserci un modulo, ma solo una call to action. Per esempio: nel caso di un sito e-commerce (per esempio, la call to action “aggiungi al carrello” o “compra”); quando si invita l’utente a compiere un’azione (per esempio, le call to action “registrati”, “richiedi una prova gratuita” ecc.). In quest’ultimo caso, chi clicca sulla call to action viene spesso inviato a una pagina dove, per ottenere quello che è stato promesso, deve prima fornire dei dati. Quindi, il risultato è sempre un modulo da riempire. C’è solo un passaggio in più (Figura 12.2). Pertanto, quando parlerò di “modulo” comprenderò con questo termine anche i casi in cui si utilizza una call to action nelle modalità che ho accennato.

Figura 12.2 – Il percorso che identifica una landing page.

Il percorso del nostro visitatore Per comprendere meglio l’idea che le pagine del sito devono essere strutturate come delle landing page, descriviamo in maniera più dettagliata il percorso che il nostro visitatore deve compiere. Ipotizziamo che sia interessato alla “lead nurturing”. Digita queste due parole su Google e, fra i primi risultati che appaiono, viene attratto dal risultato della Figura 12.3.

Figura 12.3 – Un risultato che appare nella SERP dopo aver digitato “lead nurturing”. Viene cioè attratto dal titolo, “The Definitive Guide to Lead Nurturing”, e da quello che c’è scritto immediatamente sotto (lo snippet). Di conseguenza, il nostro utente clicca sul link. A questo punto, la pagina che si apre deve far capire subito che quello che offre è esattamente ciò che il visitatore sta cercando. Ma che cosa sta cercando il visitatore?

Esattamente quello che ha letto nel risultato di ricerca: in questo caso, “The Definitive Guide to Lead Nurturing”. Quindi, la cosa migliore – per far capire immediatamente al nostro visitatore che la pagina corrisponde a quello che sta cercando – è che il titolo della pagina sia uguale al titolo del risultato di ricerca (Figura 12.4). Se il titolo della pagina fosse stato differente – qualcosa come “Lead generation, lead nurturing and sales conversion: first steps” – avrebbe creato confusione e incertezza. Per comprendere cosa può accadere in questo caso, immaginiamo, per esempio, di cliccare sul risultato di ricerca mostrato nella Figura 12.5.

Figura 12.4 – Ci dovrebbe essere corrispondenza tra il titolo del risultato di ricerca e quello della pagina.

Figura 12.5 – Risultato di ricerca. Ci appare la pagina della Figura 12.6.

Figura 12.6 – pagina che appare dopo aver digitato il precedente risultato di ricerca. Come si può osservare, il titolo della pagina (“Leading marketers are making. Searching their SEO platform of choice”) è completamente differente dal titolo del risultato di ricerca (“Advance Your SEO Tools”). Immaginate quale possa essere la reazione di chi arriva su questa pagina dopo aver cliccato su quel risultato di ricerca: è probabile che resti spiazzato e confuso, dato che ciò che ha trovato non è linea con quanto si aspettava. Non è quindi improbabile che abbandoni subito la pagina. Ritorniamo al nostro esempio sulla “lead nurturing”. Come abbiamo visto, cliccando sul link del risultato di ricerca atterriamo su una pagina che ha il titolo uguale al link (Figura 12.7).

Figura 12.7 – La pagina che si apre dopo aver cliccato sul risultato “The Definitive Guide to Lead Nurturing”. Quindi, il visitatore è motivato a continuare a leggere la pagina, perché: il titolo (1) è identico a quello del risultato di ricerca; il testo (2) spiega nel dettaglio l’argomento. Il navigatore che arriva su questa pagina, per capire il testo, non ha bisogno di sapere qualcosa sul sito: la pagina è costruita in maniera “autonoma” ed è quindi perfettamente rispondente alle esigenze di un visitatore che arriva dall’esterno. Questa pagina risponde in maniera perfetta alle tre condizioni elencate all’inizio di questo capitolo. Non solo, risponde anche alla nostra esigenza: quella di avere un preciso ed evidente punto di conversione collegato all’argomento a cui è interessato il nostro lettore. In questo caso, un modulo da compilare per la richiesta della Guida (3) e la call to action (4) da cliccare per poterla scaricare. In particolare, la call to action – “Download Guide” – rappresenta il motivo che spinge il visitatore a fornire i dati personali. La call to action è lo strumento finale che fa compiere l’azione di conversione.

Se, infatti, il visitatore è particolarmente interessato all’ebook, compilerà il modulo e lo spedirà, diventando qualcuno che si è identificato avendo fornito dei dati personali: in questo caso, nome e cognome, indirizzo email, funzione lavorativa, nome della società in cui lavora. Questi dati serviranno all’azienda per contattare successivamente il potenziale cliente e offrirgli altri contenuti che saranno utili per stabilire una relazione. Se tutto va bene, potranno portare il visitatore a diventare alla fine un cliente effettivo. Possiamo quindi concludere che questa pagina è un ottimo esempio di una landing page.

L’elemento di conversione Circa il 96% delle persone che entra per la prima volta in contatto con un sito non ha alcuna intenzione di comprare. E questo vale anche per i siti di e-commerce.3 Le persone, infatti, quando navigano sul Web, vanno a caccia di informazioni. Poche hanno veramente interesse a comprare. Di conseguenza, nella maggior parte dei casi, è meglio progettare un percorso per convertire i visitatori in clienti potenziali e non subito in clienti effettivi. La conversione avviene nel momento in cui il visitatore anonimo fornisce dei dati utili a qualificarsi e a essere contattato: nominativo, indirizzo email, ruolo lavorativo e così via. Per questo motivo, nella maggior parte dei casi, nella pagina deve esserci un modulo. Però, nessuno completerebbe il modulo se non gli venisse offerto qualcosa di valore in cambio. E questo “qualcosa di valore” deve essere strettamente collegato all’argomento della pagina, che è anche il motivo per cui il visitatore ha cliccato sul link presente nei risultati di ricerca. Per esempio: un white paper; un ebook; la registrazione a un webinar o a una newsletter; la richiesta di una demo o di una prova prodotto; la richiesta di un appuntamento; e così via. Noi offriamo ai nostri visitatori qualcosa di valore e in cambio chiediamo di darci alcuni loro dati. Se lo scambio è conveniente, i visitatori completeranno il modulo e lo invieranno. A questo punto, l’impresa potrà contattare questa persona con alcune email, verificando il grado di interesse verso i suoi prodotti e i suoi servizi. Oppure, se lo ritiene più efficace, la potrà far contattare da un suo agente di vendita o da un call center. Se il potenziale cliente comprerà qualcosa, si avrà la sua conversione finale in cliente effettivo.

Senza il modulo il visitatore non può fornire i suoi dati, e senza di essi l’impresa non può sapere chi sono i suoi clienti potenziali e non può quindi contattarli. Dobbiamo convincerci che ogni pagina del sito deve avere un punto di conversione che spinga il visitatore a entrare in contatto con noi. L’elemento di conversione è il componente più importante della pagina. Non deve competere con nessun altro elemento della pagina nell’attrarre l’attenzione dei visitatori, come esemplificato nella Figura 12.8.

Figura 12.8 – In questa pagina, l’elemento di conversione (modulo con call to action) è il componente più importante. Naturalmente nella pagina ci sono altri elementi importanti: il titolo, le immagini e così via. La loro presenza deve però essere finalizzata a spingere i visitatori verso il

principale obiettivo di conversione della pagina. Di solito, una pagina che non ha un obiettivo di conversione è una pagina sprecata. I siti tradizionali, che in genere non hanno pagine costruite per la conversione, sprecano questa opportunità e non funzionano. Vogliono convertire, ma nella realtà non lo fanno. I siti ottimizzati per la conversione si differenziano da quelli tradizionali in quanto presentano gli elementi che convertono i visitatori anonimi in clienti potenziali o effettivi: il modulo per fornire i dati di contatto e l’offerta che spinge a completarlo. La sua presenza è naturalmente solo uno degli elementi – anche se il più importante – necessari a costruire un sito ottimizzato per la conversione. Ci sono infatti altri elementi che devono essere ottimizzati: il titolo della pagina; il contenuto; le immagini; il layout; la call to action. Tutti questi elementi devono essere focalizzati sulla conversione, perché questa è l’obiettivo finale del sito. Un esempio molto significativo di questa focalizzazione sulla conversione è ben rappresentato nella Figura 12.9, dove il modulo ha un ruolo dominante. L’obiettivo di conversione, e quindi l’obiettivo della pagina, deve essere unico. Non possiamo, nella stessa pagina, spingere il visitatore a leggere il testo, registrarsi alla newsletter, vedere un video, richiedere una demo! Osservate, per esempio, la Figura 12.10.

Figura 12.9 – Esempio di una pagina focalizzata sull’obiettivo di conversione. Come si può notare, la call to action “Sign up now!” deve competere con diversi elementi per attrarre l’attenzione del visitatore. Per esempio, il box posizionato in basso sulla destra contiene ben 5 link ad altrettanti contenuti potenzialmente interessanti: “Plans and pricing”, “Attend a webinar”, “Take a tour” ecc. Osserviamo, adesso, che cosa succede se eliminiamo questo box (Figura 12.11). Così va molto meglio. In questa pagina modificata, l’attenzione è attratta principalmente dalla call to action “Sign up now!”, e la pagina è focalizzata su questo obiettivo.

Figura 12.10 – Pagina web con una call to action e molti elementi di distrazione.

Figura 12.11 – La stessa pagina web senza alcuni elementi di distrazione.

Conclusioni Nella maggior parte dei siti, le pagine principali devono essere costruite come se fossero delle landing page. Devono cioè: avere un contenuto che è una naturale estensione del link di provenienza; essere autonome e autosufficienti rispetto al resto del sito; essere focalizzate sull’obiettivo di convertire i visitatori in clienti potenziali ed effettivi; favorire la conversione. Perché questo avvenga, occorre rispettare quattro condizioni. Prima condizione Deve esserci una stretta corrispondenza tra il link che porta sulla pagina e il suo titolo (Figura 12.12).

Figura 12.12 – Ci deve essere corrispondenza tra il risultato di ricerca e il titolo della pagina.

Seconda condizione Il contenuto della pagina deve essere facilmente compreso anche da persone che non conoscono nulla del sito su cui sono arrivate.

Terza condizione Occorre che la pagina sia costruita focalizzandosi sull’obiettivo di conversione, in genere rappresentato da un modulo di richiesta e una call to action. In definitiva, la

pagina esiste principalmente per convertire i visitatori anonimi in clienti potenziali, identificati e qualificati. Di conseguenza, è necessario scegliere attentamente dove posizionare questo elemento di conversione, in modo che lo sguardo si concentri su di esso, dopo aver dato un’occhiata al testo. La pagina rappresentata nella Figura 12.13 ha un preciso obiettivo di conversione: il completamento del modulo.

Figura 12.13 – Esempio di una pagina focalizzata sulla conversione.

Quarta Condizione Infine, occorre ottimizzare gli elementi principali della pagina in modo da favorire la conversione. Mi riferisco a questi elementi (Figura 12.14): il titolo (1); le immagini (2); il testo (3 e 6); il modulo (4) la call to action (5).

Figura 12.14 – I cinque elementi principali che non devono mancare perché una pagina converta. Tutti questi elementi hanno un ruolo importante nel favorire la conversione. In questa terza parte del libro ci soffermeremo sulla Conversion Optimization, cioè sulla ottimizzazione del sito per ottenere una conversione. Vedremo, quindi, come dobbiamo organizzare le pagine del sito in modo da ottimizzare questo risultato. Per prima cosa, è necessario capire come le persone leggono sul web (capitolo 13). In questo modo, potremo comprendere come devono essere organizzati gli elementi che compongono la pagina (capitolo 14) e dove devono essere posizionati il modulo e la call to action per ottimizzare la conversione (capitolo 15). Successivamente, analizzeremo come devono essere ottimizzati i componenti principali della pagina: il testo (capitolo 16), il titolo (capitolo 17), il modulo (capitolo 18), la call to action (capitolo 19) e le immagini (capitolo 20). Prima delle conclusioni (capitolo 22), il capitolo 21 si soffermerà sull’ultimo argomento del libro: l’eliminazione degli elementi di distrazione che compaiono nella pagina e che possono allontanare dall’obiettivo di conversione.

1. Si veda, per esempio, oltre la definizione riportata da Wikipedia (en.wikipedia.org/wiki/Landing_page): Ash T., Page R., Ginty M., Landing Page Optimization, John Wiley & Sons, Indianapolis, Indiana 2012; Harwood M., Harvood M., Landing Page Optimization for Dummies, Wiley Publishing, Indiana 2009. 2. “Landing page is any page on the web on which one might land that 1) has a form and 2) exists solely to capture a visitor’s information through that form”: Eridon C., “What Is a Landing Page?”,

blog.hubspot.com/marketing/what-is-a-landing-page-ht (6 agosto 2013). 3. Buligo Z., “What the Highest Converting Website Do Differently”, blog.kissmetrics.com/what-convertingwebsites-do/ (maggio 2012).

CAPITOLO 13

COME SI SUL WEB LEGGE

È importante capire come le persone leggono sul Web per due motivi: 1. possiamo costruire i contenuti della pagina in modo da rispettare questa modalità e favorendone così la lettura; 2. possiamo collocare gli elementi di conversione nelle posizioni migliori, dove cioè di sicuro si concentrerà lo sguardo del visitatore. Vediamo quindi che cosa sappiamo sulle modalità di lettura nel Web.

Sul Web non si legge molto Anche se il modo in cui le persone muovono lo sguardo sullo schermo è condizionato da diversi fattori – layout della pagina, ciò che si sta cercando, quanto si è interessati all’argomento ecc. – si può comunque dire che, di solito, le persone: 1. non leggono il testo sul Web come lo leggono su una pagina stampata, cioè da sinistra a destra e dall’inizio alla fine, parola dopo parola; 2. esaminano invece il testo velocemente in maniera incompleta, osservando singole parole in maniera spesso casuale; 3. lo iniziano a leggere in maniera più approfondita, soffermandosi maggiormente sulle singole frasi, solo se l’argomento si dimostra di grande interesse.

Perché sul Web si legge in maniera differente dalla carta stampata?” Lo si fa per due motivi principali.

Primo motivo Secondo alcuni studi, i testi sullo schermo si leggono più lentamente di quelli su carta stampata: all’incirca più lentamente del 15-20%. Perché? Perché la risoluzione dello

schermo di un PC è più bassa di quella della stampa e, quindi, i caratteri non sono perfettamente nitidi. Gli occhi si devono sforzare per compensare la minore nitidezza e, quindi, si stancano più rapidamente. Di conseguenza, si cerca di leggere il meno possibile perché gli occhi si affaticano in fretta.

Secondo motivo Le persone che arrivano sul sito tramite i motori di ricerca sono di solito concentrate su uno specifico argomento. Il loro intento è quello di leggere qualcosa che sia collegato all’argomento cercato e poi andare subito via. Quindi, quando arrivano su una pagina w eb, la prima cosa che fanno è cercare di capire se corrisponde alle proprie aspettative, se è pertinente con quello che stanno cercando. Non desiderano leggere subito tutto perché sanno che molto spesso le pagine web non valgono il tempo speso per farlo: è meglio prima scorrerla per capire se vale la pena di leggerla completamente. Per questi motivi, sul web non si legge molto: secondo uno studio condotto da J. Nielsen, le persone leggono in media il 20% delle parole presenti su una pagina durante una visita.1

Sul Web si esplora il testo Quindi, sul Web, le persone non leggono le pagine parola dopo parola, muovendosi da sinistra a destra e dall’alto verso il basso, ma preferiscono esplorarle velocemente, spesso saltando da una parola all’altra, senza un preciso ordine: l’obiettivo è quello di evitare che la fatica di leggere tutto il testo si traduca in un’inutile perdita di tempo. Nella Figura 13.1 si può osservare come lo sguardo dell’utente (evidenziato dai cerchietti scuri) si soffermi solo su alcune parole del testo, ignorandone la maggior parte.2

Figura 13.1 – Lo sguardo del lettore si sofferma solo su alcune parole del testo. Questa esplorazione serve per capire, in pochi secondi, se restare sulla pagina e approfondire la lettura, o andarsene per visitare un altro sito. In genere, le persone tendono a leggere quasi completamente il primo paragrafo, perché serve per capire di che cosa si parla nella pagina. Dopo, si tende a leggere sempre di meno, spostandosi sempre di più verso sinistra. Il visitatore inizia a leggere il secondo paragrafo, ma si ferma prima di quanto ha fatto nel primo paragrafo. Quando passa sul terzo paragrafo si ferma ancora prima e così via (Figura 13.2).

Figura 13.2 – Lettura decrescente dei paragrafi. Pernice, Whitenton e Nielsen hanno verificato le percentuali di lettura dei paragrafi.3 Nel loro test li hanno considerati come un unico blocco. Pertanto, non hanno preso in considerazione che cosa le persone osservino in un paragrafo: tutte le parole, solo alcune, solo le prime e così via. L’importante è che abbiano dato almeno uno sguardo a ciascuno di essi. Come si può osservare nella Figura 13.3, i risultati ottenuti dal test dimostrano che: 1. le persone osservano il primo paragrafo nella maggior parte dei casi (81%); 2. l’interesse diminuisce quando osservano il secondo paragrafo (71%); 3. cala drasticamente tra il terzo (63%) e il quarto paragrafo (32%). Anche altri test hanno verificato e confermato questa lettura parziale dei paragrafi, che può essere rappresentata come in Figura 13.4. Questo modello di lettura si riscontra soprattutto in presenza di pagine prevalentemente testuali e quando non ci sono particolari elementi visivi che

attraggono lo sguardo, come sottotitoli, figure, parole evidenziate ecc. In questi casi, le persone sembrerebbero muovere gli occhi in modo da formare qualcosa di simile alla lettera “F”.

Figura 13.3 – Percentuale media di lettura dei paragrafi.

Figura 13.4 – Rappresentazione della modalità di lettura dei paragrafi. Secondo Jakob Nielsen:4

“gli occhi delle persone si muovono rapidamente lungo la pagina. Pochissimo tempo è dedicato a ogni elemento della pagina. Di conseguenza, occorre essere brevi e concisi nel comunicare online. Le persone saltano tra le linee delle pagine e spesso si fissano su qualcosa, come le prime parole di un titolo, dedicandovi soli pochi secondi. La parte destra spesso non è vista dagli occhi. Le persone guardano le pagine dall’alto in basso, secondo un modello a ‘F’, scorrendo poche righe in alto – la prima più lunga della seconda – e poi vanno in basso, lungo la striscia verticale, per vedere se ci sono altre cose interessanti. Qualche volta seguono un modello a ‘E’ ma, di solito, è un modello a ‘F’.” In un famoso test, che ha coinvolto 232 persone, J. Nielsen ha fatto vedere tre differenti pagine, tutte prevalentemente testuali:5 un articolo contenuto nella sezione “About us” di un sito aziendale; una pagina di prodotto di un sito di e-commerce; una pagina dei risultati di ricerca (SERP). Nella Figura 13.5 si possono osservare i percorsi visivi seguiti dai partecipanti al test.

Figura 13.5 – I risultati ottenuti nel test eseguito da J. Nielsen su 3 pagine web. Le aree dove i partecipanti al test hanno soffermato maggiormente lo sguardo sono quelle colorate di grigio scuro; le aree chiare indicano le zone con minori visualizzazioni. Il resto della pagina non è stato osservato. Se ci focalizziamo solamente sulle aree di colore grigio scuro, quelle cioè più viste, tutte e tre le pagine mostrano che

le persone hanno seguito il modello “F”, anche se ci sono delle differenze dovute soprattutto alla loro differente struttura. In questo studio, Nielsen ha verificato che i visitatori: iniziano a leggere le pagine web focalizzandosi prima sulla parte superiore sinistra; poi muovono gli occhi orizzontalmente verso destra, sempre nella parte superiore (questo movimento forma la prima striscia superiore della lettera “F”); quindi, questo primo paragrafo sarà letto completamente o quasi del tutto; successivamente, spostano lo sguardo leggermente in basso, rivolgendosi verso sinistra; da qui spostano lo sguardo di nuovo verso destra, con un secondo movimento orizzontale, che copre però un’area minore; questo movimento forma la seconda striscia della “F”, quella più bassa; infine, ritornano nella parte sinistra e guardano seguendo un movimento verticale verso il basso, che forma la parte finale della lettera “F”. La maggiore attenzione dedicata all’area sinistra dello schermo è stata confermata da altri test. Per esempio, in un test condotto sempre da Jakob Nielsen è stato verificato che le persone impiegano il 69% del loro tempo guardando la parte sinistra della pagina e solo il 30% la parte destra.6 In un altro test, condotto su 46 persone dal Poynter Institute (“Eyetracking III”),7 si è osservato che, spesso, la parte posizionata in alto sulla sinistra è quella che attira un’attenzione speciale (Priority 1): gli occhi vi si focalizzano, vi indugiano, prima di spostarsi. Solo in un secondo momento, si muovono, con minore attenzione, verso la parte destra dello schermo e verso quella inferiore che hanno una priorità minore (Priority 2 e 3) (Figura 13.6).

Figura 13.6 – L’area sulla sinistra ottiene maggiore attenzione dell’area destra e di quella inferiore. Secondo alcuni esperti, la minore attenzione che ottengono le aree a destra può essere attribuita anche al fatto che molti siti riempiono queste zone di pubblicità. Gli utenti lo sanno e, dato che “scappano” dalla pubblicità online, più queste aree assomigliano a informazioni pubblicitarie, maggiore è la probabilità che vengano ignorate.8 È importante evidenziare che questa lettura orientata a sinistra non dipende dall’importanza delle parole, ma semplicemente dalla lunghezza delle linee (Figura 13.7).

Figura 13.7 – La lettura orientata a sinistra dipende dalla lunghezza delle linee. Se, infatti, la colonna di testo fosse meno larga, la parte letta sarebbe molto differente (Figura 13.8).

Figura 13.8 – L’area letta quando la colonna è molto stretta. Altre indagini hanno confermato i risultati ottenuti da Nielsen. Per esempio, un test condotto da Yahoo! ha verificato che lo sguardo delle persone si concentra su un’area triangolare nella parte superiore sinistra, simile alla lettera “F” (Figura 13.9).9

Figura 13.9 – Nel test eseguito da Yahoo!, l’area più vista forma un triangolo in alto sulla sinistra. Un altro test, condotto da Sav Shrestha e Kelsi Lenz, ha preso in esame il comportamento di venti persone quando osservano una pagina prevalentemente testuale, sia che compiano una navigazione generica sia una ricerca specifica. In entrambi i casi,

il percorso seguito dallo sguardo conferma il modello “F” (Figura 13.10).10

Figura 13.10 – Le visualizzazioni ottenute durante una navigazione generica (quella a sinistra) e una ricerca specifica (quella a destra) confermano il modello “F”. In conclusione, se la pagina è prevalentemente testuale, occorre seguire due importanti indicazioni nell’organizzazione del testo: 1. considerato che la parte destra della pagina viene facilmente ignorata, le pagine dovrebbero essere strutturate in maniera tale da far ricadere le informazioni più importanti all’interno del pattern “F”. 2. i primi due paragrafi dovrebbero contenere le informazioni più importanti.

Gli elementi d’attrazione Come abbiamo visto, quando la pagina ha prevalentemente un contenuto testuale le persone la esplorano seguendo di solito il modello “F”, o qualcosa di simile. Se, però, la pagina contiene dei forti elementi d’attrazione il discorso cambia. Infatti, le persone sono naturalmente attratte da tutti gli elementi visibili che si staccano dal testo, con la speranza che possano orientarle nella comprensione dell’argomento e che le facciano risparmiare tempo. L’obiettivo è quello di capire il più in fretta possibile se sono arrivati sulla pagina

giusta. Se, per esempio, l’argomento a cui sono interessati è “sistemi di automazione”, cercheranno queste parole all’interno della pagina. E lo faranno dove possono essere facilmente visibili: titoli, parole evidenziate, elenchi puntati ecc. Cioè, in tutti quegli elementi che risaltano rispetto al resto del testo.11 Quindi, se la pagina in cui si arriva presenta questi elementi d’attrazione, lo sguardo non vagherà in maniera casuale, ma troverà dei punti naturali dove soffermarsi e cercare indizi sulla pertinenza del testo rispetto a quello di cui si ha bisogno. Per esempio, nella Figura 13.11 si può notare come gli occhi si soffermino soprattutto sui titoli e sugli elenchi puntati. Vediamo allora quali sono gli elementi che: 1. attraggono lo sguardo delle persone quando esplorano una pagina web; 2. sono ricercati perché possono fornire un indizio sul contenuto del testo. I più importanti sono: titolo della pagina e sottotitoli; parole scritte in grassetto; link; parole con un colore diverso da quello del testo; elenchi puntati. Le parole che stanno vicine a questi elementi godono anch’esse dell’effetto di attrazione.

Figura 13.11 – Movimenti degli occhi quando in una pagina ci sono dei punti di attrazione.

Titolo della pagina e sottotitoli Per prima cosa, il visitatore cerca il titolo della pagina, dato che questo per lui rappresenta un forte indizio del contenuto che seguirà. Se corrisponde al link su cui ha cliccato per arrivare sulla pagina, tanto meglio. Pernice, Whitenton e Nielsen hanno verificato che nel 53% dei casi le persone dirigono lo sguardo sul titolo (Figura 13.12).

Figura 13.12 – Percentuali di lettura del titolo della pagina. La percentuale può sembrare più bassa di quanto ci si potrebbe attendere, ma bisogna considerare che comprende le visite ripetute compiute dai visitatori che, chiaramente quando tornano, difficilmente vanno a leggere nuovamente il titolo. Le persone sono poi attratte dai sottotitoli che dividono le sezioni di una pagina. In questo caso, la maggior parte di loro muove lo sguardo secondo quello che è stato chiamato il modello “torta a strati” (layer cake): lo sguardo, cioè, si sofferma quasi esclusivamente sui sottotitoli prima di scegliere quale sezione leggere, formando delle linee orizzontali che ricordano appunto una torta a strati (Figura 13.13).

Figura 13.13 – Il modello di lettura “layer cake”. In questo modo, il lettore ottiene solamente delle informazioni molto limitate, ma sufficienti per valutare quale sezione di testo dovrebbe leggere, esplorare o ignorare. La lettura a strati è favorita – oltre che dai titoli – anche dagli spazi vuoti che separano le sezioni, rendendo più facile la loro individuazione e favorendo la lettura. La Figura 13.14 illustra il movimento dello sguardo di una persona che è interessata all’argomento della pagina, senza però avere niente di specifico in mente.

Figura 13.14 – Esplorazione di una pagina secondo il modello a strati. Come si può notare, il lettore esplora la pagina secondo il modello a strati, senza soffermarsi sul testo delle singole sezioni ma solo sui sottotitoli, che lo aiuteranno a decidere che cosa dovrà leggere subito dopo o se dovrà lasciare la pagina perché non è interessato. Vediamo meglio qual è il percorso che può seguire un normale lettore. Iniziamo, soffermandoci sulla Figura 13.15. Il titolo e i sottotitoli sono ben evidenziati, scritti in grassetto e con caratteri più grandi di quelli utilizzati nel testo. Di conseguenza, lo sguardo si focalizza su questi elementi (Figura 13.16).

Figura 13.15 – Una pagina web con sottotitoli e sezioni ben spaziate.

Figura 13.16 – Lo sguardo si focalizza sul titolo e sui sottotitoli. Dopo essersi soffermati sul logo, sul banner (sinistra) e sull’immagine (destra), gli occhi si concentrano sul titolo. Questa prima indagine conferma che probabilmente la pagina merita di essere esaminata più a lungo. Di conseguenza, ecco che lo sguardo si concentra sui sottotitoli e solo su questi: il lettore ottimizza lo sforzo e cerca di capire dove potrebbe trovarsi l’informazione che sta cercando. Questa rapida esplorazione dei sottotitoli gli fa capire su quali sezioni del testo dovrebbe soffermarsi (Figura 13.17).

Figura 13.17 – Dopo aver letto i sottotitoli, il lettore individua la sezione da leggere. Alla fine, l’utente trova l’informazione che stava cercando e legge per intero una sezione (Figura 13.18).

Figura 13.18 – Il lettore si sofferma a leggere la sezione che gli interessa. Quest’ultimo esempio illustra molto bene come, di solito, lo sguardo si sposta quando: 1. esiste una buona divisione in sezioni, con sottotitoli ben evidenziati; 2. si trova qualcosa che interessa particolarmente dopo essersi soffermati sui sottotitoli.

Parole scritte in grassetto Le parole scritte in grassetto attirano molto l’attenzione. Osservate la pagina della Figura 13.19.

Figura 13.19 – Pagina con una frase evidenziata in grassetto. Osservate poi come, nella Figura 13.20, le persone saltino i due paragrafi introduttivi e si soffermino sulla frase scritta in grassetto, leggendone tutte le parole. Successivamente, grazie all’interesse acceso da questa frase, esplorano anche i paragrafi seguenti.

Figura 13.20 – Lo sguardo del lettore si sofferma sulla frase evidenziata in grassetto. Per non appesantire il testo, non prendo in esame altri studi che confermano questi risultati. Evidenzio solo che le parole in grassetto sono un fortissimo elemento d’attrazione e, per questo motivo, dovrebbero essere utilizzate per evidenziare le frasi più importanti del testo e le parole chiave.

Parole con un colore diverso da quello del testo Se alcune parole hanno un colore diverso da quello del testo saltano subito agli occhi e attirano lo sguardo, probabilmente più che se fossero evidenziate solo in grassetto. La Figura 13.21 presenta una terrificante pagina con un unico blocco di testo che probabilmente verrebbe subito abbandonata, se non contenesse un grande richiamo: parti di testo colorate (in questo caso, di rosso, anche se nell’immagine in scala di grigio non sono naturalmente visibili).

Figura 13.21 – Lo sguardo del lettore si sofferma sulle frasi evidenziate in rosso. Di conseguenza, il lettore esplora inizialmente i primi tre paragrafi. Poi, decide di non abbandonare la pagina: è attratto dalle frasi in rosso del quarto paragrafo. Dà una rapidissima occhiata al quinto paragrafo e si sofferma più a lungo sul sesto paragrafo,

attratto ancora una volta dalle frasi in rosso. Stesso discorso più avanti. Il lettore è attratto dalle frasi in rosso del nono paragrafo, mentre non presta quasi nessuna attenzione al settimo e all’ottavo paragrafo, che sono scritti nel testo normale, senza parole evidenziate. Questo esempio illustra molto bene il potere esercitato dalla parole e dalle frasi evidenziate con un colore diverso da quello del testo.

I link Osservate la Figura 13.22: solo testo, ma con paragrafi ben spaziati.

Figura 13.22 – Pagina con paragrafi ben spaziati e con numerosi link. All’interno di sei dei sette paragrafi visibili ci sono dei link di testo. Sono presentati in blu e sono sottolineati, cosa che crea un contrasto con il resto. In questo modo, i link aiutano i lettori a esplorare la pagina, piuttosto che costringerlo a leggere tutto. Agiscono, cioè, come se fossero dei titoli. Nella Figura 13.23 si può osservare come il lettore inizialmente esamini i primi due paragrafi. Nel terzo paragrafo, guarda principalmente il link e il testo tra parentesi. Nel quarto, quinto e sesto paragrafo guarda esclusivamente i link.

Figura 13.23 – I link attirano lo sguardo del lettore. In definitiva, il lettore utilizza i link per capire di che cosa parlano i paragrafi. Dopo che ha compiuto questa esplorazione, si sofferma sull’area che gli interessa (Figura 13.24).

Figura 13.24 – Dopo aver esplorato la pagina, il lettore si sofferma sulla sezione che gli interessa. Questo test illustra una cosa molto importante: le persone usano i link al posto dei titoli per capire qual è l’argomento del paragrafo.

Elenchi puntati Gli elenchi puntati sono un elemento che attira in modo particolare l’attenzione del lettore perché costituiscono uno stacco dal testo normale e perché sono più facili da leggere. Di conseguenza, gli occhi si concentrano molto spesso su di essi: la frequenza è pari al 70% delle volte (Figura 13.25).

Figura 13.25 – Il 70% delle volte gli elenchi puntati vengono visti. Stando alla Figura 13.26, l’utente legge prima i titoli, poi salta alle tre voci dell’elenco puntato.

Figura 13.26 – Il lettore si sofferma a osservare l’elenco puntato. L a Figura 13.27 ci fa invece vedere come, pur se i tre elenchi puntati attirano lo sguardo, le persone non leggono tutte le parole quando le linee di testo diventano più lunghe. Di conseguenza, è meglio usare poche parole per ogni voce dell’elenco.

Figura 13.27 – Lo sguardo si sofferma solo parzialmente sui punti elenco molto lunghi.

Quando è possibile, utilizzate elenchi puntati: aiutano ad attirare l’attenzione e facilitano la lettura (come vedremo nel capitolo 16).

Pagine non prevalentemente testuali Fin qui abbiamo visto come le persone leggono le pagine web quando si presentano sotto una forma prevalentemente testuale. Però, non sempre le pagine sono di questo tipo. Spesso sono organizzate in modo più complesso, per esempio con immagini che spezzano il normale fluire del testo. In questi casi, entrano in gioco altri elementi di attrazione. Osserviamo la Figura 13.28.

Figura 13.28 – Esempio di una pagina con testo e una grande immagine. Come verrà letta? Nella nostra cultura si legge da sinistra a destra. Di conseguenza, è molto probabile che lo sguardo si muoverà dall’area sinistra, posta nella parte superiore, verso destra. Dopo, si tenderà a tornare sulla sinistra per spostarsi ancora verso destra, perché siamo stati abituati a leggere in questo modo. Sarebbe innaturale che, dopo essere arrivati sulla destra, spostassimo lo sguardo in basso restando sullo stesso lato della pagina. Cioè, è probabile che si segua un percorso come quello illustrato nella Figura 13.29.

Figura 13.29 – Probabile movimento degli occhi quando si osserva una pagina web complessa. Di conseguenza, per osservare una pagina come quella rappresentata nella Figura 13.28, che ha un’immagine al centro, lo sguardo seguirà un movimento simile alla lettera “Z”: si parte sempre dalla sinistra in alto, si prosegue sulla destra, poi si scende sulla sinistra e si conclude infine in basso sulla destra (Figura 13.30).

Figura 13.30 – Il movimento degli occhi nell’esplorare una pagina con testo e immagine.

Il designer Edmund C. Arnold ha teorizzato questo modello di lettura, che segue il normale percorso dello sguardo, chiamandolo “diagramma di Gutenberg”. Secondo Arnold, la pagina deve essere divisa in quattro quadranti (Figura 13.31) e di solito: s’inizia a leggere in alto a sinistra (Primary Optical Area = Principale Area Ottica); poi ci si sposta orizzontalmente verso destra (Strong Fallow Area = Forte Area Inattiva); subito dopo, si ritorna a sinistra, muovendosi rapidamente verso il basso (Weak Fallow Area = Debole Area Inattiva); infine, si prosegue orizzontalmente verso destra (Terminal Area = Area Finale).

Figura 13.31 – Il diagramma di Gutenberg. L a Primary Optical Area è quella dove gli occhi si concentrano automaticamente appena vedono la pagina, a prescindere dal fatto che l’utente stia cercando qualcosa, o voglia leggere o solo dare una rapida occhiata. La seconda e la terza area sono quelle che ricevono minore attenzione, a meno che non siano enfatizzate in qualche modo tramite il design. Comunque, l’area 2 riceverà più attenzione dell’area 3. In queste zone si dovranno posizionare elementi di minore importanza, come link di navigazione secondaria. La quarta area è quella dove si

registra una “pausa”, un break nella lettura e l’utente può essere orientato a compiere un’azione. Il diagramma suggerisce anche che gli occhi scorrono la pagina seguendo dei movimenti orizzontali. Ogni movimento inizia dal bordo di sinistra e si sposta verso il bordo di destra, seguendo quello che è stato definito l’asse di orientamento (Figura 13.32). Lo sguardo, comunque, nel suo complesso, tende a seguire un naturale movimento dalla Primary Area alla Teminal Area: questo percorso è chiamato Reading Gravity (tendenza di gravitazione della lettura). L’area 2 e l’area 3 cadono al di fuori del percorso e, di conseguenza, ricevono un’attenzione ridotta, a meno che non siano enfatizzate visivamente.

Figura 13.32 – Il movimento degli occhi nel modello di Gutenberg. Vediamo come, secondo questo modello, verrà letta una pagina molto semplice, come per esempio la homepage di MailChimp (Figura 13.33). Ora osserviamo anche come viene vista una pagina del sito di Gumroad (Figura 13.34). Il diagramma di Gutenberg ci suggerisce che gli elementi più importanti devono essere collocati nella Reading Gravity. Per esempio: logo e titolo in alto a sinistra; un’immagine o un contenuto importante nel centro;

in basso a destra, nell’area dove si focalizza l’interesse del lettore al termine della lettura, dovrebbe essere collocata la call to action o il modulo, in quanto sono la naturale conclusione dell’esame condotto dall’utente.

Figura 13.33 – Modello di lettura della homepage di MailChimp secondo il diagramma di Gutenberg.

Figura 13.34 – Modello di lettura di una pagina del sito di Gumroad secondo il diagramma di Gutenberg. Si consideri, per esempio, la Figura 13.35.

Figura 13.35 – Il naturale movimento dello occhi nell’esplorare questa pagina. Come si può notare: il titolo (headline), che gli utenti leggono per primo, si trova nella principale area dove in genere si dà una prima occhiata; il testo, che gli utenti leggono dopo il titolo, sta sulla destra, nella Strong Fallow Area; l’immagine del prodotto, che viene guardata dopo che gli utenti hanno dato una scorsa al testo, è collocata nella Weak Fallow Area (secondo alcuni esperti, questo è il luogo migliore per collocare le immagini, perché queste tendono a focalizzare più a lungo lo sguardo: di conseguenza, in questa area debole, non sarà guardata troppo a lungo rispetto agli altri elementi); infine, la call to action è collocata nella Terminal Area, a conclusione del percorso di osservazione di tutti gli altri elementi: è cioè nel luogo migliore per spingere l’utente a completare l’azione richiesta. Esaminiamo, invece, che cosa accade quando la call to action è posizionata sulla sinistra in basso, cioè nella Weak Fallow Area, quella a cui gli utenti prestano minore attenzione (Figura 13.36).

Figura 13.36 – Il diagramma di Gutenberg applicato a una pagina con la call to action in basso sulla sinistra. In questo caso, gli utenti muovono gli occhi verso la call to action (area 3) ma solo per un brevissimo periodo, dato che si dovranno spostare verso destra per seguire il normale percorso visivo che gravita verso l’area 4. Una volta che hanno esaminato l’ultima area, la Terminal Area, gli utenti dovrebbero volgere lo sguardo indietro, ritornando nella Weak Fallow Area per cliccare sul pulsante della call to action. Tuttavia, questo movimento non solo forza i lettori a fare un’ulteriore azione – e sappiamo bene quanto poco tempo si dedica normalmente a visitare una pagina web, per cui ogni azione in più rischia di allontanare il visitatore –, ma li spinge anche a fare qualcosa di innaturale, che va contro il loro normale “ritmo visivo”. Considerato quindi che lo sguardo tende di solito a muoversi dalla parte sinistra, per poi gravitare verso il basso sulla destra (Figura 13.37), le call to action e i moduli dovrebbero essere posizionati nella Terminal Area.

Figura 13.37 – Tendenza di gravitazione dello sguardo. In definitiva, il diagramma di Gutenberg ci suggerisce che esiste un naturale percorso che gli occhi seguono quando osservano una pagina web che ha degli elementi visivi che interrompono la lettura del testo. Di conseguenza, ci fornisce delle utili indicazioni su come costruire una pagina web e dove posizionare gli elementi principali, come le call to action. Non deve essere però preso come un dogma, ma come un modello di lettura che il lettore può seguire se il layout asseconda i movimenti del suo sguardo.

Conclusioni Quando le persone arrivano su una pagina web tramite i motori di ricerca, di solito, non la leggono subito ma cercano di capire se corrisponde a quello che stanno cercando. Di conseguenza, le pagine web devono essere progettate tenendo conto che le persone solitamente, come primo impatto, esplorano le pagine e non le leggono subito. Se le pagine sono prevalentemente testuali, i visitatori tenderanno a seguire un modello di lettura simile alla lettera “F”. In questo caso, si tenderà a leggere soprattutto la parte sinistra della pagina, tralasciando quasi completamente la parte di destra e quella inferiore. Quando però le pagine presentano degli elementi che si distaccano dal testo normale, questi attireranno l’attenzione nella speranza che aiutino a capire immediatamente se la pagina corrisponde a ciò che si sta cercando. Come abbiamo

visto, questi elementi visivi sono rappresentati da: titoli; sottotitoli; parole in grassetto; link; punti elenco. Per questo motivo, dobbiamo organizzare il contenuto delle nostre pagine web con elementi visivi che consentano di comprendere rapidamente l’argomento della pagina, in modo che il lettore possa decidere se proseguire nella lettura oppure abbandonarla. Quindi, senza esagerare, inserite tutti questi elementi senza appesantire il testo, ma rendendolo solamente più piacevole e più efficace da esplorare e da leggere. Quando le pagine non sono prevalentemente testuali, ma sono costruite in modo più complesso, e quindi hanno per esempio delle immagini che attraggono lo sguardo, il modello di lettura può cambiare. Il lettore probabilmente seguirà qualcosa di simile allo schema ipotizzato nel diagramma di Gutenberg, che enfatizza una tendenza dello sguardo a gravitare dalla sinistra in alto verso la destra in basso. In questi casi, la posizione migliore per collocare la call to action o il modulo è proprio quest’ultima, la Terminal Area. Sia il modello “F” che il diagramma di Gutenberg hanno in comune i primi movimenti degli occhi, che descrivono un triangolo (Figura 13.38).

Figura 13.38 – Gli occhi disegnano un triangolo quando iniziano a esplorare una pagina web. L’area del triangolo collocata nella parte superiore della pagina sarà sicuramente quella più vista, perché è quella che tutti guardano: di conseguenza, qui devono essere posizionate le informazioni più importanti (Figura 13.39).

Figura 13.39 – Le informazioni più importanti vanno scritte nell’area del triangolo in alto a sinistra. Il motivo per cui il modello “F” non si estende all’area in basso a destra, enfatizzata nel diagramma di Gutenberg, può essere ricercato: 1. nel probabile scarso coinvolgimento del contenuto della pagina; 2. nel tentativo di esplorarla per individuare se vale la pena leggere di più. Se il lettore scoprisse che il contenuto gli interessa, probabilmente vorrà leggere di più e, quindi, spezzerà il modello “F” in modo da raggiungere la Terminal Area. Per concludere, si può sostenere che se si è convinti che i lettori seguiranno uno di questi modelli, si potrà creare un sito che li valorizzi. In ogni caso, i modelli non sono e non devono essere intesi come un dogma. Sono un utile strumento che può aiutare a costruire il layout dei siti web quando si vuole lasciare fluire liberamente lo sguardo del visitatore. È, pero, importante evidenziare che chi progetta un sito web può, se lo vuole, interrompere questo flusso naturale, controllando e dirigendo il movimento degli occhi in specifiche direzioni attraverso l’utilizzo di particolari elementi visivi, come abbiamo visto in questo capitolo e come vedremo anche nel prossimo. A questo punto, ci si potrebbe chiedere: chi è arrivato prima? Cioè: il layout a “F” o il diagramma di Gutenberg sono stati ideati per rispondere più efficacemente al modo in cui le persone esaminano il contenuto dei siti? Oppure, i lettori esaminano le pagine web seguendo uno di questi modelli perché molti siti sono stati progettati in questo

modo? Probabilmente, c’è una parte di verità in entrambe le domande: nella nostra cultura occidentale, le persone hanno sempre letto dall’alto in basso e da sinistra a destra; però, è anche vero che la prevalenza di siti con layout semplice e prevalenza di testo incoraggia certamente i visitatori a esaminarli seguendo uno schema a “F” o secondo il diagramma di Gutenberg.

1. Nielsen J., “How Little Do Users Read?”, www.nngroup.com/articles/how-little-do-users-read/ (6 maggio 2008). 2. Pernice K, Whitenton K. e Nielsen J., How People Read on the Web: The Eyetracking Evidence, Nielsen Norman Group, 2012, p. 36. 3. Idem. 4. Farber D., “Eye Tracking Web Usability”, www.zdnet.com/article/eye-tracking-web-usability/ (27 marzo 2006). 5. Nielsen J., “F-Shaped Pattern For Reading Web Content”, www.nngroup.com/articles/f-shaped-pattern-readingweb-content/ (17 aprile 2006). 6. Nielsen J., “Horizontal Attention Leans Left”, www.nngroup.com/articles/horizontal-attention-leans-left/ (06 aprile 2014). 7. Poynter Institute, “Eyetracking III”, www.poynter.org/extra/eyetrack2004/index.htm. 8. Nielsen J., “Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored”, www.nngroup.com/articles/fancy-formatting-looks-like-an-ad/ (04 settembre 2007). 9. Yahoo! e Barr C., The Yahoo! Style Guide: The Ultimate Sourcebook for Writing, Editing, and Creating Content for the Digital World, St. Martin’s Griffin, 2010, p. 4. 10. Shrestha S. e Lenz K., Eye Gaze patterns while Searching, traduzione in Webaccesibile.org, www.webaccessibile.org/articoli/pattern-visivi-durante-la-navigazione-o-la-ricerca-in-sito-web/ (22 gennaio 2008). 11. Pernice K, Whitenton K.e Nielsen J. (2012), op. cit. Nel prosieguo si farà riferimento a questo libro, che riassume i risultati dei test eseguiti con la tecnica dell’eyetracking dal Nielsen Norman Group su oltre 300 partecipanti. Attualmente è l’indagine più completa eseguita sulle modalità di lettura utilizzate nel Web. Quindi, salvo diversa indicazione, tutte le immagini mostrate nel proseguimento di questo capitolo sono tratte da questo libro.

CAPITOLO 14

COME GUIDARE LO SGUARDO DEL VISITATORE: LA GERARCHIA VISIVA

La gerarchia visiva Nel precedente capitolo abbiamo visto che, se la pagina non presenta particolari elementi d’attrazione e ha un contenuto prevalentemente testuale, le persone la esplorano seguendo un modello che ricorda la lettera “F” o, in alcuni casi, la lettera “E”. Quando la pagina presenta particolari elementi che risaltano nel testo – come titoli, parole evidenziate, elenchi puntati – il flusso naturale dello sguardo viene interrotto e gli occhi sono attratti da questi ultimi. Ciò accade perché generalmente le persone sono alla ricerca di indizi che confermino la pertinenza della pagina con quello che stanno cercando. Quando invece la pagina presenta un grado di complessità maggiore, per la presenza per esempio di immagini che attirano l’attenzione, allora è probabile che lo sguardo segua uno schema che ricorda la lettera “Z”, o quello che viene normalmente chiamato diagramma di Gutenberg. In questo caso, il modello suggerisce che la collocazione ideale del modulo e della call to action sia nell’area in basso sulla destra. Questi modelli d’osservazione descrivono come lo sguardo tende a muoversi in modo naturale, quando la pagina: 1. manca di gerarchia visiva; 2. quando cioè non ci sono elementi visivamente più importanti di altri; 3. e, di conseguenza, non si sa dove guardare. Nella Figura 14.1 possiamo osservare una pagina che non ha alcuna gerarchia visiva.1

Figura 14.1 – Una pagina senza gerarchia visiva. L’organizzazione di una gerarchia negli elementi che compongono una pagina permette invece di segnalare differenti livelli di importanza. Per fare ciò, dobbiamo utilizzare alcuni principi del design. In questo modo, possiamo: organizzare la pagine in modo da dare un ordine e suggerire un percorso visivo; controllare in una certa misura dove gli occhi si sposteranno nell’osservare una pagina web; fare sì che gli elementi più importanti appaiano anche visivamente come tali; porre sullo stesso livello gerarchico elementi collegati. Nella Figura 14.2 possiamo osservare una pagina con una chiara gerarchia visiva che guida lo sguardo: dal titolo e dal testo contenuto nel box con sfondo più scuro (azzurro, nella pagina originale) all’immagine, fino alla call to action (nuovamente con sfondo più scuro). Se il lettore ne avrà bisogno, potrà poi proseguire leggendo il testo posto sulla sinistra.

Figura 14.2 – Una pagina con gerarchia visiva. La Figura 14.3 esemplifica molto chiaramente come si differenzia una pagina con gerarchia visiva da una senza gerarchia.

Figura 14.3 – Pagina con una gerarchia visiva (sinistra) e pagina senza gerarchia visiva (destra).

I punti focali La teoria della gerarchia visiva ci insegna che per poter guidare lo sguardo di una persona che legge una pagina web dobbiamo creare delle aree d’interesse o, più precisamente, dei punti focali: elementi che contrastano con gli altri vicini e che, per questo motivo, attirano l’attenzione. Ogni differente punto focale deve avere uno specifico peso visivo, cioè una maggiore o minore capacità di attirare l’attenzione. Il punto focale dominante dovrebbe essere quello verso il quale si vorrebbe focalizzare per prima cosa lo sguardo del lettore: per esempio, il logo, il titolo della pagina, l’immagine di un prodotto ecc. È l’elemento dominante della pagina, che prevale su tutti gli altri, ed è quindi il primo elemento a essere osservato (Figura 14.4).

Figura 14.4 – Il quadrato più grande posto in alto sulla sinistra è il punto focale dominante. È in questa direzione che le persone guardano quando arrivano per la prima volta sulla pagina, perché è l’area o l’elemento con maggiore peso visivo e, quindi, con un maggiore potere di attrazione. Da qui, gli occhi seguiranno altri percorsi: si sposteranno verso gli altri punti focali presenti nella pagina. Il percorso che verrà seguito dipende dai pesi visivi attribuiti a ciascuno degli altri punti focali. L’immagine sulla sinistra della Figura 14.5 ci mostra una pagina che non ha alcun punto focale e che quindi si presenta come un unico blocco di testo da cui non si riesce a estrapolare alcuna informazione particolare. L’immagine sulla destra, al contrario, ha un punto focale dominante, che attira subito lo sguardo (la grande banda in alto) e altri con minore peso visivo (la barra sulla sinistra e la colonna di testo centrale suddivisa in vari blocchi di testo).

Figura 14.5 – Due differenti pagine: una senza punti focali (sinistra) e una con punti focali (destra). Chiunque capiti sulla pagina a sinistra avrà bisogno di impegnarsi molto per capire se è quella di cui ha bisogno. Se lo è, il visitatore non ha scelta: dovrà leggere ogni parola per trovare le parti di informazione a cui è interessato. La pagina sulla destra, al contrario, è molto più leggibile e non richiede un grande sforzo per capire se è quella giusta, conducendo rapidamente il lettore all’informazione che desidera. Chi progetta il sito web può immaginare, per ogni pagina, il percorso che vuole far seguire al visitatore e costruire di conseguenza delle zone con punti focali con decrescente peso visivo, in modo che lo sguardo si sposti da quello con maggiore peso fino a quello con minore peso, creando così una gerarchia visiva. Osservate la Figura 14.6. Se vi chiedessi di indicare l’ordine d’importanza dei quattro cerchi, credo che non avreste alcuna difficoltà.

Figura 14.6 – Esempio di gerarchia visiva. È facilmente intuibile che: 1. l’elemento più importante è il cerchio in alto sulla sinistra; 2. subito dopo, viene il cerchio posto in alto sulla destra; 3. poi, c’è il cerchio che sta sotto il secondo; 4. infine, abbiamo il piccolo cerchio in basso sulla sinistra. Questo è un esempio di gerarchia visiva che si ottiene quando si definisce l’ordine d’importanza (peso visivo) dei diversi elementi posti in una pagina, in modo che lo sguardo segua un preciso percorso. Un altro esempio: nella Figura 14.7 esiste una precisa gerarchia visiva.

Figura 14.7 – I quattro blocchi hanno un differente peso visivo. I quattro blocchi hanno un differente peso visivo, definito principalmente dal colore e, secondariamente, dalle dimensioni. Il blocco dominante è il primo, quello di colore nero posto in alto sulla sinistra. Quello con il secondo peso visivo è il rettangolo di colore grigio scuro, posizionato sulla destra in basso. Il terzo è quello di colore grigio medio collocato a sinistra in basso. Infine, l’elemento con minore peso visivo è rappresentato dal piccolo quadrato di colore grigio chiaro, posto in alto sulla destra. Guardando questa pagina, gli occhi del lettore si sposteranno tra i vari blocchi, passando dal quadrato nero al rettangolo grigio scuro, poi al rettangolo grigio medio fino al quadrato grigio chiaro: la gerarchia visiva rende chiari gli elementi principali e quelli secondari. Possiamo pensare al contenuto che dobbiamo comunicare come composto da differenti livelli di informazione, ognuno di importanza diversa. Elementi che sono sullo stesso livello hanno un peso visivo analogo (“Elements on the same layer have similar visual weight”); quelli che stanno su differenti livelli hanno diversi pesi visivi (“Elements on different layers have different visual weights”). Se il peso visivo di un livello aumenta, cresce anche l’importanza dell’informazione (“As the visual weight of a layer increases, the importance of the information increases”). Un livello del design comunicherà il messaggio più importante (“Elements that convey most important information”), un altro livello ne comunicherà uno secondario (“Elements that convey more important information”) e così via (Figura 14.8).2

Figura 14.8 – Elementi del design con peso visivo differente. Si può creare una gerarchia visiva regolando i livelli di design (i pesi visivi) degli elementi presenti nella pagina.

Esempi di gerarchia visiva Osservate l’homepage raffigurata nella Figura 14.9.

Figura 14.9 – Pagina web con una chiara gerarchia visiva. L’elemento con il maggiore peso visivo è rappresentato dal messaggio di benvenuto – ”Hello! What are you doing here?” – grazie alla posizione in primo piano e ai grandi caratteri neri utilizzati. Questi caratteri attirano immediatamente lo sguardo e lo dirigono, subito dopo, verso il menu di navigazione sulla destra, che ripete il nero come colore di fondo e ha un peso visivo minore del messaggio di benvenuto. Il fondo nero è anche utilizzato per guidare lo sguardo verso altri elementi contenuti nella pagina. Il fondo azzurro (grigio chiaro nella Figura) è usato invece per creare un contrasto e aiutare alcuni elementi a emergere successivamente. Anche la ripetizione di alcuni elementi – in questo caso, il colore nero – crea un flusso visivo. Infatti, quando gli occhi cadono su un elemento con certe caratteristiche, tendono a cercarne altri con caratteristiche simili nella pagina. Il colore è, in questo senso, un potente strumento. In Tea Factory (Figura 14.10), il titolo (“The perfect TEAS to keep you warm”) è il punto focale dominante. Poi, la figura sulla destra costituisce il secondo elemento dominante, mentre la call to action (“See our collection”), grazie al colore rosso (nell’originale), è il terzo elemento ad attrarre l’attenzione.

Figura 14.10 – Pagina web con un elemento dominante e due elementi secondari. Anche Daina Reed (Figura 14.11) ha tre diversi punti focali, con tre diversi pesi visivi: in alto, la banda viola (nera nella Figura) è l’elemento dominante, quello che attira subito lo sguardo; poi, abbiamo l’immagine e, infine, la colonna di testo sulla sinistra. In genere, si possono creare solo tre livelli gerarchici. La creazione di un quarto livello è molto più difficile perché il contrasto diminuisce: infatti, possiamo facilmente distinguere il peso visivo maggiore e quello minore, mentre facciamo più fatica a individuare quelli che stanno in mezzo, che tendono spesso a ricadere in un’area grigia dove sono visti con lo stesso grado di rilevanza. Per questo motivo, quando si utilizzano più di tre livelli gerarchici, occorre che siano chiaramente separati, come nella pagina della Figura 14.12.

Figura 14.11 – Pagina web con tre differenti punti focali.

Figura 14.12 – Pagina web con quattro livelli gerarchici ben separati. Come si può osservare, il titolo (“Benedict Cumbertach & Johnny Lee Miller”) e il grande blocco color nero costituiscono il punto d’entrata, il punto focale con il maggior peso visivo: qui si indirizza subito lo sguardo. Successivamente, l’attenzione viene attratta dal testo collocato più in basso, su sfondo bianco. Lo sguardo tenderà, poi, a spostarsi verso il terzo punto focale, rappresentato dal blocco grigio scuro in alto sulla destra. Infine, lo sguardo si sposterà verso l’ultimo punto focale, quello con minore peso visivo, costituito dal rettangolo grigio sulla sinistra. In questo caso, la presenza di quattro livelli gerarchici è stata ottenuta grazie all’uso sapiente dei colori, delle forme e della loro particolare disposizione. I differenti livelli devono essere molto diversi, con un forte contrasto che li separi: non si deve creare un continuum dal più alto al più basso livello di priorità, ma invece si devono progettare distinti livelli di gerarchia. Quando una pagina è priva di gerarchia e gli elementi hanno apparentemente uguale importanza, siamo costretti a seguire un processo di lettura molto lento e confuso per cercare di capire che cosa è importante e come il tutto è organizzato. Inoltre, senza un elemento che domina, i lettori dovranno impegnarsi per trovare il punto iniziale di lettura. Creando invece un elemento dominante, gli si darà modo di capire subito dove devono iniziare a guardare. Da lì si può creare un elemento subordinato, sul quale si poserà lo sguardo in un secondo momento. Burgers & Cocktails (Figura 14.13) esemplifica molto bene il caos visivo che si viene a creare quando non c’è una gerarchia visiva ben definita. Il lettore non sa che cosa osservare, dato che non esistono particolari elementi dominanti, ma tutti hanno all’incirca lo stesso peso visivo. Se tutti gli elementi hanno lo stesso peso visivo, niente risalta. Se niente risalta, niente sarà notato.

Figura 14.13 – Pagina web senza alcuna gerarchia visiva. La mancanza di gerarchia è uno degli errori più comuni che si commette quando si progetta un sito. Spesso si vuole che venga vista ogni cosa che viene collocata nella pagina; di conseguenza, si cerca di far emergere ogni elemento. Ma, in questo modo, il lettore non sa più dove guardare, dato che non esiste alcun ordine. Con la gerarchia visiva si crea invece un ordine, delle priorità, una sequenza di elementi, in modo che il visitatore sappia che cosa deve guardare per prima, che cosa per seconda, che cosa per terza e così via. Questo permette di presentare la call to action o il modulo proprio nel momento giusto, quando avrà il maggiore impatto.

Quali sono le caratteristiche che definiscono il peso visivo Per nostra natura, tendiamo a dare sempre un senso visivo ai contenuti che osserviamo. Per prima cosa notiamo le similitudini e le differenze, in modo da distinguere gli oggetti e dargli un senso. Per esempio, una differenza nel colore o nelle forme implica che ci sono due oggetti distinti (Figura 14.14).

Figura 14.14 – Differenze di colore e di forme possono creare contrasto visivo. Una volta che riusciamo a comprendere le relazioni che esistono tra gli elementi (differenze e similitudini), possiamo comprendere quello che stiamo vedendo e possiamo dargli un significato. Possiamo cioè capire quale elemento è il più importante, qual è il secondo elemento che dobbiamo osservare e così via. È quindi importante sapere come possiamo creare queste differenze tra gli elementi che compongono la pagina: cioè, quali sono le principali caratteristiche che possiamo usare per creare delle differenze tra gli elementi inseriti in una pagina. Solo giunti a questo punto possiamo sfruttarle, dosandole per dare più o meno peso visivo agli elementi che dobbiamo inserire nella pagina, secondo la gerarchia visiva che vogliamo costruire. Le principali caratteristiche che permettono di differenziare gli elementi sono: la dimensione: a parità di altre condizioni, una forma grande “pesa” più di una piccola; il contrasto tonale: un oggetto più scuro ha più peso visivo di uno più chiaro; e così, più elevato è il contrasto tra un oggetto e il suo sfondo, maggiore sarà il suo peso visivo (per esempio, colore chiaro in superficie e sfondo scuro); il colore: alcuni colori hanno più peso visivo perché si notano maggiormente (come il rosso, il blu e il verde), mentre altri hanno minor peso (come l’arancione e il giallo); lo spazio vuoto: elementi circondati da uno spazio vuoto hanno un maggiore peso visivo; la posizione (o prospettiva): le forme tendono ad avere più peso quanto più sono in primo piano. Il peso visivo di un elemento è definito dalla combinazione di queste caratteristiche e dalla loro maggiore o minore presenza. Così, per esempio, in una pagina, l’elemento con una maggiore dimensione potrebbe non essere molto rilevante se ha un colore con

minore peso, poco contrasto e non è posizionato in primo piano. Esaminiamo queste caratteristiche singolarmente.

La dimensione Osserviamo la Figura 14.15. Nella prima immagine, il quadrato più grande domina la scena, rispetto a quello più piccolo. La seconda figura, confrontata con la prima, evidenzia invece che più grande è la differenza tra le forme, maggiore sarà la predominanza della forma più grande. Entrambe le immagini mostrano che il quadrato più grande, dato che attira l’attenzione più di quello minore, ha un peso visivo maggiore.

Figura 14.15 – Il quadrato più grande ha un peso visivo maggiore. Possiamo guidare lo sguardo del lettore verso una zona specifica della pagina semplicemente evidenziando un contrasto tra le dimensioni di due aree differenti. Nella Figura 14.16 questo contrasto, questo “peso visivo” differente, è ben evidenziato: le forme più piccole perdono d’importanza e si affievoliscono sullo sfondo rispetto all’elemento più grande, che invece emerge in prima linea.

Figura 14.16 – Elementi di differenti dimensioni evidenziano pesi visivi differenti. Nella Figura 14.17 possiamo osservare meglio come la dimensione determini il peso visivo dei due elementi: lo sguardo si concentra infatti sulla sinistra, la zucca con le dimensioni più grandi domina la scena, rispetto alla parte destra, che è invece occupata dalla zucca più piccola. Si può quindi dire che la zucca di sinistra ha un peso visivo maggiore di quella di destra, perché è quella su cui, in un primo momento, si concentra lo sguardo.

Figura 14.17 – La zucca più grande ha il peso visivo maggiore e attira lo sguardo. Usare la dimensione come uno strumento gerarchico è un modo efficace per guidare lo sguardo verso una particolare area della pagina. È quindi importante collegare la dimensione con l’importanza. Gli elementi più grandi dovrebbero essere quelli più importanti; quelli più piccoli dovrebbero essere i meno importanti.

Il contrasto tonale Si possono mettere in evidenza degli elementi lavorando sul contrasto, cioè sul colore dell’elemento e il suo sfondo. Nella Figura 14.18, per esempio, l’immagine sulla sinistra ha un peso visivo maggiore di quella di destra, perché ha un più alto contrasto tra la zona davanti e quella sullo sfondo:

Figura 14.18 – La figura sulla sinistra ha un peso visivo maggiore perché ha un contrasto più elevato. Pertanto, in una pagina web, un elemento può emergere rispetto a un altro poiché gli si è dato un maggiore contrasto: per esempio, un blocco di testo scritto in caratteri bianchi si stacca di più su uno sfondo nero che su uno sfondo grigio.

Il colore Possiamo agire anche attraverso i colori per guidare lo sguardo del lettore. Infatti, il colore è una delle prime cose che le persone notano in una pagina (come abbiamo visto ne l capitolo 13). Il colore può essere usato per attirare l’attenzione attraverso il contrasto: per esempio, una piccola quantità di colore che contrasta con un colore dominante attira l’attenzione e dà enfasi a questo elemento. Si osservi la Figura 14.19, dove il colore nero del primo blocco in alto attira subito l’attenzione; poi, lo sguardo è attratto dai due elementi dai colori vivaci e molto contrastanti: “Try Demo” (color porpora nell’originale) e “Apply” (colore azzurro nell’originale). Infine, l’ultimo sguardo verrà dato al testo collocato nel blocco inferiore di colore crema (nell’originale). I colori più scuri tendono a essere visti prima di quelli più chiari, poiché hanno un peso visivo maggiore. Di conseguenza, c’è bisogno di una grande quantità di colore più chiaro per bilanciare un colore più scuro.

Figura 14.19 – Il colore di alcuni elementi guida la direzione dello sguardo del lettore.

Lo spazio vuoto Un elemento collocato all’interno di un grande spazio vuoto – come il piccolo cerchio al centro nella Figura 14.20 – acquisisce importanza e attrae con forza la nostra attenzione. Ha un peso visivo superiore rispetto a elementi che hanno poco o nessuno spazio vuoto attorno.

Figura 14.20 – Grazie allo spazio vuoto che lo circonda, il cerchio al centro ha il maggiore peso visivo. Per dare importanza a un elemento nella nostra pagina dobbiamo quindi circondarlo con dello spazio vuoto. Facendo un altro esempio: nella Figura 14.21 è rappresentata una pagina del sito di Microsoft dove lo spazio vuoto separa e mette in evidenza i due

elementi su cui si vuole attirare l’attenzione: il nome del prodotto, con il prezzo (quadrato scuro sulla sinistra), e l’immagine del prodotto, sulla destra.

Figura 14.21 – Gli elementi circondati da spazi vuoti acquisiscono importanza.

La prospettiva Possiamo far emergere un elemento rispetto a un altro, e quindi guidare lo sguardo nella sua direzione, variandone il grado di rilievo, cioè la loro prospettiva, come nella Figura 14.22.

Figura 14.22 – L’uso della prospettiva dà maggiore importanza agli alberi. In questa immagine, gli alberi hanno il maggiore peso visivo e dominano su tutti gli altri elementi; la casa e le colline costituiscono un elemento secondario; infine, le montagne hanno il peso visivo minore e, quindi, si vedono come ultimo elemento sullo sfondo.

Come dare preminenza a un elemento Utilizzando queste caratteristiche possiamo costruire gli elementi che compongono la pagina in modo da dare prevalenza a uno di essi.3 Osservate la Figura 14.23, La colonna sulla destra è la parte dominante della pagina grazie a un insieme di caratteristiche che la differenziano dal resto: è l’area più grande; si stacca per il colore dello sfondo (rosso nell’immagine originale); usa titoli grandi e con un colore che emerge significativamente (il bianco) sullo sfondo rosa (grigio scuro nella Figura).

Figura 14.23 – La colonna destra predomina sulle altre due. La colonna centrale è l’area che ha una preminenza di secondo livello, perché ha: dimensioni ridotte rispetto all’area collocata sulla destra; il colore chiaro dello sfondo; i caratteri più piccoli del testo. Infine, la colonna di sinistra è la parte che verrà vista per ultima, a causa della sua minore dimensione e al poco testo. Quindi, regolando la preminenza di un elemento, possiamo anche invertire il normale flusso dello sguardo del lettore che, come abbiamo visto nel capitolo 13, va da sinistra a destra. La diversa preminenza delle tre aree è illustrata nella Figura 14.24.

Figura 14.24 – Le tre aree con diversa preminenza.

Altri elementi che guidano lo sguardo Possiamo dirigere lo sguardo dei nostri lettori anche utilizzando alcuni accorgimenti. Ne suggerisco due che danno di solito ottimi risultati.

La direzione degli occhi della persona che è guardata Si consideri come la direzione dello sguardo della persona osservata possa influire sulla direzione degli occhi di chi la guarda. Nella Figura14.25 si può notare come si modifichi il centro dell’interesse del lettore quando cambia la direzione dello sguardo del bambino: se questo guarda direttamente verso il lettore, quest’ultimo sposta il suo sguardo verso di lui; ma se guarda in un’altra direzione – in questo caso verso destra – anche lo sguardo del lettore lo seguirà.4

Figura 14.25 – Le persone focalizzano l’attenzione dove lo sguardo del bambino è diretto. Osserviamo adesso la Figura 14.26 dove sono raffigurate due pubblicità che differiscono solamente per la diversa direzione dello sguardo della modella. Come si può notare, lo studio eseguito utilizzando la tecnica dell’eye-tracking evidenzia che gli occhi del lettore seguono la direzione verso cui puntano quelli della ragazza. Possiamo quindi utilizzare il suo sguardo per orientare quello del lettore verso il prodotto pubblicizzato.

Figura 14.26 – Gli occhi dei lettori seguono lo sguardo della modella. Allo stesso modo, possiamo utilizzare questo accorgimento per orientare lo sguardo del lettore verso il modulo e la call to action, come esemplificato molto bene nella Figura 14.27.

Figura 14.27 – Lo sguardo della modella orienta l’attenzione del lettore verso il modulo.

Le frecce

Lo sguardo dei lettori può essere guidato anche attraverso dei segnali visivi, come per esempio una freccia (Figura 14.28). Osservate la Figura 14.29: come si può notare, la freccia è un potente segnale che spinge in modo naturale a muovere lo sguardo verso il modulo, già ben evidenziato dalla posizione, dalle dimensioni e dal colore scuro dello sfondo. Diversi studi hanno verificato come il saggio di conversione migliori se il modulo o la call to action vengono evidenziati da una freccia. Per esempio, quando Monetate ha migliorato il flusso visivo – inserendo una freccia rossa che dirigeva lo sguardo dei lettori dal titolo della pagina all’immagine del prodotto e, quindi, al modulo di registrazione e alla call to action (Figura 14.30) – ha incrementato il saggio di conversione del 68,3%.5

Figura 14.28 – La freccia orienta l’attenzione del lettore verso la call to action.

Figura 14.29 – La freccia dirige lo sguardo del lettore verso il modulo.

Figura 14.30 – La pagina di Monetate con la freccia orientata verso il modulo.

Conclusioni Quando la pagina web è costruita in modo uniforme, senza particolari elementi d’attrazione, le persone seguono un naturale percorso visivo che, a seconda di come è strutturata la pagina, può essere descritto dal modello “F” o dal diagramma di Gutenberg. In questi casi, i modelli indicano dove posizionare le informazioni più importanti lungo il normale percorso visivo. Si può però guidare il percorso seguito dal lettore nell’esaminare la pagina utilizzando una gerarchia visiva, cioè dando ai diversi elementi che la compongono un diverso peso visivo: l’elemento su cui vogliamo che lo sguardo si soffermi subito deve avere il peso visivo maggiore; il secondo elemento, su cui si deve soffermare lo sguardo dopo aver osservato il primo, deve avere un peso visivo minore, ma più elevato del terzo elemento su cui si dovrà soffermare lo sguardo successivamente. La gerarchia visiva aiuta a organizzare le informazioni, a dargli un ordine e a evidenziare delle priorità. Quando inizia a osservare una pagina, per prima cosa il lettore la vede come un grande insieme di forme e colori, con elementi in primo piano che contrastano con lo sfondo (prima immagine della Figura 14.31). Poi inizia a cogliere alcuni elementi specifici, come le immagini, se sono presenti; infine, incomincia a esplorare la pagina, soffermandosi sul titolo e sul testo.6

Figura 14.31 – Come il lettore osserva la pagina nei primi momenti in cui la visualizza. Usando la dimensione, il colore, il contrasto tonale, gli spazi vuoti, la prospettiva e la preminenza, si può guidare lo sguardo degli utenti, modificando la loro tendenza a

esplorare le pagine seguendo il modello “F” o il diagramma di Gutenberg. In questo modo, organizzando la pagina secondo una gerarchia, si può aiutare l’utente a localizzare subito l’elemento da guardare per primo, come si può osservare nella Figura 14.32, dove il titolo attira subito lo sguardo.

Figura 14.32 – in questa pagina il titolo costituisce un punto focale fortissimo. Una volta evidenziato il primo punto focale, si può guidare il lettore verso l’elemento successivo. Nella Figura 14.33, l’immagine in alto a sinistra ha il maggiore peso visivo e, quindi, attira subito lo sguardo. Il contenuto collocato sulla destra ha un peso visivo

inferiore e, quindi, verrà guardato subito dopo l’immagine.

Figura 14.33 – Pagina costruita con due pesi visivi. Possiamo far fare al lettore anche un ulteriore passo, utilizzando un terzo livello gerarchico. Per esempio, nella Figura 14.34, le immagini collocate sulla sinistra – grazie alla forte attrazione esercitata dalla tazzina di caffè, che emerge tra tutte – attirano subito lo sguardo; poi, gli occhi si sposteranno probabilmente verso la colonna posta sulla destra, prima sull’immagine e successivamente sul testo.

Figura 14.34 – Pagina costruita con tre pesi visivi. Se una pagina è stata costruita senza pesi visivi, avremo delle difficoltà a esaminarla perché lo sguardo non trova particolari punti dove soffermarsi. L’homepage del sito TillyMass, per esempio, ha tutti gli elementi con lo stesso peso visivo; di conseguenza, si riesce a guardarla nel suo insieme, ma senza che nulla catturi l’attenzione in modo particolare (Figura 14.35). Si può anche notare che questa uniformità di peso conduce alla mancanza di un elemento dominante e, quindi, non esiste neanche un punto d’entrata.

Figura 14.35 – Pagina costruita senza alcuna gerarchia visiva. L’utilizzo della gerarchia visiva ci permette di organizzare le pagine nel modo migliore per la conversione. In particolare, dato che l’obiettivo delle nostre pagine è costituito spesso dalla call to action o dalla compilazione del modulo, le possiamo sviluppare favorendo il raggiungimento di questo obiettivo. Per esempio, nella Figura 14.36, i due omini che reggono il mappamondo al centro costituiscono il punto focale dominante, più del menu in alto sulla sinistra. Da qui, lo sguardo è attratto in modo naturale verso la call to action collocata alla loro destra, grazie al contrasto creato dal colore del box con lo sfondo, ai caratteri grandi e alla parola “FREE” scritta in rosso (nell’originale). In questo caso, la call to action è il naturale punto di arrivo dello sguardo del lettore.

Figura 14.36 – Pagina costruita per attrarre lo sguardo verso le due call to action. Oltre a utilizzare la gerarchia visiva, per guidare lo sguardo dei lettori, possiamo ricorrere anche ad alcuni segnali visivi. Per esempio, osservate la Figura 14.37.

Figura 14.37 – Una pagina con un chiaro percorso visivo. Il percorso visivo è stato costruito utilizzando dei segnali grafici, come la numerazione, la linea tratteggiata e le frecce. Il lettore viene guidato passo dopo passo verso l’ultima immagine, fino alla call to action “Send a GiftRocket”. Quindi costruite le vostre pagine in modo da disegnare un chiaro percorso che conduca il vostro lettore verso la call to action o il modulo di

conversione. Quando inizierete a progettare una pagina, comincerete da uno spazio completamente vuoto. Per prima cosa, dovrete pensare all’elemento più importante, quello che attrarrà subito lo sguardo. Dovrete ragionare su come dargli il peso visivo maggiore, su quali caratteristiche puntare per dargli il maggiore contrasto: dimensione, colore, spazio vuoto ecc. Dopo, dovrete posizionare il secondo elemento nella gerarchia, dandogli un peso visivo minore e magari inserendo qualche segnale visivo. E così via, tenendo conto della relazione che deve esistere tra i diversi elementi. I visitatori dovrebbero sempre capire immediatamente dove è posizionata la call to action o il modulo e lo sguardo dovrebbe essere guidato verso questi elementi. Il tutto dovrebbe fluire in maniera semplice, naturale, senza forzature e senza elementi che creino confusione. Devo fare un’osservazione finale. Chi sviluppa siti web, normalmente, non ha alcuna conoscenza di teoria del design e, quindi, difficilmente organizza le pagine del sito seguendo una gerarchia visiva. Se siete ricorsi a un’agenzia, probabilmente nessuno vi ha chiesto che cosa volevate far emergere in ogni pagina o qual era l’obiettivo finale. Lo stesso accadrà se dovete ancora fare questo passo. Bisognerebbe quindi quasi sempre ricorrere all’aiuto di qualche valido grafico, assicurandoci che, oltre a sapere progettare delle pagine visivamente attraenti, conosca anche questi importanti elementi del design.7

1. Questa, come le altre due successive figure, sono tratte da: Wroblewski L., “Comunicating with Visual Hierarchy”, static.lukew.com/pageheirarchy_lukew_03192008.pdf (2008). 2. Bradley S., “The Inverted Pyramid of Visual Design”, www.vanseodesign.com/web-design/inverted-pyramiddesign/ (27 dicembre 2010). 3. McClurg-Genevese J.D., “Principles and Elements of Design”, www.digitalweb.com/articles/principles_and_elements_of_design/ (17 aprile 2006). 4. Esperimento condotto su 106 persone: Breeze J., “You look where they look”, usableworld.com.au/2009/03/16/you-look-where-they-look/ (16 marzo 2009). 5. Borden P., “Website Testing Wins: Point Visitors in the Right Direction”, www.monetate.com/2012/06/websitetesting-wins-point-visitors-in-the-right-direction/ (giugno 2012). 6. Lynch P.J., Horton S., Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press, 2009. 7. Un ottimo libro, che riassume in modo chiaro la teoria del visual design, è quello di Bradley S., Design Fundamentals, Vanseo Design, 2013, vanseodesign.com.

CAPITOLO 15

DOVE COLLOCARE IL MODULO E LA CALL TO ACTION

Nel capitolo precedente abbiamo visto che si può guidare l’attenzione del lettore in modo da spingerlo a vedere gli elementi più importanti della pagina. In questo modo, lo possiamo quindi condurre verso l’obiettivo di conversione della pagina: il modulo e la call to action. A questo punto, il problema è: dove si deve posizionare il modulo o la call to action? “Sopra o sotto la piega”?

Sopra o sotto la piega? Above the fold (“sopra la piega”) è un’espressione utilizzata nel giornalismo per indicare la parte superiore della pagina di un giornale, cioè quella metà che appare quando questi vengono esposti nelle edicole (Figura 15.1).

Figura 15.1 – Giornali esposti in un’edicola.

Si ritiene che in questa parte immediatamente visibile si debbano collocare le notizie più interessanti, quelle che possono attrarre maggiormente l’attenzione dei potenziali compratori. Nel Web, con la stessa espressione ci si riferisce all’area dello schermo che si può vedere senza far scorrere la pagina (Figura 15.2).

Figura 15.2 – La parte above the fold è quella superiore che è visibile sullo schermo. Anche nel Web, almeno per alcuni anni, si è ritenuto che i contenuti più importanti dovessero essere collocati “sopra la piega”, perché gli utenti non erano abituati a far scorrere la pagina e, quindi, difficilmente avrebbero visto il contenuto collocato “sotto la piega”. Questa regola era stata resa popolare da Jakob Nielsen, guru dell’usabilità web, nel lontano 1995. All’epoca, Nielsen dimostrò, attraverso diversi test, che le persone non scorrevano quasi mai il contenuto di una pagina web e, quando lo facevano, lo facevano per poco. Successivamente, Nielsen ha modificato, almeno in parte, questa sua opinione. Nel

2006, scriveva:1 “Ora gli utenti si sono assuefatti a pagine lunghe, e sanno che a volte è necessario farle scorrere; e se un utente decide di esaminare a fondo una pagina, di solito è in grado di farla scorrere. Ciononostante, la resistenza allo scorrimento è ancora diffusa. Il problema non riguarda solo Internet: i giornali mettono le notizie principali ‘sopra la piega’ per assicurarsi che siano visibili anche prima che il lettore apra il giornale. Sul Web è ancora abbastanza comune veder abbandonare prematuramente una pagina perché non sembra interessante, quando invece le informazioni cercate sono ‘sotto la piega’ e sfuggono alla prima occhiata […]. Gli utenti tendono a non guardare a fondo pagina, a meno che non pensino di averne un buon motivo. La loro ipotesi è che ciò che si trova a fondo pagina, specie in pagine lunghe, sia poco importante, ragion per cui le pagine non vengono fatte scorrere.” Nel 2010, Nielsen condusse uno studio basato sulla tecnica dell’eye-tracking, coinvolgendo 21 persone. Il risultato fu molto chiaro: gli utenti passavano l’80% del tempo “sopra la piega” e solamente il 20% “sotto la piega”.2

Figura 15.3 – Le persone passano l’80% del tempo a vedere i contenuti posti “sopra la piega”.

Nielsen interpretò i risultati dello studio in questo modo: “È come se gli utenti arrivino alla pagina con un certo ammontare di carburante nei loro serbatoi. Man mano che essi vanno avanti, consumano la benzina e prima o poi la finiscono. Il quantitativo di benzina nel serbatoio varierà a seconda della motivazione di ogni utente e l’interesse verso lo specifico argomento di ogni pagina. Inoltre, la ‘benzina’ potrebbe evaporare se il contenuto in basso nella pagina fosse più o meno importante rispetto a quanto l’utente si aspettava. In ogni caso, l’attenzione dell’utente alla fine s’indebolisce e più avanti procede in basso nella pagina, minore è il tempo che generalmente passa su ogni ulteriore unità di informazione.” La sua conclusione è che: “Il contenuto che è più importante per l’utente o per chi progetta il sito dovrebbe essere collocato ‘sopra la piega’. Gli utenti guardano la parte della pagina ‘sotto la piega’, ma non tanto quanto fanno con la parte che sta sopra. Le persone guarderanno la parte posta nella parte inferiore della pagina se: a) il layout incoraggia l’esplorazione; b) l’informazione che sta ‘sopra la piega’ fa credere loro che il resto della pagina sia utile e importante.” La maggior parte degli esperti ha condiviso queste indicazioni. Pertanto, si ritiene che di solito le persone osservino: 1. in modo profondo la parte superiore della pagina; 2. in modo moderato la parte intermedia; 3. abbastanza superficialmente la parte inferiore. Si raccomanda quindi di inserire sempre le informazioni più importanti “sopra la piega”.

Dove collocare il modulo e la call to action A questo punto si potrebbe credere che i moduli e le call to action debbano essere sempre collocati sopra la piega. La cosa, però, non è così semplice. Gli studi eseguiti, infatti, non hanno sempre confermato che il saggio di conversione è maggiore quando il modulo o la call to action sono collocati in quella parte della pagina. Vediamo, per esempio, due esperimenti condotti di recente. Il primo è stato realizzato da MarketingExperiment.3 Sono state testate due pagine, una con la call to action collocata “sopra la piega” (Figura15.4) e una con la call to action posizionata “sotto la piega” (Figura 15.5).

Figura 15.4 – Pagina con la call to action collocata “sopra la piega”.

Figura 15.5 – Pagina con call to action collocata “sotto la piega”. Alla fine del test è risultato che la pagina che aveva riportato il più alto saggio di conversione (+20%) era la seconda, con la call to action collocata in basso, “sotto la piega”. Il secondo esperimento è stato condotto da Content Verve. 4 Anche in questo caso abbiamo due pagine sottoposte a test (Figura 15.6), con il modulo e la call to action (evidenziati dal cerchio) poste in alto (pagina a sinistra), “sopra la piega”, e in basso, “sotto la piega” (pagina a destra).

Figura 15.6 – La stessa pagina con collocazione del modulo e della call to action “sopra la piega” (a sinistra) e “sotto la piega” (a destra). Al termine del test è risultato che la seconda pagina, quella con il modulo e la call to action in basso, aveva fatto registrare il sorprendente risultato di +304% del saggio di conversione rispetto alla versione con il modulo e la call to action posizionate in alto. Sono stati fatti altri test che hanno evidenziato però che quando il modulo o la call to action sono posizionate “sopra la piega” fanno registrare un saggio di conversione più alto. Allora, questi due esempi che cosa ci dicono? Semplicemente che la piega è in realtà una falsa pista. Non ha alcuna connessione con i saggi di conversione. Vediamo un esempio che ci può forse chiarire le idee. Nelle Figure 15.7 e 15.8 abbiamo due pagine di registrazione del quotidiano Boston Globe. La prima pagina ha la call to action (Sign up, “Registrati”) posizionata in alto, “sopra la piega”. La seconda pagina ha la call to action posizionata in basso, “sotto la piega”. Quale pagina, secondo voi, ha fatto registrare il più alto saggio di conversione? La risposta, evidenziata dal test, è che non esiste una significativa differenza: alle

persone che leggono il Boston Globe non importa dove sia collocata la call to action. Quindi, si potrebbe sostenere che, nel caso dei moduli e delle call to action, la “piega” ha poca influenza, è solo un falso problema. In realtà, il problema è un altro. Visto che il modulo e, in particolare, la call to action sono un invito all’azione, per spingere qualcuno a fare qualcosa dobbiamo prima spiegargli bene quali vantaggi otterrà. Di conseguenza, il problema sta tutto nella motivazione dei lettori: quanto sono motivate le persone a cliccare il pulsante? Quanto trovano desiderabile quello che gli si sta offrendo nel momento in cui gli si chiede di cliccare?5 La realtà è che i moduli e le CTA poste “sotto la piega” non convertono meglio perché si trovano in quel punto, ma perché le persone sono più motivate ad agire dopo che hanno letto una maggiore quantità di testo. Dunque, le CTA devono sempre essere sotto la giusta quantità di testo. Se si chiede un impegno prima che si sia chiarito e specificato bene il valore dell’offerta, i risultati non potranno che essere negativi. Non si fa altro che incrementare l’ansietà delle persone, dato che la richiesta può sembrare invadente, aggressiva o sfacciata. In questo modo, a volte, una CTA collocata in una posizione elevata della pagina potrebbe formulare la richiesta d’impegno troppo presto, rispetto alla sequenza di pensiero della persona, spingendola a una reazione negativa. A volte potrebbe invece andare bene, perché l’offerta non ha bisogno di molte spiegazioni. Il vero problema è allora se la call to action è visibile quando la persona è convinta ad agire. Per esempio, la pagina di Lyft (Figura 15.9) è stata costruita ritenendo che l’applicazione da scaricare non avesse bisogno di particolari spiegazioni: bastano perciò solamente un titolo e un’immagine generica. Di conseguenza, il modulo può essere collocato subito, senza bisogno di altro testo.

Figura 15.7 – La pagina del Boston Globe con la call to action posizionata “sopra la piega”.

Figura 15.8 – La pagina del Boston Globe con la call to action posizionata “sotto la piega”.

Figura 15.9 – La pagina di Lyft con la call to action collocata “sopra la piega”. Se l’offerta fosse stata più complessa, il lettore avrebbe avuto la necessità di assimilare una significativa quantità d’informazione prima di prendere una decisione e, quindi, la call to action avrebbe dovuto essere collocata più in basso nella pagina, preceduta dal testo esplicativo. Secondo alcuni esperti, infatti, il collocamento della call to action dipende dalla complessità di quello che si sta offrendo: c’è cioè una stretta correlazione tra la complessità di quello che si offre e la collocazione ottimale della CTA (Figura 15.10).6

Figura 15.10 – La correlazione esistente tra complessità dell’offerta e collocazione della CTA. Quanto appena detto può essere probabilmente vero. Altri esperti, però, sostengono che si deve considerare l’esistenza di lettori con diverse esigenze. In pratica, queste ultime possono essere: quelle formulate dalle persone che, quando arrivano sulla pagina, già desiderano quello che gli si sta offrendo. In questo caso, le caratteristiche dell’offerta sono per loro irrilevanti: bisogna dare subito una call to action in modo da rispondere rapidamente alla loro volontà; quelle formulate dalle persone che sono incerte, ma che hanno solo bisogno di una piccola quantità di testo molto chiaro e persuasivo per convincerle a rispondere alla call to action; quelle formulate dalle persone che sono incerte e, se l’offerta richiede qualche spiegazione per poterne apprezzare il valore, hanno bisogno di una ragionevole quantità di testo che non deve solo essere chiaro, ma anche scritto molto bene in modo da mantenere vivo il loro interesse dal titolo fino alla call to action. La quantità di testo che occorre fornire dipende, quindi, da quanto le persone già conoscono l’offerta, da quanto è complicata, da quanto costa ecc. In alcuni casi possono andare bene anche 500 parole, in altri saranno necessarie più di 3000 parole.

Per soddisfare queste differenti esigenze, quando la pagina è abbastanza lunga, possiamo ricorrere a una soluzione che ci semplifica il problema: possiamo cioè posizionare la stessa call to action in diversi luoghi, lungo la pagina, come ha fatto Ben Hunt, noto web designer, per promuovere il suo ebook Save the Pixel (Figura 15.11).

Figura 15.11 – Pagina con la stessa call to action collocata in differenti posizioni. Un altro eccellente esempio è quello realizzato dalla società H. Bloom, che ha creato delle mini landing page all’interno della stessa pagina, ripetendo la stessa call to action per ben quattro volte (Figura 15.12).

Figura 15.12 – Pagina del sito H. Bloom con la stessa CTA collocata in 4 differenti posizioni. Quindi, quando la pagina è abbastanza lunga, invece di collocare solo una call to action alla sua conclusione, può essere utile collocarla in luoghi differenti lungo la pagina, per venire incontro a possibili diverse esigenze dei lettori.

Come far capire che c’è del contenuto “sotto la piega” Nei casi in cui è necessario collocare il modulo o la call to action in basso nella pagina, “sotto la piega”, occorre che il lettore sia consapevole della lunghezza della pagina. Infatti, la schermata che appare sui nostri computer evidenzia solo una parte di una lunga pagina. Per vedere l’intera pagina, occorre farla scorrere. Per esempio, nella pagina rappresentata nella Figura 15.13, se non fa scorrere la pagina, il lettore non sa che continua in basso, dato che prima della piega c’è dello spazio bianco. Per lui, la pagina potrebbe finire qui.

Figura 15.13 – Pagina che non fa capire che prosegue oltre la piega. Per evitare che si crei questo falso limite inferiore, bisogna organizzare bene la pagina, stando molto attenti a come si utilizza lo spazio bianco. Riprendiamo la pagina del Boston Globe con la call to action in basso. Rispetto all’originale, ho inserito una barra orizzontale (Figura 15.14). Se la piega si trovasse dove ho posizionato la barra – e quindi sullo schermo apparisse solo la parte che sta sopra di essa – il lettore non capirebbe che la pagina continua “sotto la piega”: infatti, per lui, lo spazio bianco è un indizio che la pagina è terminata.

Figura 15.14 – Se la piega corrisponde alla barra, il lettore non capirebbe che la pagina prosegue. La stessa cosa accade se collochiamo una linea orizzontale o una barra “sopra la piega”, perché anche in questo modo si ottiene un falso limite inferiore. Un modo per rendere evidente che la pagina continua anche “sotto la piega” si ottiene mettendo uno sfondo – sopra e ai lati – che contrasta con il contenuto del sito, come si può vedere nell’esempio della Figura 15.15.

Figura 15.15 – Pagina con lo sfondo che contrasta con il contenuto. In questo caso, chi guarda la pagina si aspetta che lo sfondo sia presente anche in basso e, non vedendolo, intuisce che la pagina prosegue oltre. Oppure, “sopra la piega”, si può aggiungere un elemento grafico, in una posizione che sia facile da notare. Per esempio, nella Figura 15.16 le due frecce indicano che la pagina continua.

Figura 15.16 – Le due frecce in basso indicano che la pagina continua oltre la piega.

“Sopra la piega” non è uguale per tutti i visitatori Fin qui, forse, le cose possono sembrare abbastanza semplici. Purtroppo, però, si

complicano un po’ se consideriamo che la parte della pagina web visibile sullo schermo non è uguale per tutti gli utenti. Infatti, la parte visibile è influenzata da differenti fattori: il browser utilizzato (Internet Explorer, Safari, Chrome, Firefox ecc.) e la sua versione; il sistema operativo (Mac, Windows, Linux, iOS, Android ecc.); la risoluzione dello schermo con cui è stato impostato il monitor (1366×768, 1280×800, 1024×800 ecc.). Quindi, il vostro sito web può apparire in modo differente a seconda di tutti questi fattori, e, di conseguenza, varierà la parte visibile, quella che sta “sopra la piega”. “Come possiamo allora sapere come i nostri visitatori visualizzeranno le nostre pagine?”. “E come possiamo sapere dove cade la ‘piega’?”. Per rispondere a queste domande, se il nostro sito è già operativo, possiamo per prima cosa utilizzare Google Analytics. Infatti, tra i risultati mostrati, questo strumento ci indica – cliccando nella dashboard in “browser e sistemi operativi” – quali browser, sistemi operativi e risoluzioni delle schermo hanno utilizzato i nostri visitatori. Possiamo, quindi, conoscere quali sono le impostazioni più utilizzate e, quindi, quelle da prendere in considerazione. A questo punto, possiamo ricorrere a uno dei tanti strumenti presenti su Internet, gratuiti o a basso costo, che verificano la compatibilità del sito tra i diversi browser, sistemi operativi e risoluzioni dello schermo.7 In genere, funzionano in questo modo: si deve scrivere l’indirizzo della pagina da analizzare (URL) e quindi selezionare quali browser, sistemi operativi e risoluzioni si vogliono esaminare; subito dopo, lo strumento scelto visualizzerà come appare la pagina che è stata indicata secondo i parametri impostati (Figura 15.17).

Figura 15.17 – Esempio di una schermata che visualizza come una pagina appare con diverse risoluzioni del schermo. A questo punto, sarà possibile decidere se la pagina sottoposta ad analisi va bene oppure ha bisogno di essere modificata.

Conclusioni La posizione in cui collocare il modulo o la call to action ha una grande importanza nella costruzione di una pagina che converta. Fino ad alcuni anni fa si credeva che il posto migliore fosse “sopra la piega”. Alcuni studi hanno però dimostrato che questo è un falso problema. Infatti, l’importante è fornire al visitatore la quantità di contenuto di cui ha bisogno. Se è necessario fornire una quantità di contenuto significativa, si può prolungare la pagina, collocando il modulo o la call to action “sotto la piega”. L’importante è tenere desta l’attenzione del visitatore fornendo del contenuto importante, pertinente e coinvolgente nella parte superiore della pagina. Comunque, in molti casi, non è necessario fornire molto contenuto e, pertanto, la collocazione “sopra la piega” è quella migliore. L’importate, in questo caso, è tenere bene in mente il significato della “piega”. Infatti, come ha scritto recentemente Amy Schade:8 “La piega è un concetto. La piega è importante poiché ciò che appare in alto nella pagina ha importanza. Gli utenti fanno scorrere la pagina verso il basso,

ma solamente se quello che sta ‘sopra la piega’ è interessante […]. Se andiamo su una pagina e vediamo che ha del contenuto inutile e irrilevante, non la faremo scorrere in basso nella speranza di trovare qualcosa di utile 5 schermate sotto. Quello che troviamo in alto nella pagina ci aiuta a decidere se continuare a far scorrere la pagina o navigare in un’altra pagina […]. Gli utenti fanno scorrere la pagina solo se c’è un motivo per farlo.” Infine, non bisogna dimenticare quanto sostenuto nei capitoli precedenti: dovete costruite il percorso visivo del lettore in modo che fluisca verso il modulo e verso la call to action. Quindi, dovete pensare a due cose: 1. se collocare il modulo o la call to action “sopra” o “sotto la piega”; 2. come costruire il percorso visivo del lettore (gerarchia visiva).

1. Nielsen J., Loranger H., Web Usability 2.0, Apogeo, Milano 2010, vol. 1, pag. 102, e vol. 2, pp. 100-101. 2. Nielsen J., “Scrolling and Attention”, www.nngroup.com/articles/scrolling-and-attention/ (22 marzo 2010). 3. Burstein D., “5 Common Call-to-action Errors”, www.marketingexperiments.com/blog/marketing-insights/call-toaction-errors.html (25 giugno 2012). 4. Aagaard M., “10 Call-to-Action Case Studies w/takeaways & Examples from Real Button Tests”, contentverve.com/10-call-to-action-case-studies-examples-from-button-tests/ (25 marzo 2013). 5. Tennet B., “Why ‘The Fold’ Is A Myth - And Where To Actually Put Your Calls To Action”, blog.kissmetrics.com/why-the-fold-is-a-myth/ (13 settembre 2012). 6. Aagaard M., “10 Call-to-Action Case Studies w/Takeaways & Examples from Real Button Test”, contentverve.com/10-call-to-action-case-studies-examples-from-button-tests/ (25 marzo 2013). 7. Una buona selezione di strumenti si può trovare a questo indirizzo: blog.tradetrackeritaly.it/advertiser/13-serviziper-testare-la-compatibilita-cross-browsing-del-proprio-sito/. Un ottimo strumento per verificare la compatibilità tra diversi dispositivi (computer, cellulari e tablet) e diverse risoluzioni dello schermo (ma non per differenti browser) è Screenfly (quirktools.com/screenfly/). Per verificare la compatibilità tra diversi dispositivi e diversi browser, un ottimo strumento è BrowserStack (www.browserstack.com). 8. Schade A., “The Fold Manifesto: Why the Page Fold Still Matters”, www.nngroup.com/articles/page-foldmanifesto/ (01 febbraio 2015).

CAPITOLO 16

SCRIVERE SUL WEB: IL TESTO DELLA PAGINA

Il contenuto che deve riempire ogni pagina del sito ha bisogno di essere ottimizzato: 1. per i motori di ricerca, con l’obiettivo di raggiungere le prime posizioni nei loro risultati, come abbiamo visto nella prima parte di questo libro; 2. per i visitatori, in modo da spingerli all’azione (conversione). Prima di scrivere il contenuto delle diverse pagine, occorre quindi conoscere quali parole chiave dovrebbero contenere: l’argomento di ogni pagina è, infatti, definito dalle parole chiave che vengono utilizzate. Per prima cosa, dobbiamo dunque ragionare in un’ottica SEO, tenendo conto che le parole chiave dovranno poi essere inserite nelle posizioni utili a tale fine. Dopo aver individuato le parole chiave e, quindi, definito meglio l’argomento delle pagine, possiamo concentrarci sul testo delle pagine.

Testi brevi e concisi Come abbiamo visto, scrivere per il Web è completamente diverso dal farlo per la carta stampata. Infatti le persone: hanno poco tempo e sono impazienti; non desiderano subito leggere tutta la pagina ma solo esplorarla, scorrerla in fretta, per capire se corrisponde a quello che stanno cercando; di conseguenza, si soffermano sui titoli, i sottotitoli, gli elenchi puntati, le parole in grassetto, e così via. In genere, si dà più importanza ai primi paragrafi e molto meno a quelli che seguono. Se qualcosa attrae l’attenzione, se corrisponde a quello che si sta cercando, ci si immerge nella lettura. Quindi, prima si esplora velocemente la pagina e, poi, se ne vale la pena, la si legge in parte o completamente. Per questo motivo, dato che la prima azione che normalmente compie un utente è quella di scorrere la pagina velocemente, è meglio concentrare il testo, riducendo la sua lunghezza (per quanto è possibile): un testo lungo spaventa, è molto più difficile da

esplorare, richiede più tempo e, quindi, occorre: escludere dettagli non necessari; evitare di ripetere gli stessi concetti; eliminare frasi che non aggiungono niente a quello che è già stato detto. Per scremare il testo di tutto ciò che non è necessario, è bene riscriverlo più volte, in modo da eliminare aggettivi, parole, frasi inutili e abbreviare i singoli paragrafi.

La piramide invertita Per scrivere sul Web, ciò che ci è stato insegnato a scuola e quello che si fa nei testi accademici non va bene. Infatti, in questi casi, s’inizia con: 1. un’introduzione, che è spesso la parte meno importante; 2. si prosegue con una dettagliata spiegazione; 3. si finisce con le conclusioni, che sono spesso la parte più importante del testo. È il metodo che viene di solito rappresentato con una piramide (Figura 16.1).1

Figura 16.1 – Metodo di scrittura a “piramide” insegnato a scuola e utilizzato nei libri accademici. Come si può facilmente capire, è un metodo che richiede molto impegno da parte del lettore, dato che presume una lettura costante dall’inizio fino al termine del contenuto. Non va certamente bene per il lettore impaziente che naviga sul Web: se usassimo

questo stile, probabilmente i visitatori lascerebbero la pagina prima di arrivare alle informazioni più importanti contenute nelle conclusioni. Il lettore online ha, invece, bisogno di trovare subito l’informazione più importante, nei primi paragrafi, altrimenti si rischia di perderlo. Bisogna, quindi, invertire questa struttura e utilizzare il metodo usato nel giornalismo e che prende il nome di piramide invertita (inverted pyramid), o capovolta, perché inverte il metodo tradizionale di scrittura (Figura 16.2).

Figura 16.2 – Metodo di scrittura a “piramide invertita” da utilizzare nel Web. La scrittura a piramide capovolta è rappresentata visivamente da un triangolo, così strutturato: la base posta in alto rappresenta il luogo dove si trovano le conclusioni e le informazioni più importanti; il centro del triangolo presenta le informazioni aggiuntive; la parte più in basso fornisce le informazioni meno importanti, quelle che si potrebbero anche escludere, senza perdere nulla di rilevante. L’importanza dell’informazione decresce quindi con lo scorrere del testo. Di conseguenza, il lettore può: arrivare immediatamente all’informazione principale, che è contenuta nei primi paragrafi del testo; decidere subito se il testo vale la pena di essere letto, senza perdere tempo; f interrompere la lettura in qualsiasi punto dell’articolo, senza perdere il

messaggio principale. Chi va avanti nel testo ottiene più informazioni, ma chiunque ha letto le prime frasi ha ricevuto l’idea principale che si vuole comunicare: gli è stata infatti fornita l’informazione principale, una panoramica del contenuto e il contesto nel quale interpretare le successive informazioni. Mentre nel modello accademico si va dall’informazione meno importante a quella più importante, nel modello a “piramide invertita” si segue il percorso opposto: dalle informazioni più importanti a quelle meno importanti (Figura 16.3).

Figura 16.3 – Nel metodo a “piramide invertita” le principali informazioni vanno scritte subito. Quindi, iniziate il testo di ogni pagina del vostro sito fornendo subito le informazioni più importanti. Un consiglio: di solito, è più facile scrivere le conclusioni al termine del testo, dopo una completa argomentazione. Se scrivete in questo modo, quando avete terminato di scrivere, dovete tagliare le conclusioni e inserirle all’inizio, reimpostando il testo.

Come scrivere Ecco alcuni consigli per favorire la scansione della pagina e aumentare il saggio di conversione.2

Sottotitoli Aggiungete un sottotitolo ogni 2 o 3 paragrafi. Questo accorgimento aiuta a spezzare il testo, rendendolo più facile da leggere. Inoltre, i sottotitoli indicano l’argomento del

testo sottostante, permettendo ai lettori di decidere se leggere il contenuto della sezione. Senza il sottotitolo, il lettore deve esaminare il testo o esplorarlo, perdendo il beneficio della divisione in sezioni. Scriveteli in grassetto e con un font leggermente più grande del testo. Ricordate: la maggior parte dei lettori esplora il testo, e i sottotitoli li aiutano a trovare i punti principali del contenuto della pagina. I sottotitoli, inoltre, aiutano l’autore a organizzare il discorso. Se, per esempio, non riuscite ad attribuire un sottotitolo a una sezione, probabilmente questa non dice nulla di significativo e, quindi, potrebbe essere eliminata. Oppure, potrebbe contenere troppi argomenti da non permettere di individuare quello principale: in questo caso, sarebbe meglio suddividere il testo in più sezioni. Ricordate: se il testo è ben strutturato, dovrebbe essere molto agevole dargli delle titolazioni efficaci.

Paragrafi Sono rappresentati da una porzione di testo racchiusa tra due a capo e spesso delimitata, sopra e sotto, da una riga vuota. Di solito, dovrebbero costituire un’unità informativa e segnalare un pur minimo cambiamento di argomento. I paragrafi consentono di spezzettare un lungo blocco di testo, di solito poco leggibile, in piccole sezioni molto più leggibili. Costruite dei paragrafi che siano facili da scorrere ed esplorare. Per questo motivo, evitate di scriverli troppo lunghi perché: richiedono troppo tempo per essere esaminati anche superficialmente; rallentano la velocità di lettura; rischiano di far perdere il punto principale del paragrafo. L’ideale sono i paragrafi contenenti un solo importante concetto e costituiti da un massimo di tre frasi e da un massimo di tre righe: permettono di essere facilmente esplorati e, se non attraggono l’interesse, possono facilmente essere saltati, permettendo di passare al paragrafo successivo. Se i paragrafi si estendono per molte righe (sei, sette, …) devono essere divisi in altri più brevi. Tenete in considerazione che la percentuale di testo che viene letta aumenta sensibilmente se i paragrafi sono brevi.3 Inoltre, collocate subito, all’inizio del paragrafo, l’idea principale, in modo da facilitare la decisione del lettore di leggerlo o saltarlo. Certo, all’inizio può creare qualche problema: non è infatti una modalità a cui siamo abituati, dato che, quando si legge un giornale o un libro, è normale che lo scrittore non arrivi subito al punto principale, ma impieghi anche tre o quattro frasi. Nel Web, questo non può accadere, perché i lettori sono più impazienti e perché spesso leggono solo la prima frase del

paragrafo. Questa modalità di scrittura rende anche più facile comprendere il resto del paragrafo, perché il lettore coglie subito qual è la principale idea che si sta esponendo, senza doverla scoprire da qualche altra parte al suo interno. Ogni paragrafo dovrebbe essere separato da una linea vuota. La pagina che vedete nella Figura16.4 rappresenta un buon esempio di utilizzo di paragrafi brevi e ben separati da uno spazio vuoto.

Figura 16.4 – Pagina con paragrafi brevi separati da spazio bianco (Fonte: “Eyetracking III Study”, Poynter Institute). Al contrario, quella rappresentata nella Figura 16.5 è un esempio che non deve essere imitato.

Figura 16.5 – Pagina con lunghi paragrafi (Fonte: “Eyetracking III Study”, Poynter Institute).

Frasi Come i paragrafi, anche le frasi devono essere brevi, perché sono più facili da esplorare e da leggere. Le prime parole di una frase dovrebbero dare una prima favorevole impressione, in modo da incoraggiare il lettore a continuare la lettura. Vediamo un esempio:4 “Secondo il rapporto della National Assessment of Adult Literacy (NAAL), pubblicato nel 2006 dal Dipartimento dell’Educazione, 30 milioni di persone adulte hanno solo elementari nozioni di lettura.” La principale idea espressa in questa frase è che 30 milioni di persone non sanno leggere bene; ogni altra cosa è secondaria. Pertanto, l’idea principale (le parole più importanti) dovrebbe essere collocate all’inizio della frase: “Trenta milioni di persone adulte hanno solo elementari nozioni di lettura, secondo il rapporto […].”

Parole e frasi in grassetto

Una parola scritta in grassetto salta subito agli occhi permettendo a chi sta scorrendo il testo di notarla immediatamente. Questo è ciò che vuole il lettore online: catturare i punti più importanti senza dover per forza leggere tutto. Quindi, attraverso il grassetto, possiamo decidere quali devono essere questi punti importanti che attirano l’attenzione. Inoltre, se scriviamo le parole chiave in grassetto favoriamo i nostri sforzi per la SEO. Sconsiglio invece di utilizzare il corsivo – si vede poco e, quindi, risulta molto debole – le parole sottolineate – si confondono con i link – e le parole scritte in maiuscolo, perché sono difficili da leggere. Se, invece, si vuole utilizzare un colore per enfatizzare, bisogna usarne uno solo, poiché le persone non capirebbero come codificarli se fossero di più. Non bisogna comunque eccedere con il grassetto, altrimenti si ottiene l’effetto opposto e le parole non risalterebbero più nel testo normale, ma creerebbero solo confusione. Si consiglia, quindi, di: non mettere in grassetto un’intera frase, a meno che non si voglia evidenziare un’espressione importante; usare, al massimo, espressioni composte da due o tre parole; non utilizzare più di due espressioni in grassetto per paragrafo; non utilizzare espressioni in grassetto in tutti i paragrafi. Inoltre, non mettete in grassetto due volte la stessa parola.

Elenchi puntati Ogni elenco contenente almeno tre voci dovrebbe essere trasformato in un elenco puntato o numerato perché: attira lo sguardo; facilita lo scorrimento del testo, permettendo di soffermarsi rapidamente sulle voci che sembrano più interessanti; spezza l’uniformità della pagina; rende più leggibile il testo; fa risparmiare tempo al lettore. Bisogna cercare di non scrivere delle voci troppo lunghe e, possibilmente, organizzarle in modo simmetrico, cioè dovrebbero avere tutte una lunghezza simile: una sola riga, o due sole righe ecc. Se c’è una voce molto lunga, si dovrebbe metterla alla fine dell’elenco. In questo modo, il tutto risulta più facile da leggere. Inoltre, è meglio iniziare ogni voce allo stesso modo. Per esempio, se la prima voce inizia con un verbo, anche tutte le altre devono iniziare con un verbo; se inizia con un sostantivo, tutte le altre devono iniziare con un sostantivo e così via. Evitate comunque di costruire elenchi troppo lunghi, superiori alle cinque voci.

Frasi attive Leggete queste due frasi: 1. il visitatore vede per prima cosa il titolo della pagina; 2. il titolo della pagina è visto per prima cosa dal visitatore. La prima frase è scritta nella forma “attiva” con: 1. il soggetto che compie l’azione; 2. il verbo che indica quello che fa il soggetto; 3. il complemento indica l’oggetto dell’azione suggerita dal verbo. La seconda frase, che è scritta nella forma “passiva”, capovolge questo chiaro ordine: 1. il complemento oggetto diventa il soggetto della frase; 2. il verbo indica l’azione subita dal soggetto; 3. il soggetto che compie l’azione diventa il complemento d’agente. Questa seconda frase rende tutto più complicato. Infatti, spesso, per comprendere il significato delle frasi “passive”, le trasformiamo in “attive”. Però, questo processo, di solito svolto in maniera automatica e senza esserne consapevoli, richiede circa il 25% di tempo in più per comprendere la frase. E questo non va bene al nostro visitatore online, che esplora velocemente il testo della pagina, ha poco tempo e vorrebbe capire immediatamente quello su cui si sofferma. Quindi, quando si scrivono le pagine del sito, evitate di usare le frasi in forma passiva: può andare bene quando si legge un testo sulla carta, ma non online. Ricordate dunque che, nelle frasi attive, il soggetto deve sempre compiere l’azione, non subirla.

Parole chiave Sappiamo già che, per motivi legati alla SEO, dobbiamo inserire le nostre parole chiave all’interno del testo. C’è però un altro motivo per procedere in questo modo: quando le persone esplorano il testo, si convinceranno più facilmente della pertinenza della pagina con ciò che stanno cercando se vi trovano le parole chiave utilizzate nei motori di ricerca. Per questo motivo, saranno molto aiutate se troveranno facilmente le stesse parole chiave nel contenuto della pagina. Quindi, senza esagerare, evidenziate le parole chiave in grassetto (che, ripeto, è cosa utile anche per la SEO).

Conclusioni Sul Web si legge in maniera differente da come si fa sulla carta. Di conseguenza, anche scrivere sul Web è differente da come lo si fa sulla carta. Dato che sul Web si esplora il testo, cercando di cogliere rapidamente degli indizi sul contenuto della pagina, il

testo deve: essere conciso e non troppo lungo; raccogliere le informazioni più importanti all’inizio, nei primi paragrafi, dato che sono i primi su cui si sofferma l’attenzione e che possono spingere a continuare la lettura; essere composto da brevi paragrafi; esprimere l’idea principale all’inizio del paragrafo; essere diviso in sezioni con dei sottotitoli; avere delle frasi scritte in grassetto; avere, quando possibile, degli elenchi puntati; essere espresso nella forma attiva e non in quella passiva; contenere alcune volte le parole chiave.

1. University of Warwick IT Services, “Write for the web”, www2.warwick.ac.uk/services/its/servicessupport/web/sitebuilder2/goodsites/content/. 2. Una chiara e completa trattazione di questi argomenti si può trovare nel vecchio ma sempre attuale libro di Price J., Price L., Hot Text - Web writing that works, New Riders, 2002. 3. Poynter Institute, “Eyetracking III Study”, www.poynter.org/extra/eyetrack2004/articlepages.htm (2004). 4. Handley A., Everybody writes, John Wiley & Sons, 2014, pag. 25.

CAPITOLO 17

COME COSTRUIRE DEI TITOLI CHE CONVERTONO

I titoli attirano subito l’attenzione Quando le persone arrivano su una pagina, qual è il primo elemento che le motiva a dare almeno un’occhiata al testo? Il titolo (l’headline). Il titolo è infatti l’elemento su cui si concentra immediatamente lo sguardo appena si arriva su una pagina web. Questo accade anche se ci sono delle immagini non troppo grandi, come confermato da alcuni studi condotti dal Poynter Institute con la tecnica dell’eye-tracking.1 Secondo questi studi, i titoli sono la prima cosa che viene vista, prima delle immagini e del menu di navigazione: “I lettori online vedono prima il testo – titoli, istruzioni, didascalie. Poi, si rivolgono verso foto ed elementi grafici […]. I titoli più importanti attirano lo sguardo appena si entra nella pagina, specialmente quando sono in alto sulla sinistra.” Qualche tempo prima, J. Nielsen aveva condotto uno studio che aveva evidenziato che: “Solo il 22% delle prime tre fissazioni degli utenti avviene sugli elementi grafici; il 78% si concentra invece sul testo. In genere, gli utenti sono attratti per prima cosa dai titoli, dai riassunti dell’articolo e dalle didascalie.”2 Questi risultati possono sembrare sorprendenti se si pensa che, nel Web, foto ed elementi grafici sono spesso inseriti proprio con l’obiettivo di attirare l’attenzione. Però, gli esperti sono ormai quasi tutti concordi sulla prevalenza dei titoli sulle foto. Come ha evidenziato Sharon Owen:3 “I titoli prevalgono sulle immagini […]. Gli studi eseguiti con la tecnica dell’eye-tracking hanno dimostrato che i titoli attirano subito l’attenzione in una pagina web. Molti visitatori scorrono la pagina, evitando gli elementi

grafici, e leggono le prime parole del titolo per vedere se corrisponde a quello che stanno cercando.” Molto probabilmente, quando titolo e immagine compaiono insieme si presta più attenzione al primo poiché, per l’esperienza accumulata nel tempo, ormai sappiamo bene che questo contiene il contesto e i dettagli di una storia, a differenza dell’altra: se si stanno ricercando delle informazioni, un titolo ha più significato rispetto a un’immagine. Pertanto, di solito, è normale dare subito più attenzione al titolo. Un’immagine può comunque rinforzare il significato del titolo, facendo appello alle emozioni del lettore. Entrambe possono dunque essere importanti, ma il titolo è l’elemento più importante.

Dove posizionare titolo e immagine Dal momento che il titolo ha un significato ben preciso, e attrae maggiormente l’attenzione, dovrebbe essere collocato quasi sempre prima dell’immagine (quando c’è). In questo modo, il lettore può immediatamente osservarlo senza sprecare inutilmente del tempo, cosa che invece avviene se l’immagine è posta prima. Bisogna però evitare di dare più peso visivo all’immagine rispetto al titolo, perché si rischia di indebolire la predominanza del secondo. Infatti, quando si usano immagini troppo grandi, i lettori possono distrarsi molto in fretta, perdendo di vista il loro obiettivo (avere l’informazione di cui hanno bisogno) .

Alcune regole per scrivere titoli efficaci Il titolo è l’elemento che viene letto sia per primo sia di più: in media, lo legge l’80% delle persone che osserva una pagina web, mentre solo il 20% si concentra anche sul testo.4 Di conseguenza, è vitale scriverlo molto bene, in modo da trasmettere un messaggio che spinga il lettore a leggere anche il resto del contenuto (e andare oltre la media del 20%). Senza un buon titolo, che attrae l’attenzione e che attira l’interesse, nessuno leggerà il testo della pagina. E se nessuno leggerà il testo, nessuno cliccherà sulla call to action. Si può aver scritto il testo più bello e completo ma, se il titolo non attrae, pochi lo leggeranno. Per questo motivo, il titolo può essere considerato l’elemento fondamentale per far arrivare il lettore al modulo e alla call to action. Che cosa dobbiamo fare allora per costruire dei titoli che attraggano l’attenzione del lettore e lo spingano a leggere il testo della pagina? Dobbiamo seguire alcune semplici regole. Vediamo le principali.

Il formato grafico Il titolo ha poco tempo per attirare lo sguardo del lettore: non più di un secondo. Per questo motivo, deve avere un carattere molto più grande del testo, in modo da attirare l’attenzione del lettore prima di ogni altra cosa presente nella pagina (Figura 17.1).

Figura 17.1 – Il titolo deve essere scritto con un carattere molto più grande del testo. Dovrebbe inoltre esserci un buon contrasto tra lo sfondo della pagina e il colore del titolo. Per esempio, se lo sfondo è scuro, un titolo molto chiaro o, al limite, bianco, avrà un alto contrasto e attirerà maggiormente l’attenzione (Figura 17.2).

Figura 17.2 – Il titolo deve avere un buon contrasto con lo sfondo della pagina. Occorre anche che ci sia dello spazio vuoto attorno al titolo, per trasmettere importanza e priorità. Questo è soprattutto vero quando ci sono troppi elementi intorno che concorrono ad attirare la nostra attenzione, diminuendone l’impatto (come si può osservare nella Figura 17.3, pur in presenza di un titolo con grandi caratteri).

Figura 17.3 – La mancanza di uno spazio bianco intorno al titolo ne diminuisce l’impatto visivo. Quando, invece, il titolo è separato dal resto, e domina un’ampia porzione di spazio, ottiene più importanza (Figura 17.4).

Figura 17.4 – Grazie alla presenza dello spazio bianco il titolo ha un grande impatto visivo.

La lunghezza del titolo U n titolo breve, che può essere letto velocemente, comunica il suo significato più efficacemente di uno molto lungo. Gli studi effettuati hanno mostrato che le persone esaminano in fretta non solo il testo ma anche i titoli. Se il titolo è molto lungo, cioè si estende per tre o più righe, richiederà alcuni secondi per essere letto: nel mondo del Web, questi attimi possono essere un’eternità e il rischio è che il lettore fatichi a comprendere il significato e, quindi, non finisca di leggerlo tutto. Di conseguenza, occorre evitare di formularne troppo lunghi, che si estendono oltre le due righe. Più si è brevi, più facile e più rapida sarà sia la sua lettura sia la sua comprensione. In genere, si ritiene che la lunghezza di un titolo non debba essere superiore alle 8-

10 parole. Alcuni studi hanno anche verificato che le prime 2-3 parole sono fondamentali per spingere il lettore a proseguire nella sua lettura. Questo significa che occorre inserire all’inizio le parole più interessanti e stimolanti perché, altrimenti, si corre il rischio che il lettore non lo legga tutto e, conseguentemente, non legga il testo.

Le parole chiave Come abbiamo già detto, se le persone arrivano nella pagina web da una ricerca o da una pubblicità online, la prima cosa che si aspettano di trovare sono le parole chiave: sono infatti l’indizio più importante che fa capire immediatamente al visitatore che è arrivato sulla pagina giusta. E, dato che quello che si guarda, appena si arriva nella pagina, è il titolo, è qui che si cercheranno. Se non vengono trovate le keyword, le aspettative del visitatore inizieranno a essere deluse e probabilmente penserà che la pagina non corrisponde a quello che sta cercando. Vediamo un esempio semplificato. Immaginiamo di aver digitato le parole chiave “cheaper lead” nel box di ricerca di Google (Figura 17.5).

Figura 17.5 – Box di ricerca di Google con le parole chiave digitate “cheaper lead”. Se, dopo aver cliccato su un link presente nella pagina dei risultati, arriviamo su una pagina che contiene nel titolo le stesse parole chiave (Figura 17.6), siamo probabilmente molto motivati a leggere il testo.

Figura 17.6 – Il titolo contiene le parole chiave. Diverso è il caso se arriviamo in una pagina dove la parola chiave non si trova nel titolo ma è collocata all’interno del testo (Figura 17.7). Se siamo come la maggior parte dei navigatori online, che hanno sempre fretta, è probabile che abbandoneremo subito la pagina, non avendo trovato nel titolo – primo elemento su cui è caduto il nostro sguardo – alcun riferimento alle nostre parole chiave.

Figura 17.7 – Parole chiave collocate all’interno del testo e non nel titolo. Quindi, oltre che per motivi di SEO, è necessario che il titolo contenga le parole chiave digitate nella ricerca o presenti nella pubblicità online. Considerato quello che abbiamo rilevato nel punto precedente, sarebbe anche bene, quando possibile, che le parole chiave siano presenti nelle prime parole del titolo.

La promessa Affinché i lettori vedano del valore in ciò che dovranno leggere, spesso, occorre indicargli come il testo li potrà aiutare. Qui entra in ballo il titolo che, in cambio della loro attenzione, deve offrire una promessa: proseguendo la lettura, il lettore avrà la soluzione al suo problema. Un esempio di un titolo-promessa molto efficace è mostrato nella Figura 17.8.

Figura 17.8 – Esempio di titolo-promessa. In questo caso, il titolo indica chiaramente al lettore che nel testo troverà alcune soluzioni per affrontare il problema della pulizia dei computer. Altri due ottimi esempi sono raffigurati nelle Figure 17.9 e 17.10, dove i titoli evidenziano molto bene che cosa il lettore troverà negli articoli:

Figura 17.9 – Un secondo esempio di titolo-promessa.

Figura 17.10 – Un terzo esempio di titolo-promessa. Naturalmente, nel titolo non si dovrà fornire la soluzione al problema dei lettori o la risposta che stanno cercando: bisogna semplicemente formulare il problema che è nella testa del visitatore, quello che lo ha spinto ad arrivare sulla pagina, in modo da suggerire che si fornirà la soluzione se continuerà a leggere l’articolo. Il titolopromessa funziona in molto casi, ma in molti altri, naturalmente, non sarà possibile utilizzarlo.

Come formulare il titolo

Per rendere più interessanti i titoli, a volte possono essere utilizzate alcune formule efficaci. Per esempio: “Come... (fare qualcosa)” È una delle formule più utilizzate. Esempi: “Come fare soldi lavorando da casa con il PC” “Come fare la dichiarazione dei redditi in dieci minuti” “Come rendere il vostro sito più bello senza l’aiuto di un esperto” Doppio beneficio In questo caso, al primo beneficio – sempre introdotto da “Come…” – ne segue un altro, introdotto dalla congiunzione “e…”. In questo modo, si suggerisce una stretta relazione tra i due: se si ottiene il primo, si può raggiungere anche il secondo beneficio. Esempi: “Come risparmiare tempo e produrre di più” “Come avere la casa più calda e la bolletta meno cara” “Come aumentare i prezzi e avere più clienti” “Perché…” Dopo “Come…”, “Perché...” è la formula più utilizzata. Apre una porta nella mente del lettore, sostenendo qualcosa di importante, di efficace, di segreto. Esempi: “Perché i siti web devono avere delle call to action” “Perché si devono fidelizzare i clienti” “Cosa…” Esempi: “Cosa fare quando il computer si blocca” “Cosa non si deve fare quando i prezzi salgono”. Numerare È una delle più efficaci formule, ma bisogna stare attenti a non abusarne. In questo caso, si deve iniziare il titolo con un numero, magari personalizzandolo con un pronome personale come “miei” o “nostri”. Esempi: “5 modi per aumentare i profitti”. “I miei 10 consigli per costruire un sito di successo” “8 utili strumenti per aumentare la vostra produttività” “I 5 più comuni errori …” Questo tipo di titolo è senz’altro da preferire ai titoli generici, come per esempio: “Quali sono le strategie migliori per aumentare i profitti?”

“Quali sono i più comuni errori…” Domande provocatorie Formulando una domanda si può creare un forte coinvolgimento nel lettore, dato che la visione di un punto interrogativo motiva a sapere qualcosa di più. Naturalmente, la domanda deve essere collegata al beneficio che si offre e deve stimolare il lettore a rispondere “Sì” o “No lo so”. Esempi: “Siete insoddisfatti dei saggi di conversione del vostro sito?” “Siete stanchi di pagare troppo per il telefono?” “State facendo questi sei gravi errori quando spedite un’email?”. Parole che funzionano Ci sono parole che, poste all’inizio del titolo, hanno un forte potere di attrazione. Per esempio: “Il segreto di…”: “Il segreto di aumentare la produzione senza spendere un soldo” Oppure “Attenzione:…”: “Attenzione: non fate questi errori con il vostro sito”. O ancora “Tutto quello che…”: “Tutto quello che dovreste…” “Tutto quello che potreste…” Il “doppio colpo” (Double-Whammy) Questa formula permette di costruire dei titoli molto efficaci.5 Si inizia scrivendo un primo titolo, che può avere un significato anche stando da solo, per esempio: “Perché il tuo fatturato non cresce” (formulazione del problema in cui il lettore si può identificare). L’obiettivo è quello di cercare di coinvolgere il lettore. La seconda parte del titolo, invece, ha la funzione “tranquillizzante”. In questo modo, si raddoppia il potere di attirare la sua attenzione, spingendolo a leggere il testo. Continuando con il nostro esempio: “... e come puoi utilizzare la leva del prezzo per aumentarlo del 15%” (indica la soluzione al problema). Il titolo completo quindi sarà: “Perché il tuo fatturato non cresce e come puoi usare la leva del prezzo per aumentarlo del 15%”. Per fare da ponte tra la prima e la seconda parte del titolo, oltre alla “e”, si possono usare punti interrogativi, parentesi o due punti. Esempi: “Perché un’analisi mensile delle vendite può migliorare la vostra performance: 5 semplici regole” “Il saggio di conversione (e come fare per migliorarlo)” “Hai paura ad aumentare i prezzi? Leggi perché puoi farlo senza rischiare nulla” Tenete conto che, nel caso dei titoli double-whammy, essendo di fatto dei doppi titoli, la lunghezza può essere superiore alle 10 parole, senza però

esagerare. Inoltre, per non generare confusione nella mente del lettore, è bene che questo tipo di titoli siano molto semplici.

Un errore comune L’idea che il titolo debba sintetizzare il contenuto della pagina può essere fuorviante. Infatti, non solo è difficile sintetizzare tutto il contenuto in una breve frase, ma si corre anche il rischio di scrivere titoli banali, privi di attrattiva. Piuttosto che cercare di racchiudere l’intero contenuto dell’articolo in un titolo, in genere è molto meglio individuare un’idea connessa al contenuto, ma più interessante, più sorprendente. Per esempio: A. Titolo banale che sintetizza il contenuto: “Tecniche di scrittura per scrivere titoli eccellenti”. B. Titolo sorprendente e intrigante: “Tutto quello che pensate sulla scrittura dei titoli è sbagliato”.

Conclusioni Il titolo della pagina: è l’elemento che attira, prima di ogni cosa, lo sguardo del lettore quando arriva su una pagina web; deve spingere il lettore a leggere il contenuto della pagina e, quindi, non deve mai essere banale o superficiale: bisogna sorprendere, incuriosire, intrigare il lettore; deve trasmettere importanza e priorità: di conseguenza, deve essere scritto con un carattere molto più grande del testo che segue e deve essere ben distanziato dagli altri elementi della pagina; non deve essere troppo lungo; deve contenere le parole chiave digitate nella ricerca o presenti nella pubblicità online; deve parlare dei benefici e dei problemi del lettore, suggerendo che la soluzione si trova nel testo dell’articolo; può essere costruito seguendo alcune formule di successo; non deve necessariamente sintetizzare il contenuto della pagina.

1. Poynter Institute, “Eyetracking The News – A Study of Print & Online Reading”, www.poynter.org/extra/Eyetrack/previous.html.

2. Nielsen. J., “Eyetracking Study of Web Readers”, www.nngroup.com/articles/eyetracking-study-of-web-readers/ (14 maggio 2014). 3. Owen S., “Website Eyetracking … We want to make you website effective!”, www.owenwebsitedesign.com/websites-that-read-well.html (2010). 4. Copyblogger, “How to Write Magnetic Headlines”, www.copyblogger.com/magnetic-headlines/. 5. D’Souza S., “The Power of the Double-Whammy Headline: How to Increase the Chance of Your Content Being Read”, www.copyblogger.com/double-headline/.

CAPITOLO 18

IL MODULO

Nelle pagine che convertono, l’elemento cruciale è costituito dal modulo, che – in cambio di un’offerta (white paper, ebook, webinar ecc.) – richiede i dati necessari per qualificare i visitatori e contattarli successivamente con una serie di email (Figura 18.1).1

Figura 18.1 – Il modulo di richiesta in una pagina web. Più informazioni si possiedono su un cliente potenziale, maggiori saranno le possibilità di inviargli contenuti personalizzati, di coinvolgerlo e, in ultima analisi, di convertirlo in cliente effettivo. Se il modulo non fosse presente, l’azione di conversione non sarebbe possibile. Nonostante la loro importanza, però, spesso i moduli sono ideati e costruiti male. Infatti, non basta che sia presente, occorre anche costruirlo bene, in modo che:

1. risalti sulle altre componenti della pagina in modo da attirare l’attenzione del lettore; 2. convinca il visitatore a completarlo e inviarlo. Per costruire un modulo che favorisca il completamento e converta bisogna tenere conto di molti fattori collegati al design e all’usabilità. Descriverò questi fattori nei prossimi paragrafi. Per prima cosa, vediamo come sono organizzati i moduli.

I componenti di un modulo I moduli hanno tre elementi principali, che sono sempre necessari, e tre elementi secondari, che migliorano la sua fruizione ma non sono strettamente necessari (Figura 18.2).2 I tre elementi principali sono: 1. label, “etichetta” (1): indica che cosa bisogna scrivere nel corrispondente campo di input (input field) come, per esempio, “nome”, “email” ecc.; 2 . input field, “campo di input” (2): indica la casella in cui bisogna inserire l’informazione richiesta dall’etichetta; 3. action, “azione” (3): è espressa dall’invito a cliccare su un link o un pulsante, in modo da inoltrare il modulo e ottenere in cambio un’offerta, come per esempio un white paper da scaricare. Il pulsante esprime quindi una call to action, cioè un “invito a compiere un’azione”. I tre elementi secondari sono: 1. help, “aiuto” (4): suggerisce come compilare alcuni campi del modulo; 2. message, “messaggio” (5): fornisce un feedback all’utente in base a quello che ha scritto in uno specifico campo (per esempio, “il modulo è stato inviato correttamente”, “ci sono degli errori” e così via); 3. Validation, “convalida” (6): indica se i dati immessi dall’utente sono conformi ai parametri stabiliti. Come ho scritto, questi tre elementi, pur utili a completare il modulo, possono anche essere omessi.

Figura 18.2 – I sei elementi che possono essere presenti in un modulo.

Lunghezza del modulo Probabilmente, la domanda più importante che ci si pone quando si progetta un modulo è questa: “Quanto deve essere lungo il modulo?” Siccome la sua lunghezza è determinata soprattutto dal numero di dati che si vuole ottenere, con questa domanda ci si sta chiedendo quante informazioni si dovrebbero richiedere. La risposta più ovvia è che occorre domandare solo i dati di cui si ha bisogno per contattare e qualificare un cliente potenziale. Ma è una risposta troppo semplice, che dice ben poco: il rischio è quello di riempire il modulo con un lungo elenco di richieste. Andiamo, allora, con ordine. Per prima cosa, bisogna chiarire che la lunghezza deve essere valutata insieme a tre fattori: 1. Il valore di ciò che viene offerto in cambio del completamento del modulo: è abbastanza prezioso per il visitatore da spingerlo a completare il modulo? 2. Il tipo di informazioni richieste: sono troppo personali da dissuadere i visitatori a completare il modulo? 3. La credibilità del sito e il senso di sicurezza e di rispetto della privacy che infonde nel visitatore: il visitatore ha abbastanza fiducia da sentirsi sicuro nel fornire i

propri dati personali? Quindi, la disponibilità delle persone a compilare un modulo non dipende solamente dalla sua lunghezza, ma è condizionata anche da questi tre fattori, che contribuiscono a determinare il saggio di completamento e, quindi, quello di conversione della pagina. Affrontiamo adesso il problema della lunghezza considerandolo dal punto di vista degli utenti e da quello di chi gestisce il sito.

La lunghezza del modulo: le esigenze degli utenti Qual è l’atteggiamento degli utenti relativamente alla lunghezza del modulo? Semplice: le persone non amano particolarmente i moduli e preferirebbero ottenere quello che viene promesso senza dover perdere del tempo a fornire dati personali. Di conseguenza, più dati vengono richiesti, maggiori saranno i tassi di abbandono. Questo dato è stato confermato da varie indagini. Per esempio, uno studio condotto da HubSpot su oltre 40.000 landing page ha verificato che i saggi di conversione diminuiscono all’aumentare del numero dei campi presenti nel modulo, come si può osservare nella Figura 18.3 (che riporta, nell’asse orizzontale, il numero dei campi e, nell’asse verticale, il saggio di conversione).3

Figura 18.3 – Studio condotto da HubSpot: i saggi di conversione diminuiscono all’aumentare del numero dei campi.

In un altro studio, condotto questa volta da Marketo, sono stati sottoposti a test tre moduli che avevano 5, 7 e 9 campi.4 Come si può osservare nella Figura 18.4, il test ha dato questi risultati: saggio di conversione del modulo contenente 5 campi: 13,4%; saggio di conversione del modulo contenente 7 campi: 12,0%; saggio di conversione del modulo contenente 9 campi: 10,0%.

Figura 18.4 – Studio condotto da Marketo: i saggi di conversione diminuiscono all’aumentare del numero dei campi. Quindi, anche in questo secondo test, moduli più corti danno saggi di conversione maggiori di quelli più lunghi. Si può anche dire che, di solito, l’aggiunta di un campo fa sempre diminuire il numero di conversioni. Questo per quanto riguarda gli utenti. E per quello che riguarda i soggetti che sottopongono il modulo?

La lunghezza del modulo: le esigenze di chi sottopone il modulo Le esigenze di chi sottopone il modulo sono più complesse e in contrasto con quelle degli utenti. Infatti, questi soggetti – che identifico con il generico termine di imprese – hanno bisogno di raccogliere: 1. le informazioni basilari per poter contattare i clienti potenziali; 2. le informazioni per qualificare i clienti potenziali, in modo da: a. capire quali sono quelli che vale la pena “coltivare”; b. poter inviare loro dei messaggi il più possibile personalizzati per “coltivarli”; c. infine, convincerli a comprare. Di conseguenza, le imprese hanno l’esigenza di richiedere sia i dati necessari a contattare le persone sia quelli necessari a “qualificarli” (Figura 18.5). I dati di contatto strettamente necessari sono solamente due: nominativo e indirizzo al quale inviare la comunicazione (in genere l’email) (Figura 18.6).

Figura 18.5 – Si ha sempre bisogno delle informazioni di contatto e spesso anche delle informazioni per qualificare i clienti potenziali.

Figura 18.6 – I dati di contatto che devono sempre essere presenti nel modulo. I dati necessari a qualificare il cliente potenziale possono invece essere molti, dato che maggiore è la quantità di informazioni personali raccolte, maggiori saranno le possibilità di poter conoscerlo meglio e, quindi, di poter personalizzare più efficacemente i messaggi. Per esempio, per qualificare un cliente potenziale, spesso, si includono dei campi riguardanti la società di appartenenza, il sito web aziendale, il suo ruolo lavorativo, il numero di dipendenti presenti nell’azienda in cui lavora ecc. (Figura 18.7).

Figura 18.7 – Esempio della parte di modulo contenente i dati per qualificare chi risponde. In conclusione, ripetiamo: le esigenze delle imprese sono differenti da quelle degli utenti.

Il bilanciamento tra quantità e qualità È evidente che se si chiedono solo i dati di contatto si massimizza il numero di persone che completeranno il modulo, ma non si potrà qualificarli in alcun modo. Al contrario, se si richiedono anche dei dati necessari a qualificare chi risponde, diminuisce il numero di persone che completeranno il modulo, ma aumenta la loro qualità. Perché: 1. i visitatori sono maggiormente identificati; 2. il tempo necessario a completare il modulo è un segnale dell’interesse delle persone verso quello che viene offerto e, più in generale, dell’interesse verso l’azienda: infatti, chi completa un modulo con 10 campi è più interessato a ricevere quello che viene offerto, rispetto a una persona che è disposta a

completarne al massimo 5. La Figura 18.8 sintetizza molto bene questa situazione (dove: more leads = numero maggiore di clienti potenziali; more qualifed leads = maggior numero di clienti potenziali qualificati).5

Figura 18.8 – Moduli più brevi = più rispose; moduli più lunghi = più persone qualificate. Quindi, la decisione relativa alla lunghezza del modulo comporta un bilanciamento tra la quantità e la qualità dei lead (= clienti potenziali) che si vorrebbe ottenere: moduli più corti producono un numero maggiore di lead, perché le persone che sono disposte a completarli sono più numerose; moduli più lunghi producono invece un numero minore

di lead, ma la qualità è più elevata, perché questi forniscono più informazioni su se stessi e su quello che stanno cercando. Per individuare la lunghezza del modulo è quindi necessario porsi questa domanda: “Abbiamo bisogno di molti clienti potenziali o di clienti potenziali più qualificati?” Se si ha necessità di acquisire molti clienti potenziali, allora bisogna richiedere solo i dati che sono necessari per contattarli. Se si ha necessità di acquisire solo clienti potenziali qualificati, allora bisogna utilizzare moduli più lunghi che consentano di acquisire maggiori informazioni. Molto spesso, le imprese si collocano in una via di mezzo: vorrebbero, cioè, un buon numero di clienti potenziali qualificati. In questi casi, la lunghezza del modulo viene decisa cercando un compromesso tra la quantità e la qualità dei lead che si vogliono ottenere, cercando cioè di raccogliere abbastanza dati, senza però eccedere nel numero di domande.

Quali informazioni richiedere Considerando che si deve sempre cercare di limitare il più possibile il numero dei campi, vediamo come si può procedere. Innanzitutto, occorre raccogliere i dati di contatto. Quelli necessari sono due: il nominativo e l’indirizzo email. In molti casi, però questi dati, da soli, non sono sufficienti. Pensiamo a quelle imprese B2B che hanno dei target molto specifici, come per esempio: clienti localizzati solo in determinate aree geografiche; clienti che possiedono determinate dimensioni (per fatturato, per numero di dipendenti ecc.); clienti che rivestono determinati ruoli lavorativi (esperti IT, operatori di marketing ecc.). In questi casi, è necessario inserire almeno un altro campo, in modo da individuare in maniera più precisa il proprio target. Successivamente, per valutare se possiamo inserire altri campi oltre a quelli di contatto, dobbiamo considerare il valore di ciò che stiamo offrendo (white paper, ebook ecc.): maggiore è il valore percepito dell’offerta, maggiore sarà la disponibilità dell’utente a completare moduli più lunghi. Comunque, anche in presenza di offerte molto appetibili, è consigliabile inserire al massimo altri 2-3 campi per qualificare il cliente potenziale, altrimenti si rischia di avere una drastica caduta nella conversione. Occorre anche tenere presente che la richiesta di alcune informazioni, ritenute molto personali, abbassa sensibilmente il saggio di conversione e, quindi, dovrebbero essere evitate. Secondo il già citato studio condotto da HubSpot, tre sono i dati richiesti che abbassano sensibilmente il saggio di conversione:

l’età: può abbassare il saggio di conversione del 20%; il numero di telefono: può abbassare il saggio di conversione di circa il 35%; le informazioni geografiche: in questo caso, la diminuzione del saggio di conversione è evidente soprattutto quando si richiede l’indirizzo (-33%).

La probazione progressiva Se i dati da richiedere superano il numero di 5-6 – oppure si vuole ridurre al minimo il loro numero in modo da massimizzare il saggio di conversione – si possono raccogliere quelli necessari a qualificare i clienti potenziali in momenti successivi attraverso la profillazione progressiva (progressive profiling). Con questa tecnica, i dati vengono raccolti in modo incrementale, invece che una sola volta, utilizzando un modulo dinamico. Come funziona? Primo modulo Quando un visitatore arriva per la prima volta sul sito, troverà un modulo che dovrà completare per ottenere qualcosa (per esempio, la possibilità di scaricare un ebook) (Figura 18.9, modulo sulla sinistra). Qui si richiederanno solo alcuni dati necessari a iniziare a costruire il profilo, e cioè i soli dati di contatto.

Figura 18.9 – Esempio di profilazione progressiva. (Fonte: www.newfangled.com/how-marketing-automation-works/). Immaginiamo che il visitatore compili questo modulo e lo invii, ottenendo l’ebook promesso. A questo punto, noi abbiamo i suoi dati di contatto, pertanto possiamo inviargli un’email con la quale gli proponiamo qualcosa di diverso: per esempio, la registrazione a un webinar. Se sarà interessato dovrà cliccare su un link inserito nell’email. Questo link rinvierà a una nostra pagina web.

Secondo modulo In questa pagina è presente un altro modulo che deve essere completato e inviato per potersi registrare al webinar. Questa volta, però, il modulo che l’utente si troverà davanti sarà diverso. Oltre a contenere le tre informazioni già fornite la volta precedente, verranno richiesti nuovi dati, per esempio la sua qualifica lavorativa, il nome della società in cui lavora e il settore industriale (secondo modulo della Figura 18.9). A questo punto, possiamo decidere di inviargli, dopo qualche giorno, un’altra email, perché, per esempio, vogliamo:

1. continuare a “coltivarlo”, dato che riteniamo che non è ancora pronto per acquistare subito qualcosa da noi; 2. avere qualche altra informazione in modo da “qualificarlo meglio” e poter personalizzare meglio le nostre successive comunicazioni (fino a quando non lo contatteremo direttamente per proporgli di acquistare qualche nostro prodotto).

Terzo modulo Inviamo, quindi, un’altra email in cui, per esempio, gli proponiamo di partecipare alla visione di una nostra demo. Per farlo, deve cliccare su un link che lo rimanda su un’altra pagina web dove è presente un nuovo modulo che occorre completare per poter richiedere la demo (terzo modulo della Figura 18.9). Questo modulo contiene: 1. i dati completati le due volte precedenti; 2. nuovi campi da completare, come per esempio la città di residenza, l’indirizzo e così via. La profilazione progressiva funziona nel modo appena descritto. Tenete conto che i moduli possono mostrare i campi già completati insieme a quelli nuovi, come nel nostro esempio, oppure possono mostrare solo i nuovi campi. Sono due soluzioni che si equivalgono in quanto a efficacia. In conclusione, con la profilazione progressiva, l’utente, invece di dare tutte le informazioni in un unico modulo – situazione che riduce il saggio di conversione –, le fornisce a poco a poco, completando i moduli che appaiono in successione ogni volta che arriva su una pagina del sito. Suggerisco di utilizzare sempre la profilazione progressiva se c’è necessità di raccogliere molti dati.

I campi “opzionali” In alcuni casi si può lasciare libero l’utente di completare alcuni campi: sono quelli non strettamente necessari per chi li richiede, ma che potrebbero comunque fornire utili indicazioni. In questi casi, i campi sono indicati come “opzionali” e non pregiudicano il fatto di ottenere quanto promesso nella call to action (white paper, ebook ecc.). In genere, sconsiglio di utilizzare questo accorgimento, perché le persone si aspettano sempre di dover riempire tutti i campi. Quindi, se il lettore dà solo una breve occhiata al modulo, e non capisce subito che alcuni campi sono opzionali, potrebbe decidere di non compilarlo. Ed è quanto è stato dimostrato in un test eseguito nel 2010 con il modulo di fatturazione di Expedia.6 In questo studio sono state messe a confronto due versioni: quella originale richiedeva il nome dell’utente e il suo indirizzo, con un campo opzionale per il nome della società; nella variante si richiedeva il nome

dell’utente e l’indirizzo, senza alcun campo opzionale (Figura 18.10). La modifica effettuata era molto semplice, ma produsse un risultato inatteso: la variante senza il campo opzionale produsse un aumento di fatturato di ben 12.000.000 dollari! Perché si ottenne questo risultato? Perché, anche se il campo era opzionale, era pur sempre un elemento di frizione: rendeva il modulo più lungo e, in più, ogni utente doveva leggerlo e decidere in seguito se completarlo. C’era anche un altro motivo che contribuiva a produrre una grande ritrosia: molti utenti non erano abituati a vedere il “Nome della società” in un modulo di fatturazione. Di conseguenza, questo campo era in conflitto con i loro modelli mentali. Pertanto, se proprio dovete inserire dei campi “opzionali”, evidenziate bene quali sono, scrivendolo in modo ben visibile ed evitando l’uso di asterischi, che potrebbero confondere. In questo modo, a volte, si riesce a ottenere anche questi dati perché le persone tendono a fornire maggiori informazioni di quelle richieste se possono farlo in maniera volontaria. Se, invece, indicate solamente i campi “obbligatori”, senza evidenziare quali sono quelli opzionali, i lettori si focalizzerebbero solo sui primi e farebbero il minimo necessario evitando i dati “opzionali” (Figura 18.11). Questa tendenza è stata verificata in alcuni studi. 7

Figura 18.10 – I due moduli di Expedia sottoposti a test: quello originale (sinistra) e la variante (destra) che non ha alcun capo opzionale.

Figura 18.11 – Se il modulo contiene dei campi “opzionali” la soluzione migliore è quella di indicarli. Se i campi opzionali sono più di due, suggerirei di creare due sezioni distinte separando i dati “richiesti” da quelli “opzionali”. Se tutti i campi sono “obbligatori” non dovete indicare nulla. A volte, sbagliando, alcuni segnalano tutti questi campi con l’asterisco.

La collocazione delle etichette Anche se può sembrare strano, il modo in cui sono allineate le etichette con i campi del modulo influisce sulla facilità di completamento, e quindi sulla possibilità che l’utente fornisca tutte le informazioni o lo abbandoni. Di conseguenza, la collocazione delle etichette incide sul saggio di conversione. È quindi importante soffermarci su questo argomento. Innanzitutto, osserviamo che esistono quattro modalità per collocare le etichette: 1. verticalmente sopra il campo; 2. a sinistra del campo con allineamento a sinistra; 3. a sinistra del campo con allineamento a destra; 4. all’interno del campo.

Verticalmente sopra il campo In questo caso, le etichette sono allineate verticalmente con i campi. Possono essere messe sopra oppure sotto di essi. Questa seconda possibilità è sconsigliabile, in quanto sarebbe difficile capire se si riferiscono al campo posto sopra o a quello posto sotto. La collocazione migliore – anche perché più intuitiva – è senz’altro quella in cui le

etichette stanno sopra il campo (Figura 18.12).

Figura 18.12 – Le etichette poste sopra i campi non creano confusione. La collocazione verticale delle etichette riduce il movimento degli occhi e il tempo di elaborazione, dato che ci si deve muovere in una sola direzione: verso il basso, come si può osservare nella heat map riprodotta nella Figura 18.13. In questo modo – considerando anche l’estrema vicinanza delle etichette ai campi – l’esame dei dati richiesti è molto rapido e semplice.

Figura 18.13 – Quando le etichette sono collocate verticalmente, le persone guardano in una sola direzione e, cioè, verso il basso. (Fonte: test eseguito dalla società Etre, www.etre.com). Collocando l’etichetta proprio sopra il campo di input si permette al lettore di catturare entrambi gli elementi con un singolo movimento degli occhi, limitando il numero delle fissazioni. Questo movimento può essere visto molto bene nella heat map riprodotta nella Figura 18.14, risultato di un test eseguito con la tecnica dell’eye-tracking da Matteo Penzo.8

Figura 18.14 – Risultato di un test eseguito da M. Penzo con un modulo ad allineamento verticale. Penzo ha anche verificato che, quando gli occhi si spostano dall’etichetta al campo, occorrono solamente 50 millesimi di secondo per compiere questo movimento. Questo tempo estremamente ridotto, unito al limitato numero di fissazioni, determina dei tempi molto rapidi per completare il modulo. L’aspetto negativo è che, con l’allineamento verticale, è necessario avere a disposizione un maggiore spazio verticale. Nella Figura 18.15 sono evidenziati i vantaggi e gli svantaggi di questo tipo di moduli.9

Figura 18.15 – Pro e contro dei moduli con allineamento verticale.

Allineamento a sinistra In questo caso, le etichette sono collocate in linea orizzontale con i campi e hanno l’allineamento a sinistra (Figura 18.16).

Figura 18.16 – Modulo con etichette che presentano un allineamento a sinistra. Con questo tipo di allineamento, l’osservazione delle etichette è più facile: i lettori possono infatti esaminare la colonna di sinistra delle etichette andando su e giù con lo sguardo, senza essere interrotti dai campi degli input. Questa modalità di osservazione è molto utile quando si preferisce che il lettore esamini tranquillamente ogni etichetta e valuti quale sforzo gli viene richiesto per completare il modulo e così decidere rapidamente se farlo o abbandonarlo. È quindi consigliata quando:

ci sono molti campi; i campi opzionali sono numerosi; si richiedono dati non comuni. Il problema principale di questo tipo di allineamento è costituito dalla distanza tra le etichette e i campi, condizione che rende più lunghi i tempi di compilazione, dato che il lettore deve saltare da una colonna all’altra. In questo caso, le fissazioni degli occhi sono molto più numerose rispetto ai moduli con allineamento verticale, come si può osservare nella heat map della Figura 18.17 (ottenuta nel già citato test eseguito da Penzo).

Figura 18.17 – Risultato di un test eseguito da M. Penzo con un modulo che ha l’allineamento a sinistra delle etichette. In questa heat map si può osservare come non ci siano fissazioni negli spazi bianchi, tra le etichette e i campi, il che significa che gli utenti sono in grado di collegare immediatamente le prime ai secondi. Però, l’eccessiva distanza tra alcune etichette e i loro campi di input richiede un tempo maggiore per interagire visivamente con il modulo: Penzo ha rilevato che il tempo che occorre per spostare lo sguardo dall’etichetta al campo è di circa 500 millesimi di secondo, cioè è 10 volte più alto di quello che accade quando l’allineamento è verticale (50 millesimi di secondo). Inoltre, se guardiamo i movimenti che gli occhi devono fare per osservare e compilarlo, si può notare il maggior numero di fissazioni che è richiesto dal modulo con allineamento a sinistra, rispetto a quello con allineamento verticale (Figura 18.18).10

Figura 18.18 – Il numero di fissazioni è molto più alto quando il modulo ha le etichette allineate a sinistra. Di conseguenza, i moduli con allineamento a sinistra sono più lenti da leggere e il tempo di completamento è più elevato di quelli con allineamento verticale. Riassumendo (Figura 18.19): i vantaggi dei moduli con allineamento a sinistra sono costituiti da due fattori: 1. la facilità con cui si può esaminare la colonna delle etichette; 2. il ridotto spazio verticale che viene occupato dal modulo; lo svantaggio è dato dalla distanza esistente tra le etichette e i rispettivi campi, che rende più lenta la lettura.

Figura 18.19 – Pro e contro dei moduli con allineamento a sinistra.

Allineamento a destra In questo caso, le etichette sono collocate orizzontalmente con il rispettivo campo di input, ma con allineamento a destra (Figura 18.20).

Figura 18.20 – Modulo con etichette che presentano l’allineamento a destra. Rispetto ai moduli con allineamento a sinistra, il citato test di Penzo ha verificato che il tempo richiesto, per muovere gli occhi dall’etichetta al rispettivo campo, è minore: 240 millesimi di secondo contro i 500 ms. (vi ricordo che, invece, con il modulo con allineamento verticale il tempo impiegato è di soli 50 ms). Inoltre, la ravvicinata associazione tra etichette e campi riduce anche il numero delle fissazioni di quasi la metà, rispetto all’allineamento a sinistra, come si può notare se si raffronta la heat map rappresentata nella Figura 18.21 (sempre ottenuta nel test eseguito da Penzo) con quella precedente relativa al modulo con allineamento a sinistra.

Figura 18.21 – Risultato di un test eseguito da M. Penzo con un modulo che ha l’allineamento a destra delle etichette. La riduzione del numero delle fissazioni e del tempo intercorrente tra una fissazione e la successiva comporta che i tempi di completamento di questo tipo di moduli siano due volte più veloci di quelli richiesti da quelli con allineamento a sinistra. Tuttavia, questo tipo di modulo presenta un importante svantaggio: dato che noi leggiamo da sinistra verso destra, gli occhi fanno più fatica a esaminare le etichette, causando una riduzione della leggibilità, soprattutto quando cambia la larghezza delle etichette. Di conseguenza, questo tipo di modulo non va bene, a differenza del precedente, quando il lettore esamina prima tutta la colonna delle etichette, per cercare di capire quali informazioni sono richieste. Come ho detto in precedenza, questo accade quando sono molti i campi da compilare, o lo sono quelli opzionali, oppure si richiedono dati non comuni. Nella Figura 18.22 sono riassunti i pro e i contro di questo tipo di modulo.

Figura 18.22 – Pro e contro dei moduli con allineamento a destra.

All’interno dei campi Quando lo spazio a disposizione è molto limitato, le etichette si possono posizionare all’interno dei campi (Figura 18.23).

Figura 18.23 – Modulo con etichette collocate all’interno dei campi. Questa modalità, che riduce lo spazio utilizzato, potrebbe sembrare la migliore, in quanto rende più veloce la compilazione dei moduli. Nella realtà, non è sempre così, dato che ci sono due evidenti svantaggi: 1. leggendo velocemente l’etichetta inserita nel campo, l’utente potrebbe confondersi e, di conseguenza, non inserire i dati richiesti, dato che crede che il testo sia stato già predisposto in maniera automatica; 2. l’utente non può rileggere l’etichetta e verificare se i dati digitati corrispondono a quanto richiesto – a meno che non li cancelli – dato che quella scompare appena l’utente inizia inserire le informazioni. Quest’ultima esigenza è un fenomeno frequente quando il modulo è lungo o i dati richiesti non sono ovvi, come quando l’utente deve fornire i dati di login: bisogna scrivere la username o l’email? Oppure quando è indicato il numero minimo delle lettere che bisogna digitare per impostare la password (Figura 18.24).

Figura 18.24 – Etichetta all’interno del campo che indica il numero minimo di lettere che deve possedere la password. In questi casi, si ha spesso la necessità di avere sempre visibile l’etichetta mentre si digita il dato richiesto. Di conseguenza, questo tipo di moduli può funzionare bene solo in presenza di pochissimi campi e quando i dati richiesti sono semplici. Ma, a questo punto, svanisce il loro principale beneficio: la riduzione dello spazio occupato. Infatti, quando il modulo si compone di 3-4 campi, l’ingombro nella pagina è minimo e, allora, è preferibile posizionare le etichette sopra o a sinistra dei campi.

Conclusioni La collocazione delle etichette ha un ruolo importante nel saggio di conversione perché, a seconda di come sono posizionate, influiscono sulla disponibilità dell’utente a compilare il modulo. Pertanto, è necessario dedicarvi una grande attenzione. In genere, l’etichetta posizionata sopra il campo funziona meglio nella maggior parte dei casi, poiché: 1. i lettori non sono forzati a guardare separatamente i due elementi; 2. per i lettori è più semplice scorrere una colonna, invece di spostare lo sguardo da sinistra a destra. Questa facilità di lettura, unita al minor numero di fissazioni degli occhi, abbassa considerevolmente i tempi di completamento del modulo e assicura i più alti saggi di conversione. Lo svantaggio di questo tipo di moduli è che appaiono più lunghi rispetto ai moduli con etichette poste a sinistra del campo. Se si ha la necessità di ridurre lo spazio verticale, le etichette allineate a destra sono l’alternativa migliore, rispetto a quelle allineate sulla sinistra, a causa del minor tempo di completamento (Figura 18.25).11

Figura 18.25 – I moduli con etichette allineate a destra sono spesso preferibili a quelli con allineamento a sinistra. Questo tipo di allineamento è considerato migliore rispetto a quello verticale anche quando la rapidità di completamento non è la condizione più importante e, viceversa, si desidera che il lettore esamini attentamente le etichette. Però, questa tipologia non va sempre bene, come accade nell’esempio (estremizzato) della figura18.26.

Figura 18.26 – Esempio in cui le etichette allineate a destra non vanno bene. In quest’ultimo caso – quando la lunghezza variabile delle etichette renderebbe difficile la lettura di un modulo con allineamento a destra – è consigliabile utilizzare i moduli con allineamento a sinistra. In definitiva, ogni tipo di allineamento ha i suoi vantaggi e svantaggi (Figura 18.27), per cui non esiste il modulo perfetto, adatto a tutte le possibili situazioni.12

Figura 18.27 – Caratteristiche dei tre tipi di allineamento delle etichette.

Una o due colonne? Il modulo può essere costruito anche su due colonne (Figura 18.28). Si potrebbe pensare che questa tipologia possa funzionare meglio di quella a una colonna perché offre agli utenti più campi in un spazio verticale minore. Nella realtà non è così, perché l’utente fa fatica a capire l’ordine di lettura che dovrebbe seguire.

Figura 18.28 – Esempio di modulo a due colonne. Infatti, esistono 5 modi di interpretare il modo in cui i campi sono collegati (Figura 18.29).13

Figura 18.29 – I 5 modi con cui si possono interpretare i collegamenti tra i campi in un modulo a 2 colonne. A causa di queste possibilità, è normale che il lettore possa chiedersi: Le due colonne sono collegate? Devo riempire solo una colonna? O entrambe? C’è una sequenza logica da seguire per completare i campi? Queste domande affolleranno la testa del lettore nel caso veda il modello nella sua interezza. Ma spesso non è così. Gli utenti, infatti, a volte non guardano il modulo come un tutto unico, ma si concentrano sul primo campo da riempire. Dopo aver completato il primo, gli utenti spesso completano il modulo muovendosi dall’alto verso il basso, mentre trovano innaturale spostarsi orizzontalmente tra i vari campi. In questo modo, è frequente che la colonna di destra venga ignorata, soprattutto se e posizionata a una certa distanza da quella di sinistra (come si può facilmente osservare nella Figura 18.30).

Figura 18.30 – Esempio di modulo con le due colonne molto distanziate. Quindi, sia che l’utente guardi il modulo nel suo complesso sia che si concentri sul primo campo, le due colonne rappresentano un potenziale problema: perché o la colonna di destra non viene presa in considerazione oppure crea indecisione sul modo corretto di procedere. Di conseguenza, è consigliabile non utilizzare le due colonne, ma affidarsi alla colonna singola. Esiste però un’eccezione. Spesso, gli utenti si aspettano di vedere la richiesta di alcuni dati – come il proprio nominativo (nome e cognome) – collocato nella stessa riga. In questi pochi casi, si possono utilizzare due campi in orizzontale, magari posizionando le etichette secondarie all’interno (Figura 18.31).14 Assicuratevi però che i campi collocati nella stessa linea appaiano come una sola richiesta d’informazione.

Figura 18.31 – Esempio di utilizzo di due campi in una stessa linea.

Come aumentare le conversioni online: i moduli “narrativi” Tradizionalmente i moduli sono costruiti come se un estraneo vi domandasse: “Qual è il tuo nome?”, “Qual è il tuo indirizzo email?”, “Dove lavori?” e così via. Naturalmente, in questo caso, vi chiedereste: “Chi è questa persona?”, “Perché ha bisogno di queste informazioni?”, “Perché dovrei dargli tutte queste informazioni?”. In breve, diventereste irrequieti e vorreste che l’estraneo vi dicesse qualcosa di sé, invece di bombardarvi con le sue domande indiscrete. Ma effettivamente questo è ciò che fa chi vi propone un modulo e come questo viene percepito ogni volta che ce ne troviamo uno di fronte agli occhi. Pensate se, invece, i moduli fossero strutturati come conversazioni e non come un interrogatorio: probabilmente, chi risponde si sentirebbe più a suo agio. E se ne faciliterebbe la compilazione, considerando che il modo in cui sono formulate le domande influenza la disponibilità dell’utente. A questo proposito, consideriamo come vengono impartiti alcuni insegnamenti molto complessi ai bambini: in genere, si raccontano delle storie perché la forma narrativa è il modo con cui il nostro cervello elabora più facilmente le informazioni, collocando i fatti in una sequenza temporale. Al contrario, siamo sempre veramente deboli nell’elaborare idee vaghe, concetti o connessioni astratte. Abbiamo bisogno di storie per dare una struttura logica alle cose. Ora, nel caso dei moduli online, non significa che dobbiamo raccontare delle storie ma che, per favorirne la compilazione, possiamo utilizzare una struttura narrativa per la creazione del testo. In questo modo, si continua la conversazione con il visitatore, invece di interromperla brutalmente con una griglia di informazioni da completare. Un esempio di questa tipologia è quella proposta da Huffduffer che, per il suo modulo di registrazione, al posto di una griglia di voci, utilizza una struttura narrativa formulata in questo modo (Figura 18.32):

“Vorrei usare Huffduffer. Desidero che la mia username sia … e che la mia password sia … Il mio indirizzo email è … A proposito, il mio nome è …. e il mio sito è …” Come si può notare, è un modalità che permette di completare il modulo in maniera molto meno noiosa e più personalizzata e che favorisce la conversione del lettore. Evidenzio che il modulo funziona come uno tradizionale: ci si può spostare tra i campi premendo il tasto “tab”, vengono segnalati gli errori se si risponde in maniera non corretta e così via. Comunque, la cosa più interessante è che i moduli narrativi funzionano! In un recente test di gradimento sono stati sottoposti a esame due moduli, mostrati nella Figura 18.33. Ebbene, il modulo narrativo (destra) ha ottenuto un incremento del saggio di conversione di circa il 30%, rispetto a quello definito da una comune griglia (sinistra).15

Figura 18.32 – Il modulo “narrativo” usato nel sito di Huffduffer.

Figura 18.33 – I due modelli sottoposti a test: quello “narrativo” (destra) ha avuto il saggio di conversione migliore. Secondo il copywriter e web designer D Bnonn Tennant, la forma narrativa per i moduli di registrazione e di richiesta ha tre validi motivi per essere preferita a quelli tradizionali espressi con griglie.

I moduli narrativi creano un contesto che interessa al lettore Il tipico modulo sotto forma di griglia è pensato con lo scopo di fare ottenere all’azienda delle informazioni da parte dell’utente. Un modulo in stile narrativo, invece, riformula questo processo in modo che il sito web – e quindi l’azienda – siano coinvolti nella storia personale dell’utente. In altre parole, il modulo diventa qualcosa sul lettore e sulla sua storia, invece che sull’azienda e sulle informazioni di cui ha bisogno. Dal momento che ciò che interessa il lettore è solo se stesso, e non l’azienda e il suo sito, occorre riformulare il processo di conversione in modo da focalizzarlo sulla cosa

che importa al lettore (se stesso).

I moduli narrativi imitano strettamente la sequenza di pensiero del lettore Come abbiamo visto, noi impariamo e pensiamo molto meglio quando usiamo delle storie, poiché è in questo modo che il nostro cervello lavora: non memorizzando fatti nudi e crudi, ma collocando quei fatti in una struttura narrativa. L’uso di un modulo narrativo permette al lettore di collocare se stesso nel processo di conversione, non solo nel senso che si parla di lui, ma anche nel senso che rinforza quello che sta pensando. Un modulo narrativo continua la conversazione simulata che il lettore sta avendo con l’azienda e imita quello che sta pensando al momento della conversione. In questo modo, il lettore si focalizza su ciò che sta facendo, evidenziando come avviene la sequenza di pensiero nella sua mente. Confrontatelo con un layout a griglia, che lo spinge a inserire le sue informazioni prive di qualsiasi contesto, rompendo così la continuità con il suo flusso di pensieri, eliminando la sequenza del suo pensiero e rimpiazzandola con una serie di fatti grezzi che deve ripetere pedissequamente. Notate anche che, imitando la sua sequenza di pensiero, come se stesse parlando a se stesso, lo si sta collocando in misura maggiore nel processo di conversione: in questo modo è meno probabile che rinunci una volta giunto a metà strada.

I moduli narrativi riducono la frizione visiva Come si può notare, nel test riprodotto in precedenza, il modulo narrativo sembra più facile da completare. Non certo perché è stato utilizzato meno spazio (sebbene questo aspetto possa aver contribuito alla conversione totale), piuttosto perché i campi sono separati, presentando anche un aspetto visivo più vario. Questo genere di contrasto può creare una sorprendente differenza di coinvolgimento. Infatti, niente fa perdere più facilmente interesse come l’uniformità. Per dimostrare che la lunghezza non è il problema, si può osservare il modulo di contatto della Figura 18.34. Sebbene assorba molto spazio in verticale – molto di più di quello che ci vorrebbe con un layout a griglia – non si ha l’impressione che sia lungo. E, in più, quando s’inizia a scrivere, non sembra neanche di compilare un modulo. A mio avviso i moduli narrativi, se costruiti bene, possono essere più efficaci di quelli a griglia. Naturalmente, devono integrarsi bene con il contesto della pagina ed essere utilizzati con particolare attenzione, senza abusarne.

Figura 18.34 – Il modulo di contatto utilizzato da D Bonn Tennant nel suo sito. (Fonte: informationhighwayman.com/contact/).

Come mettere in evidenza il modulo

Considerato che il modulo, insieme alla call to action, è l’elemento che permette di compiere l’azione di conversione, deve risaltare rispetto a tutti gli altri componenti della pagina. Vediamo, allora, come possiamo disegnare un modulo che attragga l’attenzione del visitatore utilizzando alcuni principi di design. Lo faremo procedendo in modo progressivo, da un modulo che non ha alcuna evidenza fino ad arrivare a uno che è diventato invece il punto focale dominante della pagina.16 1. L’incapsulamento Questo principio si basa sull’utilizzo di un contenitore che evidenzia ciò che sta al suo interno. In questo modo, si cerca di dirigere lo sguardo dell’osservatore, evitando che vaghi da qualche altra parte della pagina. Nella Figura 18.35, si può osservare come il modulo dell’esempio a sinistra non emerga rispetto agli altri elementi della pagina; e come, invece, inizi a diventare un punto focale in virtù del suo inserimento all’interno di un riquadro nell’esempio a destra. 2. Utilizzo del colore Il colore può essere utilizzato per creare un contrasto con il resto della pagina e, in questo modo, il modulo può risaltare significativamente. Nella Figura 18.36, il modulo di destra risalta maggiormente rispetto a quello di sinistra grazie all’utilizzo del colore (provate a immaginare l’uso del colore arancione che contrasta con il colore grigio del resto della pagina nell’esempio di destra). 3. Utilizzo di segnali direzionali I segnali direzionali, come abbiamo già visto, sono strumenti grafici che dirigono lo sguardo verso una precisa direzione. Tra i più potenti elementi di questo tipo abbiamo le frecce.

Figura 18.35 – Il modulo risalta quando è inserito all’interno di un riquadro.

Figura 18.36 – Il modulo risalta maggiormente se ha dei colori differenti dal resto della pagina. Nella Figura 18.37 osserviamo come vengono utilizzate le due frecce. La prima dirige l’attenzione dal testo introduttivo all’intestazione del modulo; la seconda orienta lo sguardo dall’intestazione alla call to action.

Figura 18.37 – L’uso delle frecce (destra) dirige lo sguardo verso l’intestazione del

modulo e la CTA. Utilizzando questi tre principi del design si riesce a far risaltare significativamente il modulo dal resto della pagina, facendo convergere lo sguardo dei lettori verso il modulo e la call to action. Per dare la giusta rilevanza al modulo si possono utilizzare anche altri elementi, come: la collocazione; la dimensione; lo spazio vuoto intorno. Per esempio, nella Figura 18.38 si può notare come il modulo risalti grazie alla collocazione, alla dimensione, allo spazio vuoto intorno, all’incapsulamento, alla freccia in alto e ai colori che contrastano. Osservate, invece, nella Figura 18.39, come il modulo nel sito di SiteSpect, pur essendo molto grande, risalti in maniera molto debole, dato che non utilizza altri elementi di evidenziazione. In conclusione, per mettere in risalto il modulo, si possono seguire alcuni di questi accorgimenti (o tutti): posizionarlo bene; dargli una dimensione significativa; segnalarlo con una freccia; incapsularlo; dargli del colore che contrasti con il resto della pagina, almeno nel titolo e nella call to action; creargli intorno dello spazio vuoto. Tutti questi principi sono sintetizzati molto bene nel modulo rappresentato nella Figura 18.40.

Figura 18.38 – Esempio di modulo che ha un’ottima rilevanza.

Figura 18.39 – Nel sito di SiteSpect il modulo non risalta molto, nonostante le dimensioni molto grandi.

Figura 18.40 – Esempio di modulo che risalta grazie all’utilizzo della collocazione, della dimensione, della freccia, dell’incapsulamento, dello spazio vuoto che lo circonda e del colore dello sfondo e della call to action.

Il titolo Salvo casi particolari, il modulo dovrebbe avere sempre un titolo. Molto meglio se corrisponde a quello che c’è scritto nel pulsante della call to action alla fine del modulo. Un buon esempio di corrispondenza tra titolo e call to action – ma non di indicazione dei campi obbligatori (asterisco su tutti!) – è mostrato dal modulo rappresentato nella Figura 18.41.

Figura 18.41 – Modulo con il titolo che corrisponde alla call to action.

La privacy Spesso le persone hanno timore a fornire i loro dati personali perché credono che possano essere diffusi in maniera indiscriminata. Per questo motivo è necessario rassicurarle, evidenziando in modo chiaro che i dati non saranno diffusi. Il modo più utilizzato per farlo consiste nell’inserire, a fianco della richiesta dell’indirizzo email, un link al documento per la privacy dell’azienda (Figura 18.43). Questa indicazione la rende più credibile e favorisce la compilazione del modulo.

Figura 18.42 – Esempio di un modulo con un link alla politica della privacy. Per rafforzare il messaggio, si può rassicurare il lettore inserendo all’inizio del modulo una breve dichiarazione in cui si sottolinea che i dati non saranno diffusi.

Conclusioni Il modulo è lo strumento fondamentale per acquisire i dati dei clienti potenziali. Purtroppo, le persone non amano compilarli. Di conseguenza, il modulo deve essere progettato con molta attenzione e ottimizzato per convertire il maggior numero di visitatori. In particolare: 1. dovrebbe sempre comparire “sopra la piega”, a meno che non si abbia bisogno di ulteriore spazio per convincere l’utente a completarlo; 2. la sua lunghezza dipende da vari fattori, tra i quali è di fondamentale importanza l’obiettivo che si vuole raggiungere: maggior numero di contatti o maggiore qualità; 3. la richiesta di alcune informazioni molto personali può abbassare significativamente il saggio di completamento; 4. nel caso sia necessario richiedere molti dati, è meglio ricorrere alla profilazione progressiva; 5. in genere, conviene collocare l’etichetta sopra i campi di input. Nei casi in cui lo spazio verticale sia limitato, si possono posizionare le etichette orizzontalmente con allineamento a destra. Se però la lunghezza delle etichette rende difficile la lettura o si ritiene che l’utente abbia bisogno di esaminare bene tutte le richieste prima di completare il modulo, allora conviene ricorrere alle etichette con allineamento a sinistra; 6. non si dovrebbero utilizzare moduli con due colonne; 7. i moduli “narrativi” possono aumentare il saggio di conversione; 8. si deve focalizzare lo sguardo del lettore sui moduli; per questo motivo occorre farli risaltare rispetto a tutti gli altri elementi della pagina utilizzando: la collocazione, le dimensioni, l’incapsulamento, il colore, i segnali direzionali (frecce), lo spazio vuoto; 9. si dovrebbe cercare di non inserire dei campi “opzionali”; 10. si dovrebbe avere un titolo corrispondente alla call to action; 11. ci dovrebbe sempre essere un link al documento della privacy. Quando si sviluppa un sito, i moduli sono probabilmente uno degli elementi meno considerati. Generalmente, si crede che “un modulo è un modulo, non occorre pensarci tanto!”. Invece, come avete avuto modo di osservare, la costruzione di un

modulo che funzioni, che cioè converta, è un’operazione impegnativa, che richiede molta attenzione e molto impegno.

1. Parlo di “una serie di email” perché, in genere, le persone non sono pronte a fare subito un acquisto. Di conseguenza, prima di proporre un acquisto o di farle contattare da un agente, è meglio inviare alcune email costruite in modo tale da suscitare un interesse crescente verso i prodotti o i servizi dell’impresa. Questo processo di fldelizzazione è di solito chiamato “lead nurturing” (coltivazione del cliente potenziale). Ho descritto in maniera approfondita questo processo nel mio libro: Demand generation, Franco Angeli Editore, Milano 2012, pp. 104-129. Pur rivolgendosi prevalentemente al mercato B2B, gli argomenti trattati possono essere adattati facilmente al B2C. 2. Mifsud J., “An Extensive Guide To Web Form Usability”, www.smashingmagazine.com/2011/11/08/extensiveguide-web-form-usability/ (08 novembre 2011). 3. Zarrella D., “Wich Types of Form Fields Lower Landing Page Conversions?”, blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-Lower-Landing-Page-Conversions.aspx (11 ottobre 2010). 4. Kirkpatrick D., “Lead generation: Testing form field length reduces cost-per-lead by $10.66”, www.marketingexperiments.com/blog/internet-marketing-strategy/lead-generation-testing-form-field-lengthreduces-cost-per-lead-by-10-66.html (27 giugno 2011). 5. HubSpot, “How to Use landing Pages for Your Business”, offers.hubspot.com/an-introductory-guide-how-to-uselanding-pages-for-your-business. 6. Desmond N., “5 Psychological Principles of High Converting Websites (+ 20 Case Studies)”, blog.kissmetrics. com/psychological-principles-converting-website/(15 luglio 2014). 7. Anthony, “Why Users Fill Out Less If You Marked Required Fields”, uxmovement.com/forms/why-users-flll-outless-if-you-mark-required-flelds/ (15 aprile 2014). 8. Penzo M., “Label Placement in Forms”, www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php (12 luglio 2006). 9. Wroblewsky L., Web Form Design – Filling in the Blank, Rosenfeld Media, New York 2011. 10. Anthony, “Why Users Fill Out Forms Faster with Top Aligned Labels”, uxmovement.com/forms/faster-with-topaligned-labels/ (09 gennaio 2010). 11. Anthony, “Form Label Proximity: Right Aligned is Easier to Scan”, uxmovement.com/forms/form-labelproximity-right-aligned-is-easier-to-scan/ (20 marzo 2012). 12. Mifsud J., ‘An Extensive Guide To Web Form Usability”, www.smashingmagazine.com/2011/11/08/extensiveguide-web-form-usability/ (08 novembre 2011). 13. Christian, “Form Field Usability: Avoid Multi-Column Layout”, baymard.com/blog/avoid-multi-column-forms (8 marzo 2011). 14. Tan C.C., “Web form design guidelines: an eye tracking study”, www.cxpartners.co.uk/cxblog/web_forms_design_guidelines_an_eyetracking_study/ (27 aprile 2009). 15. Wroblewsky L., “‘Mad Libs’ Style Form Increased Conversion by 25-40%”, www.lukew.com/ff/entry.asp/1007 (24 febbraio 2010). 16. Gardner O., “[How to] Use Design Principles to Increase Conversions”, unbounce.com/conversion-rateoptimization/design-principles-increase-conversions/ (24 febbraio 2013).

CAPITOLO 19

LA CALL TO ACTION

Abbiamo visto che l’obiettivo principale di ogni pagina del sito dovrebbe essere quello di convertire i visitatori in clienti (potenziali o effettivi) in modo da massimizzare il saggio di conversione. Sappiamo che gli strumenti che servono perché questa operazione si compia sono il modulo e la call to action. Ma, mentre il primo qualche volta può non essere presente, la call to action deve sempre esserci, perché è l’elemento che fa realizzare la conversione. Questo ci fa capire l’importanza che riveste questa componente. Per questo motivo, deve essere progettata bene, ed essere ben distinta ed evidente. Vediamo che cosa è una call to action e come dobbiamo progettarla.

La call to action Nel Web, una call to action (CTA) è espressa visivamente da un pulsante che spinge l’utente a compiere un’azione. Letteralmente: call = invito to action = all’azione L’azione che si chiede di compiere, cliccando sul pulsante, può riferirsi a diverse possibilità, come per esempio: scaricare un white paper; registrarsi a un webinar; iscriversi a una newsletter; comprare qualcosa; partecipare a un evento; iscriversi a un gruppo. La call to action può essere collocata all’interno di una pagina (Figura 19.1).

Figura 19.1 – Esempio di call to action all’interno della pagina. Oppure, all’interno di un modulo di richiesta, dove di solito abbiamo (Figura 19.2): 1. il titolo; 2. i campi; 3. il pulsante della call to action.

Figura 19.2 – Esempio di call to action collocata all’interno di un modulo. Nel prosieguo del capitolo tratterò l’argomento della call to action in modo che possa riferirsi a entrambe le collocazioni.

Quello della call to action può sembrare un elemento grafico facilmente rappresentabile, in realtà il problema consiste nel fatto che non basta scrivere un semplice “Clicca qui” su di un pulsante colorato, inserirlo dentro una pagina web e subito dopo iniziare a raccogliere clic e clienti. Bisogna tenere conto che anche piccole modifiche al disegno del pulsante o al testo possono avere un grande impatto sulle conversioni. Pertanto, bisogna considerare due componenti fondamentali: 1. il design (colore e dimensioni); 2. il testo. Queste hanno un impatto diretto sulle conversioni, sebbene giochino due ruoli differenti: il design del pulsante è un indizio visivo che aiuta ad attirare l’attenzione dei visitatori, rispondendo alla domanda: “Dove dovrei cliccare?”; il testo del pulsante aiuta il visitatore a prendere una decisione, rispondendo alla domanda: “Perché dovrei cliccare su questo pulsante?”. Vediamo più in dettaglio questi due importanti componenti.

Il design della call to action Quando parliamo del design della CTA ci riferiamo a tre caratteristiche: la dimensione, il colore e la collocazione nello spazio della pagina.

La dimensione Per attirare l’attenzione su un elemento della pagina, occorre che questo sia molto più grande rispetto agli altri presenti. Per esempio, la landing page di Intuit (Figura 19.3) è costruita in modo tale che uno specifico elemento, la call to action, occupa una porzione significativa della pagina. Aggiungendo un colore brillante (arancione, nella pagina originale), che contrasta significativamente con il resto della pagina e una freccia, la call to action balza subito all’attenzione del visitatore.

Figura 19.3 – Grazie alla dimensione e al colore la call to action attira l’attenzione. Naturalmente, affinché la call to action risalti, bisogna stare attenti a non usare troppi elementi di grandi dimensioni, perché si rischia di rovinare l’effetto, determinando un’attenzione uguale per ogni elemento della pagina. Inoltre, anche se può sembrare strano, non sempre il pulsante più grande ha un effetto positivo sulle conversioni: per esempio, in un recente test, il pulsante più grande ha avuto un effetto negativo (Figura 19.4).1

Figura 19.4 – Nel test, il pulsante più grande ha fatto registrare una diminuzione del

saggio di conversione pari al 10%. In questo caso, l’ipotesi che si può fare è che il pulsante è diventato eccessivamente grande e, quindi, ha attirato molto l’attenzione, distogliendola troppo presto dal testo. Di conseguenza, ha creato una pressione eccessiva sulla decisione se cliccarlo o no. Conclusione: grande è meglio, ma non bisogna esagerare. La dimensione dovrebbe essere determinata insieme agli altri elementi della pagina, dato che è strettamente connessa con il contesto e con il colore della stessa CTA.

Il colore Il colore ha un forte impatto sulle decisioni dell’utente e, quindi, sul saggio di conversione, dato che può motivare l’utente a concentrarsi sul pulsante. In altre parole, è come se il pulsante con un colore preciso rispondesse alla domanda: “Dove dovrei cliccare?”. Il problema non è però qual è il colore che converte meglio. Infatti, sono stati eseguiti diversi test, senza però raggiungere dei risultati uniformi: a volte vinceva il pulsante di colore rosso, a volte quello verde e così via. Si è quindi pervenuti alla conclusione che ad agevolare la conversione è il colore che contrasta meglio con lo sfondo della pagina, meglio ancora se non è usato da nessun altro elemento presente, in modo da attirare l’attenzione. Come si può osservare (Figura 19.5), il pulsante assume un tale rilievo che è facilmente individuabile come l’oggetto che deve essere cliccato. Si osservi, adesso, la Figura 19.6.2

Figura 19.5 – La call to action gialla contrasta molto bene con lo sfondo verde (nell’originale).

Figura 19.6 – Grazie al colore (rosso, nell’immagine originale) la call to action e alcune frasi risaltano rispetto al resto. L’uso di colori che sono differenti fa risaltare alcuni elementi rispetto al resto: si crea, in pratica, una gerarchia visiva che indica al visitatore che cosa è più importante. Questa situazione è evidenziata molto bene se si vela leggermente la pagina (Figura 19.7). Come si può vedere, la call to action e il testo (in rosso nell’originale) risaltano molto bene rispetto al resto della landing page. Quindi, occorre che il pulsante emerga dal resto della pagina, in modo che sia facile per il visitatore trovarlo. Ripeto, non è questione di colore: il rosso può andare meglio del verde in un determinato contesto, mentre in un altro sarà il contrario. Quello che conta veramente è il contesto e il layout della pagina. Se, per esempio, la pagina è dominata dal colore verde, una call to action dello stesso colore non risalterà, perché si confonderà: probabilmente andrà meglio un pulsante di colore rosso. Però, se la pagina è dominata dal color rosso, allora la call to action rossa non andrà più bene, mentre probabilmente darà risultati migliori un pulsante verde.

Figura 19.7 – Velando la pagina si nota come gli elementi colorati siano gli elementi più importanti.

Il posizionamento nello spazio della pagina La call to action deve risaltare rispetto al resto della pagina. Il modo migliore per ottenere questo risultato, oltre alle dimensioni e al colore, è il circondarla con dello spazio vuoto (in inglese si utilizza il termine white space = “spazio bianco”). In questo modo, risalta molto di più e costituisce un chiaro punto di focalizzazione dello sguardo, come mostrato nella Figura 19.8.3

Figura 19.8 – La call to action con spazio vuoto intorno (destra) attira maggiormente lo sguardo.

Il testo della call to action Abbiamo visto che il colore e il design del pulsante forniscono importanti indicazioni visive, dato che indicano all’utente dove cliccare. Però, nell’ultimo e decisivo momento, è il testo presente sul pulsante ad avere l’effetto maggiore sulla decisione finale. È questo, infatti, che risponde alla domanda: “Perché dovrei cliccare su questo pulsante?”. Più il testo comunica “valore” e più è “specifico” per i benefici che si otterranno cliccando, maggiore sarà il saggio di conversione.

Il valore trasmesso dalla call to action Se si scrivono nel pulsante parole generiche – come “Invia”, “Scarica”, “Sottoscrivi”, “Registrati”, “Compra ora” – si fornisce poco valore, poca personalità e poca persuasione. Questi pulsanti di default – che sono troppo impersonali e troppo freddi – di solito hanno bassi saggi di conversione. Per quale motivo? Oltre alla genericità, il motivo risiede nel fatto che enfatizzano ciò che l’utente deve fare. Ben diverso, invece, è il risultato se si fa risaltare ciò che l’utente otterrà se cliccherà, come per esempio: “Inizia a leggere il tuo ebook gratuito”; “Ottieni il preventivo richiesto”; “Ricevi ogni settimana le migliori news”; “Aggiungi al carrello – Risparmi il 15%”.

In questi casi, la call to action: 1. parla di benefici e, quindi, trasmette valore a chi compie l’azione; 2. risponde esplicitamente alla domanda: “Perché dovrei cliccare qui?”. Diversi studi hanno dimostrato l’importanza di inserire un beneficio nella call to action. Per esempio, un test condotto recentemente da MarketingExperiments ha verificato che la call to action che esprimeva un preciso valore (beneficio) – “Get Free Access” (“Ottieni libero accesso” al nostro database) – ha prodotto un saggio di conversione molto maggiore di una generica come “Click Here” (“Clicca qui” per avere un contatto con un rappresentante). In questo specifico test, il saggio di conversione è aumentato addirittura del 201% (Figura 19.9).4 In un altro test, raffigurato nella Figura 19.10, il semplice cambiamento del verbo nel testo del pulsante – da “ordina” a “ricevi” – ha incrementato le conversioni del 14,79%.5 Questo test ha avuto un riscontro simile anche quando è stato condotto in una lingua diversa dall’inglese. Per esempio, in Danimarca il saggio di conversione è aumentato del 38,26% cambiando il verbo Bestil (= ordina) con Fà (= ricevi) (Figura 19.11).

Figura 19.9 – Il modulo con la CTA che esprime un beneficio ( destra) ha avuto un saggio di conversione superiore del 201% rispetto al modulo con una CTA generica (sinistra).

Figura 19.10 – Il saggio di conversione è aumentato del 14,79% cambiando il verbo della CTA da “Order” a “Get”.

Figura 19.11 – Il saggio di conversione è aumentato del 38,26% cambiando il verbo della CTA da Bestil (Ordina) a Fà (Ricevi). La call to action deve quindi esprimere il beneficio che l’utente riceverà, trasmettendo di conseguenza valore.

La call to action non deve essere generica La call to action non dovrebbe essere generica, ma il più possibile specifica. Per illustrare questo punto, prendiamo in considerazione uno studio dove sono state

sottoposte a test due differenti call to action. In particolare (Figura 19.12): una trasmetteva un valore (“Get Instant Access Now”), ma era molto generica; l’altra, oltre a comunicare valore, era anche molto specifica (“Read Full Essay Now”).6 Alla fine del test è risultato che la prima call to action, quella più generica, aveva raggiunto un saggio di conversione inferiore del 39% rispetto a quella più specifica.

Figura 19.12 – Il modulo con la CTA più specifica (sinistra) ha ottenuto un saggio di conversione migliore. Lo stesso risultato è stato raggiunto anche in altro studio. In questo caso le call to action sottoposte a test erano le seguenti: “Get your membership” (“Diventa socio”); “Find your gym & get membership” (“Trova la tua palestra e diventa socio”). La prima è abbastanza buona, dato che comunica valore e si focalizza su ciò che l’utente riceverà, non su ciò che deve fare. Ciononostante, è troppo generica, dato che potrebbe riferirsi a qualsiasi situazione in cui ci si può associare. Molto più specifica è la seconda call to action. Quest’ultima, infatti, è quella che ha ottenuto il risultato migliore, con un saggio di conversione più alto del 68% rispetto alla prima (Figura

19.13).

Figura 19.13 – La call to action più specifica (la seconda ) ha ottenuto il saggio di conversione più alto (+68%). Questi risultati si possono sintetizzare in un semplice principio di ottimizzazione: Le call to action che convertono di più sono quelle che offrono il maggior valore e che sono più specifiche. Quando si progetta una call to action, occorre quindi porsi due domande: 1. Quale motivazione ha il visitatore a cliccare su questo pulsante? 2. Che cosa otterrà quando cliccherà sul pulsante? La risposta a queste due domande costituirà la base per ciò che verrà scritto sul pulsante, dato che bisognerà identificare: 1. il testo che comunica valore (risposta alla prima domanda); 2. e quello che è più specifico, più preciso (risposta alla seconda domanda).

Il punto di vista dell’utente La call to action può essere resa ancora più efficace se è progettata secondo il punto di vista dell’utente, invece di quello dell’azienda: usando, cioè, frasi del tipo “crea il mio account” – punto di vista dell’utente – invece di “crea il tuo account” (punto di vista dell’azienda).

In questo modo, il linguaggio utilizzato allinea la richiesta rivolta all’utente con il suo modo di pensare e migliora il saggio di conversione, come verificato in numerosi test. Per esempio, M. Aagaard e O. Garner hanno sottoposto ad analisi due call to action – una con l’aggettivo possessivo your (vostro) e una con my (mio) – e si è raggiunto questo risultato: la seconda ha avuto un incremento dei clic del 90% (Figura 19.14).

Figura 19.14 – Cambiando your con my nella CTA si è ottenuto un incremento nei saggi di conversione del 90%. Questo test potrebbe sembrare casuale: come si può aumentare il saggio di conversione cambiando solo una parola? Per rispondere a questo dubbio, M. Aagaard ha compiuto in seguito numerosi altri test. Tutti hanno confermato quel risultato. Per esempio, cambiando la call to action da “Create My Account” in “Create Your Account”, il saggio di conversione è diminuito del 24,9% (Figura 19.15).

Figura 19.15 – Cambiando my con your si è ottenuta una diminuzione nel saggio di conversione del 24,9%. Di conseguenza, costruite la call to action secondo il punto di vista dell’utente.

Quante call to action? Idealmente, ogni pagina dovrebbero avere una sola call to action. Vari studi hanno dimostrato che minore è il numero delle call to action presenti in una pagina, maggiore è il saggio di conversione. Per esempio, nell’esperimento condotto nel 2013 da Unbounce è stato confrontato il saggio di conversione di due landing page che differivano solamente per il numero di call to action (numero di sessioni di demo a cui ci si poteva registrare). La landing page originale ne aveva 4 (Figura 19.16).

Figura 19.16 – Pagina di Unbounce con 4 call to action. La pagina di confronto ne aveva invece solo 3 (Figura 19.17).

Figura 19.17 – Pagina di Unbounce con 3 call to action. Risultato? La seconda landing page, quella con sole 3 call to action, ha ottenuto un incremento del 78% nel numero di conversioni (clic su una delle call to action). Troppe call to action confondono il visitatore che, in genere, dedica pochi istanti per osservare una pagina web e decidere che cosa fare. Questo problema si può osservare bene nella pagina riprodotta nella Figura 19.18. In questo esempio, anche se esistono call to action principali e secondarie, alla fine tutte hanno la stessa importanza visiva e non si capisce che cosa cliccare. Pertanto, il visitatore, avendo di fronte tre scelte di uguale importanza – “Start your free trial”, “How to create your site” e “Live HelpStart chat” – non ha particolari motivi per cliccare sulla call to action principale ma, anzi, deve impegnarsi nello scegliere tra tre differenti.

Figura 19.18 – Troppe call to action confondono il lettore che non capisce dove deve cliccare. (Fonte: contentmarketinginstitute.com/2011/05/landing-page-basics/). Se riduciamo il numero delle opzioni disponibili, diminuiamo l’incertezza e agevoliamo il percorso di scelta del visitatore: poche opzioni funzionano meglio di molte opzioni. La condizione per cui, quando esistono troppe opzioni, si rischia di non prendere alcuna decisione, è un fenomeno molto noto, conosciuto con l’espressione paralysis of choice (“paralisi della scelta”) o paradox of choice (“paradosso della scelta”).7 L’indagine più famosa, che supporta questa condizione psicologica, è stata eseguita alcuni anni fa in un grande supermercato californiano: in tempi diversi, sono stati predisposti due stand contenenti numerose confezioni di marmellata, ognuna con un gusto differente. Tutte potevano essere assaggiate. In un primo tempo, lo stand presentava 24 confezioni. Successivamente lo stand è stato ridotto in modo da offrire solo 6 gusti differenti. Nel primo caso, solo il 3% di tutti quelli che avevano assaggiato le marmellate ne ha poi comprato alcune confezioni. Nel secondo caso, invece, quando

erano presenti solo 6 confezioni, la percentuale d’acquisto è salita al 30%. Quindi, al diminuire delle opzioni disponibili, aumentavano le decisioni d’acquisto. Di conseguenza: meno call to action sono presenti nella pagina, maggiore sarà il saggio di conversione. Il mio consiglio è quello di inserire una sola call to action, anche ripetuta più volte. Nel caso si volesse comunque inserire nella pagina web più di una call to action, si potrebbe dare maggiore evidenza a quella principale e minima a quella secondaria. Può essere una buona soluzione. Personalmente, se proprio devo utilizzare anche una seconda call to action, preferisco collocare la principale “sopra la piega” – dove si concentra maggiormente l’attenzione del lettore – e quella secondaria “sotto la piega”. Un esempio di questa modalità è rappresentato molto bene dalla pagina di Acumium (Figura 19.19).

Figura 19.19 – La call to action principale è collocata “sopra la piega” e quella secondaria “sotto la piega”.

Quando collocare la call to action Ho già trattato questo argomento nel capitolo 15, ma lo riprendo brevemente per ribadire un concetto: la call to action deve sempre essere collocata dopo che si è fornita l’argomentazione necessaria per motivare l’utente a cliccarci sopra. Nella Figura 19.20 viene mostrato un test eseguito sulla homepage di Underwater Audio: nella prima immagine è visibile l’homepage originale, con la call to action (“Learn More”) collocata sulla sinistra e la testimonianza di un cliente posizionata sulla

destra; se il lettore segue il modello “F”, leggerà pertanto prima la call to action e dopo la testimonianza (se ci arriva).8 Nella seconda immagine della Figura viene mostrata la variante che è stata sottoposta a test, in cui è stata invertita la posizione della call to action con quella della testimonianza. In questo caso, si può osservare il percorso seguito dallo sguardo, che si muove secondo il diagramma di Gutenberg. Questo piccolo cambiamento provocò un incremento delle vendite del 35,6%. Come mai? Perché i visitatori avevano necessità di leggere prima la testimonianza, per essere motivati a comprare il prodotto. E siccome osservavano la pagina secondo il diagramma di Gutenberg, nella variante seguivano in modo naturale il percorso (titolo della pagina > immagine > testimonianza > call to action), cosa che non avveniva nell’homepage originale. In quel caso, il percorso dello sguardo era: titolo della pagina > immagine > call to action > testimonianza.

Figura 19.20 – Le due pagine di Underwater Audio sottoposte a test. Quindi: collocate la call to action dopo aver fornito tutto ciò che occorre per motivare l’utente a cliccarci sopra.

Conclusioni Pur essendo un elemento molto semplice da costruire, non è facile progettare una call to action che converta. Infatti, modifiche anche minime al suo design e al suo testo possono avere significative influenze sul saggio di conversione. Per quanto riguarda il design, non esistono delle soluzioni che siano valide in tutte le situazioni. Ciò che influisce è il contesto e il layout della pagina. In linea di massima si

può osservare che: 1. il pulsante deve essere di dimensioni tali da essere facilmente notato, senza però essere eccessivamente dominante; 2. il pulsante deve avere un colore che lo faccia emergere dal resto della pagina, che cioè contrasti bene con i colori utilizzati per gli altri elementi. Relativamente al testo, invece, esistono delle precise regole che occorre osservare. Deve: 1. indicare il beneficio (valore) che l’utente otterrà cliccando sulla call to action; 2. non essere generico, ma specifico sullo scenario di conversione (quello che l’utente otterrà); 3. essere costruito secondo il punto di vista dell’utente (aggettivi e pronomi personali in prima persona). Infine, si consiglia di utilizzare una sola call to action per pagina.

1. Aagaard M., “10 Call-to-Action Case Study w/Takeaways & Examples from Real Button Tests”, contentverve. com/10-call-to- action-case-studies-examples-from-button-tests/ (25 marzo 2013). 2. Sloan E., “9 Landing Page Design Techniques That Will Make You a Conversion Hero”, unbounce.com/design/9landing-page-design-techniques-conversion-hero/ (19 marzo 2014). 3. Gardner O., “[How to ] Use Design Principles to Increase Conversions”, unbounce.com/conversion-rateoptimization/design-principles-increase-conversions/ (24 febbraio 2013). 4. Burstein D., “5 Common Call-to-action Errors”, www.marketingexperiments.com/blog/marketing-insights/call-toaction-errors.html (25 giugno 2012). 5. Aagaard M., “10 Simple Things You Can Do to Fix Your Website Copy – Starting Today!”, contentverve.com/10-simple-things-flx-your-website-copy/ (4 agosto 2013). 6. Aagaard M., “[How To] Write a Call-to-Action that Converts – With Case Studies”, unbounce.com/conversionrate-optimization/how-to-write-a-call-to-action-that-converts-with-case-sudies/ (3 settembre 2013). 7. Schwartz B., The Paradox of Choice: Why More Is Less, Harper Perennial, 2005. 8. Chawla S., “5 Design Principles for High Converting Website”, resources.vwo.com/design-principles-for-highconverting-websites.

CAPITOLO 20

LE IMMAGINI

In molti siti, l’uso delle immagini è spesso imbarazzante. Questo accade perché si crede che: i siti con molte immagini siano sempre più belli di quelli che ne hanno poche o non ne hanno del tutto; più vistose sono, più bello è il sito; attirano l’attenzione e, di conseguenza, i visitatori indugeranno di più sulla pagina; pagine di solo testo rendono il sito noioso. Il risultato è che molti siti utilizzano immagini solamente perché devono riempire la pagina e, quindi, spesso non hanno legame con il suo contenuto o confondono il visitatore e lo distraggono. In realtà, come ha dimostrato parecchi anni fa una ricerca commissionata dal grande pubblicitario David Ogilvy, le immagini possono ridurre il numero dei lettori. L’unico dato certo è che le immagini attraggono l’attenzione. Per esempio, osservate la Figura 20.1: quale pagina attira maggiormente la vostra attenzione? Quale leggereste con più piacere?1 Ovviamente, in questo caso le immagini favoriscono la lettura. Però, senza alcune specifiche condizioni, l’attenzione non si traduce necessariamente in lettura del testo, perché le immagini possono allontanare da questo, e di conseguenza anche dal principale obiettivo del sito: la conversione.

Figura 20.1 – Due identiche pagine, solo che quella sulla destra non ha le immagini. Comunque è anche vero che, se correttamente utilizzate, le immagini possono favorire la conversione. Per questi motivi, il loro uso deve essere attentamente studiato. Pertanto, prima di inserire un’immagine in una pagina, occorre pensarci bene e poi, se decidiamo di procedere in tal senso, dobbiamo rispettare alcune importanti condizioni. Vediamo quali sono.

Le immagini devono avere uno scopo Le immagini non devono essere utilizzate per riempire lo spazio, ma per aggiungere valore al sito. Il loro utilizzo deve essere finalizzato a raggiungere un obiettivo. In pratica, esistono solo due valide ragioni per inserire un’immagine: 1. fornire una dimostrazione visiva; 2. stimolare la curiosità. Nel primo caso, l’immagine dovrebbe essere usata quando l’argomento che si sta illustrando non può essere spiegato bene con le parole – o ne richiederebbe troppe– e ha quindi bisogno di un supporto visivo, come quando si deve mostrare un prodotto o si sta parlando di una caratteristica o di un beneficio. In sintesi, si presenta qualcosa ed è utile o necessario far vedere un’immagine strettamente collegata a essa. Nel secondo caso, l’immagine dovrebbe far pensare immediatamente: “Che cosa sta succedendo?”. In questo modo, si spinge il lettore a leggere il testo per scoprirlo. Di

solito, però, è molto difficile trovare le immagini giuste per stimolare la curiosità e, nella maggior parte dei casi, alla fine queste distraggono dal testo. Quando l’immagine ha l’obiettivo di stimolare la curiosità può essere inserita sopra il titolo della pagina. Altrimenti, è meglio, come ho spiegato nel capitolo 15, inserirla dopo. In entrambi i casi, le immagini non devono mai essere generiche. Se un’immagine è inserita solamente con un intento ornamentale, allora si sta lavorando male. E se la stessa è usata in tanti altri siti, in contesti diversi, allora si sta lavorando veramente male. Osservate la Figura 20.2 che mostra uno studio di eye-tracking: lo sguardo dei lettori ha evitato di soffermarsi sulla foto, che ha evidentemente un compito meramente riempitivo e non aggiunge nulla al testo della pagina.2

Figura 20.2 – Test che mostra come le persone non rivolgano neanche uno sguardo all’immagine. Un test che potete fare da soli è quello di nascondere con la mano, o con un foglio, o con qualche altro elemento, l’immagine che compare sulla vostra pagina: se questa non perde efficacia, forse è il caso di rifletterci un po’ su. In fondo, l’immagine deve

solamente aiutare a valorizzare il testo, ad aumentarne il valore. Se non è così, allora potete rinunciarci tranquillamente. Ricordate: l’immagine deve essere utile per illustrare quello che state scrivendo.

Le immagini devono essere “reali” Navigando sul Web è molto facile trovare dei siti che mostrano immagini di persone ricavate da qualche catalogo online. Non sono immagini di persone che lavorano nell’impresa o di un cliente: sono foto standardizzate di modelli o modelle che sorridono, telefonano, stringono le mani, saltano, corrono. Sono cioè realizzate professionalmente e che, non avendo un preciso contesto, possono essere inserite in tante differenti situazioni e in tanti differenti siti. Per questo motivo non sono pertinenti ma assolutamente irrilevanti. La foto mostrata nella precedente Figura 20.2 era una di questo tipo. Osservate adesso l’immagine rappresentata nella Figura 20.3. Come ha ben scritto D. Meerman Scott: “Chi diavolo sono queste persone? Chi sono queste persone giovani, felici, belle, multiculturali con grandi denti bianchi e bei capelli, che bazzicano nei siti web di molte società sparse in tutte le parti del mondo in eleganti e moderne sale riunioni? [Nelle centinaia di società che ho visitato in oltre 20 Paesi] non ho mai visto queste persone che sembrano vivere in un misterioso mondo virtuale […].”3

Figura 20.3 – Esempio di una foto standardizzata. Chi naviga su Internet conosce molto bene questo tipo di foto e sa che sono finte. Pertanto, non gli interessano e, in qualche modo, distolgono il loro interesse dalla pagina. Inoltre, le foto “preconfezionate” tolgono credibilità al sito. Non vorrei esagerare, però, per semplificare, è come se il visitatore pensasse “falsa immagine = falso sito”. Al contrario, immagini di persone “reali” possono rompere le barriere che a volte sussistono con l’utente, creando un maggior coinvolgimento, come si può osservare nella Figura 20.4, che ritrae alcuni ospiti di una residenza per anziani.

Figura 20.4 – Questa foto ritrae alcuni ospiti di una delle residenze della Heritage Communities. A questo proposito, è interessante il test che è stato eseguito sulla homepage della Harrington Movers, un’impresa di trasporti di New York. In questa pagina era presente una foto generica presa da Internet che non aveva alcun particolare significato (Figura 20.5).4

Figura 20.5 – L’homepage di Harrington Movers. Un consulente dell’impresa, convinto che questa foto non fosse collegata con il servizio offerto, fece fare un test in cui l’homepage originale veniva messa a confronto con due varianti: una mostrava una foto che ritraeva i dipendenti dell’azienda al posto di quella originale; l’altra raffigurava un loro camion con il logo dell’azienda. Il risultato fu sorprendente: il saggio di conversione di entrambe queste due nuove versioni superò la prima di circa il 45% (Figura 20.6).

Figura 20.6 – Le due varianti con la foto dei dipendenti e con un camion dell’azienda fecero registrare saggi di conversione superiori del 45% rispetto alla prima versione dell’homepage. In un altro caso, si sottopose a test l’homepage di una società che mostrava una sorridente modella che indossava una cuffia auricolare. Chiaramente si trattava di una foto ricavata da qualche archivio presente su Internet (Figura 20.7). Si decise di testarla con una versione che, al posto della modella, mostrava la foto del famoso fondatore dell’impresa (Figura 20.8).

Figura 20.7 – Homepage con la foto di una modella.

Figura 20.8 – Homepage che, al posto delle modella, mostra la foto del fondatore dell’impresa. Il risultato fu un aumento di conversioni di ben il 35%. Questi due test, come altri simili condotti negli ultimi anni, ci suggeriscono due considerazioni: la prima è che, quando è il caso, non si deve esitare a inserire delle immagini dei dipendenti dell’azienda. Infatti, alle persone piace trattare con persone reali e non con dei siti web. La seconda è che, quando dovete scegliere l’immagine da mettere su un pagina, dovete pensare a questo principio: un’immagine vale quanto il valore che comunica. Non dobbiamo quindi scegliere delle immagini che crediamo possano rendere più bello il nostro sito ma, piuttosto, dobbiamo usare quelle che dicono qualcosa sul valore di ciò che stiamo offrendo. Per esempio, dando quella concretezza alla nostra offerta che le parole non riescono a fornire; oppure, spiegando meglio qualcosa che stiamo scrivendo. Questo non significa che non dovete mai utilizzare foto che provengono da cataloghi, ma semplicemente che dovete sempre chiedervi se servono al vostro

obiettivo finale, come per esempio descrivere una situazione o un prodotto. Così, prima di utilizzare l’immagine di una modella sorridente, assicuratevi che comunichi valore.

Le immagini dei visi delle persone attraggono di più Di solito, quando in una pagina web viene mostrato il viso di una persona, lo sguardo del visitatore si sposta per osservarlo e si valutano le emozioni che trasmette. In particolare, i visi umani: 1. attirano l’attenzione più di quasi ogni altra cosa; 2. trasmettono emozioni: se un viso sembra genuinamente felice o triste, ci fa sentire subito in maniera simile. Per dimostrare quanto sono importanti i visi delle persone possiamo considerare il test realizzato dalla boutique online di arte Medalia Art. La società era delusa dal basso saggio di conversione della sua homepage, che conteneva alcuni dipinti dei suoi artisti. Cliccando su uno di questi dipinti, si arrivava nella pagina dell’artista dove si potevano osservare le sue creazioni e comprarle. Si decise perciò di fare un test mettendo a confronto questa versione dell’homepage con una in cui erano mostrati i visi degli artisti (Figura 20.9).5 Alla fine del test, la versione con i volti degli artisti fece registrare un incremento del 95% nel saggio di conversione. Quindi: i visi delle persone, quando rappresentano persone reali e non modelli o modelle, hanno un grande potere. Perciò, se hanno un senso e danno valore alla vostra pagina, fateci un pensiero.

Figura 20.9 – Parte dell’homepage originale di Medalia Art (in alto) e della variante posta a confronto (in basso).

Le immagini non devono avere troppi soggetti A volte, le foto di gruppo – o con troppo oggetti – non vanno bene perché non hanno un focus principale e, quindi, i lettori non sanno dove guardare. Con troppe facce o troppi oggetti da osservare, l’efficacia di un’immagine diminuisce sensibilmente. A meno che non vogliate illustrare una particolare situazione o un particolare ambiente – come nella precedente foto 20.4 – cercate di usare immagini semplici, con il focus su uno o due soggetti, che si tratti di persone o di qualcos’altro.

Le immagini dovrebbero avere le didascalie Un’immagine collocata in mezzo al testo attira l’attenzione del lettore più del testo stesso e potrebbe anche distoglierlo dal continuare a leggere. In questo caso, è utile

collocare una didascalia sotto la foto che, in qualche modo, spinga il lettore a proseguire la lettura del testo (Figura 20.10). Se date un’occhiata a un giornale, noterete che tutte le foto hanno una didascalia. Perché? Perché, in media, le didascalie collocate sotto le foto sono lette il 300% di volte più del testo. Di conseguenza, non usarle, o usarle in modo sbagliato, significa perdere un’opportunità di coinvolgere un largo numero di potenziali lettori. N e l l a Figura 20.11, l’immagine potrebbe sembrare puramente decorativa e ostacolare l’attenzione del lettore. Però, grazie alla didascalia, acquisisce una sua specifica forza. Infatti, la didascalia ci dice: “Se l’acqua è troppo calda, il tè diventerà amaro.” È quanto viene detto anche nel punto n. 4, ma il testo può essere più facilmente dimenticato rispetto a un’immagine appropriata sostenuta da una didascalia.

Figura 20.10 – Esempio di foto con didascalia.

Figura 20.11 – L’immagine, unita alla didascalia, evidenzia un importante messaggio. (Fonte: D’Souza S., op. cit.).

Le immagini non dovrebbero ostacolare la lettura del testo Quando leggiamo facciamo sempre riferimento al margine sinistro, dato che nei Paesi occidentali il percorso di lettura va da sinistra a destra. Di conseguenza, questo margine funge da àncora, cioè è un posto dove lo sguardo tende a ritornare. Senza di esso sarebbe difficile leggere. È per questo motivo che il testo non è mai giustificato al centro o a destra: se la posizione del margine sinistro cambiasse, dovremmo riposizionarla prima di continuare a leggere perché il naturale percorso dello sguardo sarebbe interrotto. Purtroppo, molti siti, allineano le loro immagini lungo il margine sinistro e pongono il testo al loro fianco. In questo modo costringono il margine sinistro del testo a cambiare posizione, rompendo il flusso naturale dello sguardo, forzandolo a riadattarsi, e spesso non aiutano la lettura. Nella Figura 20.12 è rappresentata una pagina che dimostra molto bene come questo tipo di allineamento sia innaturale.

Figura 20.12 – Pagina con l’allineamento a sinistra dell’immagine. Osservando adesso la pagina mostrata nella Figura 20.13 probabilmente ci porremmo questa domanda: non sarebbe stato meglio se l’immagine del diamante fosse stata collocata alla destra del testo e non alla sua sinistra, in modo da rendere più agevole la lettura? E, aggiungo, per collegarmi al paragrafo precedente: non sarebbe stato meglio se l’immagine avesse avuto una didascalia?

Figura 20.13 – L’immagine del diamante posta alla sinistra del testo rende più difficile la lettura. Nella Figura 20.14 vi mostro una pagina che credo sintetizzi molto bene perché le immagini alla sinistra del testo, molto spesso, non vadano bene. Osservate, invece, come il testo allineato a sinistra, con l’immagine alla sua destra, offra una leggibilità senza dubbio migliore (Figura 20.15).

Figura 20.14 – Le immagini collocate sulla sinistra disturbano la lettura. (Fonte: D’Souza S., op. cit.).

Figura 20.15 – La leggibilità migliora se il testo è allineato a sinistra. Per finire: quando utilizzate delle foto, cercate di non posizionarle a fianco del margine di sinistra, perché molto spesso, anche se non sempre, disturbano la lettura.

Conclusioni Le immagini possono aiutare ad attirare l’attenzione e a rendere la lettura del testo più facile e più gradevole, favorendo la conversione. Però, devono essere usate con molta attenzione. Verificate che servano effettivamente a dimostrare visivamente qualcosa che avete scritto o che servano per attirare la curiosità. Cercate di attenervi alle regole che vi ho indicato e, in caso di dubbio, è meglio non usare alcuna immagine: una foto sbagliata ha effetti molto negativi che incidono pesantemente sul saggio di conversione.

1. D’Souza S., How Visuals Help Increase Sales Conversion, Psychotactis Ltd, 2009. 2. Nielsen J., “Photo as Web Content”, www.nngroup.com/articles/photos-as-web-content/ (01 novembre 2010). 3. Scott D.M., “Who The Hell Are These People?”, www.webinknow.com/2009/10/who-the-hell-are-these-

people.html (26 ottobre 2009). 4. Chawla S., “Enough of Stock Photo: See How Adding Real Photos Improved Conversions”, vwo.com/blog/stockphotos-reduce-conversions/ (21 febbraio 2014). 5. Chopra P., “Do human photos on a landing page increase sales and conversions?”, vwo.com/blog/human-landingpage-increase-conversion-rate/.

CAPITOLO 21

GLI ELEMENTI DI DISTRAZIONE

Quando un visitatore arriva su un sito deve cercare di: 1. comprendere in pochi secondi l’argomento della pagina; 2. capire se gli interessa; 3. individuare eventualmente che cosa leggere. Poi, dovrebbe cliccare sulla call to action. Questo processo deve avvenire in modo semplice, chiaro e veloce. Purtroppo, molto spesso non è così, dato che ogni elemento della pagina – dalle immagini ai blocchi di testo, dai colori utilizzati agli oggetti in evidenza – influenza questa veloce comprensione. Il problema è che maggiore è il numero degli stimoli visivi e delle possibili azioni da compiere, maggiori sono le occasioni di distrazione. E se un elemento ci distrae dall’obiettivo della pagina, ci concentriamo su di esso e perdiamo di vista quello che – secondo le intenzioni di chi ha sviluppato la pagina – avremmo dovuto fare. Di conseguenza, diminuiscono le probabilità che il visitatore compia l’azione prevista: riempire un modulo, registrarsi, comprare qualcosa, richiedere un appuntamento ecc. Queste opportunità di distrazione abbassano il saggio di conversione del sito. Occorre quindi minimizzare tutti i potenziali elementi di distrazione come, per esempio, informazioni non necessarie, immagini slegate dall’argomento della pagina, link che spingono il visitatore a lasciare la pagina e così via.

Che cosa succede quando ci concentriamo su qualcosa La nostra capacità d’attenzione è limitata. Di solito, quando focalizziamo l’attenzione su qualcosa, riduciamo la nostra capacità di pensare ad altro o di percepirlo, anche se sono cose ovvie. Se, per esempio, parliamo al cellulare mentre stiamo passeggiando per strada, automaticamente l’attenzione che rivolgiamo al nostro interlocutore sottrae interesse a ciò che incrociamo durante la passeggiata: persone, negozi, insegne ecc. Un famoso test, eseguito da Christopher Chabris e Daniel Simons, dimostra molto bene questo nostro limite: ad alcuni soggetti venne mostrato un video nel quale due gruppi di persone – distinte dal colore della maglietta (bianca e nera) – si scambiavano

la palla all’interno del proprio gruppo.1 Gli spettatori dovevano contare quante volte i giocatori con la maglietta bianca si passavano la palla. Mentre scorrevano le immagini dei passaggi, un gorilla camminava in mezzo ai giocatori (Figura 21.1).

Figura 21.1 – Alcune immagini tratte dal video mostrato nel test realizzato da C. Chabris e D. Simons. Alla fine del video, più della metà dei soggetti sottoposti al test dichiarò di non aver visto il gorilla: la loro mente era talmente concentrata su un’attività – contare il numero dei passaggi di palla – che tutto il resto passava in secondo piano. Questo esperimento dimostra che abbiamo difficoltà a concentrarci su più cose. Quindi, se la nostra capacità d’attenzione è limitata, dobbiamo evitare di inserire nella nostra pagina elementi che potrebbero attirare l’attenzione del lettore allontanandolo dal nostro obiettivo.

Gli elementi di distrazione nel Web Molti studi hanno dimostrato che le persone non notano molti degli elementi che compaiono su una pagina web. Questo è normale: le persone non possono processare molta informazione tutta in una volta. Se l’attenzione viene attratta da un elemento, si riducono le possibilità che ci si focalizzi su altri (come ha dimostrato il test del gorilla). Per individuare quali elementi possono distrarre i visitatori, si deve pensare al

principale obiettivo della pagina: ogni cosa che può attrarre la loro attenzione, o che li può far cliccare verso qualcosa che non è connesso con l’obiettivo principale, è un possibile motivo di distrazione. Osserviamo una pagina del sito di WorkZone: l’obiettivo principale è quello di far compilare un modulo in cambio di una demo. La pagina contiene poche cose: un breve modulo e alcune recensioni di clienti (Figura 21.2).2

Figura 21.2 – La pagina di WorkZone sembra essere focalizzata sul modulo. A prima vista sembrerebbe che la pagina sia stata costruita proprio per focalizzare l’attenzione del visitatore sul modulo e sulla call to action. In realtà, non è così. Dopo un po’ di tempo che il sito era stato pubblicato, alcuni dirigenti dell’azienda – non essendo soddisfatti dei risultati – ritennero necessario provare a fare qualche modifica. Si focalizzarono perciò sull’unico elemento che poteva distrarre l’attenzione dei visitatori: il blocco delle referenze dei clienti posto sulla sinistra. Più precisamente, si concentrarono sui due loghi colorati, Subway e Kansas State. Venne quindi testata un seconda versione della pagina, con i loghi in bianco e nero. Dopo 22 giorni di test, si ebbero questi risultati: la versione con i loghi in bianco e nero produsse un incremento del 33,9% rispetto alla pagina con i loghi colorati. Le referenze dei clienti sono molto importanti per dare credibilità a una pagina web. Ma, in questo caso, i loghi colorati sovrastavano il modulo, nonostante le sue grandi dimensioni. Molti visitatori cliccavano su quelli e non tornavano poi a completare il modulo.

Che cosa ci insegna questo test? Che anche elementi che potrebbero sembrare ininfluenti possono distrarre l’attenzione delle persone e, se c’è un link, possono portare via i visitatori. Vediamo adesso un test eseguito dalla società finlandese Taloon sulle pagine di prodotto del suo sito. L’obiettivo era quello di migliorare i clic sulla call to action “Add to Cart”. L’ipotesi era, invece, che i pulsanti di condivisione sociale posti in fondo alla pagina, sotto alle foto di alcuni prodotti, potessero avere un’influenza negativa. Di conseguenza venne sottoposta a test, insieme alla pagina originale, una versione senza i pulsanti di condivisione sociale (Figura 21.3).

Figura 21.3 – Pagina con i pulsanti di condivisione sociale (sinistra) e senza pulsanti (destra). Il risultato fu sorprendente: la nuova pagina fece registrare un incremento dell’11,9%.3 I pulsanti distraevano i visitatori e li allontanavano dalla call to action. Vediamo un altro esempio. Nei siti di e-commerce, una delle pagine più delicate è quella del carrello degli acquisti. Qui, ogni elemento che può deviare l’attenzione ha impatti devastanti, perché spinge all’abbandono del carrello, che è uno dei principali problemi di questo tipo di siti. Bionic Gloves, una società che vende online guanti di ogni tipo, effettuò un test per verificare se le due caselle che richiedevano il codice dell’offerta speciale (“Special

Offer”) e della “carta regalo” (“Gift Card”) potessero avere effetti negativi sugli acquisti e sull’abbandono del carrello.4 Nella Figura 21.4 è mostrata la pagina originale.

Figura 21.4 – La pagina originale di Bionic Gloves con la casella dell’offerta speciale e della carta regalo. Nella Figura 21.5 è mostrata invece la pagina messa a confronto senza le due caselle.

Figura 21.5 – La pagina posta a confronto senza la casella dell’offerta speciale e della carta regalo. Il test durò 48 ore e coinvolse oltre 1400 visitatori. Alla fine, risultò che la variante aveva fatto registrare un aumento del fatturato complessivo pari al 24,7%. Perché avvenne ciò? Perché, per dirla con le parole di uno degli esperti che condusse il test: “Ogni volta che si lascia una porta aperta per abbandonare il percorso della conversione – anche se sembra che ci sia la possibilità di tornare indietro – si rischia di perdere delle vendite. Mostrando i campi dei due codici, gli utenti erano motivati a lasciare il sito per cercare il codice promozionale. A quel punto, il processo di conversione era interrotto […].” Quindi, in questo caso, che cosa avveniva? Che chi non aveva i codici promozionali andava su Google a cercarli e spesso cliccava su altri risultati, dimenticandosi di tornare sul sito (Figura 21.6).

Figura 21.6 – La ricerca che veniva fatta su Google per ricercare i codici promozionali di Bionic Gloves. Per concludere, vorrei sottoporvi un ultimo interessante test. È stata presa in considerazione l’homepage di JellyTelly, una società che fornisce programmi televisivi rivolti alle famiglie cristiane.5 La sua homepage ha come obiettivo quello di spingere i visitatori a richiedere un prova gratuita del servizio (“Start Your Free Month Trial”) (Figura 21.7). Lo scopo del test era quello di individuare alcuni elementi di distrazione che potevano abbassare la richiesta del mese gratuito di prova. Fu quindi confrontata l’homepage originale con una variante in cui erano stati rimossi i seguenti elementi: 1. il menu di navigazione; 2. il box di ricerca in alto a destra; 3. la serie di immagini poste in alto sotto il menu di navigazione; 4. i link collocati a piè di pagina (nel footer). Nella Figura 21.8 si possono osservare le due pagine messe a confronto.

Figura 21.7 – L’homepage di JellyTelly sottoposta a test.

Figura 21.8 – Le due pagine di JellyTelly sottoposte a test. Il risultato fu straordinario: la seconda homepage, quella costruita con l’eliminazione di questi potenziali elementi di distrazione, ottenne un numero di registrazioni superiore del 105% rispetto a quella originale. Che cosa ci suggeriscono questi test? Che, per ottimizzare il saggio di conversione, occorre rimuovere tutti i possibili elementi di distrazione. Naturalmente, è possibile che ci siano alcuni elementi che non possono essere eliminati perché importanti. Però, pur essendo necessari, potrebbero avere dimensioni o colori che disturbano. Pertanto, dedicate un po’ di tempo a valutare le dimensioni e i colori di tutti gli elementi che compongono la pagina, per verificare che non distolgano troppo l’attenzione dalla call to action e dal modulo (quando è presente). Poi, dovete porvi la seguente domanda:

Oltre che sulla call to action, dove possono cliccare i nostri visitatori? Infatti, ogni link presente sulla pagina – diverso dalla call to action – è un motivo di distrazione per il visitatore e un’opportunità per lasciarla. Osservate, per esempio, la Figura 21.9.6 Considerando tutti i link presenti (evidenziati dai riquadri) – menu di navigazione, link nel testo, link nel box sulla destra – le possibilità di uscire dalla pagina sono oltre venti!

Figura 21.9 – Questa pagina ha oltre venti vie di fuga (link).

Oltre che sulla call to action, dove possono cliccare i nostri visitatori? Questo numero può andare bene se noi volessimo che i visitatori navigassero ed

esplorassero facilmente il sito. Però, nella maggior parte dei casi, questo non è il nostro obiettivo. Noi vogliamo che i visitatori compiano una precisa azione: compilare un modulo e cliccare sul pulsante della call to action. Da questo punto di vista, dobbiamo quindi cercare di eliminare tutti (o quasi tutti) i link che distolgono l’attenzione dal nostro obiettivo principale.

Il menu di navigazione Uno dei contenitori di link più significativi, presente nella maggior parte dei siti, è il menu di navigazione. La sua funzione primaria è quella di fornire ai visitatori i principali argomenti del sito, in modo che possano navigare secondo le loro preferenze. Questo, però, può distrarli dall’obiettivo principale del sito, dato che può spingerli a cliccare su una voce del menu portandoli su un’altra pagina, con conseguente abbassamento del saggio di conversione. Un esempio di questa “distrazione” lo possiamo verificare nel test condotto dalla società Pair sulla homepage del suo sito. In questa pagina, era possibile scaricare l’applicazione o cliccare su una delle tre voci presenti nel menu di navigazione, in alto sulla sinistra, molto piccolo e poco visibile (Figura 21.10).7

Figura 21.10 – l’homepage di pair. Si decise di sottoporre a test la pagina, registrando i punti dove gli utenti cliccavano prevalentemente. Dopo un po’ di tempo, si ebbe il risultato riprodotto nella Figura

21.11. Come si può osservare, molte persone cliccavano sul menu di navigazione in alto sulla sinistra – anche se era poco visibile – invece di cliccare sui pulsanti di conversione (AppStore e Google Play). Si pensò, allora di spostare il menu di navigazione in basso e di testarlo (Figura 21.12).

Figura 21.11 – L’heat map che risultò registrando i clic sulla homepage di Pair.

Figura 21.12 – L’homepage di Pair con il menu di navigazione posizionato in basso. Il risultato del test fu un aumento del saggio di conversione del 25%. Diversi altri test hanno dimostrato che, eliminando il menu di navigazione dalla pagina, il saggio di conversione aumenta. Per esempio, Yuppiechef, un negozio online

che vende utensili da cucina, ha condotto un test per verificare se, eliminando il menu di navigazione dalla pagina di registrazione al servizio “Wedding Registry” (“Lista nozze”), si otteneva un numero maggiore di conversioni. Nella Figura 21.13 si può osservare la pagina originale. La variante, senza il menu di navigazione, è rappresentata nella Figura 21.14. Risultato: la nuova pagina, senza il menu di navigazione, ha raddoppiato il saggio di conversione, passando dal 3% al 6%. Questo risultato è stato confermato da un altro test, in cui è stata sottoposta a verifica l’homepage di Minders, un sito per baby-sitter (Figura 21.15).8

Figura 21.13 – La pagina di Yuppiechef con il menu di navigazione.

Figura 21.14 – La variante di Yuppiechef (senza il menu di navigazione) sottoposta a test.

Figura 21.15 – La homepage di Minders. Pur se questa pagina faceva già registrare un ottimo saggio di conversione (9,2%), si volle verificare la possibilità di aumentarlo. Si decise di sperimentare una variante senza il menu di navigazione, in modo che l’utente si potesse concentrare sull’unico

vero obiettivo della pagina: registrarsi (“Sign Up”). Pertanto, venne sottoposta a test, insieme alla pagina originale, quella mostrata nella Figura 21.16.

Figura 21.16 – La variante di Minders sottoposta a test (senza il menu di navigazione). I risultati furono straordinari: nel mese di durata dell’esperimento, il saggio di conversione di questa seconda pagina arrivò fino al 17,6%, quasi il doppio di quello ottenuto da quella originale. Sembrerebbe quindi che il menu di navigazione – anche quando ha dimensioni minime, come nel caso di Minders o di Pair – sia un elemento di distrazione che influisce negativamente sul saggio di conversione. A questo punto ci si potrebbe porre questa domanda:

Per migliorare il saggio di conversione è necessario eliminare il menu di navigazione? Posta in questi termini, la domanda potrebbe sembrare assurda, dato che siamo troppo abituati a trovare in tutti i siti il menu di navigazione in alto (o sulla sinistra). Lo utilizziamo spesso e non riusciremmo a pensare a un sito che non lo possieda. Diciamo pure che questo elemento è ormai un punto fermo: abbiamo bisogno di

guardare questo menu e ci aspettiamo che si trovi in alto o sulla sinistra. Se non ne abbiamo bisogno, lo ignoriamo. Ma, all’occorrenza, sappiamo che è lì. Però, è anche vero che gli utenti dipendendo sempre meno dai menu del sito. Infatti, come abbiamo visto, ormai la maggior parte delle persone arriva sulla pagina desiderata direttamente dai motori di ricerca, saltando completamente l’homepage. Come hanno scritto Jakob Nielsen e Kara Pernice:9 “Fintanto che c’è un link che li porti dove vogliono, gli utenti non hanno bisogno dei menu, che stanno perdendo sempre più di importanza per tutti i visitatori che hanno un obiettivo limitato e immediato.” Se il menu di navigazione diventa meno necessario, allora possiamo cambiargli posizione o minimizzarlo. In che modo? Nel primo caso, si può mettere il menù a fondo pagina, come hanno fatto Pair o Moma (Figura 21.17).

Figura 21.17 – Il sito di Moma ha il menu di navigazione in basso. Nel secondo caso, si può utilizzare un menu ridotto al minimo, come accade con l’hamburger menu, così chiamato perché è raffigurato da un’icona con tre linee parallele che, secondo alcuni dotati di molta immaginazione, assomiglia a un hamburger (Figura 21.18).10

Figura 21.18 – Il menu hamburger (sulla destra) è chiamato in questo modo perché assomiglia a un hamburger. Cliccando sull’icona appare verticalmente il menu di navigazione. In questo modo, l’attenzione dell’utente non viene distratta, ma si dà comunque la possibilità di navigare nel sito: infatti, il menu viene visualizzato solamente se l’utente ne ha veramente bisogno, cliccando sull’icona. Per esempio, nel nuovo sito di JellyTelly, costruito dopo il test di cui ho parlato prima, è stato adottato l’hamburger menu (Figura 21.19).

Figura 21.19 – Il nuovo sito di JellyTelly ha adottato l’hamburger menu. L’hamburger menu è ormai utilizzato da numerosi siti, soprattutto se è composto da molte voci.

Alcuni esperti, pur non contestando la validità di questa soluzione, hanno manifestato dei dubbi sulla difficile comprensione dell’icona, che è ancora poco conosciuta: “Non sembra per nulla un menu, a meno che non si sappia già che è un menu.”11 In realtà, la sola icona con le tre righe parallele potrebbe essere ancora poco intuitiva, anche se ormai è sempre più utilizzata. L’esperta di usabilità Katie Shervin, per renderne più chiaro il significato, ha consigliato di aggiungere un’etichetta (con la parola “Menu”) (Figura 21.20).12

Figura 21.20 – Esempio dell’icona hamburger menu con l’aggiunta della parola “menu”. In realtà, alcuni test eseguiti di recente, hanno dimostrato che questa soluzione è per adesso la migliore insieme a quella con la sola parola “menu” (Figura 21.21).

Figura 21.21 – Esempio di icona “menu”. A mio avviso, l’hamburger menu rappresenta la soluzione migliore se si ragiona nell’ottica di ottimizzare il saggio di conversione (Figura 21.22).

Figura 21.22 – L’hamburger menu (destra) ha un impatto sul saggio di conversione migliore del menu tradizionale (sinistra).

Conclusioni Quando esiste la necessità di focalizzare l’attenzione del visitatore su un obiettivo specifico – compilare un modulo, registrarsi, fissare un appuntamento, comprare qualcosa ecc. – bisogna costruire la pagina in modo che non presenti alcun motivo di distrazione dal nostro obiettivo. Occorre, per esempio, valutare se la dimensione e/o il colore di certi elementi presenti nella pagina non distraggano l’attenzione dal modulo o dalla call to action. Il maggior pericolo di distrazione è probabilmente rappresentato dai link, dato che conducono all’esterno della pagina. Pertanto, bisognerebbe evitare, per quanto possibile, di inserirli almeno nelle principali pagine di conversione. In questo senso, anche i menu di navigazione possono essere dei motivi di distrazione. L’utilizzo dell’hamburger menu può essere un’ottima soluzione, dato che minimizza il problema della distrazione e, contemporaneamente, consente a chi ne ha bisogno di muoversi all’interno del sito. Il problema degli “elementi di distrazione” può influenzare molto il saggio di conversione. Per questo motivo, consiglio di analizzare ogni pagina del proprio sito domandandoci sempre:

Che cosa potrebbe distrarre il visitatore dal cliccare sulla call to action?

1. Il video si può vedere a questo indirizzo: www.theinvisiblegorilla.com/videos.html. 2. Taruna M., “Testimonials are Important but They Can Overshadow Your Website”, vwo.com/blog/testimonialscan-overshadow-website-goal/ (08 febbraio 2014). 3. Nagpal M., “Removing Social Sharing Buttons Increases Conversions”, vwo.com/blog/removing-social-sharingbuttons-from-ecommerce-product-page-increase-conversions/ (10 gennaio 2014). 4. Taruna, “Prome Code Box on your Shopping Cart Page could be Bleeding Dollars. A/B Test it”, vwo.com/blog/promo-code-box-ecommerce-website-bleeding-dollars-ab-test/ (13 marzo 2015). 5. Chawla S., “JellyTelly Found their Navigation Elements Where a Distraction, Are You Making the Same Mistake?”, vwo.com/blog/removing-distractions-increased-conversion-rate/ (09 agosto 2013). 6. Jenkins T., “3Ways To Double Your Website Conversion Rates – Why Tips Every Marketer Must Know”, preneur-marketing.com/online-marketing/3-ways-double-website-conversion-rates-every-marketer-needs/. 7. Deswal S., “3 Ways to Increase Conversions Using Heatmaps”, https://vwo.com/blog/increase-conversionsusing-heatmaps/ (28 febbraio 2013). 8. Sparkpage, “Unconvential Advice – Removing Your Menu Could Double Conversion Rates”, www.sparkpage.com/no-navigation-more-conversions/ (19 ottobre 2012). 9. Nielsen J. e Pernice K., Eyetracking Web Usability, Pearson Italia, 2011, pag. 115. 10. Antonio, “A Brief History of Hamburger Menu”, http://blog.placeit.net/history-of-the-hamburger-icon/ (29 ottobre 2014). 11. Rand-Hendriksen M., “The Hamburger is Bad for You”, mor10.com/hamburger-bad/ (12 marzo 2014). 12. Shervin K., “The Magnifying-Glass Icon in Search Design: Pros and Cons”, www.nngroup.com/articles/magnifying-glass-icon/ (23 febbraio 2014).

CAPITOLO 22

CONCLUSIONI

Costruire un sito che funzioni non è facile. Purtroppo, pochi si accorgono che il sito non funziona e pochi sono quelli che sanno come farlo funzionare. Quando ci si rende conto che i risultati sono deludenti, spesso non si sa bene che cosa fare. Di solito, si pensa a incrementare il traffico in arrivo, lavorando quindi all’esterno del sito. Ma questo è solo uno dei problemi. Ciò su cui quasi mai ci si sofferma riguarda quanto accade all’interno del sito, che è la cosa meno evidente: la mancanza delle condizioni basilari per funzionare. Mancano cioè gli elementi che permettono di convertire i visitatori in clienti potenziali o effettivi. Naturalmente, portare traffico verso il sito è una condizione importante perché questo funzioni. Per questo motivo ho dedicato quasi la metà del libro a spiegare quali sono le cose principali da fare. Sono tante, ma non sono tutte. Ho indicato solo quelle più importanti, quelle che dovrebbero permettervi di arrivare nella prima pagina dei risultati di Google. Ne esistono molte altre, ma sono particolarmente tecniche e, a mio avviso, per quanto perfezionino il risultato possono aggiungere ben poco. E spero, dicendo questo, di non far arrabbiare qualche esperto SEO che presta particolare attenzione agli strumenti che non ho preso in considerazione. È quindi necessario ricercare con impegno le parole chiave delle diverse pagine del sito, inserirle all’interno del contenuto della pagina e nelle posizioni del codice HTML, così come ho indicato, e cercare di acquisire link di qualità. Tutto questo deve essere fatto perché, se il vostro sito non si trova nelle prime posizioni di Google, non verrà visto e, quindi, è quasi come se non esistesse. Ma queste sono cose abbastanza conosciute. Ciò di cui si sa ben poco è invece questo: portare traffico al sito è solo una parte del lavoro che occorre fare per averne uno che funzioni. Il secondo impegnativo lavoro consiste nell’ottimizzare il sito per la conversione. E qui le cose si fanno più complicate perché si toccano discipline molto diverse tra loro: web design, tecniche di scrittura, tecniche di persuasione ecc. Tutto molto più complesso. A questo, si aggiunge la difficoltà di superare antiche e radicate convinzioni che hanno prodotto e continuano a produrre siti web che non funzionano perché non sanno convertire. Non è un caso che – come una recente indagine condotta da Forrester

ed eMarketer ha dimostrato – per ogni 80 dollari spesi per acquisire traffico al sito web, solo 1 dollaro viene speso per convertire attivamente questo traffico, una volta che è arrivato.1 Nel corso del libro abbiamo visto come, oggi, le persone arrivino sui siti e come i siti tradizionali non siano in grado di accogliere i nuovi visitatori online. Però, si continuano a svilupparne di adatti solamente a utenti che li conoscono già e che sanno come navigare tra le pagine. Utenti, cioè, che ormai quasi non esistono più. La progettazione di un sito che converta richiede quindi il superamento di un vecchio modo di pensare e la condivisione di un nuovo orientamento. Richiede che si dia importanza e valore a quegli elementi che consentono la conversione dei visitatori in clienti. Nel libro ho trattato diffusamente dei moduli e delle call to action, punti essenziali per far funzionare un sito che converta. Mi sono soffermato sulle modalità con le quali devono essere progettati e dove devono essere posizionati. Ho evidenziato che le pagine del vostro sito dovrebbero focalizzare l’attenzione verso questi due punti di conversione. Abbiamo visto come si legge sul Web e come, di conseguenza, dovrebbero essere impostate le pagine web. Inoltre, ci siamo soffermati su come si dovrebbero scrivere i titoli, come impostare il testo della pagina e come scegliere le immagini. Ho evidenziato quali errori si commettono quando si riempiono le pagine di tanti elementi di distrazione, che allontano i visitatori dai veri obiettivi di conversione e come sia necessario cercare di eliminarli. Credo di avervi fornito gli elementi principali per costruire un sito che funzioni e converta. A questo punto, non mi rimane che sottoporvi alcune ultime considerazioni.

Prima considerazione Le indicazioni che ho fornito sono valide in generale. Però, alcuni siti possono avere esigenze specifiche, per cui non tutto ciò che ho scritto può essere applicato: deve essere sempre valutato secondo le vostre esigenze. Attenzione, però: questa giustificazione non deve essere un motivo per non fare nulla e lasciare le cose come sono sempre state. Una delle peggiori scuse che mi tocca sentire è questa: “Tutto questo è giusto. Però, la mia impresa è una realtà diversa”. Non cadete in questo tranello.

Seconda considerazione I siti che convertono sono quelli costruiti in modo semplice, perché gli utenti possono comprendere facilmente dove guardare, quali sono gli elementi principali e qual è il

percorso che devono seguire. Per esempio, nella Figura 22.1 è mostrato il layout di un’homepage semplice e funzionale. Nella colonna principale viene descritta la proposta di valore più importante, con la possibilità di aggiungere informazioni secondarie sulla colonna di destra.2

Figura 22.1 – Layout di un’homepage semplice e chiara. Però, l’80% dei siti delle grandi aziende B2B e il 53% delle aziende più piccole utilizza un layout per la loro homepage molto più complesso, come quello mostrato nella Figura 22.2. Anche molti siti B2C ed e-commerce usano variazioni di questo secondo tema.

Figura 22.2 – Layout di un homepage più complessa. Qualche volta questo layout è necessario, per esempio se si ha un’offerta molto complessa. Il problema, con questo tipo di layout è che spesso non si comprende quali elementi sono i più importanti e, quindi, il visitatore non capisce quale percorso deve seguire. L’evidenza dimostra che i visitatori preferiscono siti che hanno un design semplice e chiaro, dato che si formano un primo giudizio sul sito nel breve istante di 17-50 millisecondi.3 Il mio consiglio è quello di sviluppare – salvo casi particolari – siti molto semplici che rendano subito evidente qual è l’obiettivo del sito, in modo da guidare lo sguardo del visitatore e che non offrano motivi di distrazione. Purtroppo, la tendenza è un’altra: si tende a riempire le pagine con tanti elementi, perché si crede che le persone leggeranno tutto. Come abbiamo visto, questa è solo una vera e propria illusione.

Terza considerazione Il sito deve essere progettato avendo ben chiaro a chi si rivolge. E non è un problema secondario. Molti siti si rivolgono a tutti, e quindi a nessuno. Il vostro sito deve avere chiaro chi sono i suoi interlocutori, in modo da parlare il loro linguaggio, capire i loro problemi, rispondere alle loro necessità. Se il vostro sito deve rivolgersi a progettisti, è a loro che dovete parlare. Se vi

rivolgete a grafici o a programmatori è a loro che dovete parlare. Le vostre pagine devono essere scritte per loro, i titoli devono attrarre loro e nessun altro. E, così, i moduli e le call to action.

Quarta considerazione Tutti gli esperti concordano sul fatto che sarebbe necessario sottoporre a test gli elementi più importanti delle vostre pagine, come: titoli; moduli; call to action; immagini; potenziali elementi di distrazione. La forma più semplice di test è quella che va sotto il nome di A/B Test, di cui vi ho fornito diversi esempi nel corso del libro, senza però specificare che tipo di test fosse stato fatto. Si tratta di sottoporre a confronto due versioni della stessa pagina, con alcune modifiche. Per esempio, una ha un modulo con tre campi e l’altra ha un modulo con cinque campi; una ha un titolo scritto in un modo e un’altra un titolo differente e così via. Le due versioni compariranno in tempi differenti nel vostro sito, in modo da poter verificare qual è quella che converte di più. Non aggiungo altro. Credo che gli argomenti affrontati in questo libro siano molto impegnativi e non c’è bisogno di complicarvi ulteriormente la vita. Vi indico solo due libri, nel caso vogliate approfondire questo argomento: McFarland C., Experiment! – Webiste conversion rate optimization with A/B and multivariate testing, New Riders, Berkeley 2013: semplice, breve e facilmente leggibile. Goward C., You Should Test That!, John Wiley & Sons, Indianapolis 2013: più complesso, ma più completo.

Quinta e ultima considerazione A questo punto, se siete giunti fin qui, vuol dire che avete trovato utile questo libro. Non mi resta che augurarvi un buon lavoro nell’ottimizzazione del vostro sito.

1. Page R., Website Optimization: An Hour a Day, John Wiley & Sons, Indianapolis, 2012, pag. 2. 2. Bargas-Avila J., “Users love simple and familiar designs – Why websites need to make a great first impression”,

googleresearch.blogspot.it/2012/08/users-love-simple-and-familiar-designs.html (29 agosto 2012). 3. Marketing Experiments, “No Unsupervised Thinking: How to increase conversions by guiding your audience”, www.marketingexperiments.com/whitepapers/MEx-No-Unsupervised-Thinking.pdf, 2009.

BIBLIOGRAFIA

Aagaard M., “10 Call-to-Action Case Studies w/takeaways & Examples from Real Button Tests”, contentverve.com/10-call-to-action-case-studies-examples-frombutton-tests/ (25 marzo 2013). Aagaard M., “10 Simple Things You Can Do to Fix Your Website Copy – Starting To d a y!” , contentverve.com/10-simple-things-fix-your-website-copy/ (4 agosto 2013). Aagaard M., “[How To] Write a Call-to-Action that Converts – With Case Studies”, unbounce.com/conversionrate-optimization/how-to-write-a-call-to-action-thatconverts-with-case-sudies/ (3 settembre 2013). Antonio, “A Brief History of Hamburger Menu”, http://blog.placeit.net/history-of-thehamburger-icon/ (29 ottobre 2014). Anthony, “Why Users Fill Out Forms Faster with Top Aligned Labels”, uxmovement.com/forms/faster-with-topaligned-labels/ (09 gennaio 2010). Anthony, “Form Label Proximity: Right Aligned is Easier to Scan”, uxmovement.com/forms/form-label-proximity-right-aligned-is-easier-to-scan/ (20 marzo 2012). Anthony, “Why Users Fill Out Less If You Marked Required Fields”, uxmovement.com/forms/why-users-fill-outless-if-you-mark-required-fields/ (15 aprile 2014). Ash T., Page R., Ginty M., Landing Page Optimization, John Wiley & Sons, Indianapolis, Indiana 2012. Bargas-Avila J., “Users love simple and familiar designs – Why websites need to make a great first impression”, googleresearch.blogspot.it/2012/08/users-love-simple-andfamiliar-designs.html (29 agosto 2012). Borden P., “Website Testing Wins: Point Visitors in the Right Direction”, www.monetate.com/2012/06/websitetesting-wins-point-visitors-in-the-rightdirection/ (giugno 2012). Bradley S., “The Inverted Pyramid of Visual Design”, www.vanseodesign.com/webdesign/inverted-pyramid-design/ (27 dicembre 2010). Bradley S., Design Fundamentals, Vanseo Design, 2013, vanseodesign.com. Breeze J., “You look where they look”, usableworld.com.au/2009/03/16/you-lookwhere-they-look/ (16 marzo 2009).

Buligo Z., “What the Highest Converting Website Do Differently”, blog.kissmetrics.com/what-converting-websites-do/ (maggio 2012). Burstein D., “5 Common Call-to-action Errors”, www.marketingexperiments.com/blog/marketing-insights/callto-action-errors.html (25 giugno 2012). Burstein D., “Marketing Research Chart: Average Website Conversion Rates, by I n d u s t r y ” , www.marketingsherpa/article/char/average-website-conversion-ratesindustry (23 ottobre 2012). Chawla S., “5 Design Principles for High Converting Website”, resources.vwo.com/design-principles-for-highconverting-websites. Chawla S., “JellyTelly Found their Navigation Elements Where a Distraction, Are You Making the Same Mistake?”, vwo.com/blog/removing-distractions-increasedconversion-rate/ (09 agosto 2013). Chawla S., “Enough of Stock Photo: See How Adding Real Photos Improved Conversions”, vwo.com/blog/stockphotos-reduce-conversions/ (21 febbraio 2014). Chopra P., “Do human photos on a landing page increase sales and conversions?”, vwo. com/blog/human-landing-page-increase-conversion-rate/. Christian, “Form Field Usability: Avoid Multi-Column Layout”, baymard.com/blog/avoid-multi-column-forms (8 marzo 2011). Copyblogger, “How to Write Magnetic Headlines”, www.copyblogger.com/magneticheadlines/. Cutts M., “PageRank sculpting”, www.mattcutts.com/blog/pagerank-sculpting/ (15/06/2009). Dean B., “Google’s 200 Ranking Factors: The Complete List”, backlinko.com/googleranking-factors (15 gennaio 2015). Desmond N., “5 Psychological Principles of High Converting Websites (+ 20 Case Studies)”, blog.kissmetrics.com/psychological-principles-converting-website/(15 luglio 2014). Deswal S., “3 Ways to Increase Conversions Using Heatmaps”, vwo.com/blog/increase-conversions-usingheatmaps/ (28 febbraio 2013). D’Souza S., How Visuals Help Increase Sales Conversion, Psychotactis Ltd 2009. D’Souza S., “The Power of the Double-Whammy Headline: How to Increase the Chance of Your Content Being Read”, www.copyblogger.com/double-headline/. Enge E., Spencer S., Fishkin R., Stricchiola J.C., The Art of SEO, O’Reilly 2012. Eridon C., “What Is a Landing Page?”, blog.hubspot.com/marketing/what-isa-landingpage-ht (6 agosto 2013). Everdell I., “Bottom Sponsored Ads on Google – How Effective Are They?”, blog.mediative. com/en/2011/11/14/google-bottom-sponsored-ads/ (14 novembre

2011). Fadda M., Demand generation. Fidelizzare il cliente potenziale nel business to business, Franco Angeli Editore, Milano 2012. Farber D., “Eye Tracking Web Usability”, www.zdnet.com/article/eye-tracking-webusability/ (27 marzo 2006). Friedman A., “Is the homepage dead?”, www.cjr.org/realtalk/is_the_homepage_dead.php (17 gennaio 2013). Gardner O., “[How to] Use Design Principles to Increase Conversions”, unbounce.com/conversion-rate-optimization/design-principles-increase-conversions/ (24 febbraio 2013). Gold K., “What is the Average Conversion Rate?”, www.searchmarketingstandard.com/what-is-the-averageconversion-rate (22 agosto 2013). Goward C., You Should Test That!, John Wiley & Sons, Indianapolis 2013. Grappone J., Couzin G., Search Engine Optimization: An Hour a Day, Wiley Publishing, Inc., Hoboken 2008. Handley A., Everybody writes, John Wiley & Sons, 2014. Harwood M., Harvood M., Landing Page Optimization for Dummies, Wiley Publishing, Indiana 2009. HubSpot, “How to Use landing Pages for Your Business”, offers.hubspot.com/anintroductory-guide-how-to-uselanding-pages-for-your-business. Hunt B., Convert! Design Web Sites to Increase Traffic and Conversion, Wiley Publishing, Inc., Indianapolis 2011. Jenkins T., “3Ways To Double Your Website Conversion Rates – Why Tips Every Marketer Must Know”, preneurmarketing.com/online-marketing/3-ways-doublewebsite-conversion-rates-every-marketer-needs/. Jones K.B., Search Engine Optimization, Wiley Publishing 2008. Kirkpatrick D., “Lead generation: Testing form field length reduces cost-per-lead by $ 1 0 . 6 6 ” , www.marketingexperiments.com/blog/internet-marketing-strategy/leadgeneration-testing-form-field-length-reduces-cost-per-leadby-10-66.html (27 giugno 2011). Lynch P.J., Horton S., Web Style Guide: Basic Design Principles for Creating Web Sites, Yale University Press, 2009. Marketing Experiments, “No Unsupervised Thinking: How to increase conversions by guiding your audience”, http://www.marketingexperiments.com/whitepapers/MExNo-Unsupervised-Thinking.pdf, 2009. McClurg-Genevese J.D., “Principles and Elements of Design”, www.digitalweb.com/articles/principles_and_elements_of_design/ (17 aprile 2006).

McFarland C., Experiment! – Webiste conversion rate optimization with A/B and multivariate testing, New Riders, Berkeley 2013. McGovern G., “The continued decline of the homepage”, www.gerrymcgovern.com/new-thinking/continueddecline-homepage (30 novembre 2014). Meyers P.J., “Eye-Tracking Google SERPs – 5 Tale of Pizza”, moz.com/blog/eyetracking-google-serps (5 ottobre 2011). Meyers P.J., “New Title Tag Guidelines & Preview Tool”, moz.com/blog/new-titletag-guidelines-preview-tool (20 marzo 2014). Mifsud J., “An Extensive Guide To Web Form Usability”, www.smashingmagazine.com/2011/11/08/extensiveguide-web-form-usability/ (08 novembre 2011). Miller M., “Google Wants You To Use Keyword Metags … No, really”, searchenginewatch. com/article/2207067/Google-Wants-You-To-Use-KeywordMetatags…-No-Really (20 settembre 2012). Moran M., Hunt B., Serach Engine Marketing, Inc., IBM Press Book, Crawfordsville 2015. Lieb R., The Truth about Search Engine Optimization, Pearson Education, Upper Saddle River 2009. Nagpal M., “Removing Social Sharing Buttons Increases Conversions”, vwo.com/blog/removing-social-sharingbuttons-from-ecommerce-product-pageincrease-conversions/ (10 gennaio 2014). Nielsen J., “F-Shaped Pattern for Reading Web Content”, www.nngroup.com/articles/fshaped-pattern-readingweb-content/ (17 aprile 2006). Nielsen J., “Fancy Formatting, Fancy Words = Looks Like a Promotion = Ignored”, www.nngroup.com/articles/fancy-formatting-looks-like-an-ad/ (04 settembre 2007). Nielsen J., “How Little Do Users Read?”, www.nngroup.com/articles/how-little-dousers-read/ (6 maggio 2008). Nielsen J., Loranger H., Web Usability 2.0, Apogeo, Milano 2010. Nielsen J., “Scrolling and Attention”, www.nngroup.com/articles/scrolling-andattention/ (22 marzo 2010). Nielsen J., “Photo as Web Content”, www.nngroup.com/articles/photos-as-webcontent/ (1 novembre 2010). Nielsen J., Pernice K., Eyetracking Web Usability, Pearson Italia 2011 Nielsen J., “How Long Do Users Stay on Web Pages?”, www.nngroup.com/articles/how-long-do-users-stay-onweb-pages/ (12 settembre 2011). Nielsen J., “Conversion Rates”, www.nngroup.com/articles/conversion-rates/ (24

novembre 2013). Nielsen. J., “Eyetracking Study of Web Readers”, www.nngroup.com/articles/eyetracking-study-of-web-readers/ (14 maggio 2014). Nielsen J., “Horizontal Attention Leans Left”, www.nngroup.com/articles/horizontal-attention-leans-left/ (06 aprile 2014). Owen S., “Website Eyetracking … We want to make you website effective!”, www.owen-websitedesign.com/websites-that-read-well.html (2010). Page R., Website Optimization: An Hour a Day, John Wiley & Sons, Indianapolis 2012 Penzo M., “Label Placement in Forms”, www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php (12 luglio 2006). Pernice K, Whitenton K. e Nielsen J., How People Read on the Web: The Eyetracking Evidence, Nielsen Norman Group, 2012. Petrescu P., “Google Organic Click-Through Rates in 2014”, moz.com/blog/googleorganic-click-through-ratesin-2014 (01 ottobre 2014). Poynter Institute, “Eyetracking III”, www.poynter.org/extra/eyetrack2004/index.htm. Poynter Institute, “Eyetracking III Study”, www.poynter.org/extra/eyetrack2004/articlepages.htm (2004). Poynter Institute, “Eyetracking The News – A Study of Print & Online Reading”, www.poynter.org/extra/Eyetrack/previous.html. PriceJ., Price L., Hot Text - Web writing that works, New Riders, 2002. Rand-Hendriksen M., “The Hamburger is Bad for You”, mor10.com/hamburger-bad/ (12 marzo 2014). Rankwell, “Return of Meta tag keywors?”, www.hortonwebdesign.com/seo/return-ofmeta-tag-keywords/ (23 gennaio 2013). Rognerud J., Ultimate Guide to Optimizing Your Website, Entrepreneur Media 2014. Saleh K., Shukairy A., Conversion Optimization, O Reilly Media 2010. Safran N., “Update: Organic Search is Actually Responsible for 64% of Your Web T r a f f i c ” , www.conductor.com/blog/2014/07/update-organic-search-actuallyresponsible-64-web-traffic/ (14 luglio 2014). Schade A., “The Fold Manifesto: Why the Page Fold Still Matters”, www.nngroup.com/articles/page-fold-manifesto/ (1 febbraio 2015). Scott D.M., “Who The Hell Are These People?”, www.webinknow.com/2009/10/whothe-hell-are-these-people.html (26 ottobre 2009). Shervin K., “The Magnifying-Glass Icon in Search Design: Pros and Cons”, www.nngroup.com/articles/magnifying-glassicon/ (23 febbraio 2014). Shrestha S. e Lenz K., Eye Gaze patterns while Searching, traduzione in Webaccesibile.org, www.webaccessibile.org/articoli/pattern-visivi-durante-la-

navigazione-o-la-ricerca-in-sito-web/ (22 gennaio 2008). Schwartz B., The Paradox of Choice: Why More Is Less, Harper Perennial, 2005. Sloan E., “9 Landing Page Design Techniques That Will Make You a Conversion Hero”, unbounce.com/design/9-landing-page-design-techniques-conversion-hero/ (19 marzo 2014). Sparkpage, “Unconvential Advice – Removing Your Menu Could Double Conversion Rates”, www.sparkpage.com/no-navigation-more-conversions/ (19 ottobre 2012). Tan C.C., “Web form design guidelines: an eye tracking study”, www.sparkpage.com/no-navigation-more-conversions/ (27 aprile 2009). Taruna M., “Testimonials are Important but They Can Overshadow Your Website”, vwo.com/blog/testimonialscan-overshadow-website-goal/ (08 febbraio 2014). Taruna, “Prome Code Box on your Shopping Cart Page could be Bleeding Dollars. A/B Test it”, vwo.com/blog/promo-code-box-ecommerce-website-bleeding-dollars-abtest/ (13 marzo 2015). Tennet B., “Why ‘The Fold’ Is A Myth - And Where To Actually Put Your Calls To Action”, blog.kissmetrics.com/why-the-fold-is-a-myth/ (13 settembre 2012). University of Warwick IT Services, “Write for the web”, www2.warwick.ac.uk/services/its/servicessupport/web/sitebuilder2/goodsites/content/ Zarrella D., “Wich Types of Form Fields Lower Landing Page Conversions?”, blog.hubspot.com/blog/tabid/6307/bid/6746/Which-Types-of-Form-Fields-LowerLanding-Page-Conversions.aspx (11 ottobre 2010). Ward E., French G., Ultimate Guide to Link Building, Entrepreneur Press 2013. Wroblewsky L., “‘Mad Libs’ Style Form Increased Conversion by 25-40%”, www.lukew.com/ff/entry.asp?1007 (24 febbraio 2010). Wroblewsky L., Web Form Design – Filling in the Blank, Rosenfeld Media, New York 2011. Yahoo!, Barr C., The Yahoo! Style Guide: The Ultimate Sourcebook for Writing, Editing, and Creating Content for the Digital World, St. Martin’s Griffin, 2010.

Informazioni sul Libro Costruire un sito web in modo facile e veloce! La maggior parte dei siti web non funziona perché non attrae molti visitatori e, anche quando ci riesce, spesso non è in grado di convertirli in contatti, clienti, richieste di preventivo ecc. Ma realizzare un sito web che converta un numero importante di visitatori richiede competenze, conoscenze tecniche e strumenti ancora poco diffusi nel nostro Paese. La buona notizia è che queste tecniche e questi strumenti non sono difficili e si possono spiegare in modo semplice e alla portata di tutti. Ed è quello che fa questo libro, che fornisce finalmente una guida pratica per costruire un sito che funzioni, adatta anche a chi non ha alcuna conoscenza tecnica. Il volume è diviso in tre parti. Nella prima è descritto perché la maggior parte dei siti web non funziona; nella seconda è spiegato cosa bisogna fare per attrarre una quantità significativa di visitatori utilizzando gli strumenti della SEO (Search Engine Optimization); nell’ultima parte, la più innovativa, viene spiegato come ottimizzare il sito per accogliere e convertire i visitatori in clienti potenziali o effettivi (Conversion Optimization). PUNTI DI FORZA • Guida pratica che spiega in modo semplice e chiaro, passo dopo passo, come costruire un sito web che funzioni. • Presenza di oltre 300 immagini che aiutano a comprendere più facilmente tutti i passaggi del libro. • Presentazione di argomenti ancora poco conosciuti in Italia.