Skip to main content
suggerimenti-ux
13 February 2020

10 suggerimenti sulla UX per creare il perfetto menù di navigazione

Reading time
8 minuti
Autore

Il menù di navigazione è la guida dei tuoi visitatori una volta che arrivano sul tuo sito. E proprio come una mappa, contenuto, forma e design del menù devono permettere loro di orientarsi rapidamente.

Quando si visita un luogo per la prima volta, è meglio avere con sé una mappa per orientarsi e potersi muovere senza perdersi. Deve essere quindi chiara, precisa e - se possibile - essere simpatica a livello visivo (specie se deve essere consultata più volte).

È per questo motivo che è necessario migliorare regolarmente la UX (User eXperience) del tuo sito per proporre un'esperienza globale soddisfacente.

1 Qual è il menù di navigazione ideale?

Esistono diversi tipi di menù sul web: orizzontale, verticale, sticky, ecc.

Sono tutti modelli efficaci? Come deve essere il menù ideale? Ma soprattutto, come deve essere il TUO menù di navigazione affinché migliori il customer journey dei visitatori del tuo sito?

In questo articolo vogliamo condividere con te 10 trucchi essenziali per migliorare il menù e facilitare la navigazione dei tuoi visitatori.

2 10 suggerimenti sulla UX per creare il perfetto menù di navigazione

1. orientarsi grazie al menù 

Il tuo menù deve essere un piano interattivo che indichi al visitatore dove i trova in quel momento. Questo è importante soprattutto quando muove i primi passi sul tuo sito. Questo tipo di promemoria visivo apporta valore in termini di comfort di navigazione.

Per avere un'idea è sufficiente comparare la vecchia e la nuova versione del menù di LinkedIn:

Nella prima non c'è nulla che indichi al visitatore dove si trova.

linkedin2_ux_menu

Nella seconda il visitatore si può orientare facilmente perché l'icona della pagina in cui si trova è evidenziata in bianco.

linkedin_ux_menu

2. uN MENù semplice da utilizzare 

Il menù è il cuore della navigazione: i visitatori devono poter trovare quanto cercano in modo facile e veloce.

Non dovranno quindi cliccare più di 3 volte per arrivare su una pagina, qualsiasi possa essere il punto di partenza. Da qui quindi la necessità di concepire un menù chiaro e organizzato.

Per esempio il menù di Fnac.com è molto preciso e permette di trovare una categoria di articoli molto facilmente.

menu_fnac_ux_menu

3. evitare menù a tendina troppo lunghi

Un menù a tendina troppo complesso finisce per destabilizzare il visitatore. Di fronte a una lista troppo lunga il rischio è che il visitatore non sappia dove cliccare e decida troppo presto di lasciare il sito.

Questo è un esempio che si riscontra sempre su Amazon:

amazon_ux_menu

Nota bene: per rimediare a questo problema però Amazon ha creato una pagina dedicata al suo menù. Non male, vero?

Assicurati che ciascuna categoria del menù sia cliccabile per non creare frustrazione. Quando un visitatore è interessato a una categoria di prodotti senza avere un'idea precisa di cosa sta cercando, offrirgli un mezzo per conoscere tutti i prodotti della categoria e al tempo stesso una possibilità per convincerlo con prodotti che potrebbero piacergli.
Soumaya Ouanes Kameleoon
Soumaya Ouanes
CSM Team Leader, Kameleoon

4. valorizzare il motore di ricerca

Il 30% degli utenti utilizza la barra di ricerca e converte da 5 a 6 volte in più rispetto agli altri.

È quindi essenziale mettere in evidenza il motore di ricerca del tuo sito, in particolare nel menù di navigazione.

Sul sito di Fnac quando si scorre lungo la pagina, la barra di ricerca è sempre accessibile. I visitatori possono quindi utilizzarlo in ogni momento e non è elemento di disturbo.

sticky_search_ux_menu

 

5. contestualizzare il menù

Se un visitatore non clicca sulla categoria o sull'elemento corretto del menù, sicuramente non riuscirà a raggiungere la pagina desiderata. Dando un contesto visivo agli elementi del menù guiderai il visitatore nella scelta: avrà quindi un'idea più precisa di cosa aspettarsi una volta cliccato. Un esempio semplice ed efficace lo troviamo su Apple:

apple_ux_menu

Nota bene: il menù con le icone non appare quando ci si passa sopra con il mouse - il visitatore deve trovarsi sulla pagina delle categorie per vedere il menù dettagliato.

6. aggiungi un footer

Il footer è un menù in fondo alla pagina particolarmente fornito. Ci sono due vantaggi: 

  • completa un menù complesso
  • contribuisce a creare un solido mailing interno e migliora la SEO del tuo sito

Il footer contiene un insieme di informazioni sulla tua attività, prodotti e/o servizi. Lì puoi trovare: valori, motore di ricerca, informazioni sugli eventi, risorse (libri bianchi, e-book, ecc.), una CTA per richiedere una demo, le icone dei canali social, testimonianze clienti, ecc.

hubspot_ux_menu

 

7. testare la posizione degli elementi del tuo menù

Può essere che il tuo menù sia già performante e che non abbia bisogno di essere ottimizzato. In alcuni casi, sono i test più semplici che danno i migliori risultati.

Ricorrendo alle heatmap IKKS (fashion retailer di alta qualità) ha scoperto che il tab della collezione i-code era meno cliccato rispetto agli altri. Il brand ha deciso di realizzare un A/B test per determinare quale fosse la posizione che generava il maggior numero di click alla pagina della collezione.

 

ikks_ux_menu

La variante B ha permesso di aumentare il click rate del 16,5%.

8. provare un menù dinamico

Un menù dinamico è un menù che si aggiorna in tempo reale. Nell'e-commerce ciò significa che possono essere aggiunti o rimossi al carrello prodotti in tempo reale senza bisogno di ricaricare la pagina.

Un esempio lo troviamo sul sito di zavvi.com. L'aggiunta di un prodotto al carrello non implica un aggiornamento della pagina e il numero degli articoli si aggiorna in tempo reale.

zavvi_ux_menu

Poter rimanere sulla pagina anche se si aggiungono prodotti al carrello è molto piacevole. Al contrario, un sito come CDiscount propone un'esperienza molto più invasiva: per continuare gli acquisti dopo aver aggiunto un nuovo articolo al carrello, si passa automaticamente per due pagine (con ben due pop-in).

cdiscount_ux_menu

Morale? Il menù dinamico è molto più semplice.

9. un menù facile da capire

Il wording degli elementi del menù è un elemento molto importante ed è sempre migliorabile.

I team di Schmidt hanno deciso di fare un A/B test sul wording del loro menù per identificare la miglior versione per i visitatori.

schmidt_ux_menu

Con un aumento del 130% dei click sulle CTA "Catalogo", del 40% sulla CTA "Negozi" e del 317% sulla CTA "Progetta il tuo spazio" la variante 2 supera di gran lunga le altre, portando anche all'aumento degli appuntamenti presi.

Preferisci la semplicità e se vuoi riformulare o modificare gli elementi del tuo menù, lancia un A/B test. 

10. Un menù mobile di qualità

È necessario investire nel mobile perché non è mai piacevole navigare su un sito non responsive tramite smartphone.

Un esempio: a sinistra, un'offerta per Cité de la Mer. A destra, le proposte di Futuroscope.

cite_mer_futuroscope

I team di Futuroscope volevano creare un'esperienza di navigazione ottimizzata per mobile: un sito interamente responsive.

Troviamo il classico menù a "burger", adottato ormai da diversi anni su mobile - l'accesso al proprio account è molto semplice e tutte le categorie del menù sono visibili e facilmente cliccabili.

L'A/B testing per valutare il tuo menù

L'A/B testing ti permette di valutare l'efficacia del tuo menù confrontando due versioni differenti. 

È la pratica che permette ai brand di identificare i punti di frizione che i visitatori incontrano e di rimediare modificando certi elementi.

4  Personalizza il menù

La personalizzazione del customer journey è oggi una pratica essenziale per offrire esperienze di qualità e aumentare così le conversioni di un sito web.

Personalizzare il menù di navigazione è IL metodo che ti permette di proporre una soluzione che sia conveniente per ogni visitatore e che evolve in funzione dei suoi bisogni.

Questo è quanto ritroviamo sul sito mobile di Fnac. I team responsabili dell'ottimizzazione hanno deciso di lanciare un A/B test per comprendere l'effetto di un menù personalizzato sulla base dei gusti dei visitatori.

La variante B, dove le categorie del menù sono riorganizzate in funzione dei gusti dei visitatori, ha visto aumentare le transazioni dell'8,5% su mobile.

 

fnac_mobile_ux_menu

 

 

Demo