Come risolvere il problema dell'icona Hamburger
L'icona dell'hamburger, tre piccole barre utilizzate per indicare un collegamento a un menu, è una delle tecniche più controverse sul Web in questo momento. I progettisti, ci dicono, lo odiano tutti; i clienti, lo diciamo a tutti, lo odiamo anche noi. Perché allora, è ovunque?
L'icona dell'hamburger è facilmente scalabile e si adatta perfettamente a una griglia di pixel. In origine era un'icona di lista che è stata inserita nel suo ruolo attuale, ma dal momento che un menu è semplicemente un elenco di opzioni, è semanticamente corretto utilizzare l'elemento della lista in questo modo.
C'è stata un'enorme quantità di dibattiti, test A / B, blog rant e studi sugli utenti condotti sull'argomento, ma questi studi si concentrano quasi sempre sulla progettazione di app. Quando l'icona dell'hamburger viene utilizzata nel web design indica un problema molto più significativo.
Il problema con l'icona dell'hamburger
Ci sono molti designer che mettono in discussione il valore dell'icona dell'hamburger stesso. Viene spesso visto come icona di stile iOS anche se è stato utilizzato in questo modo prima che Apple lo adottasse.
Esistono infatti molte prove contrastanti sul fatto che l'icona dell'hamburger sia utilizzabile come indicazione di un menu. Alcuni progettisti sostengono che l'icona è facilmente riconosciuta da una fascia demografica più giovane, altri suggeriscono che una demografia più anziana la riconosce in caso di web-literate. L'unica conclusione che possiamo trarre da queste prove è che i test di usabilità si sono rivelati inconcludenti, con test paralleli che spesso hanno prodotto risultati contraddittori.
Ciò che è universalmente accettato è che gli utenti non riconoscono l'icona di hamburger come un singolo collegamento, probabilmente perché è progettato per apparire come un gruppo di collegamenti, piuttosto che una singola cosa. Qualcosa che è supportato è che circondando l'icona dell'hamburger con un bordo, o dandogli uno sfondo, in modo che appaia più simile a un pulsante, oserei dire, più skeuomorphic, comporterà più clic.
Altri problemi con l'icona dell'hamburger
Oltre al design dell'icona stessa, anche l'approccio all'utilizzo dell'icona di un hamburger è pieno di problemi.
Innanzitutto, e forse più significativamente, l'icona dell'hamburger aggiunge un'azione supplementare alla tua navigazione; quando dovrebbe richiedere un clic per raggiungere una determinata pagina, ora ne occorrono due. La regola empirica per i web designer è sempre stata un massimo di tre clic (laddove possibile), così lontano dalla risoluzione di un problema di navigazione, la tecnica dell'icona degli hamburger semplicemente scambia un problema con un altro. Certo, non è solo un problema per l'icona dell'hamburger, è un problema per qualsiasi navigazione presentata in questo modo. Puoi usare la parola 'Menu' al posto dell'icona dell'hamburger e avrai lo stesso ostacolo, la differenza è che l'icona dell'hamburger non può essere utilizzata in nessun altro modo.
La tecnica dell'hamburger nasconde anche i suoi contenuti. Da un punto di vista UX, gli utenti non dovrebbero dover intraprendere un'azione per scoprire quali azioni possono intraprendere. È fin troppo facile dimenticare di "condividere su Twitter" o "andare alla cassa", quando quelle opzioni non sono immediatamente di fronte a te. Gli utenti semplicemente non andranno alla ricerca di un link che non conoscono.
Infine, la tecnica dell'icona degli hamburger nasconde lo stato attuale del tuo sito e la posizione dell'utente in esso. Gli stati giù in un menu forniscono informazioni contestuali a un utente che oscura la tecnica dell'icona dell'hamburger.
Che cosa fa l'icona dell'hamburger?
Dato che l'icona dell'hamburger è universalmente odiata e genera una serie di problemi, perché viene utilizzata ovunque?
Nella mia esperienza, certamente tra alcuni dati demografici, l'icona dell'hamburger ha recentemente raggiunto il punto di essere facilmente riconosciuta. Gli studi che confutano che tendono ad essere un anno o più vecchio e un anno è un tempo lungo sull'interweb.
Infatti l'icona di collegamento è molto più riconoscibile dell'icona di collegamento o dell'icona di condivisione , le cui forme definitive devono ancora emergere. L'icona dell'hamburger è coerente con qualsiasi numero di disegni diversi.
La cosa più importante è che l'icona dell'hamburger fa quello che si prefigge di fare: ci fa risparmiare una tonnellata di spazio sullo schermo. Se un cliente ti presenta un elenco di articoli gagillion che devono essere aggiunti a un menu, spostarli fuori dallo schermo e collegarli a loro è un modo crudo, ma efficace per creare spazio per il contenuto che il cliente desidera anche.
Mi piacerebbe dire che l'icona dell'hamburger risolve il problema meglio di altre soluzioni, ma non è vero. Invece dirò che l'icona dell'hamburger risolve il problema meno male di altre soluzioni.
La radice del problema
L'icona dell'hamburger tende ad essere utilizzata perché i progettisti, o più spesso i clienti, non sono pienamente impegnati in un approccio mobile-first. Vogliono un sito 'normale', ma spremuto sul telefono del loro nipote.
Gli avversari dell'icona dell'hamburger tendono a sostituirlo con la parola "Menu": così facendo, mancano completamente il punto. L'icona dell'hamburger ha, piaccia o no, acquisito il suo significato ora, ma gli utenti che comprendono a cosa serve il pulsante non risolvono il problema più grande, ovvero nascondere la nostra navigazione, nascondere le opzioni dei nostri utenti, è un terribile atto di sé -sabotaggio.
In breve, l'icona dell'hamburger è un sintomo del nostro fallimento collettivo per abbracciare con tutto il cuore tutti gli aspetti dell'approccio mobile-first.
Una soluzione migliore
Per risolvere il problema dell'hamburger, dobbiamo accettare che il Web come lo conosciamo non funziona. L'aumento del Web mobile significa molto di più che ridurre il numero di colonne che utilizziamo e rilasciare alcuni dei file di immagine più pesanti.
Il Web mobile viene utilizzato in un modo diverso rispetto alla rete del vecchio. Il Web mobile esiste nel contesto di app dedicate e gli utenti si aspettano che il Web sia vissuto in modo simile.
L'app di Facebook ha notoriamente scambiato l'icona dell'hamburger con una barra delle schede, e di conseguenza ha visto un miglioramento delle conversioni. Ma Facebook ha fatto qualcosa di molto più significativo dei progetti di menu di swap. Recentemente hanno rilasciato la loro app Messenger e il grosso problema è che avevano già un'app perfettamente funzionale e popolare con cui avrebbero potuto integrare la messaggistica. Facebook ha suddiviso in compartimenti le loro funzioni, concentrando il ruolo di ciascuna app in due app semplici, anziché una complessa. La ridotta funzionalità si traduce in un ridotto insieme di opzioni di menu e in una minore necessità di un menu di hamburger.
Le buone app sono molto focalizzate e si sono evolute in questo modo attraverso test degli utenti molto più rigorosi di quelli a cui il Web è sottoposto. Per creare un'esperienza in stile app, è necessario semplificare i nostri siti, semplificare di nuovo e quindi semplificare un po 'di più. Se necessario, spezza la tua architettura in pezzi di dimensioni contenute, quasi in microsito. Quando presentiamo ai nostri utenti un semplice insieme di opzioni, il problema di un menu complesso non si pone mai.
Fare uso dell'icona dell'hamburger è come schiaffeggiare un cerotto su un infortunio: lo rattoppa, ma sotto qualcosa è ancora rotto.
Solo se adottiamo pienamente un approccio mobile-first e lo applichiamo non solo al nostro design, ma ai nostri contenuti e alla nostra architettura dell'informazione, consegneremo il menu dell'hamburger alla storia.
Immagine in primo piano / miniatura, usi Immagine di hamburger via Mononc 'Paul