La grafica di un sito o di un’app non ha mai solo uno scopo estetico. La grafica ha l’importantissimo scopo di guidare gli utenti attraverso l’utilizzo della piattaforma. 

La User Experience (o UX) è l’esperienza che vive chi naviga sul tuo sito o sulla tua app dal momento dell’atterraggio fino all’uscita. Da che cosa è data una buona UX? Dall’insieme di tutti gli elementi grafici e testuali presenti: dai microcopy, alla palette di colori, per passare dalla struttura di ogni singola pagina. 

Se desideri sapere se le tue piattaforme hanno una buona User Experience, puoi leggere questo articolo. Qui troverai qualche consiglio per misurare la loro UX Maturity. 

C’è un elemento che forse più di tutti influenza l’esperienza di utilizzo degli utenti: il menu di navigazione. Si tratta di quella barra di navigazione che solitamente si trova nella parte più alta della piattaforma oppure in una spalla laterale accessibile cliccando su un… hamburger. 

Che cos’è un menu hamburger?

Il menu hamburger è un elemento di design utilizzato nelle interfacce utente dei siti web e delle applicazioni mobili. Cosa c’entrano gli hamburger? Tutto dipende dall’aspetto del pulsante che permette di accedere a questo tipo di menu: si tratta di tre linee orizzontali parallele, che ricordano la struttura di un panino. Due fette di pane con il ripieno al centro. 

Ci vuole un po’ di fantasia, ma una volta trovata l’analogia, tutto è più chiaro. 

La funzione di un pulsante a hamburger è semplice: apre un menu che non è immediatamente visibile e che contiene le opzioni di navigazione o delle impostazioni aggiuntive. Di solito il pulsante hamburger si trova nell’angolo destro o sinistro superiore della pagina e, una volta cliccato, attiva il menu che compare a discesa o lateralmente.

Si tratta di un design particolarmente utile per risparmiare spazio su dispositivi con schermi piccoli, come smartphone e tablet, mantenendo un aspetto pulito e organizzato.

Pro e contro di un menu hamburger

Il menu hamburger è ormai così diffuso che si tende a darlo quasi per scontato. Ci si aspetta di trovarlo sempre lì, nel suo angolino. Al di là della consuetudine, però, ragioniamo sui suoi effettivi benefici. 

• riduce le distrazioni visive. L’aspetto minimal del pulsante hamburger rende la navigazione sulla piattaforma più immediata. L’occhio dell’utente, infatti, non è distratto da troppi elementi e riesce a focalizzarsi meglio sui punti più importanti
• rende l’aspetto della piattaforma più ordinato e pulito
• permette di risparmiare spazio sui dispositivi mobili, con schermi di dimensioni ridotti. Un vantaggio non da poco, soprattutto sui device in cui avere qualche pixel di spazio in più può fare la differenza

Ci sono, però, anche alcuni svantaggi:

• in assenza di un menu di navigazione visibile, il menu hamburger impedisce agli utenti di visualizzare immediatamente i collegamenti più rilevanti, a discapito della fluidità di utilizzo
• spinge gli utenti a compiere uno sforzo aggiuntivo per trovare le informazioni che cercano. È necessario, infatti, fare clic sul pulsante hamburger prima di poter accedere alle voci di menu

Si può integrare un menu hamburger su desktop?

Abbiamo visto che il menu hamburger è ideale per gli schermi di dimensioni ridotte e per i device mobili. Vale lo stesso per la visualizzazione da desktop? 

Su questo punto è aperto un dibattito, secondo alcuni è sconsigliato integrarlo su desktop, per altri invece è possibile farlo. Sugli schermi di grandi dimensioni, infatti, non ci sono i problemi di spazio tipici di schermi più piccoli e non c’è motivo di nascondere il menu di navigazione. Tuttavia si può sempre integrare il menu hamburger, purché sia fatto in modo strategico: ad esempio, nel caso ci sia la necessità di guidare gli utenti su siti di dimensioni molto estese, con tante sezioni, è possibile pensare a un mix di menu hamburger e menu orizzontale visibile. 

Ora conosci le caratteristiche del menu hamburger. Lo utilizzi già sui tuoi siti?