Quando un negozio supera i 500 prodotti e le 15 categorie, le cose cambiano nella loro natura. La sfida della navigazione di un negozio in scala non è più “come tenere tutto in ordine”, ma “come aiutare migliaia di acquirenti, con decine di intenzioni diverse, a trovare ciò che cercano in pochi secondi”. È la fase con cui ho faticato di più mentre gestivo un negozio, quindi lascia che ti racconti cosa ho imparato.
Com’è fatta la Fase 3
Il tratto più evidente è un catalogo ampio e su più livelli. Non hai più poche categorie piatte, ma un albero a 2-3 livelli: un gruppo principale, dei sottogruppi e poi il filtraggio per attributi. Un negozio di moda potrebbe avere Uomo / Donna / Bambini, con ogni ramo suddiviso in Top / Bottom / Accessori, e poi ulteriormente per occasione o stagione.
Anche il traffico diventa più vario. Gli acquirenti che arrivano dalla ricerca Google di solito sanno già cosa vogliono. Quelli che arrivano dagli annunci su Facebook o TikTok spesso capitano lì d’impulso, cliccano un prodotto e poi decidono cosa fare. Quelli che arrivano dalle email sono clienti di ritorno che si muovono con disinvoltura. Ogni fonte si comporta in modo diverso, e il menu deve servirle tutte e tre sulla stessa interfaccia.
Molti negozi in questa fase vendono anche su più mercati e in più lingue. E la velocità diventa ormai una questione di sopravvivenza. Secondo Google, le soglie buone per i Core Web Vitals sono LCP sotto i 2,5 secondi, INP sotto i 200 ms e CLS sotto 0,1. Ogni app aggiuntiva che installi può intaccare quel margine, quindi mantenere la pagina leggera richiede una vera disciplina.
Le esigenze di navigazione a questa scala
Una semplice barra dei menu non basta per la navigazione di un negozio in scala. Le esigenze in genere includono:
- Un Mega Menu più complesso: più colonne per disporre l’intero albero delle categorie, con spazio per un prodotto in evidenza e un banner promozionale stagionale.
- Una navigazione mobile ottimizzata: la maggior parte degli ordini arriva da telefono, quindi l’esperienza touch deve essere fluida e a portata di mano.
- Test A/B del menu: quando il traffico è abbastanza ampio, misura invece di tirare a indovinare.
- Un FAB per le CTA stagionali: un pulsante flottante per spingere la campagna in corso senza toccare l’intero menu.
Il mega menu a più colonne — e i suoi limiti
Un mega menu a più colonne consente agli acquirenti di vedere l’intera struttura del negozio con un solo passaggio del mouse. È un grande vantaggio su desktop, dove c’è ampio spazio e un cursore preciso.
Ma più colonne non significa stipare dentro ogni cosa. Gli acquirenti scorrono lo schermo da sinistra a destra, dall’alto in basso, quindi la prima colonna a sinistra dovrebbe contenere il gruppo più importante. Collocare un prodotto in evidenza o un banner nella colonna più a destra — l’area che l’occhio raggiunge per ultima — è di solito più sensato che incastrarlo nel mezzo del flusso di lettura.
Mobile: dove si decide l’ordine
Su un telefono, il pollice è il cursore. Secondo Steven Hoober (UXmatters), la maggior parte degli utenti tiene il telefono con una mano sola e lo usa con il pollice, quindi l’area più facile da toccare è la metà inferiore dello schermo. Per questo una Tab Bar fissa in basso è di solito più efficace che ammassare tutto in un menu hamburger in alto.
Anche il Nielsen Norman Group fa notare che nascondere tutta la navigazione dietro un hamburger riduce in modo marcato quanto gli acquirenti usano il menu. La raccomandazione è una combinazione: mostrare in primo piano alcune scorciatoie importanti, con il resto riposto in uno slide menu. Per un negozio con oltre 500 prodotti, questo abbinamento è quasi obbligatorio — non puoi aspettarti che gli acquirenti aprano da soli l’hamburger per esplorare il catalogo.
Alcune decisioni difficili
A questa scala le scelte non hanno più risposte valide per tutti. Alcune cose che ho dovuto valutare:
Conviene suddividere il menu per persona? Per esempio, separare “Per me” e “Per un regalo”. Funziona quando i due gruppi di acquirenti pensano davvero in modo diverso — chi compra un regalo si preoccupa dell’occasione, del budget, del destinatario. Ma se imponi una persona in cui gli acquirenti non si riconoscono, aggiungi solo un altro livello di esitazione. Guarda i dati della tua ricerca interna prima di decidere.
Conviene collegare la ricerca al mega menu? Con un catalogo ampio, la ricerca è spesso il modo più rapido per un acquirente con un’intenzione precisa di arrivare al suo obiettivo. Collocare la casella di ricerca proprio dentro o accanto al mega menu serve entrambi i gruppi — chi ama navigare e chi ama digitare. Di solito è una decisione del tipo “conviene farlo”.
Quando usare un prodotto in evidenza nel mega menu? Quando hai un prodotto che merita davvero di essere spinto: nuovi arrivi, articoli in forte sconto o il bestseller di quel gruppo. Non mettere un prodotto in evidenza solo per riempire uno spazio vuoto — un riquadro con un’immagine senza un motivo rende il menu più affollato e più lento.
Una regola che mi sono dato: ogni elemento del menu deve rispondere alla domanda “aiuta l’acquirente ad andare avanti, o è solo decorazione?”.
Un riferimento di base che vale la pena ricordare: secondo il Baymard Institute, il tasso medio di abbandono del carrello è intorno al 70%, e quel dato è cambiato a malapena nel corso di molti anni. Una buona navigazione non può sistemare la fase del checkout, ma un menu affollato, lento e difficile da consultare farà andare via gli acquirenti molto presto — ancor prima che abbiano la possibilità di aggiungere al carrello.
Consigli di configurazione con Navi+
In questa fase, di solito separo desktop e mobile invece di usare un’unica configurazione condivisa. Navi+ ti permette di configurare i due ambienti in modo indipendente, quindi è il momento di sfruttarlo.
Su desktop: usa un Mega Menu completo. Disponi l’albero delle categorie su più colonne, riserva una colonna per un prodotto in evidenza o un banner stagionale e valuta di collocare una casella di ricerca proprio dentro il menu. Poiché Navi+ funziona in modalità no-code drag-and-drop, puoi cambiare la disposizione delle colonne piuttosto in fretta quando vuoi provare una nuova struttura.
Su mobile: combina tre livelli. Una Tab Bar ottimizzata in basso per i 4-5 percorsi più importanti, comodamente all’interno della zona del pollice. Uno Slide Menu che contiene l’intero catalogo per gli acquirenti che vogliono navigare in profondità. E un FAB per le CTA stagionali — diciamo “Saldi 11.11” o “Regali di Capodanno lunare” — attivato per l’occasione e poi disattivato, senza ricostruire il menu.
Poiché il menu di Navi+ resta al suo posto quando cambi tema ed è ottimizzato per non penalizzare i Core Web Vitals, puoi sperimentare con le disposizioni più liberamente, senza preoccuparti di ricominciare da capo ogni volta che cambi il design.
Misura e rivedi a cicli
La grande scala ti permette di misurare in modo significativo. Usa le analitiche per vedere quali voci di menu vengono cliccate molto e quali sono quasi morte. Con traffico sufficiente, il test A/B del menu ti aiuta a confrontare due opzioni — per esempio, un mega menu con un prodotto in evidenza contro uno senza — e a lasciare che siano i numeri a decidere invece dell’istinto.
Per un negozio multilingua, ricorda che un menu tradotto automaticamente a volte rompe il layout: il tedesco è più lungo del vietnamita, e alcune lingue si leggono da destra a sinistra. Controlla ogni versione linguistica come un’esperienza a sé; non dare per scontato che un buon originale significhi una buona traduzione.
Infine, fissa un calendario di revisione regolare — trimestrale, per esempio. Il catalogo in questa fase cambia di continuo, e un menu che aveva senso sei mesi fa potrebbe essere già fuori passo rispetto all’attuale struttura dei tuoi prodotti. La navigazione non è un compito che si fa una volta e si dimentica.
Questo articolo fa parte della guida più ampia su Navigazione per ogni fase della crescita del tuo negozio — da 10 a 10.000 prodotti.