Desktop Mega Menu Slide Menu Tab Bar

Baby Studio — un catalogo mamma e bambino più facile da sfogliare su Shopify con Mega Menu, Slide Menu e Tab Bar

Come Baby Studio ha riorganizzato la navigazione per rendere il catalogo mamma e bambino più facile da esplorare sia su desktop che su mobile.

BS
Baby Studio
babystudio.com.au
Vendita per neonati e nursery Shopify Navigazione mobile
In sintesi
Settore
Baby & nursery retail
Piattaforma
Shopify
Sfida
Catalogo con molti gruppi di prodotti, navigazione ancora piatta
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar
Focus
Esplorare il catalogo su desktop, azioni rapide su mobile

Il problema del cliente

Baby Studio si rivolge a un pubblico molto specifico: genitori, giovani famiglie e chi cerca un regalo per i più piccoli. Per questo tipo di cliente le esigenze sono spesso chiare, ma il percorso verso il prodotto ha molte diramazioni: passeggini, seggiolini auto, nursery, allattamento, cura del bambino, giochi, accessori e gruppi di prodotti suddivisi per età o situazione d'uso.

Quando un catalogo ha così tanti gruppi, il menu predefinito del tema comincia a non bastare. Su desktop, una barra menu piatta non riesce a mostrare l'intera ampiezza dello store. Su mobile, se tutto resta nascosto dietro il menu hamburger, il cliente deve aprire ogni livello da solo e indovinare quale gruppo contiene il prodotto che cerca.

Storefront desktop di Baby Studio prima di Navi+ — navigazione per categorie piatta, senza mega menu
Baby Studio su desktop: molti gruppi di prodotti, ma l'header è ancora una barra menu piatta, senza aprire il catalogo in un mega menu.

Il problema non è la mancanza di prodotti. Il problema è che i prodotti sono validi, ma la struttura di navigazione non aiuta il cliente a vedere cosa vende lo store, così deve fare passi in più per trovare l'area giusta. Su mobile, qualche passaggio superfluo basta perché il cliente salti un gruppo di prodotti importante.

Menu mobile di Baby Studio prima di Navi+ — primo livello di navigazione
Il menu mobile attuale: i gruppi principali sono nel drawer, il cliente deve aprire il menu prima di vedere il catalogo.

Cosa risolve Navi+

L'approccio giusto è non cambiare tema e non rifare tutto lo store. Navi+ viene usato come uno strato di navigazione aggiuntivo, che divide i ruoli con chiarezza a seconda del contesto: desktop ha bisogno di una vista ampia, mobile di azioni rapide, e il cliente che sta facendo acquisti ha bisogno di scorciatoie verso i punti importanti.

Desktop Mega Menu — mostra al cliente cosa offre lo store fin dal primo momento

Il Mega Menu può dividere i gruppi principali di prodotti in colonne ben definite, per esempio: prams & strollers, car seats, nursery, feeding, toys, baby care, sale o featured collections. Ogni gruppo ha un'etichetta facile da capire e un'immagine rappresentativa, così chi entra per la prima volta nello store non deve fare troppi click di prova.

Slide Menu — entra in profondità nel catalogo senza appesantire il mobile

Il Slide Menu è adatto a un catalogo con molti sottogruppi. Il cliente può passare dal gruppo grande al gruppo piccolo schermata dopo schermata, con un'esperienza più simile a un'app che a una lunga lista di link. Questo è particolarmente utile quando il cliente deve scegliere in base all'esigenza, all'età, al tipo di prodotto o agli accessori abbinati.

Tab Bar — porta menu, ricerca e carrello a portata di pollice

Su mobile, la Tab Bar mantiene le azioni importanti sempre in basso allo schermo: Home, Shop/Menu, Search, Cart, Account o Sale. Il cliente non deve risalire all'header per cercare, aprire il menu o vedere il carrello. Per chi sta sfogliando molti prodotti per il bambino, ridurre queste azioni ripetute crea un'esperienza più leggera.

Il risultato dopo Navi+

Dopo aver riorganizzato la navigazione con Navi+, Baby Studio può presentare il catalogo in un modo più vicino al comportamento d'acquisto reale: su desktop si vedono più gruppi di prodotti, su mobile il percorso è più chiaro, e le azioni principali si trovano in una posizione facile da toccare.

Mega menu desktop aggiornato di Baby Studio che mostra la navigazione Prams and Strollers con immagini di prodotto
La versione aggiornata su desktop: la categoria Prams & Strollers è aperta come mega menu, con sottogruppi e prodotti illustrativi.
Storefront mobile aggiornato di Baby Studio con la Tab Bar inferiore di Navi+
La versione aggiornata su mobile: la Tab Bar posiziona Menu, Catalog, Blogs, Support e More in basso allo schermo, proprio nell'area di azione del pollice.
Slide menu mobile aggiornato di Baby Studio con prodotti in evidenza e link alle categorie
Lo Slide Menu dopo l'aggiornamento: il pannello a scorrimento si sovrappone allo storefront, mantenendo il contesto della pagina sottostante e portando categorie, prodotti in evidenza e scorciatoie di contatto nello stesso flusso.

Il risultato a cui puntare non è semplicemente un menu “più bello”. Il risultato è che i nuovi clienti capiscono in fretta cosa offre lo store, i clienti mobile trovano l'area giusta con meno giri, e l'header può essere più compatto senza perdere funzioni importanti come ricerca, carrello e menu.

  • Il desktop mostra meglio l'ampiezza del catalogo grazie al Mega Menu.
  • Il mobile ha un percorso più chiaro grazie allo Slide Menu.
  • Ricerca, carrello e menu sono più vicini al pollice grazie alla Tab Bar.
  • I nuovi clienti capiscono più in fretta cosa offre lo store.
  • Un catalogo con molti gruppi di prodotti diventa più facile da sfogliare senza dover cambiare tema.

Principi da ricordare

Punti applicabili alla maggior parte degli store con un catalogo a più diramazioni — non solo a Baby Studio.

  • Desktop per esplorare: il mega menu apre l'ampiezza del catalogo già dall'header, così chi entra per la prima volta vede cosa vende lo store senza dover cliccare a caso.
  • Mobile per andare in profondità: lo slide menu fa passare il cliente da un livello all'altro come in un'app, ideale per un catalogo suddiviso per esigenza o per età.
  • Le azioni principali a portata di pollice: porta menu, ricerca e carrello nella Tab Bar, togliendo peso all'header.
  • Aggiungi uno strato, non cambiare le fondamenta: migliora la navigazione senza cambiare tema o rimuovere le app già in uso.

Hai uno store simile e vuoi provare Navi+? Dai un'occhiata ai tipi di menu oppure leggi la documentazione.

K
Khoi — Founder, Navi+
Ha creato Navi+ e segue di persona la consulenza sulla navigazione per gli store Shopify con molte categorie.

Inizia con Navi+ AI Menu Builder

Scegli la tua piattaforma — gratuito da installare, live in minuti.