Indice

• Cos’ è la User Experience
• La ricerca delle keyword per la user experience
• Ordinare le keyword sulla base dell’intento di ricerca
• L’atterraggio sul tuo sito
• Definisci cosa aumenta il bounce rate – perché le persone lasciano il tuo sito?
• La semplicità di una pagina aiuta la user experience
• La coerenza nella struttura di un sito per migliorare la user experience
• I principali elementi di navigazione per la user experience
• La struttura di navigazione di un sito
• Utilizzo dei menù sul sito
• La barra di ricerca
• L’utilizzo dei link
• Gli elementi cliccabili di un sito
• La costruzione del layout del sito
• Come leggono le persone online?
• La struttura della home page
• La struttura delle categorie e le landing page del sito
• L’ utilizzo delle immagini per la user experience
• Il concatenamento delle CTA
• La pagina “chi siamo”
• I moduli sul sito web
• Come usare i media sul sito web
• Mostra il risultato sul sito web
• La nostra formazione

Una User Experience definisce la struttura, le regole, i passaggi e il copy che definiscono il modo in cui la persona vive il sito web.

Prima di costruire un sito web, devi conoscere bene la tua buyer persona.

• Per chi costruisci il tuo sito web?
• Quali sono gli obiettivi della tua buyer persona?
• Cosa vuole la buyer persona?
• Cosa non sopporta, in un sito web?
• Quali passaggi devi inserire, per rendere la comunicazione chiara?
• Quali passaggi devi eliminare sul sito, per rendere la comunicazione chiara?
• Come devi costruire il sito perché le persone sentano che il sito è stato costruito solo per loro?

Una delle prime ricerche che dobbiamo effettuare è quella sulle keyword: cosa cercano le persone è importante perché così possiamo creare un processo che soddisfi il loro processo decisionale e, allo stesso tempo, che massimizzi la performance del sito.

Processo decisionale di un utente

Se conosciamo le dieci domande più frequenti che gli utenti pongono online, possiamo costruire pagine e contenuti dove rispondiamo chiaramente a queste domande.

Dopo una ricerca approfondita in cui dovresti avere trovato oltre 100 keyword, che poi verranno testate nei mesi successivi, devi anche ordinare tali keyword sulla base dell’intento di ricerca. Uno dei primi risultati che devi guardare quando misuri la performance delle keyword è quante visite portano al tuo sito.

Lo devi fare perché potresti concentrarti su una keyword popolare creando contenuti specifici, potresti anche riuscire ad arrivare in un’ottima posizione sul motore di ricerca, ma poi osservando i dati comprendi che quella keyword in realtà non porta visite al sito.

Come mai? 

Se ad esempio hai un sito sulla corsa ben posizionato sulla parola chiave “scarpe Adidas running” sulla prima pagina di Google, dovresti essere molto contento: è una posizione molto difficile da ottenere, contando che le prime posizioni sono coperte da Adidas, poi dagli e-commerce di scarpe.

Soprattutto se non sei un brand estremamente conosciuto, la stragrande maggioranza dei tuoi potenziali clienti arriverà su una pagina specifica del tuo sito, perché ha trovato un articolo specifico sul motore di ricerca, oppure perché ha visto una tua pubblicità su Facebook che punta a quella pagina, o ancora perché ha visto un video su un argomento specifico che gli è piaciuto e adesso ha cliccato sul link nella descrizione.

L’utente quindi arriva su una pagina diversa dalla Home Page: in quel momento, hai pochi secondi per chiarire alla persona dove si trova sul tuo sito, quali azioni può compiere e soprattutto dove trovare velocemente le informazioni che le servono (la ragione per cui ha selezionato il link).

Ci sono molte ragioni per le quali gli utenti lasciano il tuo sito. Se le persone lasciano il tuo sito dopo pochi secondi, questo aumenterà il tasso di rimbalzo, o bounce rate, del sito, un dato che ci sta dicendo che, forse, alcune persone non trovano subito quello che cercano e ritornano sul motore di ricerca.

Ecco le ragioni principali:

1. Informazioni difficili da scoprire, oppure troppo complesse da decifrare

Immagina di avere un menù a tendina dove devi inserire i nomi dei tuoi prodotti. Se hanno nomi tecnici, è inutile inserirli: la maggior parte delle persone non comprenderà la differenza.

Prodotti:

• RW100
• RW200
• RW250
• RW400
• RW400 deluxe

Questo menù, ancora sorprendentemente comune in molti e-commerce, confonde il cliente che si chiede: qual è la differenza tra i prodotti?

2. Troppo testo

Le persone scansionano i siti: non leggono, parola per parola, tutto quello che c’è scritto. Se la tua pagina non è struttura in modo che sia facile saltare da un’informazione all’altra mantenendo un filo logico, la persona uscirà dalla pagina.

3. Troppe distrazioni

Alcuni siti hanno troppe pubblicità e in generale troppi stimoli: la persona non riconosce subito il messaggio principale o si perde tra le tante informazioni sul sito. Le statistiche mostrano che gli utenti a volte lasciano subito il sito, a volte cliccano su un altro link, alla ricerca delle informazioni che cercano, oppure su un link diverso che ha attirato la loro attenzione, ma poi escono comunque dal sito.

4. Troppi intenti 

Seguiamo una regola nella user experience:

• 1 pagina
• 1 informazione chiave
• 1 soluzione
• 1 Call to Action

Per quanto possibile, creiamo una sitemap che permetta alle persone di trovare solo quello che cercano e diamo loro la possibilità di esplorare facilmente il sito in modo che trovino subito altre informazioni utili.

Una pagina deve essere semplice da leggere, comprendere e navigare.

Questo significa che il testo deve essere essenziale.

Esercizio: leggi il copy del tuo sito e rimuovine il 50% in ogni pagina, mantenendo inalterato il contenuto, la pagina risulterà molto più chiara, se hai molto testo nelle pagine.

Le immagini devono aiutare a comprendere subito le tematiche della pagina, i prodotti, le scelte che deve fare l’utente all’interno del sito.

In questa immagine della home page di Decathlon, il colore nella parte superiore insieme alla scritta aiuta subito a comprendere dove sono i prodotti in sconto per il Black Friday.

Subito sotto troviamo immagini che spieghiamo “idee regalo” nelle tre varie categorie e, dato che questa immagine è stata presa dal sito a inizio dicembre, le immagini mostrano attrezzature da sci, che possono dare subito un’idea alla persona che sta cercando, appunto, idee regalo.

Cosa succede quando una persona seleziona una CTA sul tuo sito? Succede sempre una cosa diversa? A volte si apre un pop up, a volte un articolo, a volte un video? La struttura delle pagine prodotto è sempre uguale? L’utente che si trova davanti all’ennesima pagina prodotto, può prevedere cosa troverà, senza guardare? Ad esempio, se l’utente ha visitato un paio di pagine prodotto e ha trovato un video, in fondo alla pagina, che spiega come usarlo, potrà dire con certezza che qualsiasi pagina prodotto aprirà, troverà quel video?

Nel design del sito, non dobbiamo sorprendere le persone con nuovi contenuti ogni volta che cambiano pagina. Devono sempre sapere dove sono.

Per questo è ad esempio importante che il menù principale sia sempre presente su ogni pagina: in questo modo la persona può comprendere immediatamente come tornare alla pagina precedente, come andare ad un altro prodotto o muoversi di categoria.

Mantieni il design standard. Se sai che moltiplicherai alcuni tipi di pagine, costruisci prima una struttura e poi mantienila sempre fissa.

Ecco alcuni esempi di pagine che si possono ripetere:

–      Articoli del blog;

–      Pagine prodotto;

–      Categorie prodotto;

–      Dettagli di un prodotto;

–      Moduli;

–      Risorse gratuite.

Sul sito masterclass.com, la struttura ha un design molto prevedibile e semplice e allo stesso tempo elegante. Qualsiasi sia la pagina, il corso, l’istruttore, la struttura è molto simile e questo aiuta da subito l’utente ad orientarsi.

Sul sito masterclass.com, la struttura ha un design molto prevedibile e semplice e allo stesso tempo elegante. Qualsiasi sia la pagina, il corso, l’istruttore, la struttura è molto simile e questo aiuta da subito l’utente ad orientarsi.

Gli elementi di navigazione aiutano gli utenti a fare principalmente tre cose:

• Capire dove si trovano sul sito
• Capire come possono raggiungere quello che vogliono
• Andare dove vogliono velocemente

Quando le persone entrano sul tuo sito, devo avere subito chiare queste tre informazioni e in ogni pagina, gli elementi di navigazione devono aiutare la persona a raggiungere velocemente i suoi obiettivi di navigazione.

Esistono tre principali strutture di navigazione per un sito:

Puoi anche inserire diversi modi per categorizzare i contenuti, soprattutto nei menù secondari. Ad esempio, sotto la categoria “siti web”, potresti inserire “siti per professionisti”, “siti per ristoranti”, “siti per NGO”.

La scelta del menù è importante perché sarà la bussola sul tuo sito per gli utenti.

Le strutture standard in molti siti, ad esempio nei temi WordPress, sono il risultato di test ed esperienze sulla migliore user experience, per cui è consigliabile seguire le strutture già proposte. In generale, esistono due tipi di menù: barra in alto e colonna a sinistra.

La colonna a sinistra normalmente è consigliata se hai un grande numero di categorie, troppe per un menù orizzontale.

Oggi vengono sempre più spesso usati menù alternativi, tra cui quello che non appare direttamente sulla home page, se non come un quadratino in alto a destra.

Andando sul quadrato, si apre il menù:

Una scelta grafica che offre una maggiore qualità estetica, anche se è più difficile da usare per l’utente, soprattutto quello meno esperto.

Esistono due problemi principali con i menù che dobbiamo sempre tenere in considerazione quando costruiamo un menù.

1. I menù a tendina con diverse categorie costringono la persona a muovere il mouse trasversalmente. Se il menù non ha abbastanza tempo di attesa, le persone rischiano di non riuscire ad arrivare al sottomenù trasversale.

Questo significa che devono riprovare più volte a raggiungere la voce che desiderano. Se non ce la fanno, lasceranno il sito.

Una soluzione alternativa potrebbe essere un menù con una tendina che si apre con un sottomenù che non si chiude anche se il mouse lascia la sua posizione.

2. Un altro problema sono nomi di menù non chiari. Un esempio molto comune sono prodotti chiamati tramite il loro codice o altri nomi tecnici che potrebbero non essere comprensibili da un utente. Un altro problema sono nomi inventati.

Ad esempio, invece di dire “prodotti”, scriviamo “cambia vita” e invece di blog “pensieri in libertà”.

I menù devono essere immediatamente comprensibili, anche se sono “noiosi”.

ATTENZIONE: avrai sentito parlare del fatto che tutte le pagine devono essere a massimo tre click dalla pagina di atterraggio, altrimenti l’utente lascerà il sito.

Questo non è vero: le statistiche ci dicono che una pagina costruita male demotiva subito la persona ad andare avanti, mentre se il sito contiene una “segnaletica” chiara, le persone cliccano per diverse pagine per arrivare dove vogliono.

Il segreto è in come costruisci la mappa del sito: quali parole utilizzi per definire le categorie, come dividi le varie pagine, quali immagini utilizzi e quali titoli usi. Più questi segnali sono chiari e creano aspettativa, più le persone saranno disposte ad andare avanti, se quello che cercano può essere chiaramente trovato nel sito.

Un’altra regola che viene spesso citata è quella che il menù deve avere 7±2 voci, perché questa è la capacità massima di memorizzazione di un essere umano.La regola non è mai stata dimostrata, in termini di memorizzazione per l’esperienza utente, però è comunque una buona linea guida da seguire.

Questo non significa però che tu non possa creare menù con più di nove item.Al massimo dai al menù un aspetto più ordinato, creando delle strutture che rendono chiara alla persona la sotto-categorizzazione delle voci.

Adidas ha moltissimi prodotti: una voce di menù ne può contenere altre 60-70.

Per cui ogni voce di menù viene divisa in sotto-categorie, in questo caso addirittura con una foto.

Sempre più persone oggi utilizzano la barra di ricerca nel sito per cercare informazioni.

Posiziona la barra in alto a destra sul sito, con il termine “cerca”, che ti permette di rendere subito chiaro a tutti lo scopo della barra.

Una volta che appaiono i risultati nella pagina di ricerca, ripeti i termini di ricerca dell’utente in alto, prima dei risultati: in questo modo la persona verifica se ha commesso errori di spelling e può fare un’altra ricerca.

Il campo di ricerca di Ikea è molto avanzato: appena iniziamo a scrivere, appaiono i risultati divisi per categoria con le foto di alcuni prodotti.

Nel sito Lavazza, il campo di ricerca si deve selezionare premendo la lente di ingrandimento in alto.

Si apre il campo di ricerca con una domanda e alcuni suggerimenti.

I link sulla pagina devono essere ben visibili. Lo standard è ancora la parola sottolineata in blu. Consigliamo di fare cambiare colore al link già selezionato dalla persona, perché questa possa vedere velocemente se è già stata su una pagina del nostro sito.

Un’altra soluzione è quella di fare cambiare colore o aspetto alla parola quando la freccia del mouse ci passa sopra: potrebbe essere esteticamente più bello, ma potrebbe anche confondere gli utenti, soprattutto quelli meno esperti.

I breadcrumbs in cima alla pagina permettono alla persona di sapere dove si trova nel sito e di ritornare facilmente indietro se la pagina selezionata non risulta essere quella desiderata o se desidera esplorare altre pagine.

Sul sito fontanafredda.it, la selezione viene facilitata grazie a un cambio di carattere e una freccia che indica alla persona che sta lasciando la pagina.

Man mano che proseguiamo nei nostri sforzi di ranking sui motori di ricerca, possiamo lavorare anche su keyword più competitive.

Le persone si sono ormai abituate a potere cliccare ovunque su un sito o comunque ad aspettarsi che, ad esempio, un’immagine si possa cliccare sulla scheda di un prodotto per accedere alle informazioni di dettaglio.

Occorre quindi definire bene gli elementi cliccabili di un sito, perché sia facile per la persona riconoscerli.

La prima cosa da fare è programmare i pulsanti in modo che cambino aspetto nei tre momenti principali.

Un’altra cosa importante da considerare è la coerenza: se hai un’e-commerce con schede prodotto con l’immagine principale cliccabile, lo devono essere tutte: altrimenti si creerà un’aspettativa che poi non viene sempre soddisfatta, perché l’utente selezionerà un’immagine ed entrerà nelle informazioni di dettaglio, ma poi selezionerà un altro prodotto e, aspettandosi la stessa dinamica, cliccherà sull’immagine solo per constatare che non esiste un link.

Consideriamo anche il fattore mobile: può sembrare banale, ma è bene fare dei test con i pulsanti del sito su uno smartphone, perché se i pulsanti sono piccoli, sarà più difficile per la persona selezionarli.

Ricordiamoci della legge di Fitts: “É più veloce colpire grandi bersagli vicino a noi che bersagli più piccoli lontano da noi”. 

Questo viene applicato spesso nella creazione del sito web, dove gli oggetti più prominenti, grandi e colorati sono le opzioni che vogliamo che gli utenti selezionino.

Secondo voi, quale piano vogliono che scegliamo?

Due sono i pulsanti prominenti: e hanno la stessa identica funzione. Qual è la CTA che vogliono che compiamo? Più chiara di così…

Pensa quindi a quali sono i pulsanti che vuoi che clicchino le persone. Il cursore del mouse si muove dalla parte in alto a sinistra alla parte in basso a destra, quindi è opportuno inserire link e pulsanti su quella traiettoria, per facilità.

Per il mobile, hai considerato di lasciare abbastanza spazio tra i pulsanti perché la persona, con il pollice, possa toccare il pulsante giusto?

Le persone arriveranno sul tuo sito grazie a un link, e spesso atterreranno su una landing page.

Quindi, dobbiamo disegnare le pagine del sito in modo che, in qualsiasi momento, le persone abbiano chiaro dove si trovano e come faranno a navigare in qualsiasi punto del sito da quella pagina. Soprattutto per un sito e-commerce, questo è fondamentale: se la persona si perde nel sito o addirittura nella pagina, chiuderà il sito dopo pochi tentativi.

Esistono elementi comuni su una pagina che aiutano la persona a comprendere subito dove si trova.

Prima di tutto nella parte in alto della pagina, descriviamo con una frase chi siamo: può essere la frase della Value Proposition che abbiamo messo nella parte Above the Line, oppure una frase specifica per una parte del sito (ad esempio, se abbiamo due buyer persona, consumer e corporate, potremmo differenziare le frasi).

Quando si apre una nuova pagina, inoltre, inseriamo sempre un titolo chiaro, per fare comprendere alla persona dove è atterrata. Se era interessata proprio a quell’argomento, in pochi secondi dobbiamo rassicurarla con un titolo che comunica: sei nel posto giusto.

Marketo, per ogni pagina, inserisce un titolo e spesso anche un sottotitolo per fare comprendere alla persona, con chiarezza, dove si trova. Ritornando all’esempio della legge di Fitts, qual è l’azione che vogliono che compiamo su questa pagina? Certo, richiedere una demo.

Inoltre, il logo deve essere collegato alla home page; molte persone sanno che selezionando il logo, possono tornare alla home page, per cui dobbiamo creare un kyperlink.

Il titolo di una pagina deve essere:

–      Massimo 64 parole

–      Unico per ogni pagina

Prova a descrivere il percorso inverso che una persona prende per arrivare alla pagina.

Ad esempio, se hai un sito che vende integratori, il percorso con le bradcrumbs potrebbe essere questo:

integratori Italia>prodotti per la salute>olio di pesce

Prova a guardare il percorso che fa l’utente al contrario, partendo dalla tua pagina (in questo caso, la pagina sul prodotto “olio di pesce” e ritornare indietro, per controllare che sia il percorso migliore).

Puoi anche inserire queste parole nel title text, in modo che siano chiare sia per l’utente che per il motore di ricerca, magari con divisori come le linee verticali usate in molti siti:

olio di pesce I prodotti per la salute I integratori Italia

Lo scopo di un sito web è quello di fare trovare velocemente alla persona le informazioni che cerca, guidandola attraverso CTA chiare. Per questo motivo, dobbiamo struttura il sito in modo che la navigazione sia ordinata e, progressivamente, porti la persona verso le pagine desiderate.

Dobbiamo quindi creare una mappa del sito fatta di pagine riassuntive, che raccolgono le tematiche principali.

In questa pagina di navigazione (www.agricolashop.it) possiamo vedere le varie categorie di prodotti per il Natale.

Selezionando le illuminazioni, atterriamo su una pagina più dettagliata con i prodotti. Da notare la tabella in alto che offre un sistema chiaro per selezionare la lunghezza delle luminarie.

Quando arriviamo alla pagina di dettaglio, ci devono essere informazioni dettagliate solo per quel tipo di argomento. È importante anche considerare la struttura della pagina: ricorda che non dobbiamo lasciare l’iniziativa all’utente.

Chiediti sempre, quale azione vuoi che faccia la persona una volta che ha raggiunto la pagina desiderata.

Quindi inseriamo:

–      Una Call to Action chiara

–      Un link alle risorse, ad esempio a demo o risorse gratuite che possono chiarire alla persona quale sia il prodotto migliore

Vediamo la navigazione progressiva sul sito www.kitchenaid.it:

Il menù in alto propone alcune categorie: ci sono categorie prodotto, con le demo, ma anche ricette, per chi ha già un prodotto (e potrebbe essere quindi interessato a prenderne altri, vedendo le ricette) oppure per chi vuole capire cosa può fare con i prodotti più complessi, ad esempio i robot da cucina.

Selezionando “prodotti” si apre un menù con le categorie (invece di una pagina) che divide bene i prodotti e addirittura inserisce un’immagine per ogni prodotto. Questo è utilissimo perché alcuni prodotti potrebbero non essere così conosciuti “come il “cook processor” o il “robot da cucina”.

Selezionando “robot da cucina”, entriamo in una pagina con i vari prodotti. Siamo interessati a questo prodotto, adesso dobbiamo scegliere il tipo, il colore e addirittura la personalizzazione.

Prima di tutto, notiamo che in questa pagina, che è la pagina di dettaglio, c’è solo il prodotto e nient’altro. Ci sono due CTA sulla destra: aggiungi al carrello, per gli utenti che sono abituati a comprare online, e “cerca un punto vendita” per quelli che invece vogliono “toccare con mano” un prodotto tutto sommato costoso.

Subito sotto sono inseriti i prodotti correlati: riteniamo sarebbe stato più utile inserirli più sotto, perché potrebbero distrarre l’utente, che ha dimostrato interesse per il robot, ma comunque può essere un’altra CTA interessante. Consigliamo sempre di dare prima tutte le indicazioni dettagliate sul prodotto oggetto della pagina e poi, se desideriamo, offrire prodotti correlati.

Nella pagina troviamo la descrizione dettagliata di quello che l’utente troverà e la descrizione del perché questo prodotto ha questo valore.

Infine, accessori per il robot da cucina, posizionati alla fine della pagina, dove dovrebbero essere e molto più pertinenti rispetto ai prodotti correlati.

Una pagina potrebbe non riuscire a contenere tutte le informazioni che vogliamo.

Esistono quindi tre modi principali per ordinare quelle informazioni aggiuntive e fare sì che gli utenti le raggiungano facilmente.

Se vogliamo tenere tutte le informazioni su una pagina, che è la soluzione preferita da molti siti oggi, dobbiamo ricordarci che man mano che le persone fanno scorrere la pagina verso il basso, la loro attenzione diminuisce. Inoltre, davanti a una pagina con tante informazioni, le persone sono abituate a scansionare la pagina.

È quindi importante diminuire il testo, rendere grandi i titoli, aiutarli con immagini, in modo che la persona trovi subito quello che sta cercando.

L’approccio “splitting” a pagine separate può avere senso se ad esempio diamo delle istruzioni che le persone devono seguire. Un approccio del genere è molto più ordinato, perché le persone sanno esattamente dove inizia e finisce un passaggio. In questo caso, inseriamo il titolo principale, che non cambia, in cima alla pagina e poi sotto-titoli per ogni fase.

Ad esempio:

COME DIVENTARE NOSTRO MEMBRO GOLD

• Seleziona una delle opzioni di membership (pagina con foto e istruzioni)
• Manda una richiesta alla nostra sede più vicina (pagina con foto e istruzioni)
• Vieni a ritirare la tua Gold Card una volta accettato (pagina con foto e istruzioni)

È sempre meglio dare una visione globale delle fasi su una pagina iniziale, per poi offrire pagine sequenziali di dettaglio.

Nell’approccio sequenziale, ordiniamo il livello di informazioni che la persona può ricercare. Può essere opportuno per prodotti molto complessi, oppure pensato per quegli utenti che vogliono avere una visione molto più dettagliata di un prodotto.

Una moto viene acquistata da diversi tipi di persone: coloro che sono attratti dall’estetica e dalla marca e quindi hanno bisogno di un livello di informazioni più superficiale e quelli invece che conoscono molto bene le motorizzazioni, i dettagli tecnici e di performance e che quindi vanno a ricercare quelle informazioni prima dell’acquisto.

In questo caso, un approccio sequenziale permette a entrambi di utenti di raggiungere le informazioni che vogliono.

Nella pagina della Ducati Monster, ci sono moltissime altre pagine che la persona può selezionare: la scheda dettagliata della moto, il configuratore dei colori, i pacchetti, gli accessori e molto altro. Il livello di dettaglio è diviso, per non offrire troppe informazioni allo stesso tempo sulla pagina, perché ci sono utenti che non sono interessati a molte di queste informazioni.

Le persone scansionano le pagine del sito alla ricerca di una parola, un prodotto, un’immagine che le attragga.

Diverse aziende hanno sviluppato tecnologie di eye tracking per studiare come meglio posizionare gli elementi sul sito web.

In questa heat map, vengono evidenziate le zone dove cade l’occhio degli utenti: più sono rosse, più frequentemente sono visualizzate. In questo modo possiamo anche creare degli A/B test per migliorare la struttura di una pagina.

Solitamente, il movimento degli occhi di una persona segue un pattern a “F”: si parte dall’alto a sinistra, si scende e si guarda velocemente la pagina, scansionando alcuni elementi a sinistra e a destra.

Poi sono i titoli e i sottotitoli ad essere più letti e anche in quel caso, solitamente sono le prime 11 lettere ad essere lette più frequentemente.

Per migliorare la struttura di una pagina e permettere alla persona di leggere velocemente:  

–      Inserisci un riassunto dei contenuti della pagina in cima, soprattutto quando c’è molto testo, ad esempio in un articolo

–      I titoli delle pagine devono dare informazioni precise sul contenuto della pagina e la sua promessa: cosa troverà l’utente

–      Inseriamo in tutti i titoli e sotto-titoli della pagina e negli elenchi puntati informazioni importanti

Le persone sono il 25% più lente quando leggono sullo schermo di un computer, rispetto alla carta. Inoltre, leggono solo circa il 20% dei contenuti.  

Ricordiamoci che sullo schermo, solitamente, soprattutto in un sito web, le persone leggono per raggiungere un obiettivo e non per trattenere grandi quantità di informazioni. Dobbiamo avere poco testo, ordinato in modo adeguato, perché le persone assorbano le informazioni utili ed arrivino al loro obiettivo nel minor tempo possibile.

Se hai un sito web, cerca di ridurre del 50% il testo di ogni pagina: se non è ancora stato ottimizzato, non sarà difficile farlo.

Il sito www.slack.comutilizza pochissime parole nelle pagine, nelle posizioni corrette.

In questo modo le persone trovano subito quello che cercano – se sono interessate all’argomento, verranno portate a una pagina di dettaglio con molto più testo.

Per facilitare la ricerca delle persone, assicurati di avere sotto mano l’elenco di keyword (anche quelle a coda lunga) che le persone cercano nel tuo settore. In questo modo, molte delle keyword possono diventare titoli o sottotitoli, formattati perché siano ben visibili.

Per ogni pagina, è consigliabile non usare più di tre livelli di titoli – prova a pensare ad una struttura diversa del sito, magari dividendo le pagine.

Per le pagine, inserisci un riassunto di quello che troverà la persona, perché comprenda subito su quale categoria deve posizionarsi per arrivare alle informazioni che cerca. Questi testi diventano anche testi descrittivi per i motori di ricerca.

Mantieni il testo chiaro e semplice. In uno studio di Oppenheimer del 2006, è stato dimostrato che più un articolo ha parole complesse, meno intelligente viene considerato l’autore del testo.

Utilizza la piramide inversa dei contenuti dei giornalisti:

–      Prima inserisci le informazioni fondamentali ed un riassunto. Iniziamo quindi dalla conclusione

–      Poi i dettagli più importanti, a volte con elenchi puntati

–      Infine, un corpo di informazioni più dettagliato, magari in una pagina separata

La Home Page deve subito mostrare la Value Proposition dell’azienda, i prodotti i servizi e le categorie di utenti che potrebbero essere interessati.

• Inoltre, i contenuti più aggiornati devono trovarsi anche in Home Page, perché le persone possano trovare un punto di riferimento dove guardare cosa c’è di nuovo – nuovi prodotti, promozioni, nuovi servizi.
• La Home Page deve contenere anche le informazioni più importanti del sito, quelle che orientano la persona verso altre pagine: ricordiamo che la Home Page è il punto di partenza da cui si può navigare in tutto il sito e in cui si può vedere tutto il sito.
• Spesso è troppo presto chiedere alle persone di comprare nella Home Page: per questo, le CTA devono essere piuttosto con lo scopo di raccogliere i dati dell’utente, di fargli scaricare del materiale o di mandarlo verso landing page specifiche.
• Nella Home Page devono esserci i link con le attività e le CTA più importanti

La Home Page non deve contenere tutte le informazioni: spesso questo è l’errore di molte aziende che credono che, altrimenti, perderanno potenziali clienti.

Ecco un test che proponiamo sempre alle aziende clienti: fai vedere la tua Home Page a una persona che non conosce la tua azienda per 5 secondi e poi chiedile di cosa si occupa la tua azienda.

Se non sa rispondere, significa che di solito hai messo troppo testo, troppe informazioni e quindi la persona non sa dove concentrarsi.

Nella Home Page del Digital Marketing Institute si vede subito il prodotto principale, la certificazione per i professionisti nel digital marketing. Un breve riassunto del sito mostra, per chi vuole andare oltre i cinque secondi, di cosa si tratta, in poche righe, e ci mostra già due scelte: i corsi e i servizi per le aziende. Poche parole. Essenziale e pulito.

Le pagine di categoria offrono una panoramica di cosa troverà la persona in una determinata categoria.

La pagina deve mostrare un elenco di prodotti, servizi, articoli o altri elementi della categoria di solito, la struttura è questa:

–      Immagine

–      Riassunto

–      Link alla pagina di dettaglio

Un sito e-commerce come quello di Leroy Merlin deve avere delle pagine riassuntive per orientare il cliente. Nel sito, tutte le pagine categoria sono uguali, il che facilita la navigazione dell’utente.

Le pagine categoria hanno molte keyword, ed è probabile che le persone atterrino sulle pagine categoria piuttosto che sulla Home Page.

Un’altra funzionalità molto utile, soprattutto per l’e-commerce, è la funzione di comparazione dei prodotti. Gli utenti sono abituati a esplorare il web per trovare diverse soluzioni e paragonarle: dare la possibilità di paragonare nostre soluzioni ci permette di eliminare, automaticamente, dalla mente del cliente, le soluzioni di altri e di facilitare la scelta.

Normalmente, il modo più facile per paragonare dei prodotti è quello di elencare prodotti simili, con le caratteristiche tecniche.

Fonte: www.keurig.com

Un’altra pratica ormai comune e utile sia per gli utenti che per noi (per mostrare i vantaggi di un’opzione, quella che vogliamo che selezionino) è la pagina di comparazione dei prezzi.

Fonte: www.trello.com

Le landing page sono di solito utilizzate per mostrare un prodotto o un servizio singolo. Sono pagine di atterraggio di una campagna promozionale, ma dobbiamo tenere presente che anche sul nostro sito dobbiamo costruire pagine di dettaglio con lo stesso principio e la stessa struttura.

La struttura di una landing page è la seguente:

–      Value Proposition del prodotto

–      Elenco di vantaggi o corpo del messaggio

–      Immagini, video, altri contenuti di supporto

–      Modulo di download oppure CTA di vendita

Le pagine di dettaglio sono le pagine che mostrano un solo contenuto, quello che dovrebbe essere ricercato dall’utente. Lo scopo di una pagina di dettaglio è focalizzarsi su un prodotto, un argomento, un articolo ricercato dall’utente.

La pagina di dettaglio deve eliminare le distrazioni. Deve avere anche informazioni molto più dettagliate riguardo al prodotto/argomento ricercato, aggiungendo immagini, video, contenuti da scaricare.

Un altro elemento importante nella pagina di dettaglio è la Call to Action: presumibilmente, l’utente, arrivato alla pagina di dettaglio, ha completato il suo viaggio di ricerca di informazioni. Non lasciamo l’iniziativa all’utente, e diamogli la possibilità di comprare il prodotto, di provarlo, di scaricare un documento ancora più dettagliato.

Le immagini sono fondamentali per gli e-commerce, ma anche per spiegare concetti complessi e i vantaggi di prodotti e servizi.

Un hotel non potrà mai spiegare la bellezza della sua spa: deve mostrarla, in una situazione in cui persone si stanno godendo il servizio. Per questo motivo, le immagini diventano fondamentali in un sito web.

L’argomento “foto”, soprattutto per gli e-commerce, richiede un corso separato, ma riassumiamo qui quali sono gli elementi fondamentali:

• Se hai prodotti da vendere, fai diverse foto, con anche la possibilità di zoomare, e in caso di prodotti di abbigliamento, ad esempio, mostra il prodotto indosso a qualcuno. Fatti questa domanda: come faccio, con le mie immagini, a fare “provare” il prodotto al mio utente?
• Se hai servizi complessi, cerca un’immagine che spieghi il vantaggio finale. Se vendi un computer con caratteristiche complesse, che sono ideali per i gamer, mostra il computer mentre due persone, simili alla buyer persona, giocano ad un gioco famoso, oppure semplicemente mostra il computer con una schermata di un gioco
• Mostra le dimensioni dei prodotti, soprattutto di prodotti nuovi: ad esempio, mostra quanto è grande una stampante 3D, oppure un poster
• Se vuoi mostrare il tuo ufficio, la tua azienda, il tuo hotel o ristorante, focalizzati su quello che interessa al cliente. Troppo spesso vediamo foto di dettaglio di una stanza, come il mazzo di fiori o la bottiglia di spumante, e poi non ci sono le foto per mostrare com’è fatta la camera d’albergo proposta
• Non usare foto senza copyright comprate su internet, soprattutto per il tuo sito: gli utenti potrebbero ritrovare le stesse foto su altri siti e sicuramente quelle foto sono meno emozionali ed accurate di quelle che potresti produrre tu. Se non hai possibilità di produrre foto per i concetti che vuoi esprimere, assicurati che siano foto di alta qualità e che non siano le solite foto di team che si abbracciano, si stringono la mano o fanno segno “OK”: sono banali e scontate

Il prezzo è un’informazione fondamentale, anche per il B2B. Se non possiamo offrire un prezzo completo, oppure non esiste un prezzo perché il servizio personalizzato, mostrate almeno un range di prezzo.

Nel caso in cui il prezzo sia veramente impossibile da inserire, spiegare perché non possiamo mostrarlo sul sito e indichiamo il livello di qualità del nostro prodotto (siamo la Ferrari del settore, oppure i nostri prezzi sono bassi?).

Quando inseriamo un prezzo, di fianco citiamo anche i vantaggi che vengono da quel tipo di offerta. Ricordiamoci che non esiste un prezzo troppo alto o troppo basso in assoluto: certamente, esistono dei budget da rispettare, ma all’interno di quei budget, le proposte possono variare moltissimo.

Quello che valuta il potenziale cliente è il rapporto valore/prezzo. Se il valore non è spiegato bene, il prezzo sembrerà troppo alto anche se in realtà non lo è.

È importante dunque mostrare un elenco dei vantaggi della persona, perché comprenda che il prezzo, anche se a volte può essere alto per il settore, è in realtà un prezzo molto buono per quello che offriamo.

Bang & Olufsen produce altoparlanti e televisori che possono arrivare a costare decine di migliaia di Euro. Il segreto, oltre all’estrema qualità dei materiali e al loro design, è quella di sviluppare un attaccamento emotivo con gli oggetti che entrano a far parte della casa e fare sentire le persone che comprano i loro prodotti, importanti e di classe.

Ogni pagina del sito deve avere una Call to Action.

Ricorda: non lasciare l’iniziativa all’utente. Indica sempre quale deve essere la prossima azione che devono compiere, che siano sulla Home Page o una pagina di dettaglio.

Sul sito www.adobe.com, nella parte Above the Line della Home page, Adobe presenta due call to action per due tipi di potenziali clienti:

1. Attiva la versione di prova gratuita – sono clienti che hanno già esplorato il mondo adobe, superficialmente, e potrebbero essere pronti a provare i suoi prodotti;
2. Acquista – sono clienti che hanno già esplorato a fondo i prodotti Adobe e potrebbero essere pronti a comprare.

Esiste una terza CTA, per i clienti: “accedi”. Con tre CTA, Adobe ha diviso tre tipi di persone diverse che corrispondono alla stessa buyer persona, in tre momenti diversi del buyer’s journey.

Nella Home Page del Cirque du Soleil, appare subito l’ultimo spettacolo dell’azienda con tre CTA, a seconda, ancora una volta, di chi sta guardando (o meglio, di quale punto del buyer’s journey si trova chi sta guardando):

1. “Compra biglietti” per chi ha già visitato il sito oppure ha visto un cartellone pubblicitario per strada, ha controllato i biglietti con il suo smartphone mentre aspettava l’autobus e adesso è pronto a comprare;
2. Guarda il video – Per chi ancora non è convinto, oppure per chi conosce il Cirque du Soleil ma non ha mai visto questo spettacolo. Sanno che i loro spettacoli sono così grandiosi, che un video è un’ottima CTA;
3. About Totem – Una descrizione dello spettacolo, per chi ha bisogno di leggere oppure per chi è ancora indietro nel Buyer’s Journey.

Per chi è pensata questa CTA sulla Home Page del sito di Halrey Davidson? Per chi pensa che un’Harley sia fantastica, ma troppo costosa. Hanno creato una sezione per cambiare il punto di vista di molte persone che, senza neanche avere mai visto un prezzo, giudicano inavvicinabile il loro prodotto.

La pagina che descrive chi sei, è importante, perché offri informazioni che permettono alle persone di fidarsi di te.

Ecco cosa puoi includere:

–      Una descrizione dell’azienda, con anche un’immagine della sede – per renderla più “reale” in un mondo virtuale”, oppure una foto del team.

–      La mission e la vision aziendale, insieme ai valori – scrivi in cosa credi in modo autentico, con un linguaggio chiaro e diretto che sia in linea con lo spirito dell’azienda.

La sezione “about us” del Cirque du Soleil contiene diverse pagine: dalla storia dell’azienda, al processo creativo, fino alla descrizione degli spettacoli.

Nella pagina “chi siamo” di Harley Davidson, appare tante volte la stessa parola: libertà. È la parola con cui si è posizionata l’azienda, che la rende un brand iconico nel mondo motociclistico. Harley Davidson, in poche parole, ti fa entrare nel suo mondo di valori. E non parla di moto.

Il sito web è una piattaforma fondamentale dove raccogliere lead, grazie ai moduli di contatto.

Marketo ha portato avanti alcuni esperimenti per misurare il tasso di conversione comparato con la lunghezza di un modulo di contatto, per comprendere quanti campi mettere.

Come possiamo vedere, più il modulo è corto, più converte.

In realtà, questi sono probabilmente moduli per un’azienda B2B, che richiede quindi un livello di analisi maggiore, perché, ad esempio, sapere chi sono i decision-maker nel processo di acquisto diventa fondamentale. Per un modulo B2C, spesso sono sufficienti due campi: nome e cognome e email. In alcuni casi, possiamo chiedere di lasciare anche solo la mail – con i privati, la resistenza a lasciare maggiori informazioni, o la tendenza a selezionare campi a caso sul modulo, sono alte e quindi dobbiamo analizzare con cura quali campi sono veramente importanti per noi.

Teniamo anche in considerazione il fatto che i tre moduli hanno differenze di conversioni piccole, nonostante nell’ultimo e nel penultimo i campi obbligatori siano molti: soprattutto per una strategia B2B, quindi, potrebbe essere opportuno costruire un modulo con molti più campi.

L’analisi da fare insieme al cliente deve rispondere alla domanda: quali informazioni sono assolutamente necessarie per favorire la vendita?

Utilizza la stessa lunghezza per i moduli: le persone in questo modo capiscono quante informazioni richiedi e ormai riconoscono subito i form, ad esempio, con nome separato dal cognome e con il CAP (più piccolo) o l’indirizzo (più lungo, a volte su più linee).

Evita di chiedere troppe informazioni a meno che non sia assolutamente necessario e spiega la tua richiesta, altrimenti le persone tenderanno a darti false informazioni. In un sito che abbiamo costruito per la nostra azienda, chiedevamo la provincia di provenienza con un menù a tendina per poter classificare l’utente e mandargli le pubblicità più attinenti, dato che organizzavamo lo stesso corso in diverse regioni d’Italia.

All’inizio non abbiamo spiegato questo passaggio e moltissime persone segnavano “Agrigento” come provincia, perché era la prima selezione. Una volta spiegato perché dovessero inserire la provincia, molte più persone hanno inserito la provincia corretta.

Se possibile, invece di fare scrivere alla persona, inserisci un menù a tendina con poche opzioni da cui scegliere. Ad esempio, se promuovi un corso in tre città, invece di fare scrivere in quale città vuole partecipare al corso, fai selezionare dalle città già pre-impostate. Questo accade spesso quando si deve selezionare la spedizione su un sito: normalmente si imposta la spedizione gratuita come default, ma è possibile dare anche spedizioni più veloci a un prezzo maggiore.

Pre-impostare le tempistiche di spedizione con i vari prezzi è un modo per rendere veloce ed efficace la selezione.

Quali media utilizziamo sul sito web? Questa è una domanda a cui non possiamo rispondere senza conoscere le abitudini della buyer persona e il buyer’s journey. Ci sono persone che preferiscono leggere: altre che ascoltano un video mentre prendono la metropolitana.

Ci sono persone che prendono le informazioni da Facebook e poi entrano direttamente sulla pagina di dettaglio. Ci sono altre che invece vogliono comparare diversi prodotti sul nostro sito. Oggi, i podcast sono sempre più utilizzati, anche se richiedono un’attenzione maggiore.

L’ideale è conoscere quali media utilizzano le nostre buyer persona – spesso questo non è facile da determinare. Consigliamo di tenere un mix di contenuti, sia nel singolo articolo/nella pagina, che  sul sito e fare considerazioni di massima sui diversi tipi di buyer persona. Se ad esempio un tipo di buyer persona ha un’età media di 15 anni, forse YouTube con video istruttivi e divertenti e un link al video sul nostro sito potrebbe essere meglio che un lungo articolo di spiegazione.

Ogni volta che crei un contenuto nel sito, chiediti:  “Questo contenuto migliora l’esperienza dell’utente?”  

Attenzione ad esempio a curare troppo la grafica, a scapito della facilità di utilizzo. Un esempio particolarmente fastidioso è la musica che parte da sola quando entriamo in un sito.

Immagina di fare delle ricerche in ufficio e la musica del sito parte senza che tu lo voglia: magari hai il volume al massimo e, oltre a spaventare il collega, tutti penseranno che stai guardando video divertenti su YouTube.

Sul sito di Under Armour Italia c’è una funzione che permette di vedere velocemente le diverse versioni e colori di una scarpa. Facile, veloce e interattivo. Migliora l’esperienza dell’utente? Certamente.

La user experience deve essere semplice, perché le persone si concentrino sui contenuti importanti.

Chiediti se un elemento grafico aiuta l’utente a performare l’azione che vuoi , o a ricevere l’informazione che cerca. Se non è importante, eliminala. È inutile mettere un carosello di foto, se queste sono solo decorative: inoltre, appesantisce la pagina, che potrebbe essere difficile da caricare.

Muji non tradisce la sua filosofia di estrema semplicità: il sito è essenziale, non ci sono grafiche o elementi estetici che distraggono.

Guardando la home page del sito, dove finisce il tuo sguardo?

Uno dei più grandi svantaggi di comprare su un sito web è che non possiamo “toccare con mano” il prodotto o il servizio.

Questo ovviamente sta lentamente cambiando e sempre più mercati oggi, che prima si credeva fossero impermeabili all’e-commerce, hanno fatto il salto.

Pensiamo all’abbigliamento: si credeva che le persone non avrebbero comprato vestiti e scarpe da un sito senza provarli. Yoox, Zalando e moltissimi altri e-commerce di abbigliamento hanno provato che questo non è vero.

In ogni caso, è sempre importante mostrare il risultato che le persone avranno, comprando un nostro prodotto.

Pensa alle app con filtri fotografici o ai siti che vendono auto: mostrare immediatamente il risultato di un determinato utilizzo dello strumento aiuta l’utente ad avere un’esperienza più completa.

Adobe ti invita a una prova gratuita per provare subito Photoshop. Ti offre della formazione, per vedere come puoi cambiare le foto e le immagini e ti invita ad entrare in una community dove puoi scoprire ancora più a fondo come utilizzare appieno questo software.

Vuoi iniziare la tua formazione con noi? Scopri la nostra guida sulla User Experience per il tuo sito web.

Guida gratuita User Experience per il tuo sito web.