Apri il tuo negozio Shopify su un telefono. Dove si trova la navigazione? Dietro l’icona hamburger — tre linee orizzontali nell’angolo in alto a sinistra o a destra. È qui che la maggior parte dei temi Shopify mette l’intero catalogo su mobile. Nascosto dietro una piccola icona, nel punto più difficile da raggiungere dello schermo.
Pensa a come usi le tue app preferite. Instagram ha una barra di tab in basso. Amazon ha una barra di navigazione inferiore. Uber, Spotify, Google Maps — tutti usano la navigazione in basso che rimane visibile mentre scorri. Queste aziende hanno speso milioni in ricerca di usabilità prima di decidere questo modello. Eppure la maggior parte dei temi Shopify continua a usare il modello di navigazione mobile che la ricerca mostra costantemente come il peggiore: il menu hamburger che nasconde tutto nell’angolo in alto.
- La maggior parte dei temi Shopify offre un solo modello di navigazione mobile: il menu hamburger nell'angolo superiore.
- I menu hamburger riducono l'uso della navigazione di quasi il 50% rispetto alla navigazione visibile (Nielsen Norman Group).
- Le barre di tab in basso si trovano nella zona naturale del pollice e generano un aumento di conversione mobile del 15-25% negli studi di ecommerce.
- Gli approcci ibridi (barra di tab visibile + menu a scorrimento per categorie più profonde) superano l'hamburger-only combinando l'accesso rapido con la profondità.
Perché i temi Shopify usano hamburger-only
Il menu hamburger domina i temi Shopify per ragioni pratiche, non perché sia il miglior modello per le conversioni.
Lo spazio sullo schermo è scarso. Uno schermo mobile è largo circa 375 pixel. Una barra di navigazione orizzontale che mostra cinque nomi di categorie ha bisogno di almeno 50–70 pixel per etichetta per rimanere leggibile, il che significa che puoi visualizzare al massimo 5–6 elementi. L’icona hamburger comprime la navigazione illimitata in un singolo pulsante di 44 pixel. Per gli sviluppatori di temi che devono supportare negozi con 3 a 30 categorie, l’hamburger è l’unico modello che funziona universalmente senza personalizzazione.
I temi devono essere generici. Un tema venduto su Shopify Theme Store deve funzionare per una boutique di gioielli con 4 categorie e un negozio di ricambi auto con 200. Il menu hamburger gestisce entrambi i casi in modo identico. Una barra di tab, al contrario, richiede al commerciante di scegliere quali 4–5 categorie appaiono nella navigazione persistente — una decisione che richiede la conoscenza del catalogo che lo sviluppatore del tema non ha.
Semplicità di implementazione. Il modello hamburger è semplice da costruire: un pulsante attiva/disattiva un overlay a schermo intero che contiene il menu. Non è necessario calcolare i breakpoint responsivi per le etichette visibili, non c’è preoccupazione per il troncamento del testo e nessuna interazione complessa tra una barra di tab persistente e il comportamento di scorrimento della pagina. Gli sviluppatori di temi possono implementarlo in modo affidabile in poche ore.
Coerenza del design. Quando ogni tema Shopify usa un menu hamburger, i clienti sviluppano un comportamento acquisito: “Tocco le tre linee per vedere il menu.” Gli sviluppatori di temi possono ragionevolmente assumere che gli utenti mobile conoscono questo modello e lo cercheranno.
Queste sono ragioni valide di ingegneria e affari. Il problema è che ottimizzano per i vincoli dello sviluppatore del tema, non per l’esperienza dell’acquirente.
Il costo di conversione della navigazione hamburger-only
La ricerca sui menu hamburger mostra costantemente lo stesso risultato: nascondere la navigazione dietro un’icona hamburger riduce l’uso e danneggia il completamento dei compiti.
L’uso della navigazione scende di quasi la metà. La ricerca del Nielsen Norman Group sui menu hamburger ha scoperto che la navigazione nascosta riduce significativamente la scoperta. Quando il menu è visibile, le persone lo usano. Quando è nascosto dietro un’icona, una grande percentuale di utenti non lo apre mai — si affidano ai link visibili sulla pagina corrente, usano la ricerca o se ne vanno.
Il problema della zona del pollice. La ricerca influente di Steven Hoober su come le persone tengono e interagiscono con i telefoni ha mostrato che gli angoli superiori di uno schermo telefonico sono i più difficili da raggiungere con una mano. L’icona hamburger si trova esattamente in questa zona morta. Su telefoni più grandi di 6 pollici (che ora include la maggior parte dei modelli), raggiungere l’angolo superiore richiede un cambio di impugnatura o una seconda mano. Una barra di tab in basso si trova dove il pollice riposa naturalmente — il terzo inferiore dello schermo — rendendola accessibile senza alcuno sforzo.
Impatto specifico dell’ecommerce. Per i negozi online, il costo della navigazione nascosta è direttamente misurabile nei tassi di conversione. La ricerca citata da LibauTech mostra che le barre di tab in basso generano un aumento di conversione mobile del 15–25% rispetto alla navigazione hamburger-only. Il meccanismo è semplice: quando i clienti possono vedere i link delle categorie in modo persistente in basso sullo schermo, navigano più categorie, scoprono più prodotti e hanno più probabilità di trovare qualcosa che vogliono acquistare.
Collegamento all’abbandono del carrello. La ricerca di Baymard Institute sull’usabilità mobile mostra che la difficoltà di navigazione è un fattore significativo nell’abbandono del carrello mobile. Quando i clienti non riescono a navigare facilmente tra le categorie, tendono a visualizzare meno prodotti per sessione. Meno prodotti visualizzati significa minore probabilità di trovare un prodotto che vale la pena acquistare, il che si manifesta come tassi di rimbalzo più alti e tassi di conversione più bassi su mobile.
L’impatto cumulativo è sostanziale. Per un negozio con il 60% di traffico mobile che genera $100.000/mese di entrate, un miglioramento del 15% di conversione mobile si traduce in circa $9.000/mese di entrate aggiuntive. Questo è il costo di attenersi a un modello hamburger-only quando esistono alternative migliori.
Modelli di navigazione mobile: un confronto
Non tutti i modelli di navigazione mobile hanno le stesse prestazioni. Ecco come si confrontano gli approcci più comuni:
| Modello | Visibilità | Accessibilità del pollice | Capacità di categorie | Migliore per |
|---|---|---|---|---|
| Hamburger only | Nascosto fino al tocco | Scarsa (angolo superiore) | Illimitata (tutto nascosto) | Cataloghi piccoli, siti di contenuti |
| Barra di tab in basso | Sempre visibile | Eccellente (zona del pollice) | 4–5 elementi | Negozi con categorie principali chiare |
| Barra di intestazione sticky | Visibile durante lo scorrimento verso l’alto | Moderata (parte superiore dello schermo) | 3–4 elementi | Negozi che danno priorità a ricerca + carrello |
| Pulsante azione mobile | Sempre visibile | Buona (angolo inferiore) | 1 azione (si espande a più) | Negozi a focus singolo (es. “Acquista ora”) |
| Ibrido: barra di tab + menu a scorrimento | Barra di tab sempre visibile, menu completo su richiesta | Eccellente per compiti comuni, buona per navigazione profonda | 4–5 visibili + illimitati nel menu a scorrimento | Negozi con 20+ categorie |
L’approccio ibrido — una barra di tab in basso per le 4–5 categorie principali più un menu a scorrimento (attivato da uno dei slot della barra di tab) per la navigazione completa — supera costantemente altri modelli. Offre ai clienti accesso istantaneo alle destinazioni più popolari mentre preserva l’accesso all’albero delle categorie completo.
Cosa offrono realmente i temi Shopify popolari su mobile
Ecco come appare la navigazione mobile nei temi ampiamente utilizzati:
Dawn (gratuito, Shopify): Menu hamburger nell’intestazione. Nessuna barra di tab. Il menu mobile si apre come un overlay a schermo intero con menu a tendina per categorie nidificate. Implementazione pulita, ma rigorosamente hamburger-only. Nessuna impostazione per cambiare il modello di navigazione mobile.
Prestige (Clean Canvas): Menu hamburger con un pannello a scorrimento leggermente più raffinato. Supporta immagini in primo piano nel menu mobile, che aggiunge interesse visivo ma non cambia l’interazione fondamentale. Richiede comunque un tocco all’angolo superiore per accedere alla navigazione.
Impact (Maestrooo): Menu hamburger con un pannello laterale a scorrimento. Impact include un’opzione “sticky header” che mantiene visibile l’icona hamburger mentre gli utenti scorrono, il che è un piccolo miglioramento — ma l’icona è comunque nell’angolo superiore. Nessuna opzione di barra di tab.
Impulse (Archetype): Menu hamburger con un pannello a cassetto. Impulse ha un menu mobile relativamente sofisticato con animazioni fluide e supporto per immagini nella navigazione. Ma come gli altri, è rigorosamente attivato da hamburger e non offre un livello di navigazione visibile persistente.
Warehouse (Maestrooo): Menu hamburger con una barra in basso che mostra le icone del carrello e della ricerca. Questo si avvicina di più a un approccio ibrido posizionando alcune icone di utilità in basso, ma la navigazione stessa (navigazione delle categorie) è ancora nascosta dietro l’hamburger nell’angolo superiore.
Il modello è coerente: in tutti i principali temi Shopify, la navigazione mobile è accessibile esclusivamente attraverso un’icona hamburger nell’area dell’intestazione. Nessuno dei temi popolari offre un’opzione di barra di tab inferiore integrata o di navigazione ibrida.
Aggiungere una barra di tab senza cambiare il tema
Se il tuo tema non offre una barra di tab (e nessuno dei temi popolari lo fa), hai tre opzioni:
Opzione 1: Codice tema personalizzato. Uno sviluppatore Shopify può aggiungere una barra di tab inferiore modificando i modelli e il CSS di Liquid del tema. Questo comporta:
- Creazione di un nuovo snippet con l’HTML della barra di tab
- Aggiunta di CSS per il posizionamento fisso in basso, stati attivi e dimensionamento responsivo
- Inclusione nel file di layout
theme.liquid - Scrittura di JavaScript per gestire stati attivi e comportamento specifico per mobile
Il costo di sviluppo è generalmente 4–8 ore per uno sviluppatore esperto di temi Shopify. Il risultato è una barra di tab leggera e veloce completamente integrata con il tema. Lo svantaggio: gli aggiornamenti del tema possono sovrascrivere le tue modifiche e avrai bisogno dell’intervento dello sviluppatore ogni volta che vuoi modificare gli elementi della barra di tab.
Opzione 2: Un’iniezione JavaScript tramite l’Editor script di Shopify o un blocco app personalizzato. Puoi aggiungere una barra di tab utilizzando un blocco app o una sezione Liquid personalizzata che inietta HTML, CSS e JavaScript nella pagina. Questo non modifica i file principali del tema, quindi gli aggiornamenti del tema non lo sovrascriveranno. Ma l’implementazione è fragile — dipende dalla struttura DOM del tema, che può cambiare tra le versioni del tema.
Opzione 3: Un’app di menu con supporto della barra di tab. App come Navi+ includono componenti di barra di tab precostruiti che si installano insieme al tema senza modificare i file del tema. L’app esegue il rendering della barra di tab come overlay in basso sullo schermo, indipendentemente dalla navigazione del tema. Configuri quali categorie appaiono nella barra di tab attraverso l’admin dell’app, e l’app gestisce tutto il comportamento responsivo, gli stati attivi e l’interazione con la navigazione dell’intestazione esistente del tema.
L’approccio app ha il vantaggio di zero modifiche al codice del tema e un’interfaccia di configurazione visuale. Il compromesso è un carico JavaScript aggiuntivo (generalmente 30–50 KB per un’app ben costruita) e un costo di abbonamento mensile. Per i negozi in cui il miglioramento della conversione mobile giustifica anche un investimento modesto, la matematica del ROI di solito funziona — il guadagno di entrate dalla navigazione mobile visibile supera di gran lunga il costo dell’app.
Progettare una barra di tab efficace per il tuo negozio
Che tu costruisca una barra di tab personalizzata o usi un’app, le decisioni di progettazione sono importanti:
Scegli massimo 4–5 elementi. Ogni tab deve essere abbastanza grande da toccare in modo affidabile (minimo 44x44 pixel secondo l’HIG di Apple e le linee guida di Material Design di Google). Su uno schermo largo 375 pixel, 5 elementi danno a ogni tab circa 75 pixel — sufficiente per un’icona e un’etichetta breve. Più di 5 elementi rimpiccioliscono gli obiettivi di tocco sotto le dimensioni utilizzabili.
Metti le categorie più visitate nella barra di tab. Rivedi la tua analisi per identificare le prime 3–4 pagine di collezione per traffico. Questi sono i tuoi candidati per la barra di tab. Lo slot rimanente dovrebbe essere un elemento “Menu” (che apre la navigazione completa) o un’azione “Ricerca”.
Usa icone con etichette, non solo icone. La ricerca del Nielsen Norman Group mostra che le icone senza etichette sono frequentemente fraintese. Un’icona di borsa della spesa potrebbe significare “Carrello”, “Negozio” o “Lista dei desideri” a seconda delle aspettative dell’utente. Abbina sempre le icone con etichette di testo breve (1–2 parole).
Includi una tab “Altro” o “Menu”. La barra di tab mostra le tue categorie principali, ma i clienti hanno ancora bisogno di accedere alla navigazione completa. Riserva una tab per aprire il menu completo (tipicamente un pannello a scorrimento). Questo ti dà il modello ibrido: accesso rapido alle destinazioni popolari più navigazione profonda su richiesta.
Abbina lo stile della barra di tab al tuo tema. La barra di tab dovrebbe sembrare una parte naturale del tuo negozio, non un’idea dell’ultimo momento. Usa la stessa famiglia di font, tavolozza di colori e stile di icone del resto del tuo tema. Se il tuo tema usa angoli arrotondati e ombre morbide, dovrebbe farli anche la barra di tab.
Vittoria velocePrima ancora di implementare una barra di tab completa, prova l'impatto della navigazione visibile aggiungendo un pulsante sticky "Categorie negozio" in basso alle tue pagine mobile. Se i tassi di clic sono alti, convalida l'investimento in una barra di tab appropriata.
Misurare l’impatto della navigazione ibrida
Dopo aver implementato una barra di tab o navigazione ibrida, traccia queste metriche nel corso di 4–6 settimane per misurare l’impatto:
Tasso di rimbalzo mobile. Dovrebbe diminuire poiché i clienti si impegnano con la navigazione visibile invece di andarsene quando non trovano immediatamente quello che cercano.
Pagine per sessione mobile. Dovrebbe aumentare poiché i clienti navigano più categorie attraverso la barra di tab. Un aumento da 3,2 a 4,1 pagine per sessione è tipico dopo l’aggiunta della navigazione persistente.
Tasso di conversione mobile. La metrica principale. Confronta la media di 4 settimane prima e dopo il cambiamento. Tieni conto della stagionalità confrontando lo stesso periodo dell’anno precedente se possibile.
Tasso di tocco della barra di tab. Se la tua implementazione traccia i clic, misura quanto spesso i clienti toccano ogni tab. Questi dati ti aiutano a ottimizzare quali categorie appaiono nella barra — sostituisci gli elementi con basso numero di tocchi con categorie a cui i clienti effettivamente vogliono accesso rapido.
Utilizzo della ricerca del sito. Dovrebbe diminuire per le query relative alle categorie. Se i clienti cercavano “scarpe da uomo” prima perché non riuscivano a trovarle nel menu hamburger, una barra di tab che collegava a “Uomo” dovrebbe ridurre il volume di quella query di ricerca.
Aggiunte al carrello per sessione da mobile. Più scoperta di prodotti attraverso una navigazione migliore dovrebbe tradursi in più elementi aggiunti ai carrelli. Questa metrica isola l’impatto della navigazione da altri fattori di conversione come i prezzi o il flusso di checkout.
Esegui il confronto per almeno 4 settimane per attenuare la variazione settimanale. Se il tuo negozio ha significative fluttuazioni di traffico (stagioni festive, campagne di marketing), estendi il periodo di misurazione o usa un calcolatore di significatività statistica per convalidare i risultati. L’aumento di conversione potrebbe richiedere 1–2 settimane per stabilizzarsi poiché i visitatori di ritorno imparano il nuovo modello di navigazione.
Questo articolo fa parte della guida più ampia su Limitazioni dei menu nei temi Shopify: quando usare un’app di menu invece.