Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
L’hamburger menu è un metodo di navigazione principale per siti web che raccoglie tutte le voci principali (ovvero le etichette che portano alle pagine) in una finestra. Che si apre quando clicco sull’icona composta da tre linee orizzontali. Le quali dovrebbero essere una stilizzazione di un panino composto da più strati. Da qui abbiamo la definizione di menu ad hamburger per siti internet. Ma secondo te funziona?
Il punto non è capire se questo sistema per gestire la navigazione interna sia o meno da evitare. Bisogna utilizzare l’hamburger menu nel modo giusto, quando serve e solo in queste occasioni specifiche. Che, lo anticipo, sono quelle tipiche della navigazione mobile: meglio evitare questo tipo di menu da desktop e preferirlo su smartphone e tablet. Quali sono gli altri dettagli da conoscere per applicare al meglio questo sistema?
Argomenti
L’hamburger menu è un’icona composta da tre linee parallele che ricordano la composizione di un panino. Viene utilizzata dalle interfacce grafiche per includere un sistema di navigazione composto da link che portano verso altre risorse. Nell’ambito del web design per siti internet, il menu ad hamburger si trova di solito nelle versioni mobile in alto a destra. Una volta cliccato, apre una finestra con etichette di navigazione che portano a pagine, categorie e sottocategorie.
L’inventore di questa icona, e del relativo sistema di navigazione nascosto, è Norm Cox: il designer propose questa soluzione nel 1981 per il sito della Xerox. L’hamburger button rimase in sordina fino ai primi anni 2000, quando iniziarono a diffondersi le versioni mobile friendly dei siti web: nel design responsive trovò la sua applicazione. Perché è una soluzione compatta e facile da gestire negli spazi stretti. Cosa sappiamo del menu con tre puntini in colonna verticale? Questo prende il nome di kebab button, in onore della somiglianza con il classico spiedino di carne.
Da leggere: come creare un menu di navigazione su WordPress
Di solito, l’icona delle tre linee orizzontali e parallele si trova nell’angolo in alto a destra. Ma questa soluzione dipende da tanti fattori, come ad esempio le impostazioni del template che di solito definisce in autonomia questi dettagli. In ogni caso, non è l’unica opzione possibile: il sito web del Governo, ad esempio, preferisce inserire la collapsed menu icon in una posizione completamente differente e anche dalla versione desktop.
Anche altri siti internet preferiscono lavorare in questa direzione, ovvero con icona del menu a sinistra. Ma che viene accompagnata da ulteriori link di navigazione per raggiungere le pagine più importanti. Come vedremo in seguito, questo può essere un buon compromesso per garantire la buona navigazione interna, tanto che lo stesso Amazon preferisce optare per questa combinazione. Ecco un esempio di menu ad hamburger.
Come possiamo immaginare, questa soluzione diventa fondamentale nel momento in cui ci troviamo di fronte a portali dalle dimensioni pachidermiche. Siti web con migliaia di pagine hanno grandi difficoltà a gestire un menu di navigazione completamente visibile. E anche i megamenu diventano strutture complesse. Quindi, può essere una buona soluzione immaginare questo tipo di sintesi per migliorare l’UX. E rendere un sito web più fruibile.
Il meccanismo è piuttosto semplice: quando clicchi o fai tap con il dito su questa icona appare un’area laterale o in sovrimpressione allo schermo con una lista di link. Che sono quelli necessari per navigare, e raggiungere sezioni differenti dell’app mobile o del sito internet. A volte, sotto all’icona dell’hamburger troviamo la dicitura Menu per aiutare a contestualizzare l’azione da svolgere. Una volta cliccato il menu, appare anche un sistema per chiudere la finestra che elenca i vari link: può essere una X o una freccia per tornare indietro, questo dipende dalle caratteristiche del template.
L’uso dell’hamburger button (o collapse menu icon) per attivare il menu di navigazione è, da sempre, punto di partenza per grandi dibattiti e riflessioni nel mondo dell’UX. Tutto è fondamentale per migliorare l’user experience di un portale, anche le performance del piano Hosting hanno un ruolo chiave.
Soprattutto per la UX del tuo sito. Ecco perché i nostri piani offrono macchine con performance elevate e le pagine dei siti internet partono da una base virtuosa: HTTP/2, HTTP Keep Alive, PHP aggiornato. Da qui si può costruire una buona user experience con tempi di caricamento brevi.
Hosting WordPress preinstallato e gestito con il 50% di sconto. Scopri la promo
Questo tipo di menu ha diversi pro e contro. Iniziamo proprio da quest’ultimi: questa soluzione riduce la visibilità delle varie sezioni incluse nell’area nascosta dopo il click o il tap. Come dimostrano le ricerche (dopo vedremo quali), le persone tendono a ignorare ciò che non si vede.
Ed è vero che non possiamo rendere tutto visibile in una navigazione complessa ma se si nascondono anche le aree principali c’è il rischio di peggiorare di molto la scoperta di nuove sezioni. Inoltre, non sempre è facile da utilizzare soprattutto per gli utenti che non hanno molta esperienza.
Però è anche giusto definire i vantaggi di questa soluzione: è perfetta per gli schermi piccoli e per organizzare grandi quantità di link legati alla navigazione. Mantenendo un’interfaccia utente pulita, bella da vedere soprattutto da mobile e in linea con il tuo progetto di web design.
L’articolo di Jackob Nielsen, il padre dell’usabilità sul web, dedicato all’uso dell’hamburger icon per nascondere la navigazione del sito internet è critico verso questa soluzione. Il motivo è semplice: questa opzione grafica è meno usabile rispetto a quella visibile. E offre un’esperienza utente peggiore.
Da desktop, nascondere i collegamenti con un hamburger menu incide negativamente sull’esperienza e la visibilità della navigazione più di quanto non accada da smartphone. Ad esempio, come puoi notare da questo grafico che sintetizza i dati della ricerca, da desktop gli utenti hanno utilizzato i menu nascosti nel 27% dei casi. Mentre hanno preferito l’opzione in chiaro o combinata rispettivamente nel 48% e nel 50% delle circostanze.
Sui dispositivi mobili, invece, gli utenti hanno utilizzato i link nascosti nel 57% dei casi e la navigazione combinata nell’86%. Questi dati hanno un unico significato: ciò che metti nel menu ad hamburger viene automaticamente nascosto. Quindi, di sicuro si consiglia di utilizzare un menu tradizionale da desktop, con etichette e anchor text comprensibili. Da mobile, invece, l’icona ad hamburger è più accettata e compresa ma Nielsen lancia una proposta: se il tuo sito ha fino a 4 livelli di primo livello, visualizzali come link statici. Con strutture più articolate procedi con un menu nascosto (tipo hamburger) aiutato dai principali link di navigazione visibili.
In primo luogo, l’idea è quella di inserire l’icona con le tre linee in un’area dell’header ben visibile e facile da cliccare in qualsiasi occasione. Di solito, le posizioni suggerite sono estrema sinistra o destra della sezione superiore. Tramite CSS è possibile applicare delle personalizzazioni estetiche?
Sicuramente. Ma in questi casi il consiglio è quello di rimanere quanto più fedeli a una condizione semplificata e intuitiva: una volta aperta la finestra del menu ad hamburger, si suggerisce di utilizzare etichette di navigazione semplice e intuitive, limitando il più possibile sottomenu.
