Se vendi su Shopify e fai fatica con il menu sul telefono, c’è uno schema che molte grandi app di ecommerce utilizzano, e vale la pena imparare da loro. È il modo in cui si combinano una tab bar e uno slide menu: lascia che la Tab Bar gestisca gli spostamenti rapidi e che lo Slide Menu gestisca la navigazione in profondità. Questo articolo parla di come questi due elementi lavorano insieme e di dove si inserisce il FAB in questo quadro.
Una volta gestivo un negozio e ho commesso l’errore più comune: ho stipato tutto in un unico menu hamburger confidando nel fatto che “chi acquista lo toccherà se ne avrà bisogno”. In realtà, le persone che acquistano sono meno pazienti di quanto pensiamo.
Perché un solo tipo di menu non basta
Sul telefono, il comportamento di chi acquista si divide in due gruppi piuttosto chiari.
Il primo gruppo sa cosa vuole. Arriva per vedere il carrello, per cercare o per tornare alla home page. Ha bisogno di muoversi in fretta e di andare dritto al punto.
Il secondo gruppo non ha ancora deciso cosa comprare. Vuole girovagare tra le categorie e vedere cosa c’è di interessante. Ha bisogno di una mappa completa del negozio.
Un singolo menu fatica a servire bene entrambi. Se stipi tutto in un hamburger, il primo gruppo deve compiere un passaggio in più per cose che dovrebbero richiedere un solo tocco. Il Nielsen Norman Group ha rilevato che nascondere la navigazione principale dietro un pulsante la rende più difficile da trovare e più lenta da usare rispetto a quando le voci sono mostrate apertamente. D’altra parte, se provi a esporre sullo schermo l’intero albero delle categorie, il primo gruppo si sente sopraffatto e lo schermo diventa affollato.
La soluzione non è scegliere uno solo. È dividere i ruoli.
La Tab Bar gestisce le destinazioni principali
La Tab Bar è una barra di navigazione fissa nella parte inferiore dello schermo, che di solito contiene 4-5 voci. È sempre visibile, quindi chi acquista non deve toccare nulla per aprirla.
La sua posizione in basso non è casuale. Secondo la ricerca di Steven Hoober condotta su oltre 1.300 osservazioni di utenti, circa il 75% delle azioni sullo schermo viene eseguito con il pollice. Il centro-basso dello schermo è esattamente il punto che il pollice raggiunge più facilmente quando si tiene il telefono con una mano. Mettere lì le destinazioni importanti significa che le persone toccano con precisione e rapidità, con meno errori.
Quindi cosa dovrebbe finire nella Tab Bar? Solo le destinazioni più usate e che devono essere raggiunte più velocemente. Per esempio, per un negozio di moda:
- Home
- Cerca
- Categorie (o “Prodotti”)
- Carrello
- Account
Cinque voci sono la misura giusta. Più di così e ogni pulsante viene compresso e diventa difficile da toccare; meno di così e si spreca spazio prezioso. Non è il posto giusto per elencare ogni sottocategoria: è il posto per qualche grande porta d’accesso.
Lo Slide Menu gestisce l’intera struttura delle categorie
La Tab Bar ha solo 4-5 spazi. Ma un negozio reale di solito ha decine di categorie e sottocategorie. Dove finiscono?
Qui entra in gioco lo Slide Menu. Lo Slide Menu si apre dal bordo dello schermo e può contenere l’intera struttura di categorie su più livelli. Chi acquista vuole passare da Uomo a Donna, da Top a Bottom, da una collezione all’altra: lo Slide Menu è il posto per questo.
La parte interessante di questo schema è il modo in cui lo Slide Menu si apre. Metti una voce “Categorie” o un’icona “Altro” proprio sulla Tab Bar. La persona la tocca e lo Slide Menu scivola fuori. In questo modo i due menu si collegano: la Tab Bar è sempre lì per gli spostamenti rapidi ed è anche la porta verso lo Slide Menu per la navigazione approfondita.
Un dettaglio piccolo ma importante: quando usi uno Slide Menu, etichettalo chiaramente con del testo invece di lasciare un’icona spoglia, e mettilo dove chi acquista si aspetta di trovarlo. NN/G consiglia di usare l’icona standard a tre righe insieme a un’etichetta, così le persone possono intuire cosa c’è dentro. Lo Slide Menu non è un problema: lo diventa solo quando gli si fa fare il lavoro sia della Tab Bar sia di sé stesso.
La divisione dei ruoli si riduce a questo: quando chi acquista ha bisogno di velocità, usa la Tab Bar; quando vuole sfogliare tutto, apre lo Slide Menu. È esattamente la combinazione di tab bar e slide menu che usano molte grandi app di ecommerce, e funziona per Shopify senza bisogno di stravolgimenti.
Il FAB: un complemento, non un sostituto
Il FAB (Floating Action Button) è un pulsante rotondo fluttuante, di solito nell’angolo in basso a destra, sovrapposto al contenuto della pagina. Molti lo trovano accattivante e vogliono usarlo per la navigazione. Lo sconsiglierei.
Il FAB andrebbe riservato a un’unica azione, una che sia importante e ripetuta. Qualche esempio sensato:
- Un pulsante di chat di assistenza, così chi acquista può fare domande veloci quando ha dei dubbi
- “Vedi le offerte di oggi” durante una promozione
- Torna in cima nelle pagine di elenco prodotti molto lunghe
Il motivo per cui il FAB non dovrebbe farsi carico della navigazione principale: è un solo pulsante. Quando lo tocchi, deve aprire un menu, il che significa tornare proprio allo schema della navigazione nascosta che volevamo evitare. La Tab Bar gestisce meglio la navigazione perché è sempre visibile e ha diversi spazi. Il FAB si adatta a una singola e chiara chiamata all’azione.
In altre parole: la Tab Bar e lo Slide Menu gestiscono il “dove andare”, mentre il FAB gestisce il “fai una cosa”. Non lasciare che si pestino i piedi a vicenda.
Perché vale la pena impostare bene questo schema
C’è un motivo pratico per preoccuparsi del menu sul telefono. Secondo il Baymard Institute, il tasso medio di abbandono del carrello è intorno al 70%, e su mobile è ancora più alto, intorno all’80%. Quando chi acquista fatica già a orientarsi dal menu, se ne va prima ancora di pensare al checkout.
Conta anche la velocità della pagina. Un menu pesante può rallentare il caricamento e causare spostamenti del layout. Google fissa la soglia “buona” per i Core Web Vitals a un LCP sotto i 2,5 secondi, un INP sotto i 200 millisecondi e un CLS sotto 0,1. Più il menu è snello e leggero, più è facile rimanere entro queste soglie.
C’è un’altra cosa da considerare: il numero di app. Un negozio Shopify di solito installa molte app, e ognuna aggiunge un altro pezzo di codice che gira sulla pagina. Se un singolo strumento per i menu può gestire Tab Bar, Slide Menu e FAB tutti in un unico posto, eviti di mettere insieme alla meglio diversi elementi separati.
Costruisci questo schema senza codice
La parte difficile dello schema combinato è la configurazione. Ti serve una Tab Bar separata per il mobile, uno Slide Menu collegato a essa ed eventualmente un FAB per una CTA, e tutto deve incastrarsi senza toccare la versione desktop.
È proprio questo il problema che Navi+ è stato creato per risolvere. Configuri Tab Bar e Slide Menu in un unico posto, li imposti separatamente per il mobile, trascini e rilasci, senza bisogno di codice. Le configurazioni mobile e desktop sono separate, quindi la versione desktop continua a usare un normale Mega Menu. Il menu rimane inoltre al suo posto quando cambi tema ed è ottimizzato in modo da non penalizzare i tuoi Core Web Vitals.
Quello che voglio lasciarti non è uno strumento specifico, ma la mentalità di dividere i ruoli: non far fare tutto a un solo menu. Lascia che la Tab Bar gestisca gli spostamenti rapidi, lo Slide Menu la navigazione approfondita e il FAB un’unica azione. Chi acquista troverà la propria strada più facilmente, e spesso questo è il primo passo perché rimanga più a lungo.
Questo articolo fa parte della guida più ampia su Navigazione mobile — perché il menu hamburger sta passando di moda e cosa usare al suo posto.