Come creare il perfetto Burger Button

Il Burger Button è il bottone che apre un menu ed è usato soprattutto per i menù di un sito web in versione mobile. Per convenzione è rappresentato con l’icona formata da 3 linee. L’idea per questo post viene dal libro “Inclusive Design Patterns” di Heydon Pickering.

Perché se le persone conoscono già le regole del gioco, imparano a navigare su internet più velocemente. Le convenzioni fanno risparmiare tempo e riducono lo stress durante una ricerca sui siti web. Riducono il tempo necessario al nostro cervello per elaborare i dati. È un po’ come andare in autostrada e impostare la velocità massima a 130 km/h.

Ok, ma sono una persona creativa, non posso inventare qualcosa anch’io? In merito posso citare una frase di Mark Boulton: “Leave creativity to the bad designers. This is not the place to do something different. If a convention exists, use it.”

• Solo icona: si potrebbe aggiungere un’indicazione leggibile solo con Screen Reader, ma si può fare meglio;
• Icona + Label: basta aggiungere l’etichetta “MENU” per rendere più riconoscibile il Burger Button;
• Icona + Label + Bordo: aggiungendo anche un bordo, il Burger Button sembra proprio un bottone. In generale, tutti i bottoni dovrebbero sembrare bottoni, altrimenti si perde la loro affordance. Migliora l’accessibilità e anche l’usabilità in generale.

Ci sono poi altre versioni più complete come:

• Menu espandibile con label “More ↓” (NHS)
• Menu desktop con Label “↓ Topics” (GOV.UK)
• Menu mobile con Label “↓ Menu” (GOV.UK)

I tag ARIA sono utili proprio per migliorare l’accessibilità nel momento in cui mancano alcuni elementi a livello di codice HTML. Ad esempio, nella versione 1 del Burger Button con l’icona e basta, manca un testo che descrive l’azione del bottone. Senza alcun suggerimento, il bottone non sarebbe riconoscibile dagli Screen Reader. In questo caso basta aggiungere un tag aria-label.

Paradossalmente potrebbe andare bene la versione 1. Credo che dipenda anche dal target e dalla posizione del Burger Button. In generale, credo che la cosa importante sia fare in modo che il Burger Button sia riconosciuto come un bottone che apre un menu. Se possibile, sarebbe importante fare un po’ di ricerca UX.