Menu hamburger: esempi nell’ecommerce e vantaggi

Con un numero sempre maggiore di persone che utilizzano lo smartphone per fare acquisti online, è fondamentale che i siti web siano ottimizzati per i dispositivi mobili e facili da usare. Il problema è che lo spazio sullo schermo di un telefono è limitato. Se gli elementi di navigazione del tuo sito sono ammassati o confusi, è probabile che i visitatori se ne andranno per comprare altrove.

Ecco perché molti siti web e applicazioni ricorrono al coltellino svizzero della navigazione mobile: il menu hamburger. La semplice icona a tre linee è diventata il simbolo internazionale per indicare che "qui trovi altre opzioni di navigazione", racchiudendo il menu di un sito in un unico pulsante ben visibile.

Vediamo più nel dettaglio la forza e le insidie del menu hamburger: la sua storia, le caratteristiche principali e come utilizzarlo in modo efficace nel design del tuo sito mobile.

Cos'è un menu hamburger?

Per anni, il metodo standard di navigazione dei siti web è stato il menu orizzontale, cioè una fila di parole per ciascuna categoria che si estendeva nella parte superiore dello schermo. Ma con l'esplosione della navigazione mobile tra la fine degli anni 2000 e l'inizio degli anni 2010 (alimentata dai progressi nella tecnologia degli smartphone e nella connettività internet mobile), i web designer avevano bisogno di una soluzione più efficiente in termini di spazio.

Ed ecco il menu hamburger (☰), una semplice icona costituita da linee orizzontali parallele impilate (il pane, se vogliamo) che racchiudono una linea centrale (l'hamburger vero e proprio), che consente agli utenti di espandere e comprimere le opzioni di navigazione quando serve. Di solito il pulsante del menu hamburger si trova nell'angolo superiore sinistro o destro del sito web o dell'applicazione.

La storia del menu hamburger

In realtà il menu hamburger è precedente ai dispositivi mobili. Nei primi anni '80, il designer Norm Cox lo creò per l'interfaccia grafica utente della workstation Xerox Star, precursore della prima interfaccia dell'Apple Macintosh. Cox voleva un'icona semplice e riconoscibile che aprisse con un clic un elenco di elementi selezionabili.

Dopo la sua introduzione iniziale, il menu hamburger ebbe un utilizzo limitato e fu in gran parte dimenticato fino alla diffusione capillare degli smartphone intorno al 2009. La necessità di presentare le opzioni di menu su schermi piccoli senza sovraccaricare gli utenti rese l'ordine compatto dell'icona del menu hamburger una soluzione ideale.

La popolarità del menu hamburger fu consacrata quando Twitter e altre applicazioni per smartphone lo adottarono, seguiti dal suo utilizzo in Memo Vocali sull'iPhone 3GS e nel relativo iOS 4, consolidando il suo ruolo di simbolo familiare per la navigazione nascosta.

Vantaggi e svantaggi del menu hamburger

I menu hamburger sono ideali per i dispositivi mobili, ma le barre di navigazione e i menu a schede possono servire meglio gli utenti da computer. Ecco perché:

Vantaggi

Le dimensioni compatte dell'icona hamburger sono la sua ragion d'essere. Consente di risparmiare prezioso spazio sullo schermo e di alleggerire il design del sito, in particolare su schermi più piccoli come quelli degli smartphone. Facendo clic o toccando l'icona hamburger si rivela la navigazione del sito, tramite un menu a scomparsa, un menu a discesa o un overlay a schermo intero. Tutto ciò può migliorare l'esperienza cliente su mobile.

Svantaggi

Se da un lato il vantaggio in termini di spazio è innegabile, dall'altro c'è chi sostiene che i menu hamburger nei browser da computer possano ostacolare la reperibilità dei contenuti. Se gli utenti non hanno familiarità con l'icona del menu, potrebbero non notarla affatto, trascurando contenuti o opzioni di navigazione importanti del sito.

Per ovviare a questo problema, valuta l'implementazione di template di design responsive con strutture di menu diverse per dispositivi diversi. Un sito web potrebbe mostrare una tradizionale barra di navigazione orizzontale su computer, ma passare a un menu hamburger sui dispositivi mobili per risparmiare spazio sullo schermo.

Esempi concreti: menu hamburger in azione

Spesso noterai che a un sito web è stato applicato un design responsive, per cui il menu hamburger appare solo nella versione mobile mentre nella versione da computer compare uno stile di menu diverso. Ecco un paio di siti di ecommerce che utilizzano i menu hamburger in modo efficace:

TCB Jeans

TCB Jeans mantiene uno stile semplice con un classico pulsante di menu hamburger a tre linee nella parte superiore del sito mobile. Cliccandolo, un elenco di link scorre verso l'esterno dal lato sinistro, con voci come Home, Prodotti e Chi siamo. Il link Prodotti presenta accanto un piccolo segno più, a indicare che toccandolo ci sono altre opzioni.

Anche il sito da computer di TCB presenta un menu hamburger, che lascia spazio a una fotografia di sfondo a tutta larghezza e a promozioni accattivanti che rubano la scena. Nella versione mobile, il menu hamburger si apre come overlay, offrendo agli utenti un segnale visivo che indica che il menu può essere nascosto, rivelando la pagina retrostante. Il design del menu hamburger di TCB è:

• Pulito. Ammassare i pulsanti di menu su un piccolo schermo di telefono è una cattiva idea. Meglio nasconderli nel menu hamburger.
• Familiare. L'hamburger è comune sui siti mobili, quindi non confonde la maggior parte degli utenti.
• Lascia che siano i prodotti a rubare la scena. Nascondendo il menu dietro il pulsante hamburger, le foto dei prodotti risaltano di più, valorizzando gli articoli in vendita.

Gymshark

Il sito di Gymshark è un ottimo esempio di come un sito da computer possa differire dalla sua versione ottimizzata per i dispositivi mobili. Su computer non c'è alcun menu hamburger; su mobile, invece, il menu hamburger compare nell'angolo in alto a sinistra. Toccandolo si rivelano una casella di ricerca e i sotto-menu delle categorie di prodotti. Per tornare alla home page, basta toccare l'icona X in alto a destra.

Il menu hamburger di Gymshark funziona bene perché dà priorità a ciò che conta di più, mostrando prima offerte e nuovi capi per un coinvolgimento immediato. È anche familiare, con il pulsante del menu collocato dove ci si aspetta e un elenco semplice e facile da capire.

Consigli per un menu hamburger efficace

• Rendilo sempre visibile
• Attieniti all'icona hamburger standard
• Dai priorità alla gerarchia delle voci di menu
• Punta sulla compatibilità mobile e sull'accessibilità
• Aggiungi animazioni e feedback visivi
• Fai dei test e raccogli feedback

I proprietari di siti web che utilizzano i menu hamburger possono tenere a mente questi sei consigli per migliorare l'esperienza utente e aumentare i tassi di conversione:

Rendilo sempre visibile

Nella maggior parte dei casi, il menu hamburger è piccolo. Assicurati che sia comunque facile da individuare. Posizionalo nell'angolo in alto a sinistra o in alto a destra dello schermo, dove gli utenti tendono a guardare. E mantieni una collocazione coerente in tutte le pagine del sito.

Attieniti all'icona hamburger standard

Usa le tre linee orizzontali parallele universalmente riconosciute (☰) per il tuo menu hamburger. Queste icone sono ormai diffusissime e la maggior parte degli utenti ne comprende immediatamente la funzione.

Dai priorità alla gerarchia delle voci di menu

Organizza le voci del menu in modo logico. Potresti aggiungere una casella di ricerca e poi ordinare dall'alto verso il basso le categorie o le pagine più importanti e visitate.

Punta sulla compatibilità mobile e sull'accessibilità

Assicurati che il menu funzioni bene su tutti i dispositivi mobili e touchscreen. Le voci di menu devono essere abbastanza grandi da poter essere toccate facilmente con un dito.

Aggiungi animazioni e feedback visivi

Mentre l'utente interagisce con il menu, effetti sottili offrono segnali visivi. Per esempio, le linee possono ruotare e trasformarsi in una X o in un + per indicare l'apertura e la chiusura. Le linee possono cambiare spessore o espandersi leggermente. Effetti di dissolvenza e movimento aggiungono profondità mentre l'utente interagisce. Oppure, puoi cambiare il colore o farlo rimbalzare leggermente al tocco.

Fai dei test e raccogli feedback

Prima di finalizzare il tuo menu hamburger, testalo su utenti reali. Osserva come interagiscono con esso e raccogli i loro feedback.

Usa un menu hamburger insieme ad altri strumenti di navigazione

A volte il modo migliore per migliorare l'usabilità di un sito è combinare pulsanti e menu diversi. Ogni tipologia ha i suoi punti di forza e di debolezza, ma se usate insieme possono creare un'esperienza utente più fluida ed efficace.

I web designer di ecommerce possono usare combinazioni che facilitano la scoperta dei prodotti, con un accesso chiaro e diretto al carrello e al processo di checkout. Verifica che tutti gli elementi di navigazione siano facilmente toccabili sui touchscreen. Prova combinazioni diverse per capire cosa funziona meglio per il tuo pubblico di riferimento:

• Navigazione superiore più hamburger. Usa la navigazione superiore per categorie e funzioni essenziali come shop e carrello, riservando il menu hamburger per accedere a funzioni di navigazione meno frequenti come Chi siamo, Contatti, Assistenza clienti e Condizioni. In questo modo la schermata principale resta pulita, ma fornisce comunque un accesso rapido alle pagine necessarie.
• Navigazione a schede più hamburger. Usa la navigazione a schede all'interno di una pagina di categoria di prodotti per filtrare o ordinare gli articoli, per esempio Nuovi arrivi, Più venduti e Ordina per prezzo. Ciò consente agli utenti di affinare rapidamente la ricerca dei prodotti dopo aver usato il menu hamburger per la navigazione generale del sito.
• Header fisso più hamburger. L'header fisso contiene collegamenti rapidi essenziali alle categorie principali e rimane nella parte superiore dello schermo mentre scorri. Il menu hamburger verrebbe usato per le pagine secondarie.

Per esempio, il sito di Fly by Jing utilizza un menu hamburger per le selezioni di menu generali, ma la pagina dello shop vera e propria usa un menu a schede con quattro opzioni ("Sauces", "Sets", "Pantry" e "Merch") per un ulteriore affinamento.