Non esiste un unico set di menu che vada bene per ogni negozio. Un negozio di moda con migliaia di SKU ha bisogno di una navigazione molto diversa da quella di un bar che vende qualche decina di articoli. Questo articolo raccoglie le indicazioni su come combinare i menu di Shopify per tipo di negozio, sulla base di ciò che ho osservato sia gestendo un negozio sia guardando come fanno gli altri.
Prima della tabella, un punto importante: il menu su desktop e il menu su mobile non dovrebbero essere uguali. Le persone tengono il telefono con una mano e toccano lo schermo principalmente con il pollice. Secondo le osservazioni di Steven Hoober, circa il 75% delle interazioni su mobile avviene con il pollice, e l’area più facile da raggiungere è la metà inferiore dello schermo. Su desktop è il contrario: le persone scorrono dall’alto verso il basso, quindi un menu orizzontale in alto ha più senso. Due contesti diversi richiedono due modi diversi di impostare il menu.
Una tabella suggerita per combinare i menu di Shopify per tipo di negozio
| Tipo di negozio | Desktop | Mobile |
|---|---|---|
| Moda / Lifestyle, catalogo ampio | Mega Menu | Tab Bar + Slide Menu |
| Elettronica, molte categorie tecniche | Mega Menu con filtri | Slide Menu |
| F&B / Locale, pochi prodotti | Simple Nav (menu orizzontale semplice) | Tab Bar |
| Bellezza / Skincare | Mega Menu con immagini | Tab Bar + FAB chat |
| Dropshipping, molte linee di prodotto | Mega Menu | Slide Menu |
Questa tabella è un punto di partenza, non una regola. Di seguito trovi le ragioni di ogni riga, così puoi adattarla al tuo negozio.
Moda e lifestyle: un catalogo ampio ha bisogno di un Mega Menu su desktop
I negozi di moda di solito hanno una struttura profonda: Uomo / Donna, poi Top / Pantaloni / Accessori, poi singole linee di prodotto, per stagione, per collezione. Stipare tutto questo in un unico menu a tendina verticale costringe i clienti a passare con il mouse attraverso molti livelli.
Su desktop, un Mega Menu risolve il problema. Distribuisce le categorie su più colonne all’interno di un unico pannello grande, così gli utenti vedono l’intero albero dei prodotti in una sola volta invece di cliccare attraverso ogni livello. Per un negozio di abbigliamento femminile con decine di linee di prodotto, questo è di solito l’approccio più pulito.
Su mobile è diverso. Uno schermo stretto non può distribuire un Mega Menu, quindi un approccio comune è una Tab Bar per i percorsi più importanti (Home, Categorie, Carrello, Account) fissata in fondo allo schermo, più una Slide Menu per l’elenco completo delle categorie. La Tab Bar resta sempre a portata di pollice, mentre la Slide Menu contiene l’albero dettagliato dei prodotti per quando gli utenti vogliono approfondire.
Elettronica: le categorie tecniche hanno bisogno dei filtri direttamente nel menu
L’elettronica ha le sue particolarità. I clienti spesso sanno abbastanza bene cosa cercano: capacità, marca, fascia di prezzo, anno del modello. Quindi, per un negozio di elettronica, il Mega Menu su desktop dovrebbe includere alcuni filtri o sottogruppi direttamente nel menu, permettendo agli utenti di saltare subito al ramo giusto invece di sfogliare l’intera pagina della categoria.
Per esempio, un negozio di accessori per computer potrebbe suddividere il proprio Mega Menu in colonne per tipo (mouse, tastiere, cuffie) e, all’interno di ogni colonna, elencare le fasce di prezzo o le marche più richieste.
Su mobile, poiché l’albero delle categorie è lungo e tecnico, una Slide Menu funziona meglio rispetto al tentativo di stipare tutto in una Tab Bar. Una Slide Menu permette al menu di annidarsi su più livelli rimanendo compatto. Se la usi, accompagna le icone con etichette di testo chiare. Il Nielsen Norman Group ha misurato questo aspetto e ha rilevato che i menu nascosti (in stile hamburger) riducono di quasi la metà la probabilità che gli utenti trovino la navigazione rispetto ai menu visibili, quindi non rendere il menu troppo nascosto.
F&B e attività locali: con pochi prodotti, non complicare troppo
Ristoranti, panetterie e negozi locali di solito hanno solo qualche decina di articoli. Costruire un Mega Menu per un negozio del genere è eccessivo e può persino rendere la pagina più disordinata del necessario.
Su desktop, una Simple Nav, un menu orizzontale con pochi elementi come Menu, Chi siamo, Contatti, è sufficiente. I clienti non hanno bisogno di approfondire; hanno bisogno di ordinare in fretta.
Su mobile, una Tab Bar funziona bene in questi casi. Alcuni dei pulsanti più importanti, per esempio Menu, Ordina, Chiama, sono pronti in fondo allo schermo, proprio nella zona facilmente raggiungibile dal pollice. Un bar che vende online potrebbe fissare i pulsanti Ordina e Chiama nella Tab Bar, così i clienti non devono scorrere per trovarli.
Bellezza e skincare: supporto con immagini e consulenza
I cosmetici si vendono attraverso le immagini e la fiducia. I clienti spesso sono indecisi su quale tipo sia adatto alla loro pelle, quindi anche il menu dovrebbe rispecchiarlo.
Su desktop, un Mega Menu con immagini permette ai clienti di vedere il prodotto o la linea per la cura della pelle direttamente nel menu, invece di leggere solo il testo. Un negozio di bellezza potrebbe inserire un’immagine rappresentativa per ogni linea (detergenti, idratanti, protezione solare) accanto al nome della categoria.
Su mobile, oltre a una Tab Bar per la navigazione principale, un FAB chat fluttuante in un angolo si adatta piuttosto bene a questo settore. I clienti tendono ad avere domande prima di acquistare (la mia pelle può usarlo, va d’accordo con quell’altro), e un pulsante di chat sempre visibile permette loro di chiedere subito. Ridurre l’esitazione in questa fase ne vale la pena: secondo il Baymard Institute, il tasso medio di abbandono del carrello nell’ecommerce è intorno al 70%, il che significa che ogni 10 persone che aggiungono al carrello, solo circa 3 completano l’acquisto. Rispondere alle domande al momento giusto è un modo per trattenere una parte di quei clienti.
Dropshipping: molte linee di prodotto, priorità a un raggruppamento chiaro
I negozi di dropshipping spesso vendono molte categorie contemporaneamente: articoli da cucina, accessori per il telefono, giocattoli, casalinghi. La sfida è che questi gruppi sono dispersi e non collegati tra loro.
Su desktop, un Mega Menu aiuta a raccogliere ogni categoria nella propria colonna, così i clienti vedono subito cosa vende il negozio. Una struttura chiara conta più dell’aspetto estetico, perché i clienti spesso arrivano dalle inserzioni e non conoscono ancora il negozio.
Su mobile, una Slide Menu gestisce bene un gran numero di categorie senza occupare spazio. Gli utenti la aprono, scelgono una categoria e poi approfondiscono.
Perché dovresti configurare mobile e desktop separatamente
Ciò che tutti e cinque i casi qui sopra hanno in comune è che i due lati vengono configurati in modo diverso. Non è un dettaglio da poco. Oggi la maggior parte degli ordini arriva dal telefono, e un menu desktop trasferito così com’è su mobile risulta di solito sia difficile da toccare sia un peso per il caricamento della pagina.
Vale la pena tenere d’occhio anche le prestazioni. Google fissa la soglia per buoni Core Web Vitals a un LCP inferiore a 2,5 secondi, un INP inferiore a 200 ms e un CLS inferiore a 0,1. Un menu ingombrante che si carica su ogni dispositivo fa facilmente peggiorare questi numeri. Su mobile, ogni componente che aggiungi dovrebbe essere leggero.
È qui che uno strumento come Navi+ torna utile: ti permette di configurare i menu desktop e mobile separatamente, di trascinare e rilasciare senza codice e di mantenere il tuo menu quando cambi tema. Puoi impostare un Mega Menu per desktop e una Tab Bar più una Slide Menu per mobile, senza mai toccare i file del tema.
In breve, scegli il tuo menu in base a quanto è ampio il tuo catalogo e a come acquistano i clienti, poi separa la configurazione per i due tipi di schermo. La tabella qui sopra è un punto di partenza; il resto è testare e aggiustare in base ai numeri reali del tuo negozio.
Questo articolo fa parte della guida più ampia su Come scegliere il tipo di menu giusto per il tuo negozio Shopify.