E-commerce Megamenu: 10 consigli per migliorare la Shopping Experience
Il Megamenu è uno dei primari punti di interazione per l’utente quando atterra in un e-commerce desktop: indispensabile per aiutarlo ad orientarsi e trovare rapidamente ciò che sta cercando.
Assieme al motore di ricerca interno e ai filtri, è uno dei principali strumenti a disposizione delle persone per ricercare gli articoli desiderati.
Il Megamenu incide pesantemente nell’esperienza di navigazione: se non viene progettato ed implementato nel modo opportuno, rischia di tradursi in un elemento di frizione per l’utente, un ostacolo nel flusso di acquisto che impatta negativamente sulle performance dello store.
In questo post, ho raccolto alcuni consigli e best practice per la progettazione di Megamenu su e-commerce.
Cos’è un Megamenu?
Il Megamenu è un menu di navigazione drop-down, molto ampio, che ha la funzione di presentare all’utente molte opzioni di scelta in un unico “colpo d’occhio”.
È composto da una grande varietà di voci (inserite come testo, immagini, icone) disposte ordinatamente in un’unica area ben visibile, senza costringere allo scrolling chi sta navigando nell’e-commerce.
Vediamo i 10 passi da compiere per progettare un Megamenu in modo che sia uno strumento intuitivo e usabile per gli utenti del tuo e-commerce.
I 10 passi per progettare l’Interaction Design di un Megamenu efficace
Il Megamenu del tuo e-commerce deve essere strutturato al meglio, per far sì che sia un punto di interazione semplice e soprattutto chiaro, dove presentare e far trovare ai tuoi clienti i prodotti in maniera intuitiva e immediata.
1.Parti dall'analisi strategica: Bisogni degli Utenti e Business Goal
Per iniziare la strutturazione del Megamenu, è fondamentale considerare tre fattori chiave:
- User Needs: i bisogni dell’utente in fase di esplorazione (UX)
- Obiettivi di Business aziendali
- Aspetti SEO (Search Engine Optimization)
User Need (UX)
Il primo punto di cui tenere conto è ovviamente l’esperienza utente. Un menu caotico, mal organizzato e non chiaro perché, ad esempio, troppo ricco di voci, porta chi naviga a “rimbalzare” fuori dal sito e quindi abbandonarlo. Un Megamenu, se ben strutturato, presenta le informazioni in modo semplice e intuitivo, rendendo fluido il percorso dell’utente all’interno dell’e-commerce.
Business Goal
La seconda cosa da fare è riflettere a fondo riguardo a come trasferire i tuoi obiettivi di business nel Megamenu. Individua i prodotti e le categorie su cui vuoi fare leva, quelli per te più strategici da evidenziare e proporre. Nei casi di e-commerce con ampi cataloghi di prodotti (decine di migliaia) è fondamentale selezionare strategicamente le categorie e sottocategorie che troveranno posto nel Megamenu.
SEO
Il terzo fattore da considerare è l’aspetto SEO. Per massimizzare le prestazioni del sito è vitale coinvolgere gli specialisti SEO nella progettazione di ogni elemento on-site che impatta nell'architettura informativa dei contenuti, in particolare nell'implementazione del Megamenu.
2.UX Writing delle voci di menu: Massima chiarezza
Dopo aver analizzato e determinato quali prodotti intendi evidenziare nel tuo Megamenu, è il momento di scriverne le voci.
In questa fase, è importante essere chiari e concisi: evita termini troppo tecnici e di difficile comprensione. Se il tuo settore di riferimento fa uso di tecnicismi, tieni in considerazione le parole e le terminologie utilizzate da una persona non esperta.
Le voci del menu devono parlare la lingua dei tuoi utenti ed essere quindi il più possibile vicine agli intenti di ricerca delle persone. Come vengono comunemente chiamati i tuoi prodotti? Cosa ha digitato l’utilizzatore del tuo ecommerce nel motore di ricerca? Quali parole usano gli addetti del settore per indicare la tua merce? Ecco, proprio quelle keyword sono la base per costruire il tuo Megamenu.
3.Non porre l’utente davanti a un bivio
Assicurati che le voci siano diverse tra di loro: non utilizzare termini simili o che possano creare confusione nell’utente perché riportano lo stesso contenuto. Non usare diciture che si assomigliano troppo, ogni voce o categoria deve essere inequivocabile.
Ad esempio, di fronte alle voci “ABITI” e “VESTITI” entrambe inserite dentro al Reparto Abbigliamento, potremmo sentirci confusi e non sapere dove cliccare.
4.Crea una chiara Gerarchia Visuale
Le voci e le categorie principali devono ovviamente avere maggiore risalto per essere prima delle altre individuate e visualizzate: è consigliabile posizionarle nell’area in alto a sinistra del Megamenu, per concludere con quelle meno rilevanti, collocate in basso a destra.
Se sai che un articolo del tuo catalogo o una categoria sono molto ricercati, posizionali in maniera che siano veloci da trovare e facili da raggiungere, ad esempio inserendoli come banner grafici. In questo modo, l’utente ha in primo piano le informazioni per lui più rilevanti, senza costringerlo a lunghe e inutili ricerche.
5.Definisci percorsi di navigazione chiari ed unici
Inserire la stessa voce di menu più volte significa porre l’utente davanti ad una scelta, un bivio che potrebbe trasformarsi in un elemento di frizione.
L’utente potrebbe non comprendere che si tratti della stessa voce e finirebbe per cliccare entrambe, convinto che portino a contenuti differenti e restando deluso dalla scoperta che la pagina di destinazione è la stessa.
Inoltre, si va ad occupare inutilmente spazio prezioso, appesantendo ulteriormente un’area già ricca di contenuto.
6.Usa lo Spazio Bianco per migliorare leggibilità e scansionabilità visiva delle voci
Anche per il Megamenu vale uno dei maggiori principi del Content Design: l’utilizzo dello Spazio Bianco è un elemento attivo, non passivo. Esso aiuta le persone a scansionare meglio le voci e quindi ne migliora l’usabilità e la leggibilità.
Lo Spazio Bianco è l’ossigeno del Web Design, è ciò che permette all’utente di respirare durante la sua esperienza di navigazione.
L’Aria tra gli elementi del Megamenu (interlinea, margini attorno ai banner, padding delle colonne ecc.) favorisce la comprensione dei contenuti in quanto:
- Migliora la Leggibilità (scansione di lettere e parole)
- Migliora la Facilità di lettura (scansione dei diversi elementi)
- Chiarisce le relazioni e le priorità tra gli elementi (gerarchia visiva)
- Crea un senso di raffinatezza, organizzazione ed eleganza
Riporresti mai la merce sugli scaffali del tuo negozio fisico in modo disordinato e caotico?
Anche se il Megamenu è appunto “mega”, non è infinito: utilizza sapientemente lo spazio al suo interno. Solo perché c’è spazio a disposizione, non significa che tu debba inserire tutto il tuo catalogo nel Megamenu. Un numero limitato di opzioni è più facile da visionare e richiede meno impegno nella scelta. Inserisci ciò che davvero è rilevante.
7.Proponi icone e banner per valorizzare gli entry-point
Ci sono dei link che vuoi enfatizzare rispetto ad altri? Nella cassetta degli attrezzi del costruttore di Megamenu ci sono tanti supporti grafici per valorizzare i punti di ingresso (entry-point) verso alcuni prodotti o categorie: icone, illustrazioni, immagini fotografiche, banner - ma anche gif e video!
Questi elementi possono aiutare a distinguere a colpo d’occhio e in maniera immediata le sezioni del tuo Megamenu, oltre a renderlo più apprezzabile esteticamente.
L’inserimento di immagini può essere visivamente strategica anche per organizzare Megamenu con pochi prodotti. Piuttosto di un enorme Megamenu semi-vuoto, valuta di inserire le poche voci a tua disposizione in forma di oggetti grafici (foto o icone) per guidare al meglio i tuoi utenti verso la scelta più opportuna.
8.Cura il design dell’Interfaccia Utente (UI)
Nella progettazione di un Megamenu l’User Interface Design gioca un ruolo strategico per renderlo davvero user-friendly. È fondamentale quindi mettere in atto tutti i principi del buon design per il web e rendere il Megamenu uno strumento davvero usabile, fruibile ed accessibile. Curandone ad esempio:
- Dimensioni di font, interlinea
- Contrasto tra voci e colore di sfondo
- Proporzione tra righe e colonne
- Distribuzione gerarchica degli elementi
- Animazioni e feedback al mouse-over
9.E da Mobile come cambia l’esperienza di consultazione?
Probabilmente anche le analitiche del tuo e-commerce registrano maggiori accessi da mobile rispetto a desktop e tablet, come per la maggior parte dei siti. È quindi fondamentale il Web Design del tuo store con un approccio Mobile First, che si interroghi sui reali scenari in cui avviene la Shopping Experience.
Il Megamenu desktop è completamente diverso dal Megamenu mobile, in quanto avvengono all’interno di dispositivi diversi, con diversi User Need.
Nei dispositivi mobili il Megamenu diventa quindi un Hamburger Menu. Espandendolo, l’utente trova le categorie principali e, sulla destra, una freccia lo guida verso le varie sottovoci. Qui vanno curate tutte le interazioni tipiche dell’ambiente mobile (gesti tap e swipe, movimenti rapidi, clic di chiusura e “torna indietro”) e resa più snella la consultazione, riducendo gli elementi grafici “accessori” e non essenziali.
10.Verifica che non ci sia l’effetto “flickering”
L’usabilità del tuo Megamenu è definita anche da come risponde alle interazioni dell’utente. Il tempo che intercorre dal passaggio del mouse all’apertura del menu è determinante per quanto riguarda l’esperienza utente.
Le implementazioni dei megamenu soffrono diffusamente del cosiddetto «effetto Flickering»: uno “sfarfallio” che interrompe la capacità degli utenti di controllare la navigazione principale causando una certa frustrazione. Fonte immagine: Baymard Institute
Ti sarà capitato almeno una volta: questo inconveniente risulta particolarmente fastidioso, incidendo sull’usabilità di un megamenu e-commerce. È importante dunque evitarlo, settando un tempo adeguato per le aperture dei drop-down al mouse-over.
Per concludere
Il Megamenu è lo strumento che riesce a portare all’attenzione di chi naviga una grande quantità di informazioni in maniera chiara e ordinata. Per questo motivo rappresenta una soluzione utile in ambito e-commerce, soprattutto in presenza di un esteso catalogo di prodotti.
Le stesse informazioni, se inserite all’interno di un classico menu a tendina mono-colonna, rischiano di confondere l’utente. Infatti, nel momento in cui si procede verso il basso per visualizzare tutte le scelte disponibili, si dimenticano le prime voci incontrate. Non è possibile in questo modo, riuscire a ricordarle tutte e confrontarle tra loro, conducendo a una visione non completa delle possibilità di scelta.
Troppe voci, non categorizzate e disposte una sotto l’altra, non permettono di avere una panoramica globale dell’offerta. Il vantaggio del Megamenu è che a colpo d’occhio è possibile confrontare tutte le scelte a disposizione: ben visibili, ordinate e divise per tipologie/esigenze/interessi, pronte per intercettare le richieste e i bisogni dell’utente.
Avere un'interfaccia user-friendly per il Megamenu è tanto importante quanto avere una solida tassonomia delle categorie sottostanti. Come visto, è uno strumento essenziale per chi atterra nel tuo sito e prova ad orientarsi, ancor più per traffico esterno che non entra dalla porta principale, l’Homepage.
Progettare un’ottimale User Experience del Megamenu è fondamentale poiché ciò che l'utente vede e con cui interagisce in quella sezione, determina se sarà in grado o meno di proseguire con la navigazione del sito e quindi di finalizzare l’acquisto.
Ottimizzare il Megamenu può tradursi quindi in un efficace intervento CRO (Conversion Rate Optimization) e portare immediate migliorie all’esperienza di acquisto nel tuo e-commerce.
