Desktop Mega Menu Slide Menu Tab Bar

Heater — sostituire l'header principale con Navi+ per comprimere un grande sito web in una navigazione facile e coerente su mobile e desktop

Come una grande catena di riparazioni a Hong Kong ha sostituito l'intero header predefinito con Navi+ — trasformando centinaia di pagine marca × modello × guasto × negozio in un sistema di navigazione coerente sia su mobile che su desktop.

H
Heater
heaterhk.net
Riparazione telefoni & tablet Shopify Sito web grande
In sintesi
Settore
Riparazione telefoni & tablet (Hong Kong)
Piattaforma
Shopify
Sfida
Sito web molto grande; l'header predefinito non regge; mobile e desktop scollegati
Navi+ menus
Desktop Mega Menu · Slide Menu · Tab Bar (sostituiscono l'header principale)
Focus
Sostituire l'header, unificare la navigazione mobile + desktop

Il problema del cliente

Heater è un sito web grande: oltre 13 marche di dispositivi, ogni marca con molti modelli, ogni modello con molti tipi di guasto (schermo, batteria, porta di ricarica, fotocamera, danni da acqua…), più 5 negozi e un flusso di prenotazione / preventivo. La struttura è di fatto un albero molto ampio e profondo: marca × modello × guasto × negozio.

L'header predefinito del tema non regge quell'albero. Su desktop è una barra menu piatta; su mobile è invece un hamburger drawer costruito a parte. Due esperienze diverse, due logiche diverse — chi è abituato al desktop, passando al mobile deve imparare tutto da capo. Un sito web grande con un header debole rende l'intero sito difficile da navigare, e il cliente che ha fretta perché il dispositivo è guasto abbandona ancora più facilmente.

Cosa risolve Navi+

La proposta non era "aggiungere un menu" ma sostituire il ruolo dell'header principale con un sistema Navi+ unificato — un'unica fonte di struttura per ogni dispositivo, così che mobile e desktop parlino la stessa lingua di navigazione.

Desktop Mega Menu — sostituisce l'header desktop, comprime tutto il sito in un unico punto

Il Mega Menu sostituisce la barra menu predefinita su desktop: tutte le marche × tipi di guasto vengono raccolte in una struttura con colonne chiare e immagini. Un sito web grande diventa facile da scorrere in un solo passaggio del mouse — il cliente vede subito quali marche e quali guasti lo store ripara, invece di dover provare a cliccare ogni pagina marca per marca.

Slide Menu — sostituisce il menu mobile, stessa struttura del desktop

Su mobile, lo Slide Menu sostituisce l'hamburger predefinito e usa la stessa struttura del mega menu: il cliente scorre per livelli marca → modello → guasto. Poiché la fonte è la stessa, mobile e desktop sono coerenti — non serve costruire e mantenere due menu separati, e il cliente non deve reimparare quando cambia dispositivo.

Tab Bar — completa il nuovo header con le azioni sempre a portata di mano

La Tab Bar fissata in basso sullo schermo mobile mantiene sempre disponibili le azioni importanti: Prenota, Negozi, Chiama, Menu. Insieme allo Slide Menu, sostituisce anche il resto dell'header predefinito — il cliente ha una barra di navigazione compatta, alla giusta portata del pollice, invece di dover risalire in cima alla pagina.

Il risultato a cui puntare

Quando l'header principale viene sostituito da un sistema Navi+ unificato, un sito web molto grande diventa facile da navigare, e cosa più importante — l'esperienza su mobile e desktop diventa una sola. Il cliente impara una volta, e la usa ovunque.

  • L'header predefinito è sostituito da un unico sistema di navigazione Navi+.
  • L'albero grande del sito (marca × modello × guasto) viene compresso in pochi passaggi chiari.
  • Mobile e desktop sono coerenti perché attingono a un'unica fonte di struttura.
  • Meno lavoro di manutenzione: niente più due menu separati per due dispositivi — senza dover cambiare tema.

Principi da ricordare

Punti applicabili alla maggior parte dei siti web grandi e a più livelli — non solo a Heater.

  • L'header è la spina dorsale di un sito grande: più il sito è grande, più l'header deve essere forte — Navi+ può ricoprire quel ruolo.
  • Un'unica fonte di struttura per ogni dispositivo: mobile e desktop attingono allo stesso albero di categorie per essere sempre coerenti.
  • Comprimi un sito grande in pochi passaggi: mega menu + slide menu trasformano centinaia di pagine in un percorso breve.
  • Sostituisci l'header, non il tema: migliora la navigazione senza dover rifare lo store 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.