Ecco cosa succede quando salti uno dei cinque elementi essenziali del menu: un cliente arriva sulla tua pagina prodotto da Instagram, decide di comprare, cerca l’icona del carrello, non la vede, assume che il tuo negozio sia rotto e se ne va.
Non è un’ipotesi. Ho visto registrazioni di sessioni dove gli utenti scrollavano freneticamente cercando un carrello nascosto in un menu mobile collassato. Hanno rinunciato dopo 8 secondi.
I nuovi proprietari di negozi spesso pensano troppo alla navigazione—aggiungendo pagine personalizzate, banner promozionali e nomi di categoria intelligenti—mentre dimenticano le basi. Questa guida copre i cinque elementi del menu che devono essere visibili e accessibili dal momento in cui il tuo negozio va in diretta, prima di preoccuparti di qualsiasi altra cosa.
- Home, Collezioni, Ricerca, Carrello e Account sono i cinque fondamentali—saltarne uno crea attrito
- L'80% degli acquisti da mobile coinvolge l'icona del carrello entro i primi 30 secondi di navigazione
- La ricerca converte 2-3 volte più della navigazione per categorie, anche nei negozi piccoli
- Il posizionamento conta: desktop e mobile richiedono layout diversi per gli stessi cinque elementi
- La coerenza visiva (icone, colori, etichette) aiuta i visitatori di primo accesso a orientarsi in meno di 5 secondi
Elemento 1: Home (l’ancora della tua navigazione)
Il link Home è la via di fuga del tuo cliente. Ovunque atterri—pagina prodotto, post del blog, pagina collezione—ha bisogno di un percorso chiaro per tornare al punto di partenza.
Perché importa
Secondo la ricerca dell’Istituto Baymard sull’usabilità della navigazione, il 43% degli utenti si aspetta che il logo colleghi alla homepage, e un altro 12% cerca specificamente un link “Home” nel menu. Se nessuno dei due esiste, si sentiranno disorientati.
Pensala così: in un negozio fisico, i clienti possono sempre tornare all’ingresso. Online, il link Home svolge quella funzione. Senza di esso, i clienti che vogliono ricominciare o esplorare categorie diverse non hanno un modo ovvio per ricominciare.
Dove posizionarlo
Desktop:
- Il logo nell’angolo in alto a sinistra dovrebbe sempre collegare alla homepage (questa è una convenzione web così radicata che gli utenti non ci pensano nemmeno)
- Opzionalmente includi “Home” come primo elemento nel tuo menu di navigazione principale, soprattutto se il tuo logo è piccolo o astratto
Mobile:
- Il logo in alto ancora collega a home
- Se usi una barra di schede in basso, includi un’icona Home dedicata (di solito un simbolo di casa) come prima o centrale
- Nei menu di scorrimento in stile hamburger, “Home” dovrebbe essere il primo elemento dell’elenco
Errori comuni
Non rendere il tuo logo non cliccabile. Alcuni temi o design personalizzati disabilitano il link del logo per motivi estetici—questo rompe le aspettative degli utenti e frustra i visitatori.
Inoltre, evita l’ambiguità: se il tuo logo è un monogramma o un simbolo astratto, gli utenti potrebbero non riconoscerlo come elemento di navigazione. Aggiungere un’etichetta “Home” visibile elimina la confusione.
Elemento 2: Collezioni (la struttura del tuo catalogo)
Le collezioni (anche chiamate Categorie o Negozio) sono il modo in cui i clienti sfogliano i tuoi prodotti. Qui l’organizzazione fa la differenza tra un’esperienza buona e una cattiva.
Perché importa
La ricerca sull’usabilità del Nielsen Norman Group ha scoperto che il 50% degli utenti preferisce sfogliare per categorie piuttosto che cercare, anche quando sanno cosa vogliono. Stanno esplorando, confrontando e scoprendo opzioni.
Per i nuovi negozi con 10-100 prodotti, collezioni chiare riducono l’affaticamento decisionale. Invece di presentare “Tutti i prodotti” (travolgente), guidi i clienti verso un sottoinsieme che corrisponda alla loro intenzione: “T-shirt da uomo”, “Regali sotto i 50 euro”, “Novità”.
Dove posizionarlo
Desktop:
- Barra di menu orizzontale principale in alto, direttamente sotto o integrata con l’intestazione
- Usa menu a discesa per sottocategorie se le hai (ad es. “Abbigliamento” si espande per mostrare “Top”, “Fondo”, “Capispalla”)
- Per negozi con 30+ prodotti, considera un mega menu che mostra sottocategorie in un layout multi-colonna
Mobile:
- Il menu hamburger rimane lo schema più comune, ma assicurati che l’icona sia etichettata (il testo “Menu” accanto all’icona a tre righe migliora la scopribilità del 20%)
- La barra di schede in basso funziona bene per negozi con 4-6 collezioni principali—dedica una scheda a ogni categoria principale
- Evita di nascondere tutte le collezioni dietro un’icona senza etichetta; visualizza almeno 1-2 collezioni chiave visibilmente
Come organizzare le collezioni
Usa il linguaggio del cliente, non il gergo interno. Se vendi caffè, organizza per tipo di tostatura (“Tostatura leggera”, “Tostatura scura”) o origine (“Etiope”, “Colombiano”), non per codici SKU o nomi di fornitori.
Limita le collezioni di primo livello a 5-9 elementi (il punto dolce cognitivo). Troppo poche e i clienti devono scavare in menu multi-livello; troppi e sperimentano il parallelismo della scelta.
Testa la tua struttura chiedendo a qualcuno che non conosce i tuoi prodotti di trovare un articolo specifico. Se esitano o indovinano male, le tue etichette hanno bisogno di chiarezza.
| Tipo di negozio | Buona struttura collezioni | Scarsa struttura collezioni |
|---|---|---|
| Abbigliamento | Donna, Uomo, Bambini, Accessori, Saldi | Prodotti, Vestiario, Altro, Nuovo, Vedi tutto |
| Articoli per la casa | Salotto, Camera da letto, Cucina, Esterno | Categoria A, Categoria B, Bestseller, Vario |
| Bellezza | Cura della pelle, Trucco, Cura dei capelli, Attrezzi, Bundle | Tutti gli articoli, Popolare, In primo piano, Negozio |
Elemento 3: Ricerca (anche per piccoli cataloghi)
Molti nuovi proprietari di negozi presumono che la ricerca sia solo per grandi cataloghi. Sbagliato. Anche con 20 prodotti, i clienti usano la ricerca—e convertono a tassi molto più alti quando lo fanno.
Perché importa
La ricerca sull’e-commerce 2024 dell’Istituto Baymard ha scoperto che il 30% dei visitatori usa la ricerca del sito e questi ricercatori convertono da 2 a 3 volte di più rispetto a chi non ricerca. Perché? Perché sanno già cosa vogliono. Il tuo compito è aiutarli a trovarlo rapidamente.
La ricerca rivela anche cosa i clienti stanno cercando. Se “polvere proteica vegana” riceve 40 ricerche al mese ma tu vendi solo proteine del siero, hai identificato un gap nella tua linea di prodotti.
Dove posizionarlo
Desktop:
- Angolo in alto a destra dell’intestazione (convenzione universale)
- Sempre visibile—non nasconderlo dietro un’icona a meno che lo spazio non sia estremamente limitato
- Usa un campo di input di ricerca con un’icona di lente d’ingrandimento, non solo un’icona (il campo segnala “puoi digitare qui”)
Mobile:
- L’icona della lente d’ingrandimento nell’intestazione è accettabile; toccandola dovrebbe aprire un overlay di ricerca a larghezza intera o espandere un campo di input
- In alternativa, dedica una scheda in una barra di schede inferiore alla ricerca (comune nelle interfacce di stile app)
- Posiziona la ricerca in primo piano nei menu hamburger—idealmente secondo elemento dopo “Home”
Nozioni di base sulla funzionalità di ricerca
La ricerca predefinita di Shopify gestisce bene le corrispondenze esatte ma ha difficoltà con i refusi, i sinonimi e le query parziali. Ad esempio, la ricerca di “tshirt” potrebbe non restituire i prodotti contrassegnati “t-shirt”.
Per i nuovi negozi, il valore predefinito è abbastanza buono per iniziare. Ma una volta raggiunto 50+ prodotti o notato alti tassi di ricerca senza risultati nella tua analittica, valuta l’upgrade a un’app di ricerca come Searchanise, Boost Product Filter o Instant Search+. Questi aggiungono completamento automatico, tolleranza dei refusi e filtri (prezzo, colore, taglia).
Traccia le query di ricercaRivedi la tua analittica di ricerca mensilmente. Le query ad alto volume ti dicono cosa i clienti vogliono. Le query senza risultati ti dicono cosa ti manca. Entrambi gli insegnamenti sono mina d'oro per la pianificazione dell'inventario.
Elemento 4: Carrello (il tuo motore di ricavi)
L’icona del carrello è il gateway per il checkout. Se i clienti non riescono a trovarla istantaneamente, perdi vendite. È così semplice.
Perché importa
Uno studio dell’Istituto Baymard ha scoperto che il 18% degli abbandoni del carrello si verifica perché gli utenti non potevano accedere facilmente al loro carrello. Su mobile, dove l’icona del carrello potrebbe essere nascosta in un menu hamburger o nascosta dietro un’intestazione collassata, questo problema si moltiplica.
I dati del commercio Shopify 2025 mostrano che l’80% degli acquisti da mobile coinvolge il cliente che tocca l’icona del carrello entro i primi 30 secondi di navigazione. È un punto di riferimento—i clienti controllano cosa hanno aggiunto, confrontano i totali e decidono se continuare a comprare o procedere al checkout.
Dove posizionarlo
Desktop:
- Angolo in alto a destra dell’intestazione, accanto o vicino alla barra di ricerca
- Sempre visibile, mai nascosto
- Mostra un badge con il numero di elementi nel carrello (ad es. un piccolo cerchio con “3” sovrapposto all’icona del carrello)—questo fornisce un feedback istantaneo e incoraggia i clienti a rivedere il loro carrello
Mobile:
- L’angolo in alto a destra rimane lo standard
- Se usi una barra di schede inferiore, dedica una scheda al carrello (di solito la posizione più a destra)
- Usa un’icona del carrello appiccicosa che rimane visibile mentre gli utenti scrollano—non lasciare che scompaia
Design dell’icona del carrello
Usa un simbolo universalmente riconosciuto: una borsa della spesa o un carrello della spesa. Non essere creativo con icone astratte che gli utenti devono interpretare.
Il badge che mostra il conteggio degli elementi è critico. Senza di esso, i clienti non sanno se il loro clic “Aggiungi al carrello” è stato registrato. Con esso, ricevono una conferma visiva immediata, il che riduce l’ansia e l’abbandono del carrello.
Elemento 5: Account (accesso al login e al profilo)
L’accesso all’account è spesso trascurato nei nuovi negozi, ma è essenziale per i clienti di ritorno e per costruire la fedeltà.
Perché importa
I visitatori di primo accesso potrebbero non aver bisogno dell’accesso all’account immediatamente, ma i clienti di ritorno sì. Vogliono controllare la cronologia degli ordini, aggiornare gli indirizzi di spedizione, gestire gli abbonamenti o accedere agli articoli salvati.
Nascondere il login dell’account dietro più clic segnala ai clienti che non apprezzi i loro affari ripetuti. Crea anche attrito per i programmi fedeltà, le liste dei desideri e le esperienze personalizzate.
Dove posizionarlo
Desktop:
- Angolo in alto a destra, di solito accanto all’icona del carrello
- Usa un’icona di persona o un link di testo “Account” / “Login”
- Una volta effettuato l’accesso, mostra il nome del cliente o le iniziali (costruisce familiarità e fiducia)
Mobile:
- Angolo in alto a destra accanto al carrello, oppure
- Includi “Account” come elemento nel menu hamburger (vicino alla parte superiore)
- Se usi una barra di schede inferiore, l’account può occupare uno dei 5 slot di scheda, anche se il carrello e la ricerca in genere hanno priorità
Considerazione di checkout ospite
Non ogni cliente vuole creare un account prima di acquistare. Assicurati che il tuo checkout supporti il checkout ospite (abilitato di default in Shopify). Il link Account è per chi vuole effettuare l’accesso—non forzarlo sui compratori di primo accesso.
Strategie di posizionamento: desktop vs mobile
I cinque elementi rimangono gli stessi su tutti i dispositivi, ma il loro layout deve adattarsi alle dimensioni dello schermo e ai modelli di interazione.
Layout desktop
Anatomia dell’intestazione desktop standard (da sinistra a destra):
- Logo (collega a Home)
- Menu di navigazione principale (Collezioni)
- Barra di ricerca
- Icona Account
- Icona Carrello
Questo layout sfrutta il modello F del movimento degli occhi—gli utenti scansionano da sinistra a destra nella parte superiore, quindi gli elementi critici vivono in quella striscia superiore.
Layout mobile
Mobile richiede una prioritizzazione. Non puoi adattare comodamente cinque elementi in un’intestazione stretta senza creare disordine.
Opzione A: Intestazione + Hamburger
- Intestazione: Logo (Home), Icona Hamburger, Icona Carrello
- Menu hamburger contiene: Collezioni, Ricerca, Account
Opzione B: Intestazione + Barra di schede
- Intestazione: Logo (Home), Icona Carrello
- Barra di schede inferiore: Home, Collezioni, Ricerca, Account, Carrello
Le barre di schede funzionano particolarmente bene per negozi con 4-6 collezioni principali perché mantengono la navigazione visibile e accessibile al pollice senza richiedere tocchi extra.
| Layout | Pro | Contro | Migliore per |
|---|---|---|---|
| Intestazione + Hamburger | Familiare, risparmia spazio | Nasconde le collezioni dietro un tocco | Negozi con molte sottocategorie |
| Intestazione + Barra di schede | Sempre visibile, thumb-friendly | Limitato a 5 schede | Negozi con 4-6 collezioni principali |
| Ibrido (Barra di schede + Menu di scorrimento) | Bilancia visibilità e profondità | Richiede più riflessione sul design | Cataloghi da medio a grande |
Coerenza visiva: icone, etichette e colori
Una volta posizionati i cinque elementi, assicurati che siano visivamente coerenti in modo che gli utenti possano riconoscerli istantaneamente.
Icone
Usa icone standard, universalmente riconosciute:
- Home: Simbolo di casa
- Ricerca: Lente d’ingrandimento
- Carrello: Borsa della spesa o carrello della spesa
- Account: Silhouette di persona o cerchio con iniziali
Non usare icone astratte o personalizzate che richiedono interpretazione. Ogni secondo che un cliente spende a capire cosa significhi un’icona è un secondo in cui non sta facendo shopping.
Etichette
Accoppia le icone con etichette di testo quando possibile, specialmente su desktop dove lo spazio lo consente. “Carrello” accanto a un’icona di borsa della spesa rimuove l’ambiguità.
Su mobile, le icone da sole sono accettabili per carrello e ricerca (ampiamente riconosciute), ma valuta l’etichettatura di elementi meno ovvi come Account (“Login” o “Profilo”).
Colori e contrasto
I tuoi elementi di navigazione dovrebbero risaltare dal resto della pagina senza scontrarsi con il tuo brand.
- Rapporto di contrasto minimo: 4,5:1 per testo e icone (usa WebAIM Contrast Checker per verificare)
- Stati di passaggio: Su desktop, le icone e i link dovrebbero cambiare colore o sottolinearsi al passaggio in modo che gli utenti sappiano che sono cliccabili
- Stati attivi: Quando un cliente aggiunge un articolo al carrello, l’icona del carrello dovrebbe animarsi brevemente o evidenziarsi per confermare l’azione
Tutto insieme: esempi reali
Vediamo come diversi tipi di negozi implementano i cinque elementi essenziali.
Esempio 1: Piccolo brand di abbigliamento (30 prodotti)
Desktop:
- Logo (Home) — in alto a sinistra
- Menu principale: Donna, Uomo, Saldi — barra orizzontale
- Barra di ricerca — in alto a destra
- Icone Account, Carrello — angolo in alto a destra
Mobile:
- Intestazione: Logo, Hamburger, Carrello
- Menu hamburger: Home, Donna, Uomo, Saldi, Ricerca, Account
Esempio 2: Negozio di articoli per la casa (80 prodotti)
Desktop:
- Logo (Home) — in alto a sinistra
- Mega menu: Salotto, Camera da letto, Cucina, Esterno (ognuno si espande per mostrare sottocategorie)
- Barra di ricerca — in alto a destra
- Icone Account, Carrello — angolo in alto a destra
Mobile:
- Intestazione: Logo, Carrello
- Barra di schede inferiore: Home, Negozio, Ricerca, Account, Carrello
- Toccando “Negozio” si apre il menu di scorrimento con l’intero albero di categorie
Esempio 3: Negozio di prodotti digitali (5 prodotti)
Desktop:
- Logo (Home) — in alto a sinistra
- Menu semplice: Corsi, Template, Bundle — barra orizzontale
- Barra di ricerca — in alto a destra (anche con soli 5 prodotti, i clienti potrebbero cercare per parola chiave)
- Icone Account, Carrello — angolo in alto a destra
Mobile:
- Intestazione: Logo, Menu, Carrello
- Menu hamburger: Home, Corsi, Template, Bundle, Account
- Ricerca dentro il menu hamburger
Strumenti per implementare questo senza codice
La maggior parte dei temi Shopify include questi cinque elementi standard, ma il loro posizionamento e visibilità variano.
Dawn, Sense e Refresh (temi gratuiti di Shopify) supportano:
- Link del logo alla home (automatico)
- Menu di navigazione principale (configura in Online Store → Navigation)
- Barra di ricerca (abilita nelle impostazioni del tema)
- Icona del carrello con conteggio elementi (integrato)
- Link Account (integrato)
Per un maggiore controllo—soprattutto per layout specifici del mobile come le barre di schede—considera un’app di navigazione come Navi+ Menu Builder. Ti permette di configurare la navigazione desktop e mobile separatamente, aggiungere icone, personalizzare i colori e visualizzare in anteprima le modifiche prima di pubblicare, tutto senza scrivere codice.
La tua checklist di implementazione di 5 minuti
Usa questa checklist per controllare la configurazione del tuo menu attuale:
- Home: Il tuo logo collega alla homepage? C’è un elemento di menu “Home” visibile su mobile?
- Collezioni: Le tue categorie principali sono visibili nell’intestazione (desktop) o accessibili con un tocco (mobile)?
- Ricerca: La barra di ricerca è sempre visibile su desktop? È accessibile con un tocco su mobile?
- Carrello: L’icona del carrello è nell’angolo in alto a destra? Mostra un badge con il conteggio degli elementi?
- Account: C’è un link di login/account chiaro nell’intestazione o nel menu principale?
Se una risposta è “no”, dai priorità a risolverlo questa settimana. Questi non sono bello da avere—sono la base di un negozio funzionante.
Ottenere i cinque elementi essenziali giusti non farà titoli, ma convertirà silenziosamente più visitatori in clienti. Inizia qui, quindi aggiungi in livelli funzioni avanzate (mega menu, raccomandazioni personalizzate, supporto multi-valuta) una volta che le basi sono solide.
Questo articolo è parte della guida più ampia su Nozioni di base sulla navigazione per il tuo primo negozio online: i 5 elementi essenziali.