Usare il metodo semio-narrativo per indirizzare il brand storytelling

La prima impressione è quella che conta (anche per i siti web).

In soli 50 millisecondi, l’utente deciderà se il tuo sito sarà di suo gradimento o meno, scegliendo quindi se continuare la navigazione o abbandonare la pagina. Solo 0,05 secondi, decisivi per il tuo business.

La prima impressione si genera dalla combinazione di più fattori, tra cui: struttura della pagina e organizzazione dello spazio, colori presenti, qualità e quantità di testo.

È fondamentale, quindi, indagare a fondo ciascuno di questi aspetti e considerare non solo gli elementi visivi, ma anche quelli testuali. Infatti, non bisogna dimenticarsi del modo in cui il tuo brand si racconta, per valutare se il posizionamento narrativo adottato risulta essere valido.

Spoiler: per fare tutto questo esiste uno strumento molto efficace. Noi usiamo la griglia narrativa (Narrative Grid): vediamo ora insieme di cosa si tratta.

Narrative Grid (o Griglia Analitica)

La Narrative Grid è uno strumento analitico e progettuale che può essere applicato a qualsiasi materiale di comunicazione come siti web, social network, contenuti commerciali, capace di indagare il modo in cui i segni visivi, verbali e cromatici vengono utilizzati.

È una metodologia definita da Joseph Sassoon - autore, ricercatore, consulente, Leader di Alphabet Research e nostro Senior Storytelling Advisor. Puoi leggerne un estratto in "Marketing Narrativo. Usare lo storytelling nel marketing contemporaneo", uno dei best seller di Joseph pubblicati da FrancoAngeli Editore.

Lo strumento si basa sui criteri di analisi e il rigore scientifico della Scuola semiotica francese, conosciuta anche come École de Paris, ed è stato adattato allo studio della comunicazione di impresa sia online che offline. 

Per esempio, l’applicazione della Narrative Grid a un sito web permette quindi di valutare in maniera oggettiva le strutture discorsive e le logiche di relazione proposte al visitatore. 

Nello specifico, consente di:

  • analizzare i codici visivi, cromatici, verbali 
  • valutare i linguaggi adottati
  • studiare i meccanismi persuasivi utilizzati
  • capire gli schemi narrativi messi in atto
  • identificare i principali posizionamenti comunicativi

L’analisi è essenziale per esaminare il tipo di comunicazione adottata da un brand, per determinare se l’uso dei segni favorisce engagement e dialogo con gli utenti.

Come è strutturata la Narrative Grid?

Parola d’ordine: rigore.

Un corretto utilizzo della Narrative Grid si basa sul rispetto di uno schema definito da 11 sezioni su 4 livelli.

Per stimolarti l'appetito, ti mostro ora un esempio concreto di applicazione di questo strumento molto potente.

Case study: l'analisi del sito web www.illimity.com

Tutti conosciamo illimity, il Gruppo bancario ad alto tasso tecnologico fondato e guidato da Corrado Passera. Una banca nata senza vincoli: senza i limiti del sistema tradizionale ma con la solidità e la serietà delle migliori esperienze.

All’interno di una benchmark analysis per un nostro cliente leader del mondo fintech, il nostro team di brand consulting ha applicato la Narrative Grid proprio per analizzare la consistenza narrativa del sito web istituzionale aziendale. Ripercorriamolo insieme.

Codici visivi

Il sito web di illimity presenta numerose immagini di persone, tra cui membri del team e clienti. Si percepisce un forte approccio human-centered, dato dai molti primi piani di persone. 

Inoltre, ci sono foto e video relativi a case history ed eventi aziendali passati. Tra i video, vengono proposti diversi format come per esempio “Storie di Illimiters” dove i dipendenti si raccontano.

Oltre alle fotografie, sono presenti anche illustrazioni grafiche nella sezione IlliimitHER, il programma di Diversity&Inclusion che ha l’obiettivo di valorizzare il potenziale delle giovani donne.

Codici cromatici

Focalizziamoci ora sull'utilizzo dei colori. I colori del sito riprendono più volte il simbolo del pittogramma: infatti, la landing page si caratterizza per l’utilizzo di gradienti cromatici, che vanno dall’arancione al rosa - una scelta distintiva nel settore bancario. Si evita però la sfumatura rossa, forse perché nel mondo banking non ha un’accezione positiva.

Il gradiente viene mantenuto anche nel footer, nelle sotto categorie, in alcuni titoli e dettagli come barra di scorrimento o grafici, proiettando un senso di ottimismo. In alcune sezioni i gradienti sono declinati anche in tonalità del viola, verde e azzurro.

La pagina “Cosa offriamo” presenta invece un’immagine con filtro nero, che si allontana dal resto del sito e può risultare una scelta poco coerente.

Le sotto sezioni di “Investor Relations” presentano invece uno stile più neutro, con sfondo bianco e alcune parole in risalto in arancione. È sicuramente una scelta in linea con il contenuto delle pagine e più adatta al target.

Nella sezione “Sostenibilità” si fa un uso primario di immagini in bianco e nero, che risulta in contrasto col resto del sito.

Codici verbali

Navigando il sito, notiamo che il linguaggio è focalizzato su illimity (“noi”, “siamo”, “nostro”…): prevale infatti l’uso della prima persona plurale, il che può impattare negativamente il coinvolgimento diretto con l’utente. La forma “tu” è presente solo in call to action come “scopri di più” o “compila il form”.

In alcuni casi, si fa riferimento all’azienda in terza persona (“illimity fornisce credito ad imprese ad alto potenziale”). Nei titoli si fa spesso uso di frasi nominali e numerose sono le citazioni di membri del team.

Temi

Nel sito web ci sono due principali temi ricorrenti: l’innovazione e la novità. Infatti, vengono spesso utilizzate parole come “nuovo” e “innovativo”, come ad esempio:

  • banca di nuovo paradigma
  • servizi di nuova generazione
  • banca profondamente nuova

Un altro tema proposto è quello della rottura col passato e la tradizione bancaria, che viene comunicato dal brand name stesso e ripreso in varie descrizioni: “illimity, una banca senza i limiti del sistema tradizionale”.

Figure

Come abbiamo visto anche nell'analisi dei codici visivi, le persone hanno un ruolo centrale: ciò serve per comunicare inclusione e apertura. Viene mostrato l’intero team di illimity, tramite foto e video di presentazione; il programma IllimitHER si focalizza invece sulle donne in ambito STEM; la sezione “illimity stories” racconta i percorsi di crescita e sviluppo di PMI italiane insieme ad illimity.

Vengono mostrati anche gli spazi di lavoro, come uffici e sale riunioni ed eventi aziendali passati, tra cui workshop e sessioni di team building.

Struttura retorica

Il sito non presenta una grande struttura retorica e manca di metafore significative. Troviamo però due anafore, efficaci nel rafforzare i messaggi:

  • Siamo il Gruppo illimity, il nostro impegno è andare oltre. Oltre la forma, oltre le abitudini del passato.
  • Noi siamo / Noi viviamo / Noi crediamo / Noi agiamo 

Tempo e spazio

Il sito di illimity si focalizza sul futuro, visto come contrapposizione alle tradizioni e al passato. Questa scelta trasmette dinamismo e desiderio di stare al passo con i tempi. Incentrato sul futuro e sull’innovazione è anche il format “illimity Talks”. 

Essendo una realtà quotata, il passato risulta essere rilevante, soprattutto per quanto riguarda i Financials.

Per quanto riguarda lo spazio aziendale, la sede di illimity viene ben rappresentata e valorizzata in chiave di sostenibilità.

Attanti e archetipi

Nel caso di illimity, gli attanti sono i seguenti:

  • Addresser: la storia è resa possibile da illimity
  • Heroes: gli eroi sono le PMI italiane, i privati e le famiglie
  • Mentor: illimity orienta gli eroi sulla strada da prendere
  • Helper: soluzioni e servizi finanziari di illimity
  • Object of Value: per le PMI, l’oggetto di valore è ricevere supporto anche in situazioni complesse; per privati e famiglie, avere soluzioni finanziarie innovative.

Una volta definito lo schema d’azione, è necessario riflettere sull’archetipo del brand in analisi, per valutare l’efficacia delle scelte comunicative e definire la strategia futura. 

Sul piano degli archetipi, illimity si definisce come Creator, ovvero un brand:

  • che introduce qualcosa che prima non esisteva 
  • che promuove innovazione e libertà di espressione.

Come archetipo secondario, illimity può essere collegata all’Explorer, con qualche nota di Outlaw:

  • è disruptive e vuole superare i limiti imposti dal sistema bancario tradizionale
  • esalta la libertà e non teme il cambiamento.

Modalità narrative

L’enunciato essere prevale in tutto il sito web e questo risulta essere in linea con la centralità di illimity nella comunicazione sul sito. Ecco alcuni esempi:

  • “Noi siamo una banca”
  • “La nostra sede è situata a Milano”
  • “Noi ci siamo sempre stati”
  • “Siamo una sustainable native company

L’enunciato di fare si ritrova soprattutto nella sezione “Cosa offriamo”, con l’utilizzo di verbi come: forniamo, operiamo, acquistiamo, eroghiamo.

Invece, non vengono sfruttate le modalità narrative di volere, potere, dovere e sapere. 

Valori profondi

Siamo arrivati al livello più profondo (e ultimo!) della Narrative Grid, ovvero quello valoriale.

I valori trasmessi dal sito di illimity sono:

  • Diversità
  • Inclusione
  • Innovazione
  • Libertà
  • Responsabilità
  • Sostenibilità

I valori di Diversity&Inclusion sono pilastri fondamentali nel sito e vengono trasmessi soprattutto dal format IllimitHER.

L’innovazione è un valore che emerge in ogni sezione del sito e viene declinato in diversi modi, sul piano tecnologico, di prodotto e umano.

Conclusioni: la Narrative Grid come potente strumento di comunicazione

Come mostrato da questa analisi, la griglia narrativa - e in generale un approccio semio-narrativo alla brand communication - può rivelarsi una leva molto potente e utile per ottimizzare lo stesso brand storytelling. 

La stessa Narrative Grid, se approcciata nel verso opposto rispetto a quello usato per il caso illimity, si rivela anche un tool di progettazione di contenuti rilevanti.


Push that button! Come e perchè i tuoi utenti faranno “click”

Un’utile “Bibbia del Bottone” scritta da Gabriele Maffoni e Pietro Anastasi con molti riferimenti teorici e pratici.

Dopo i diversi articoli di in cui ci siamo concentrati sugli aspetti cognitivi, oggi ci vogliamo concentrare sull’importanza degli aspetti di interfaccia e in particolare su come costruire una call to action visibile e chiara, capace di dare una direzione precisa alla navigazione dell’utente. 

La call to action (CTA) è il metodo più comune per invitare all’azione un utente su una pagina web e, molto spesso, prende la forma di un pulsante con un copy al suo interno. Nei nostri progetti abbiamo visto che questo elemento è determinante per l’aumento dei tassi di conversione, poiché gli utenti oltre a vedere il vantaggio del prodotto, hanno immediatamente il controllo di quello che succederà successivamente.

Nel mondo fisico, gli utenti interagiscono costantemente con dei pulsanti, come quelli della luce. Nel mondo digitale, l’utente capisce se un elemento è interattivo o meno basandosi sulla sua esperienza passata e sulle proprietà visive del bottone (dimensione, forma, colore, ombra, etc,), che suggeriscono che su quell’area è possibile cliccare o tappare. 
In gergo, il bottone diventa un signifier (un segnale) che rende visibile un’affordance (la relazione funzionale che ha con l’utente).

Il copy contenuto nel bottone sarà utile per invitare all’azione e far capire all’utente il risultato di tale azione.

Per attirare l’attenzione di un utente e spingerlo effettivamente all’azione è, quindi, fondamentale ottimizzare al massimo questi pulsanti. 

In questo articolo vedremo alcune best practice da seguire durante la fase di progettazione e posizionamento delle CTA.

1. Le dimensioni contano, ma non come pensate

Nella maggior parte dei casi la CTA principale è quella con le dimensioni maggiori rispetto a tutte le altre azioni presenti in pagina.

Secondo la legge di Fitts infatti, maggiore è la dimensione e più vicino è il bottone, minore sarà il tempo che l’utente impiegherà a cliccare.

Prendiamo d’esempio una pagina che abbiamo recentemente disegnato per un nostro cliente.

Le due perception map della stessa pagina mostrano come aumentare l’altezza del pulsante abbia cambiato notevolmente cosa vede l’utente nei primi tre secondi. Nella prima opzione, nonostante tutti i vantaggi dell’offerta siano ben visibili, la CTA è difficile da notare. L’opzione vincente mostra come, con l’aggiunta di 20 pixel di altezza, la CTA diventa immediatamente visibile. In questa maniera l’utente vede non soltanto il contenuto dell’offerta, ma anche un invito ad abbonarsi e l’anticipazione di quello che succederà cliccando su tale invito.

Tuttavia, aumentare le dimensioni di un pulsante può non essere sempre così positivo. Capiamo insieme perché guardando un test effettuato da Netflix.
Netflix ha testato sulla propria home page 3 diverse grandezze della CTA di iscrizione.

Come si può vedere, la CTA vincente è più piccola mentre nelle altre due opzioni è più grande. A quanto pare, le performance della prima opzione erano già buone ed è stato notato che, invece, l’aumento delle dimensioni del bottone non ha portato a risultati più significativi.
Possiamo ipotizzare che questo aumento di dimensione del rettangolo non suggeriva più all’utente che fosse un bottone, ma un semplice elemento decorativo. Per questo, per ottimizzare l’efficacia delle CTA, bisogna costantemente lavorare sulle dimensioni.

Tips usabilità
Quando disegni un pulsante, tieni sempre a mente gli utenti che navigano da mobile. Come riportato da Smashing Magazine, uno studio del Mit Touch Lab ha individuato che la larghezza media del pollice umano è tra i 16-20mm (45-57 pixel). Vuol dire che un’area tappabile usabile dovrebbe avere almeno una dimensione minima di 10mm x 10mm (tradotto: 44px x 44px dovrebbero bastare) per essere fat-finger friendly.

2. Fai un uso sapiente del colore

Quando si sceglie il colore di un pulsante, bisogna tenere in considerazione più fattori. Un colore non deve essere scelto solo sulla base del significato che veicola o per rispecchiare le guidelines e il design system del brand. Tra gli obiettivi deve esserci anche quello di farlo risaltare.

In neuroscienza è stato utilizzato il termine “salienza visiva” per descrivere un oggetto che “spicca” rispetto allo sfondo (come, ad esempio, un oggetto illuminato in una stanza buia).
L’attenzione dell’uomo è programmata proprio per visualizzare quegli oggetti che si distinguono da una determinata scena. Tutto ciò non dipende da un fattore psicologico, culturale o demografico, bensì è il modo con cui il nostro cervello ragiona in natura, come un animale che deve individuare rapidamente una preda o un predatore.

Esistono alcune proprietà, come la tonalità del colore, la luminosità e il contrasto (sia di luminosità che di forma) che, se vengono dosate al punto giusto, consentono al nostro cervello di guidare i nostri occhi in una determinata posizione. La scelta migliore però dipende dal contesto e dal contenuto che circonda il bottone.

Ma vediamo più da vicino di cosa si tratta:

  • Aumenta il contrasto luminoso tra il pulsante e il background di pagina

Di base, usare bottoni neri su fondo bianco e bottoni bianchi su fondo nero funziona sempre.

Quando si utilizza il colore invece, bisogna considerare il contrasto con il background. Nell’immagine si può vedere come l’opzione 1 riesce a staccarsi dallo sfondo molto meglio rispetto all’opzione 2, nonostante le dimensioni siano esattamente le stesse. Come si può notare nell’esempio, lavorando bene sul contrasto tra i colori, è possibile ottenere un risultato migliore.

Anche Skyscanner fa un ottimo uso del colore nelle sue mascherine di ricerca e, nonostante l’uso di un’immagine di background, sono riusciti a concentrare l’attenzione dell’utente su tutti gli elementi fondamentali per la ricerca. L’utilizzo di un fondo blu scuro, infatti, ha permesso di far risaltare benissimo i campi bianchi di input, senza sacrificare la CTA “Cerca voli”. Solitamente, posizionare un elemento sulla destra di una pagina può compromettere la sua visualizzazione (per le regole basate sull’F-Shaped Pattern) ma, dedicando una riga intera al box di ricerca, si riesce a far notare all’utente subito il pulsante verde, oltre a rendere più leggibili i campi.

  • Aumenta il contrasto luminoso tra il testo e il background del pulsante 

Durante la fase di analisi della UI per un nostro cliente, abbiamo notato come la percezione della landing mobile sia cambiata completamente, attraverso il semplice cambio del colore del testo della CTA. 

  • Cambia la tonalità del tuo pulsante rispetto agli altri colori della pagina

Quando ci sono diversi elementi dello stesso colore, diventa sempre più duro per il nostro occhio determinare quali sono le aree più importanti. In alcuni casi, cambiare il colore di un elemento può aiutare ad evidenziarlo rispetto agli altri.

Spesso, su una stessa pagina, possono essere presenti diversi oggetti ad alto contrasto luminoso, come per esempio background bianco e testi neri. In questo caso utilizzare una CTA bianca o nera significa correre il rischio di non metterla in evidenza.

Tips accessibilità
Il rapporto di contrasto è il rapporto tra la luminosità del colore del testo e il colore di sfondo.

Secondo il World Wide Web Consortium (W3C), il rapporto di contrasto suggerito è di almeno 4,5:1, ad eccezione di quanto segue:

  • La dimensione del testo è 18pt, oppure 14pt se è in grassetto. Il rapporto di contrasto è almeno 3:1.
  • Per i pulsanti inattivi, non è richiesto alcun contrasto

3. Tieni sempre in considerazione il contesto visivo

La CTA è l’elemento chiave per la conversione ma, dal momento che non è così facile riuscire ad attirare il click dell’utente, è fondamentale inserirla strategicamente all’interno di una pagina

Vediamo alcuni esempi:

  • Dai aria agli elementi

Insieme all’uso del colore e a tutte le altre proprietà visive, più spazio riuscirai a dare intorno ad un elemento chiave, più quest’ultimo sarà chiaro all’utente. È importante cercare di rimuovere le informazioni meno importanti (o almeno spostarle), in particolare quando si progetta una landing page, dove le informazioni da dare all’utente sono molte e in uno spazio ristretto.

  • Posiziona strategicamente le tue CTA

In generale è buona pratica posizionare i pulsanti dove l’utente si aspetta di trovarli e dove è in grado di raggiungerli facilmente. Considera che l’utente impiegherà meno tempo a cliccare su un pulsante, quanto minore sarà la distanza che dovrà percorrere per raggiungerlo (in base al principio della legge di Fitts).

Nell’esempio qui sotto (preso tra i primi design di progetto) si può vedere come la CTA, che inizialmente avevamo posizionato in basso a destra, venisse completamente ignorata.

Siccome siamo abituati a leggere un sito esattamente come leggiamo un libro, cioè partendo dall’angolo in alto a sinistra, l’attenzione dell’utente è molto presente nell’angolo in alto a sinistra della pagina ma tenderà a fermarsi da qualche parte nel centro-destra della schermata (effetto noto come Z-Pattern).

Tips accessibilità
Quando stai posizionando un pulsante tieni in considerazione che su mobile ci sono aree più facili da tappare (es: nell’area bassa dell’interfaccia), perché sono più facili da raggiungere dal pollice degli utenti.

4. Tieni sempre in considerazione il contesto visivo

Ogni pulsante deve avere sempre lo stesso aspetto in base alla funzione che ricopre. È fondamentale differenziare le azioni principali da quelle secondarie.

Gli stili dei pulsanti possono essere utilizzati anche per confondere gli utenti. Nel caso qui sotto, Audible non vuole che i propri utenti disattivino la loro membership. Per fare ciò non hanno dato priorità ai pulsanti. Usando solo CTA di primo livello, l’utente è costretto a “studiarsi” tutte le sezioni e a leggersi tutti i pulsanti per essere consapevole di quello che sta per fare.

Per  concludere

Come abbiamo dimostrato, le persone impiegano pochi secondi a crearsi un’opinione di un prodotto e a decidere se sia in grado di risolvere i loro problemi. Sfruttare questo poco tempo a disposizione è di vitale importanza per aumentare le conversioni e spesso è questione di piccoli dettagli.

Ecco perché in GreatPixel consigliamo sempre di misurare l’efficacia di tutti gli elementi facendo dei test (A/B test) e delle analisi di eyetracking per ottimizzare gli elementi che funzionano meno.


Come gestire correttamente i dubbi del cliente? Bentornate FAQ!

Parliamo di come progettare una landing page che vende. È qui dove si gioca tutta la vostra strategia: le scelte che vengono fatte nel progettare questa pagina possono portare alla vittoria o all’uscita dell’utente (che si suppone non sia la vittoria. In caso contrario: vittoria!).

Spoiler alert: le regole sono le medesime di quelle della DEM, ma dovete tenere conto del fattore “dubbi”.

Vediamo insieme di cosa stiamo parlando.

Decisioni, decisioni, decisioni.

Come nella DEM, la landing dovrà a sua volta contenere i principali elementi che servono per mantenere focalizzata l’attenzione dell’utente su di essa: aggancio emozionale (vedi anche il nostro articolo sul ruolo delle emozioni nel processo decisionale), area razionale, trigger e CTA.
Tuttavia, è necessario comprendere in che punto del macroflusso l’utente si trova. Se nella DEM doveva essere incuriosito e informato dei vantaggi principali, nella landing l’utente deve prendere una decisione, che sia quella di attivare un servizio, comprare un prodotto oppure semplicemente lasciare un contatto (per i nerd, nei primi due casi si dice conversione, nell’ultimo invece lead generation o acquisire lead).

È facile capire che, prima di prendere queste decisioni, gli utenti ci pensano due volte (soprattutto quando si tratta di comprare qualcosa). Per questo motivo, alle aree sopra elencate si aggiunge una quinta: la gestione dei dubbi.

Vi faccio un esempio. Immaginate la situazione in cui siete riusciti ad attrarre l’utente con il vostro attacco emozionale, avete spiegato di cosa si tratta e avete posizionato tutte le CTA nei punti corretti. A questo punto l’utente, se interessato, dovrebbe automaticamente convertire, giusto? Sbagliato!

I dati HotJar che abbiamo raccolto in seguito ad una campagna condotta per un cliente, suggeriscono che almeno il 50% degli utenti ha bisogno di risolvere dei dubbi prima di cliccare sulle CTA. Se in questa fase del funnel i dubbi non vengono risolti, c'è un alto rischio che le persone finiscano per non convertire.

Come gestire i dubbi?

La buzzword di oggi è chatbot. Sicuramente lo strumento della chat e dell'assistenza permette di avvicinarsi ad una soluzione, utilizzando il proprio linguaggio naturale per porre domande. Ma ci sono dei “ma”:

  1. L'utente non sempre ha in mente un dubbio specifico perfettamente chiaro. In questa fase può essere utile che l'utente si chiarisca delle obiezioni che ancora non ha manifestato come pensieri espressi.
  2. Su quale base di conoscenza (database di contenuti) si dovranno appoggiare i chatbot?

La soluzione è molto semplice: individuare le domande frequenti che gli utenti si pongono in questo specifico contesto (ovvero le FAQ: Frequently Asked Questions) e rispondere in maniera adeguata. Questo metodo può essere fondamentale sia per far emergere in modo preventivo dei dubbi che gli utenti ancora non si sono posti, sia per fornire ai chatbot l'adeguata base di conoscenza.

Non è necessario stilare una lista infinita di domande, ma è importante che siano adatte agli utenti e al contesto per cui abbiamo progettato la landing.

Ad esempio, potrebbero essere diverse a seconda del fatto che la landing sia per una DEM o per una campagna AdWords. Oppure, i vostri utenti potrebbero essere persone che hanno a cuore la privacy, mentre altri sono più interessati a capire cosa voglia dire un “servizio cloud”. In ogni caso, come nel resto della landing, è necessario essere rilevanti nella gestione dei dubbi. Se state vendendo un’auto che ha degli ecoincentivi, non sarà necessario mettere la risposta alla domanda “Cosa è un volante?”, ma sarà molto importante capire “Cosa sono gli ecoincentivi?”.

Facciamo un esempio.

Alle volte si da per scontato che un termine sia conosciuto solo perché di uso comune. Ad esempio, da un recente sondaggio, fatto su un servizio di vendita immobiliare, abbiamo riscontrato che solo il 14% degli intervistati aveva un'idea chiara del significato di "metri quadri commerciali", nonostante il termine sia comunemente usato in ogni annuncio o modulo.

Dobbiamo trarre da questa considerazione che l’assenza di FAQ può creare un muro di indecisione molto elevato, soprattutto in caso di prodotti o servizi sconosciuti. Inserire delle risposte alle domande frequenti permette non soltanto di risolvere dei dubbi, ma anche di evitare che l’utente cerchi le risposte altrove, impedendo l’uscita (quasi sicura) dal funnel di conversione.

Non solo per le landing

Le FAQ non sono uno strumento utile solo per le landing: tantissimi servizi, ormai, hanno un portale di domande frequenti, dove le persone possono risolvere velocemente i propri dubbi. Tuttavia, pochi aggiornano davvero queste sezioni, nonostante le necessità delle persone evolvano di giorno in giorno.

Capire che le persone possano avere dubbi o necessità è il primo passo per comprendere l’importanza di tale strumento. Avere una sezione ufficiale dove le domande che vengono fatte possono essere risolte senza dover contattare l’assistenza migliora non solo l’esperienza degli utenti, ma anche i costi del mantenimento di un reparto di assistenza.

Come si scrivono delle FAQ efficaci?

Concludiamo con un piccolo vademecum di principi su come approcciarsi a questa task da non prendere sottogamba.

  • Ascoltate gli utenti. É il principio numero uno della User Experience e può essere fatto in modi infiniti: dal fare delle interviste, al leggere i forum in cui gli utenti scrivono. In un talk a cui ho assistito ad Aprile, una UX designer di Shopify ci ha spiegato che lei, una volta a settimana, si mette insieme ad una sua collega nel reparto di assistenza. Ascoltando le conversazioni cercano non soltanto di risolvere dei problemi nel lato UX, ma di arricchire la loro sezione di self-care.
  • Applicare la corretta tassonomia / gerarchica semantica, senza paura di creare link incrociati fra diverse sezioni. Ci è capitato spesso che un tema rientri correttamente in diversi ambiti: "come si gestisce un reso" può essere ricercato dall'utente sia come tema singolo, che come parte del tema "spedizioni" o del tema "garanzie per il cliente"... in questi casi bisogna creare una tassonomia chiara, ma anche non aver paura a creare cross link fra diversi argomenti in modo da essere maggiormente sicuri che l'utente trovi la sua risposta (senza duplicare i contenuti, se non vogliamo penalizzazioni a livello di DSEO e posizionamento sui motori di ricerca)
  • Non esistono domande stupide, ma utenti non specializzati. Se dovete fare delle FAQ per una landing, le FAQ devono essere relative all’offerta che state facendo, ma anche alla tipologia di utenti alla quale la state proponendo. In una landing per una promozione su biglietti dei treni, una specifica sulla validità dell’offerta non è la sola cosa che può essere utile. Un utente straniero che viene in Italia potrebbe chiedersi per quali compagnie sia valida. Tenendo in considerazione che i pain differiscono a seconda degli utenti, avrete anche la possibilità di scrivere delle FAQ più utili e rilevanti.
  • Non sono i “termini e condizioni”. Non trattate le FAQ come “T&C”. Non ci potrebbe essere niente di più diverso: nelle FAQ le domande vengono poste in modo naturale e si aspettano risposte chiare e concrete; i termini e le condizioni sono una sezione in cui l’utente si sente immediatamente truffato, perchè spesso scritte in piccolo e in legalese. Anzi, spesso le FAQ dovrebbero spiegare i termini e condizioni in modo semplice, per poi rimandare ai dettagli legali per quelli che amano usare il Magnifier di Windows.
  • KISS (Keep It Simple Stupid!). So che è una frase trita e ritrita, ma è sempre vera. Le FAQ devono essere semplici, dirette e parlare di cose che l’utente ha già visto o ha in mano. Ultimamente ho visto delle FAQ che parlavano delle funzionalità di una interfaccia prima ancora che l’utente la potesse vedere. Queste non sono semplici, ma complesse. Costringono l’utente ad immaginarsi qualcosa che ancora non ha visto (e che non avrebbe visto fino all’acquisto).

In conclusione

Preparatevi a gestire i dubbi delle persone, perché quando si tratta di sborsare soldi ne vengono tanti. E, soprattutto, siate rilevanti. Come dice Howard Gossage: “Le persone non leggono le pubblicità. Le persone leggono ciò che interessa a loro. Talvolta, coincide con una pubblicità”. Se le vostre FAQ saranno rilevanti per gli utenti, leggeranno anche quelle, altrimenti cercheranno le risposte da altre parti. Oppure se ne andranno.

FAQ: esempi

  • Cosa è il Johnson Box?

Hai presente il testo di anteprima che vedi nella notifica di una nuova email? Quello!

  • Cosa significa “DEM”?

Direct Email Marketing. In pratica, quelle email che solitamente ti propongono l’acquisto o la scoperta di un nuovo servizio o prodotto.

  • Mi è piaciuto questo articolo! Ce ne sono altri?

Certamente! Guarda la sezione Xmag del nostro sito. Ne abbiamo a bizzeffe e cerchiamo di pubblicarne nuovi ogni settimana.


Cosa scegli in quei mitici 3 secondi?

Unisciti a me e insieme potremo governare la galassia… 

Quanto tempo avresti impiegato tu a rispondere alla richiesta di Darth Vader?

Meno, molto meno di quanto credi: tutto in realtà si decide in pochi secondi e spesso in millesimi di secondo; anche il tuo prossimo clic, quello che eventualmente ti farà scorrere questa pagina fino in fondo, oppure abbandonare la navigazione.

Facciamo un esempio: se sei arrivato a leggere fino a qui, hai già dedicato circa 10 secondi a questo articolo. Il tempo di lettura medio infatti è di 4/5 parole al secondo, calcolato per una comprensione superiore al 60% del testo. Di fatto quindi questo significa che, per ora, “ti ho agganciato”. È già il momento, per me, di cominciare velocemente a entrare nel merito di quanto voglio raccontarti per non perdere la tua attenzione. Perché tutto si gioca nei primi secondi. Con suggestioni emozionali e senza deludere le premesse e le promesse.

Per entrare subito nel merito: secondo uno studio recente del prof. Tobias Donner, pubblicato anche sulla rivista Mind di Settembre 2019, quello che sta succedendo ora al tuo cervello è più o meno questo:

  1. il tuo istinto (chiamato in causa da una parte del cervello molto “profonda” detta tronco encefalico) ha manifestato alcune alcune sensazioni basiche (come la curiosità, la simpatia, l’empatia con l’immagine nell’header, ecc) e ha deciso che l’incipit dell’articolo è abbastanza interessante, mi ha dato fiducia e vuole vedere dove vado a parare. Probabilmente è almeno un po’ curioso di leggere i dettagli dello studio al quale ho accennato.
  2. man mano che prosegui nella lettura, la tua parte più razionale, in grado di elaborare concetti sempre più astratti (la corteccia), viene sempre più attivata dall’elaborazione di informazioni “tecniche” che richiedono concentrazione: probabilmente le tue pupille si stanno leggermente ingrandendo proprio adesso.
  3. infine (e qui sta il bello): man mano che le informazioni più complesse vengono elaborate, il tuo cervello non si dimentica affatto di quanto ha provato pochi secondi prima. Ogni singolo pezzo di informazione aggiuntiva che io aggiungerò d’ora in avanti al testo, verrà elaborata dal cervello facendo costante riferimento al tuo istinto. Se quello che aggiungerò sarà coerente, proseguirà; se invece tradirò le aspettative emotive, potrebbe decidere di interrompere la lettura.

In altre parole se, e solo se, ogni pezzo aggiuntivo di informazione è in grado di confermare “l’imprinting” emozionale dato dai primi secondi di un’esperienza, allora questa verrà portata alla fine, altrimenti sarà abbandonata.
Ho disegnato uno schema per spiegare meglio questo meccanismo e trarne delle conseguenze molto operative, ma prima devo precisare un paio di cose.

Primo

Le tecniche basate sulle scienze cognitive non sono affatto così sicure come si vendono. Anche se il neuromarketing ha ormai una storia più che trentennale, alcuni processi rimangono oscuri e misteriosi. Le supposizioni degli studiosi, talvolta si appoggiano su una base sperimentale davvero piccola (ad esempio 10-20-30 casi) quindi poco rilevante.

Io ho avuto la fortuna e il privilegio (col team di Greatpixel) di aver lavorato per conto di alcuni grandi brand, con una customer base di centinaia di migliaia o milioni di utenti e di aver sperimentato questi concetti misurando con attenzione KPI oggettivi (tassi di clic through, di conversione, numero di vendite…). E nonostante questo mi sento di ricordare che parliamo solo di teorie: ognuno ne faccia l’utilizzo che crede in modo prudente e responsabile.

Secondo

Qui non stiamo parlando di bias, preconcetti o malfunzionamenti del cervello. Non stiamo dicendo che ci sono trucchi che ci fanno prendere decisioni contro la nostra volontà. In pratica non stiamo parlando di manipolazione, ma di come funziona il meccanismo per prendere tutte le decisioni, anche e sopratutto quelle più giuste.

Ciò detto…

Ecco lo schema, che ho liberamente tratto dall’articolo di cui sopra. Se cercate la spiegazione è a seguire.

La curva rossa indica che la maggior parte delle scelte legate ad un clic, come quello chiesto ai soggetti dell'esperimento di Donner, avviene fra i 2 e i 4 secondi.

In questo periodo di tempo, l'informazione compie un "lungo viaggio":

  1. raggiunge la corteccia visiva (più o meno dove c'è l'occhio);
  2. l'informazione viene poi mandata per un primo "check" al tronco encefalico (in rosso), dove vengono elaborati gli istinti primari. Secondo la teoria del cervello tripartito, è lì che risiede la parte più istintiva del cervello, che risponde immediatamente alla domanda "ma questa cosa mi interessa?" oppure "questa cosa risponde ad un mio bisogno primario in questo momento?" Solo se la risposta è sì, la valutazione prosegue;
  3. l'informazione viene poi elaborata man mano dalla corteccia in modi vari e complessi, che cambiano da emozione ad emozione, da informazione ad informazione (le aree blu) e raggiungono diversi livelli di astrazione. Durante questa fase, però, continui flussi di attivatori (cosiddetti neuromodulatori: sostanze chimiche come la dopamina o l'acetilcolina) interrogano il tronco: in pratica ogni pezzo di informazione nuova deve corrispondere all'imprinting dei primi decimi di secondo!
  4. infine si arriva all'attivazione motoria (il dito sul mouse) rappresentata dall'area arancione. Ho cliccato sul bottone, ho chiuso al pagina, ho scrollato verso il basso... il tutto dopo pochi secondi.

Cosa significa tutto questo? Ecco un piccolo elenco di conseguenze pratiche, utili a chi si occupa di progettazione e di vendita online:

  • le scelte completamente razionali non esistono. Non c'è nessuna caratteristica oggettiva del tuo prodotto o servizio che può battere un'emozione. Ti giochi tutto nei primi 3 secondi.
  • Non aspettarti che sia l'utente a cercarsi le informazioni più rilevanti per lui. Se non troverà una promessa rilevante in pochi secondi, abbandonerà il processo in cui è inserito.
  • Correda la tua promessa di materiale emozionale adeguato. Non scegliere un'immagine solo perché attira l'attenzione. Una immagine, per quanto bella, se è decontestualizzata, genererà dissonanze cognitive lungo il processo decisionale e porterà all'abbandono.
  • Assicurati di essere completamente coerente con quello che è stata la "promessa" in tutta l'esperienza. L'esperienza di analisi e assunzione di informazioni "razionali" può essere un processo più o meno lungo (a scegliere una macchina possiamo metterci settimane), ma in realtà tutto deve essere estremamente coerente: ad esempio usa sempre gli stessi termini chiave usati nella promessa nel resto della proposta (nelle regole dell'estetica scritta: senza essere ripetitivo o noioso).
  • Se pensavi che con una bella creatività ti era possibile vendere qualsiasi cosa, ricrediti. La coerenza è tutto: se un pezzo di informazione è palesemente distonico rispetto alla promessa (pensa alla quantità di "free trial" che poi si scoprono essere veri e propri abbonamenti), mettilo in evidenza in modo chiaro e spiegandone i motivi o perderai la vendita.

L'articolo ha risposto alla sua promessa iniziale?
Faccelo sapere su Linkedin!


A/B test e CRO? Metodologie e tool che devi assolutamente conoscere

Oggi ti parlerò dell’A/B Test e ti spiegherò perché devi conoscerlo in modo da ottimizzare le conversioni del tuo sito web. 

Cos’è un A/B Test?
Un A/B test è un esperimento che viene fatto su una pagina web su cui vengono testate una o più variazioni della stessa, al fine di ottimizzare il tasso di conversione.

Detto in maniera più semplice un A/B test divide il traffico in entrata di un sito verso versioni differenti della stessa pagina, in modo da comprendere la variante che performa meglio e pubblicarla.

Risultato? La variante che raggiungerà l’obiettivo in maniera più efficace sarà la vincitrice, mentre potremo scartare la variante sconfitta. 

Questo strumento è così importante per una corretta strategia CRO che molto spesso si arriva, erroneamente, all’equazione A/B TEST = CRO. Sappiamo bene, però, che la Conversion Rate Optimization è una disciplina molto ampia e quello dell’A/B TEST è solo uno dei suoi strumenti.

Perché dovrei avviare un A/B Test?

Semplice, se vuoi ottenere il massimo in termini di conversione dai tuoi investimenti in marketing non puoi fare a meno di una strategia di Conversion Rate Optimization, e di conseguenza di un A/B test ma…

Attenzione! Non tutti i siti possono avviare un A/B test: è consigliabile almeno un traffico di diverse migliaia di utenti (ipoteticamente più di 50mila) al mese sul target di riferimento per assicurare una elevata affidabilità del risultato in tempi ragionevoli. 

L’A/B test è uno strumento che viene utilizzato solamente dopo una serie di analisi fatte in precedenza e che variano a seconda del progetto e fanno parte della CRO ovvero:

Understanding & Funnel analysis

  • Prima fase di analisi che pone le basi a tutto il lavoro futuro. La comprensione del brand nella sua interezza e una dettagliata analisi del funnel di vendita è fondamentale per supportare il lavoro di Redesign UX/UI.
  • Già in questa prima fase possiamo ricavare una serie di ipotesi rilevanti da tenere in conto per i nostri test.

Analisi euristica

  • Grazie ad una attenta analisi euristica, si riescono ad individuare quegli elementi che potrebbero impattare negativamente sull’esperienza dell’utente. Fra gli errori più comuni: la violazione delle euristiche di usabilità, l’assenza di una gestione efficace dell’attention budget dell’utente, l’assenza di trigger motivazionali, la confusione visiva dell’interfaccia. Per analizzare quest’ultima, strumenti come l’eyetracking e le mappe di calore possono fornire ottimi indizi per individuare i problemi (pain points).
  • I pain point più gravi possono essere subito modificati, per le opzioni più dubbie e sulle quali vorremmo un riscontro effettivo… esiste l’A/B test, appunto.

Analisi tecnica

  • Individuate i KPI più importanti, è opportuno condurre un’analisi tecnica che analizzi ed individui quali problemi e criticità stanno comportando una “perdita” nel funnel. Questa fase si muove principalmente tramite tool analitici, user test e all’occorrenza anche attraverso sondaggi targettizzati sul sito web di riferimento.
  • Prendendo gli esempi più semplici potremmo notare: una pagina con un conversion rate molto basso, un tasso di abbandoni al carrello molto elevato, una fonte di traffico con un tasso di rimbalzo più alto della media o un device che ha problemi di visualizzazione di alcuni elementi.

Redesign (UX/UI)

  • Iniziamo a disegnare: completata questa fase molto articolata e complessa, avremo già una buona base di ipotesi da cui partire per i nostri test.

Vedremo nel prossimo capitolo che è molto importante non limitarsi alle ipotesi riscontrate durante il lavoro ma dedicare sempre del tempo post-produzione alla definizione di nuovi elementi ottimizzabili.

Le fasi di un A/B test

Completate le fasi che precedono l’inizio di un A/B Test, inizia il vero lavoro di fine tuning.

Chiariamo quindi le principali fasi di un A/B test.

Definizione delle ipotesi di ottimizzazione

  • Review dell’intero progetto e formulazione delle ipotesi basate sulla nuova UX/UI.

Progettare/Disegnare le varianti (GreatPixel ha il suo Metodo NEKTAR)

Selezionare il target per il test (Personas)

  • Utilizzando le personas realizzate in fase di UX oppure clusterizzazioni identificate in fase di ipotesi, si individua il target di interesse per ogni singolo test e i parametri comportamentali o di contesto per segmentarne il traffico.

Impostazione tecnica del test (Split, KPI, URL, Certainty vs Speed ecc..)

  • Fase puramente tecnica volta ad inserire sul tool utilizzato impostazioni di varia natura come il numero di utenti, le KPI di interesse, il bilanciamento velocità/certezza del risultato ecc..

Analisi dei risultati & key learning

  • Infine, se con la tua analisi raggiungerai risultati positivi, otterrai utili insights, a conferma delle ipotesi iniziali, su eventuali modifiche da implementare sul sito web.

Ma attenzione: i test negativi non sono mai un fallimento, anzi sono ottime basi per formulare nuove ipotesi da mettere in test.

Supporto all’a/b test: scegli il tool più adatto alle tue esigenze

Ogni tool possiede le proprie caratteristiche uniche in relazione al costo: questo rende la scelta del tool una fase assolutamente da non sottovalutare in fase di progettazione.

Come metrica di riferimento prenderemo un qualsiasi sito web con una media mensile di 190.000 utenti.

Kameleoon

Kameleoon permette di creare qualsiasi tipo di A/B test con un sistema di targetizzazione completo integrato con meccanismi di AI.

Se state cercando un tool per A/B test e web personalization con un occhio verso il futuro, ed un ottimo rapporto qualità prezzo, questa è la scelta giusta.

  • Costo: stimando una UV (unique visitor) mensile inferiore ai 200.000 utenti, il costo può essere inferiore ai 1000 euro, con possibilità di aggiungere a prezzi convenienti il modulo personalization + costi di setup a parte
  • Realizzazione A/B test: supporto completo alla realizzazione di A/B test e multi-variation test
  • Targetizzazione A/B test: targetizzazione completa con funzioni avanzate di AI prediction
  • Personalization: potente motore interno di website personalization, integrabile agli a/b test
  • Ulteriori feature: supporto avanzato ai KPI

VWO Experience optimization

VWO è un multi-tool che oltre al normale servizio di A/B test offre tutta una serie di funzioni aggiuntive senza ricorrere ad ulteriori strumenti esterni (Hotjar, crazyegg ecc..)

Risulta essere un’ottima scelta se prevediamo una analisi avanzata dei dati ma non abbiamo il tempo/risorse di gestire 4 tools differenti.

  • Costo:  personalizzato; il prezzo viene concordato con un commerciale a seconda delle esigenze, essendo un tool che comprende moltissime feature. In linea generale e sulla base della vostra UV possiamo ipotizzare un costo tra i 500-2000 euro mese
  • Realizzazione A/B test:  supporto completo alla realizzazione di A/B test e multi-variation test
  • Targetizzazione A/B test: targetizzazione completa
  • Personalization:  motore interno di website personalization integrabile agli a/b test
  • Ulteriori feature:  insight, funnel creation, heatmap, form, session recorder, survey, website review, progetti e ipotesi, documentazione e case studies molto accurate

Google Optimize

La risposta alla realizzazione di un A/B test made in Google, evoluzione del sistema già presente su Analytics.

Questo tool totalmente gratuito permette di creare in maniera semplice A/B test con un buon livello di targetizzazione, ed ha integrato un buon motore di web personalization.

Se Optimize è quello che vi serve e non avete bisogno di funzioni avanzate, questo è sicuramente il tool che fa per voi.

  • Costo:  gratuito
  • Realizzazione A/B test:  ottimo supporto alla realizzazione di A/B test e multi-variation test
  • Targetizzazione A/B test: buon livello di targetizzazione
  • Personalization:  limitata, ma comunque di buon livello
  • Ulteriori feature:  integrazione con tutti i sistemi Google incluso analytics, da cui eredita dati sul traffico e segmenti di pubblico


Optimizely

Uno dei tool più completi quando si parla non solo di A/B testing, ma anche di web personalization, targetizzazione ed analisi dei dati.

Optimizely è un tool molto versatile che possiede integrazioni innate con tool come Analytics, Crazyegg, Clicktale, Google Ads ecc… , dando comunque piena libertà grazie alle API.

Una delle scelte migliori se volete chiedere il massimo dal vostro tool di testing.

  • Costo:  personalizzato e concordato con un commerciale, è un tool molto avanzato che che costa tra i 36.000 e i 200.000 euro annui mediamente
  • Realizzazione A/B test:  supporto completo alla realizzazione di A/B test e multi-variation test avanzati
  • Targetizzazione A/B test: targetizzazione completa ed avanzata
  • Personalization:  personalizzazione avanzata ed integrazione con A/B test
  • Ulteriori feature:  Analytics, supporto per siti dinamici, behavioral targeting, product and content recommendation

Questa è la nostra conoscenza riguardo i tool per condurre un A/B test realmente efficace e personalizzato a seconda delle differenti esigenze.  

E tu, quale tool utilizzi per il tuo business? Quali risultati hai ottenuto?