Dopo aver letto gli articoli su ciascun tipo di menu, molte persone restano comunque bloccate all’ultimo passaggio: e allora, cosa dovrebbe usare davvero il mio store? È una sensazione normale. La teoria su Tab Bar, Mega Menu o Slide Menu diventa utile solo quando la applichi ai tuoi numeri.
Questo articolo presenta un processo di scelta del menu in 5 passi che puoi completare in circa un pomeriggio. Non esiste una formula unica adatta a ogni store, ma esiste un modo di lavorare che ti aiuta a decidere sulla base di dati reali invece che a sensazione. Sono arrivato a questo approccio dopo aver gestito qualche piccolo store e aver sbagliato un paio di previsioni.
Passo 1: guarda la tua suddivisione tra mobile e desktop
Non fidarti del solito ritornello secondo cui “tutti dicono che il mobile è la maggioranza”. Apri i tuoi numeri e guarda.
Entra in Google Analytics (categoria Tech / Device) o in Shopify Analytics (Online store sessions by device type). Prendi gli ultimi 30-90 giorni per avere un campione abbastanza ampio. Vedrai la percentuale di sessioni che arrivano da smartphone rispetto a quelle da computer.
Questo numero decide per quale schermo progettare per primo. Se l’80% dei visitatori arriva da smartphone, l’esperienza mobile è il palco principale e il desktop è secondario. Se vendi B2B e la maggior parte dei tuoi clienti usa il computer in ufficio, la storia si ribalta.
Guarda anche il tasso di conversione suddiviso per dispositivo, non solo il traffico. Secondo il Baymard Institute, l’abbandono del carrello su mobile si aggira intorno all’80%, più alto rispetto al desktop (circa il 66%). Se il tuo store ha molti visitatori mobile ma la conversione mobile è bassa, una navigazione difficile da usare può essere parte del motivo.
Passo 2: conta le tue categorie di livello 1 e di livello 2
Apri la sezione Navigation in Shopify e conta sul serio.
- Categorie di livello 1: i gruppi più grandi. Per un negozio di moda, per esempio: “Donna”, “Uomo”, “Accessori”, “Saldi”.
- Categorie di livello 2: le diramazioni all’interno di ciascuna categoria di livello 1. “Donna” potrebbe includere “Top”, “Pantaloni”, “Abiti”, “Scarpe”.
Questo numero restringe le tue opzioni. Uno store con sole 3-4 categorie di livello 1 e quasi nessuna categoria di livello 2 non ha bisogno di un Mega Menu: il Mega Menu esiste per contenere strutture a più livelli. Al contrario, un negozio con 8 categorie di livello 1, ciascuna con 5-6 diramazioni, costringerebbe i clienti a scorrere finché non gli fa male la mano se tutto venisse stipato in un unico Slide Menu.
Una regola empirica che uso spesso: più la tua struttura è piatta e piccola, più dovresti privilegiare un menu sempre visibile (come una Tab Bar in basso). Più la tua struttura è profonda e ramificata, più hai bisogno di un menu che raggruppa ed espande (un Mega Menu su desktop, uno Slide Menu su mobile).
Passo 3: individua le 3-5 pagine che i clienti devono raggiungere più spesso
È il passaggio che viene saltato più di frequente, eppure conta.
Torna su Google Analytics o Shopify Analytics e apri il report delle pagine più viste (Top pages / Landing pages). Annota le 3-5 destinazioni di cui i clienti hanno davvero bisogno. Di solito rientrano in: la homepage, qualche collezione chiave, la pagina di ricerca, il carrello e talvolta una pagina di tracciamento dell’ordine o di contatto.
Perché solo 3-5? Perché è il numero ragionevole di “scorciatoie” che puoi collocare nei punti più facili da toccare. Una Tab Bar in fondo a uno schermo mobile riesce di solito a contenere solo 4-5 elementi prima di diventare affollata. Se individui correttamente le 4 destinazioni più importanti, sai esattamente cosa mettere nella Tab Bar.
Sii onesto in questo passaggio. Ciò che vorresti che i clienti vedessero (diciamo, la pagina con la storia del tuo brand) non è necessariamente ciò di cui hanno bisogno per comprare. Segui i dati comportamentali, non i desideri.
Passo 4: scegli la configurazione del menu in base a quattro fattori
Ora combina i tre passi precedenti con i quattro fattori discussi negli articoli precedenti: il dispositivo dominante, la profondità delle categorie, il numero di destinazioni importanti e le specificità della tua categoria di prodotto. Confronta il tutto con le tabelle comparative di quegli articoli. Di seguito alcune combinazioni comuni.
| La tua situazione | Configurazione consigliata |
|---|---|
| Visitatori per lo più mobile, struttura piatta, 4 destinazioni chiare | Tab Bar in basso + Slide Menu per il resto |
| Molte categorie, molte diramazioni, traffico desktop significativo | Mega Menu su desktop + Slide Menu su mobile |
| Serve un’azione che spicchi (chat, prenotazione, chiamata) | FAB per quell’azione, abbinato al menu principale |
| Catalogo ricco di immagini, poco testo (cosmetici, alimentari) | Visual Grid Menu |
Una nota su come le persone tengono in mano lo smartphone. Secondo la ricerca di Steven Hoober, circa la metà degli utenti tiene il telefono con una mano sola, svolgendo gran parte delle operazioni con il pollice. La zona facilmente raggiungibile dal pollice si trova nella metà inferiore dello schermo. Ecco perché una Tab Bar in basso è di solito più facile da toccare rispetto a un’icona hamburger nell’angolo in alto: l’angolo superiore cade nella zona “quasi irraggiungibile”.
È anche il momento di riflettere sulla navigazione nascosta. Il Nielsen Norman Group ha misurato e rilevato che i menu sempre visibili vengono scoperti e usati circa 1,5 volte di più rispetto ai menu nascosti dietro un’icona hamburger. Questo non significa che l’hamburger sia un errore — resta utile per contenere elementi secondari — significa: non nascondere dietro di esso le tue destinazioni più importanti.
Passo 5: installa Navi+, costruisci un prototipo e guardalo su un dispositivo reale
A questo punto hai un’ipotesi. Quel che resta da fare è costruirla e vederla con i tuoi occhi.
Navi+ ti permette di creare Tab Bar, Mega Menu, Slide Menu, FAB e Grid Menu senza codice — basta trascinare e rilasciare — e di configurare mobile e desktop separatamente. Imposti esattamente la configurazione che hai scelto nel Passo 4, uno stile per ciascun dispositivo, poi attivi la modalità anteprima. Poiché il menu viene creato indipendentemente dal tema, resta intatto anche se in seguito cambi tema.
Il punto che voglio sottolineare: guardalo su uno smartphone reale, non solo in un emulatore.
L’emulatore nel browser ti dà la dimensione corretta dello schermo, ma non può riprodurre come un dito reale tocca un pulsante — se il pulsante è troppo piccolo, o se la Tab Bar viene coperta dalla tastiera o dalla barra di navigazione del telefono. Alcuni problemi emergono solo quando prendi in mano il telefono e provi a comprare qualcosa come farebbe un cliente reale.
Mentre fai l’anteprima, tieni d’occhio anche la velocità. Google fissa la soglia “buona” per i Core Web Vitals a un LCP inferiore a 2,5 secondi, un INP inferiore a 200 millisecondi e un CLS inferiore a 0,1. Un menu pesante può far scattare la pagina o spostarne il layout. Navi+ è ottimizzato per limitare il suo impatto su queste metriche, ma dovresti comunque verificarlo sul tuo store.
Infine, non aver paura di apportare modifiche. La configurazione che hai scelto nel Passo 4 è un punto di partenza, non un verdetto. Aggiungere o rimuovere uno strumento di navigazione non è un grosso problema. Costruisci un prototipo, guarda i numeri dopo qualche settimana, poi aggiusta. È così che questo processo ripaga davvero.
In breve, un buon processo di scelta del menu non parte dal tipo di menu che ti piace, ma dai numeri: la tua suddivisione tra mobile e desktop, la profondità delle categorie e le destinazioni di cui i clienti hanno davvero bisogno. I quattro fattori, più un prototipo su dispositivo reale, ti daranno una risposta più vicina al tuo store di qualsiasi consiglio generico.
Questo articolo fa parte della guida più ampia su Come scegliere il tipo di menu giusto per il tuo store Shopify.