Quando un visitatore arriva su un sito, deve cercare di comprendere in pochi secondi l’argomento della pagina, capire se gli interessa ed eventualmente individuare cosa leggere. 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. Di conseguenza, diminuiscono le probabilità che il visitatore compia l’azione che noi desideriamo esegua: riempire un modulo, registrarsi, comprare qualcosa, richiedere un appuntamento, ecc.

Queste opportunità di distrazione abbassano il saggio di conversione del sito.

Occorre quindi minimizzare tutte i potenziali elementi di distrazione, come informazioni non necessarie, immagini slegate dall’argomento della pagina, link che spingono il visitatore a lasciare la pagina, ecc.

Nell’immagine seguente, riporto l’esempio di una normale pagina web e dei diversi elementi di distrazione presenti. Non mi fermo a commentarli, perché quello che qui mi interessa è solo far notare quanti possono essere gli elementi di distrazione presenti in una normale pagina web.

 

 

Se un elemento ci distrae da quello che è l’obiettivo della pagina, ci concentriamo su di esso e perdiamo di vista quello che – secondo le intenzioni di chi ha costruito la pagina – avremmo dovuto fare.

 

Cosa succede quando ci concentriamo su qualcosa

La nostra capacità d’attenzione è limitata. Di solito, quando focalizziamo la nostra attenzione su qualcosa, riduciamo la nostra capacità di pensare ad altre cose o di percepirle, anche se sono cose ovvie. Se, ad esempio, parliamo al cellulare mentre stiamo passeggiando per strada, automaticamente l’attenzione che rivolgiamo al nostro interlocutore sottrae attrazione alle cose che compaiono durante la nostra passeggiata: persone, negozi, insegne …

In un famoso test eseguito da Christopher Chabris e Daniel Simons abbiamo la dimostrazione di questo nostro limite. Fu fatto vedere ad alcune persone un video nel quale due gruppi di persone – distinte dal colore della maglietta (bianco e nero) – si scambiavano la palla all’interno del proprio gruppo. Gli spettatori dovevano contare quante volte i giocatori con la maglietta bianca si passavano la palla.

 

 

 

Mentre scorreva il video e i giocatori si passavano la palla, si poteva notare che un gorilla camminava in mezzo ai giocatori.

Alla fine del video, risultò che più della metà dei visitatori non aveva visto il gorilla: la loro mente era talmente concentrata su una attività – contare il numero dei passaggi di palla – che tutto il resto passava in secondo piano. 

 

La distrazione sul web

Molti studi hanno dimostrato che le persone non notano tanti 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 elementi (come il test del gorilla ha dimostrato).

Per individuare quali elementi possono distrarre i visitatori di una pagina web, si deve pensare al principale obiettivo della pagina: ogni cosa che può attrarre l’attenzione dei visitatori, o che li può fare cliccare verso qualcosa che non è connesso con il principale obiettivo, è un possibile motivo di distrazione.

Per chiarirci le idee analizziamo un test condotto sulla home page di JellyTelly, una società che fornisce programmi televisivi rivolti alle famiglie cristiane.

La sua home page aveva come obiettivo quello di spingere i visitatori a richiedere un prova gratuita del servizio (“Start Your Free Month Trial”) (fig. seguente).

 

 

Il test fu condotto con l’obiettivo di individuare alcuni elementi di distrazione che potevano abbassare la richiesta del mese gratuito di prova. Fu quindi confrontata l’home page originale con una variante in cui erano stati rimossi i seguenti elementi

1. il menu di navigazione;
2. la serie di immagini poste in alto sotto il menu di navigazione;
3. il box di ricerca in alto a destra;
4. i link collocati a piè di pagina (nel footer).

Nella fig. seguente si possono osservare le due pagine sottoposte a test:

 

Il risultato fu straordinario: la seconda home page, quella costruita con l’eliminazione di alcuni potenziali elementi di distrazione, ottenne un numero di registrazioni superiore del 105% rispetto alla home page originale.

 

Il menu di navigazione

Soffermiamoci un attimo sul menu di navigazione. La sua principale funzione è 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.

Anche se può sembrare assurdo, diversi test hanno dimostrato che, eliminando il menu di navigazione dalla pagina, il saggio di conversione aumenta.

Ad 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”, si otteneva un numero maggiore di registrazioni. Nella fig. seguente si può osservare la pagina originale: 

 

La variante, senza il menu di navigazione, è rappresentata nella fig. seguente:

 

Risultato: la nuova pagina senza il menu di navigazione raddoppiò il saggio di conversione, passando dal 3% al 6%.

In un altro test è stata sottoposta a verifica una pagina di Minders – un sito per baby-sitter – che stava comunque ottenendo dei buoni risultati, con un saggio di conversione pari al 9,2% (fig. seguente).

 

Volendo verificare la possibilità di aumentare il saggio di conversione, si decise di sperimentare una variante senza il menu di navigazione, in modo che l’utente si potesse concentrare sull’unico obiettivo della pagina: registrarsi. Pertanto, venne sottoposta a test, insieme alla pagina originale, questa pagina:

 

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 dalla pagina originale.

Sembrerebbe quindi che il menu di navigazione sia, almeno in alcuni casi, 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 irrealistica: siamo infatti ormai abituati a trovare in tutti i siti il menu di navigazione in alto (o sulla sinistra), lo utilizziamo spesso e non riusciremmo a pensare ad un sito che non lo possieda. Diciamo pure che il menu di navigazione è ormai un punto fermo: le persone hanno bisogno di guardare questo menu e si aspettano che si trovi in alto o sulla sinistra. Se non ne hanno bisogno, lo ignorano. Ma, all’occorrenza, sanno che è lì.

Però, è anche vero che gli utenti dipendendo sempre meno dai menu del sito. Infatti, come abbiamo visto in un altro post, ormai la maggior parte delle persone arriva sulla pagina desiderata direttamente dai motori di ricerca, saltando completamente la home page. Come hanno scritto Jakob Nielsen e Kara Pernice nel libro “Eyetracking Web Usability” (Pearson Italia 2011, pag. 115),

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 con un obiettivo limitato e immediato.

I link costituiscono una continua tentazione per l’utente e possono portarlo fuori dalla pagina. Minimizzando il menu di navigazione, l’attenzione dell’utente si focalizza verso la call to action della pagina.

A questo punto si potrebbe pensare di eliminare il menu di navigazione solo in alcune pagine del sito, quelle che sono costruite con l’unico obiettivo di convertire come, ad esempio, le landing page. In questo caso, l’home page, che è costruita per soddisfare vari tipi di utenti, con obiettivi differenti, potrebbe conservare il menu di navigazione.

Però, la decisione di eliminare in alcuni casi il menu di navigazione potrebbe sembrare troppo azzardata.

 

L’hamburger menu

L’hamburger menu consiste in un’icona con tre linee parallele:

Cliccando sull’icona appare il menu di navigazione. In questo modo, non c’è distrazione nell’attenzione dell’utente, ma si dà comunque la possibilità di navigare nel sito: infatti,  il menu verrà visualizzato solamente se l’utente ne ha veramente bisogno, cliccando sull’icona.

Questa soluzione è quella che è stata adottata nel nuovo sito di JellyTelly, dopo il test di cui ho parlato prima (fig. seguente):

 

 

E’ una soluzione che è ormai utilizzata da numerosi siti, soprattutto se si hanno dei menu con molte voci. Ad esempio, è utilizzata nel sito del settimanale Time (fig. seguente):

 

Cliccando sull’icona hamburger menu in alto a sinistra, appare il lungo menu di navigazione: 

 

 

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”. L’esperto di usabilità Jakob Nielsen, per rendere più chiaro il significato di questa nuova icona, consiglia di aggiungere un’etichetta (con la scritta “Menu”) all’icona hamburger (come è stato fatto nell’appena citato sito del Time).

In realtà, la sola icona con le tre righe parallele potrebbe essere ancora poco intuitiva:

 

In un recente test sono state sottoposte a test queste tre varianti:

Il risultato è stato univoco: l’icona che ha avuto più click è stata la terza, quella con l’icona hamburger all’interno di un riquadro. Quindi, l’idea di Nielsen potrebbe sembrare errata: gli utenti riconoscono l’icona dell’hamburger menu. 

In realtà, come è stato in seguito verificato, è la cornice che conferisce una migliore visibilità e una migliore comprensione.

Dopo qualche tempo, è infatti stato eseguito un altro test per verificare quale icona con cornice funzionasse meglio. Sono state confrontate due ipotesi.

La prima con l’icona hamburger menu incorniciata (simile quindi a quella che aveva vinto nel precedente test):

 

La seconda, con la scritta menu incorniciata:

Risultato: quest’ultima soluzione, con la scritta menu incorniciata, ha ottenuto il 20% di click in più della prima.

Page Laubheimer è convinto che l’icona hamburger non sia ancora molta conosciuta e consiglia di utilizzare il simbolo seguente con la freccia rivolta in basso, in modo da rendere chiaro che, cliccando sull’icona, appare un menu a discesa:

Può essere una buona idea, però non sono stati fatti finora dei test.

 

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. 

La presenza di link che conducono all’esterno della pagina è un evidente motivo di distrazione. Pertanto, anche i menu di navigazione possono essere a volte dei motivi di distrazione. 

L’ideale sarebbe quindi eliminarli del tutto. Però, questo non è sempre possibile. Senza dubbio, non è possibile per alcune pagine, come l’home page, dove gli obiettivi dei visitatori sono molteplici e c’è chi vorrebbe navigare all’interno del sito. 

Una soluzione che cerca di contemperare entrambe le esigenze – nessuna distrazione; consentire a chi ne ha bisogno di muoversi all’interno del sito – è rappresentata dall’hamburger menu che minimizza il menu di navigazione comunemente utilizzato nei siti web.

Dato che, però, il suo significato non è ancora chiaro alla maggior parte degli utenti, si raccomanda di renderlo facilmente comprensibile. Alcuni studi hanno dimostrato che i click sull’icona aumentano se l’icona è circondata da una cornice. E che sono più alti soprattutto quando l’icona hamburger – ancora poco conosciuta – viene sostituita dalla scritta “menu”.