Menu di hamburger nella progettazione di siti Web

Chiunque utilizzi Internet ha probabilmente visto dozzine di esempi di menu di hamburger su Internet. Questa semplice icona a tre righe è tra i pulsanti più riconoscibili oggi. Molti siti Web lo utilizzano per nascondere elementi di navigazione spesso robusti e risparmiare spazio. Tuttavia, nonostante la loro utilità, i menu Hamburger nella progettazione di siti Web sono ancora tra le opzioni di progettazione Web più discutibili . Per alcuni, è una soluzione genuina che dovrebbe trovare la sua strada interamente in tutti i design reattivi. Per altri, è uno sfortunato effetto collaterale che deriva da un'errata interpretazione del design strutturale pratico.

Un'introduzione ai menu Hamburger nella progettazione di siti Web

Non esclusivamente, ma i menu degli hamburger si trovano solitamente su siti Web e app reattivi quando si adattano a schermi di piccole dimensioni. Che si trovino sul lato sinistro o destro, designer e sviluppatori professionisti utilizzano hamburger manus per risparmiare spazio prezioso. Questa è una soluzione popolare perché nascondono la navigazione principale per lasciare più spazio per il resto del contenuto . Ma non tutti pensano che sia una soluzione appropriata. Molti affermano esattamente il contrario.

Per aiutarti a capire meglio il menu dell'hamburger, qui discuteremo:

• Cosa sono i menu dell'hamburger
• Il concetto di menu Hamburger nella progettazione di siti Web
• La controversia che c'è dietro
• Implementazione alternativa
• Pro e contro generali dei menu Hamburger nel design del sito web

Cosa sono i menu degli hamburger?

In poche parole, un menu di hamburger è un'alternativa semplice e più piccola alle grandi barre di navigazione . Fondamentalmente funge da cassetto in cui puoi posizionare tutto dalla navigazione che ingombra il tuo sito web. I menu degli hamburger hanno generalmente l'aspetto di tre linee una sopra l'altra. Il nome deriva dalla sua evidente somiglianza con gli hamburger.

Tutto è iniziato nel 1981. presso la workstation Xerox Star. Norm Cox, il progettista dell'interfaccia utente grafica dell'epoca, creò un'icona per aprire un elenco di elementi nascosti. L'intento era quello di dare una soluzione alternativa salvaspazio alle lunghe liste di opzioni . Qualcosa di simile al menu concettuale del tasto destro del mouse sui computer desktop. Ma, fino al 2009, il menu dell'hamburger non ha avuto molta gloria. Solo quando Facebook e pochi altri siti Web lo hanno introdotto di nuovo, il menu dell'hamburger ha iniziato il suo viaggio. Era una soluzione quasi perfetta per risparmiare spazio prezioso sullo schermo sui dispositivi mobili allora emergenti.

Ma, vero?

L'eterna discussione sul menu dell'hamburger

L'intento del creatore originale era quello di creare qualcosa di semplice ma efficace. Un piccolo pulsante che ridurrà il disordine seguendo lo stesso principio alla base del menu di scelta rapida. Doveva essere simile, memorabile e facile da usare. Ed è, anche nella sua forma attuale per la quale non era originariamente destinato.

Tuttavia, non tutti condividono lo stesso entusiasmo quando si parla di menù per hamburger . Molti designer lo criticano perché nasconde la parte più importante della navigazione del sito web. Di conseguenza, i visitatori avranno difficoltà a trovarlo. Consigliano di utilizzare il menu Hamburger solo quando sono presenti più di quattro elementi di navigazione nel menu. D'altra parte, queste affermazioni potrebbero cambiare in futuro poiché la maggior parte delle persone si sta già abituando all'aspetto e al funzionamento dei menu degli hamburger.

Utilizzo e implementazione alternativi

Oltre alla regola dei "quattro elementi" , ci sono altri suggerimenti su come migliorare l'usabilità del menu degli hamburger.

• Combina il menu dell'hamburger con altre funzionalità . Ad esempio, puoi posizionare la funzione di ricerca e il menu dell'hamburger uno accanto all'altro.
• Usa segnaposto di diverse forme , bordi e colori per rendere più distinguibile l'"hamburger" .
• Trova un posizionamento alternativo che non sia necessariamente uno degli angoli.
• Crea un menu di hamburger fluttuante con una posizione fissa una volta che i visitatori iniziano a scorrere la pagina.

L'idea è quella di fornire un design pulito ma distinguibile conveniente per gli utenti mobili indipendentemente dalle dimensioni dello schermo del dispositivo.

Generale Pro e contro dei menu Hamburger nel design del sito web

Dal punto di vista dell'esperienza utente (esperienza utente), i menu degli hamburger possono essere un'arma a doppio taglio. Sebbene possa funzionare nella maggior parte delle situazioni, in altre può creare confusione. Per capire quando usarlo, è meglio controllare tutti i Pro e i Contro dei menu dell'Hamburger.

Professionisti:

• Il menu dell'hamburger riduce il disordine : funziona quando conta di più. L'uso corretto dello spazio a volte può significare tutto per i siti Web e le app mobili. Considerando le dimensioni dello schermo a tua disposizione, tutto ciò che può darti più spazio va bene. Inoltre, troppi elementi sullo schermo possono solo distrarre i visitatori dal prestare attenzione al contenuto giusto.
• Mantiene la navigazione comprensibile – Quasi tutti oggi capiscono a cosa serve quando vedono il menu dell'hamburger. Siamo esseri visivi e notare un'icona che assomiglia a tre linee orizzontali in una colonna è facile. Soprattutto se ci ricorda uno dei pasti veloci più amati. Pensa solo a quante icone e loghi del marchio conosci per nome.
• Può essere un'ottima opzione per mantenere l'elemento di navigazione secondario fuori mano : non esiste una regola che dice che è necessario posizionare l'intera navigazione nel menu dell'hamburger. Molto spesso, una delle soluzioni migliori è quella di lasciare gli elementi di navigazione principali sul sito Web e posizionare tutte le altre opzioni secondarie nel menu dell'hamburger. Questo fondamentalmente prende il meglio da entrambi i mondi e serve ancora al suo scopo.

Contro:

• La navigazione importante non è visibile : quando trasformi la tua navigazione in un menu di hamburger, la rendi quasi invisibile. Alcune ricerche confermano che il coinvolgimento del sito Web può diminuire notevolmente per questo motivo. In altre parole, alcune persone non faranno clic ulteriormente perché non attirano immediatamente la loro attenzione.
• Non tutti lo capiscono, meno probabilmente, ma ci sono ancora visitatori che incontrano per la prima volta i menu degli hamburger. Può sembrare familiare, ma non abbastanza motivante, o autoesplicativo, per fargli fare l'azione. Lo lasceranno così com'è perché non ci sono altre indicazioni su a cosa serve. Questo sta cambiando, ma a volte può essere non intuitivo. Soprattutto quando i designer usano troppa libertà e la rendono completamente astratta. Oppure lo stesso "hamburger" non distingue abbastanza visivamente.
• Il menu dell'hamburger richiede uno "sforzo" aggiuntivo da utilizzare - Anche se può sembrare sciocco, ma, tecnicamente, un menu dell'hamburger richiede alcuni passaggi in più rispetto alla normale navigazione. Per non parlare del fatto che non tutti possono raggiungerlo con i pollici tenendo il telefono in una mano.

Qualunque sia la tua opinione soggettiva, non dimenticare mai di considerare quale sia l'opzione migliore per i tuoi utenti. Potrebbero piacerti i menu degli hamburger ma, comunque, finisci per non usarli se le circostanze non sembrano giuste. Oppure puoi odiarlo completamente, ma potrebbe essere la soluzione migliore per il tuo sito Web o app. Ricorda che la corretta applicazione di hamburger manus nella progettazione di siti Web potrebbe essere situazionale e diversa da caso a caso . Per vedere se fa per te, esegui alcuni test A/B e guarda cosa ne pensa il tuo pubblico.