Ogni tipo di menu è nato per risolvere un problema diverso. Sceglierne uno sbagliato non manderà in tilt il tuo store da un momento all’altro, ma costringe i clienti a riflettere più del necessario — e ogni volta che un cliente deve pensarci, è un momento in cui potrebbe andarsene. Questo articolo passa in rassegna i tipi di menu per Shopify più diffusi e, per ciascuno: cos’è, quando è adatto, quando no e gli errori che i merchant tendono a fare.
Vale la pena tenere a mente un dato prima di entrare nei dettagli. Secondo il Baymard Institute, il tasso medio di abbandono del carrello nell’ecommerce è intorno al 70%. Non tutte le perdite dipendono dalla navigazione, ma una navigazione confusa fa la sua parte nel spingere i clienti ad andarsene prima ancora di arrivare al carrello.
I quattro tipi qui sotto non si escludono a vicenda. Spesso uno store ne usa più d’uno insieme — per esempio un mega menu su desktop e una tab bar su mobile. Il punto è usare il tipo giusto nel contesto giusto.
Mega menu: ottimo per molte categorie e clienti che esplorano da desktop
Un mega menu è un grande pannello che si espande. Quando passi il mouse o tocchi una voce in alto, si apre un pannello ampio che mostra molte sottocategorie tutte insieme, spesso con immagini o un prodotto in evidenza. I clienti colgono l’intera struttura dello store con una sola occhiata.
Funziona bene quando uno store ha molte categorie — diciamo 10 gruppi o più come soglia indicativa — e la maggior parte dei clienti arriva da computer. I settori in cui chi compra ama esplorare prima di decidere, come moda, cosmetica, casa e arredamento, si prestano bene a questo stile. I clienti non sanno ancora con esattezza cosa vogliono, quindi mettere davanti a loro molti percorsi è d’aiuto.
Un mega menu non è adatto quando uno store ha pochi prodotti o la maggior parte dei clienti è su smartphone. Un negozio che vende dieci modelli di camicia ma apre un pannello enorme è eccessivo — sembra vuoto. E dato che il 79% del traffico Shopify arriva da mobile (secondo Shopify), un design che rende bene solo su schermo largo abbandona la maggior parte dei clienti.
L’errore più comune è infilarci troppa roba. I merchant vogliono mostrare tutto, così ammassano ogni categoria e ogni banner in un unico pannello. Il risultato è che i clienti si sentono sopraffatti e non cliccano nulla. Troppe scelte equivalgono a nessuna scelta. Raggruppa le voci in modo ordinato, lascia spazio bianco e metti in evidenza solo le poche cose che vuoi davvero vendere.
Slide menu: ottimo per categorie a più livelli e clienti che sanno cosa vogliono
Uno slide menu (chiamato anche hamburger menu, perché si apre dall’icona a tre righe) scivola dentro dal bordo dello schermo. Mostra le categorie come un albero — tocchi un gruppo e i suoi sottogruppi si espandono, scendendo per diversi livelli. È un modo ordinato per far stare una struttura complessa in uno spazio stretto.
Uno slide menu è adatto quando uno store ha molti livelli di categorie e serve una gerarchia chiara, soprattutto con una mentalità mobile-first. Prendi un negozio di ricambi auto: Marca › Modello › Tipo di ricambio. Lo slide menu permette ai clienti di scendere lungo il ramo giusto senza caricare una nuova pagina a ogni passo.
Non è adatto quando uno store è semplice. Se hai solo poche categorie, nasconderle dietro un’icona rende solo le cose più difficili per i clienti. Il Nielsen Norman Group ha dimostrato che la navigazione nascosta riduce la probabilità che i clienti trovino l’articolo che cercano e li rende più lenti rispetto a quando il menu è visibile.
Aiuta capirne la natura: uno slide menu nasconde le informazioni. Questo lo rende adatto a chi sa già cosa vuole — lo apre attivamente e si dirige dritto verso un ramo familiare. È più debole per l’esplorazione, perché i clienti non vedono nulla finché non toccano. Se il tuo obiettivo è che i clienti si imbattano nei prodotti, uno slide menu da solo non basta.
Tab bar: ottima quando la maggior parte dei clienti è su smartphone
Una tab bar è una striscia di navigazione fissa ancorata in fondo allo schermo dello smartphone, che di solito contiene le 4-5 voci più importanti, come Home, Categorie, Cerca, Carrello e Account. È sempre visibile — per quanto i clienti scorrano, resta lì.
La forza della tab bar è la sua posizione. La ricerca di Steven Hoober su come le persone tengono in mano il telefono (oltre 1.300 osservazioni sul campo) ha rilevato che la maggior parte delle azioni su mobile si fa con un solo pollice, e la parte centrale in basso dello schermo è dove il pollice arriva più facilmente — spesso chiamata thumb zone. Mettere le azioni principali in basso significa metterle proprio dove la mano del cliente è già appoggiata.
Una tab bar è adatta quando la maggior parte del traffico arriva da smartphone, il che è vero per la maggioranza degli store Shopify oggi. Inoltre mantiene le cose importanti — soprattutto il carrello — sempre raggiungibili con un solo tap, invece di costringere i clienti a tornare su in cima alla pagina.
Tieni presente che una tab bar ha spazio per pochissime voci. Non cercare di stiparci sette o otto icone; scegli le 4-5 più importanti e lascia il resto allo slide menu o alle pagine delle categorie. Pensa alla tab bar come a una scorciatoia, non all’intera navigazione.
FAB: un solo pulsante fluttuante per una sola azione
Un FAB (floating action button) è un pulsante rotondo che fluttua sopra il contenuto, pensato per una singola azione importante — chattare con il negozio, vedere il carrello o tornare in cima alla pagina. È sempre presente ma discreto, e non occupa spazio reale.
Un FAB è adatto quando c’è esattamente una cosa che vuoi che i clienti possano fare da qualsiasi punto. Un esempio comune in Vietnam è il pulsante di chat Messenger o Zalo che fluttua nell’angolo in basso a destra — un cliente che sta guardando un prodotto e ha una domanda può toccarlo e chiedere subito, senza dover cercare in giro.
La cosa da ricordare: un FAB non sostituisce un menu. È una scorciatoia per una sola azione, non la sede dell’intero sistema di navigazione. L’errore comune è caricarlo di troppe funzioni — un pulsante che si espande in cinque o sei opzioni, oppure tre o quattro pulsanti fluttuanti tutti insieme che coprono il contenuto e perfino bloccano il pulsante Aggiungi al carrello. A quel punto il FAB da comodità si trasforma in ostacolo. Un FAB, uno scopo.
Alcune cose che valgono per tutti e quattro
Qualunque tipo tu scelga, questi tre punti valgono sempre.
- Separa la configurazione mobile da quella desktop. È lo stesso store, ma i clienti sui due dispositivi si comportano in modo diverso. Un unico menu che sia ideale per entrambi di solito non esiste; è meglio usare un mega menu su desktop e una tab bar o uno slide menu su mobile.
- Non sacrificare la velocità. Google fissa buoni obiettivi per i Core Web Vitals: LCP sotto i 2,5 secondi, INP sotto i 200 millisecondi e CLS sotto 0,1. Un menu bellissimo che fa “saltare” la pagina o la rallenta fa più danni che altro. Secondo i dati Shopify, uno store medio installa circa 6 app, quindi ogni app che aggiungi appesantisce la pagina — essere selettivi conta.
- Non lasciare che il menu si rompa quando cambi tema. Se il menu è cablato dentro il tema, devi ricostruirlo da zero ogni volta che cambi l’aspetto.
È anche per questo che molti usano uno strumento di navigazione separato. Navi+ può costruire tutti e quattro i tipi visti sopra — mega menu, slide menu, tab bar, FAB e anche un grid menu — con il drag and drop, senza codice, con mobile e desktop configurati separatamente, e il menu resta intatto quando cambi tema. Lo strumento è inoltre progettato per non penalizzare i tuoi Core Web Vitals. Ma qualunque strumento tu usi, il principio resta lo stesso: scegli il tipo di menu in base ai dispositivi dei tuoi clienti e al modo in cui acquistano, non in base a quale sembra più appariscente.
Questo articolo fa parte della guida più ampia su Come scegliere il tipo di menu giusto per il tuo store Shopify.