Hamburger icon non è il demonio #ux #responsive

In diversi articoli e tweet ho espresso apprezzamento per l’icona simbolo del processo responsive. Questo però non significa che l’icona usata per raffigurare il menù di navigazione fosse la soluzione ad ogni problema. Fino a qualche tempo fà tutta la rete osannava questa soluzione, ora (come spesso accade) l’hamburger è al centro del mirino e chiamato in causa in tantissimi articoli del settore.

Era ovvio (almeno per me) che le tre-linee-orizzontali potessero essere usate sono in alcuni contesti, cosi come è ovvio che ora non può essere l’origine di tutti i mali. Questo è successo perchè in preda alla tendenza, molti designer hanno scelto di comprimere intere navigazioni sotto un solo simbolo. L’unica cosa certa è che a livello utente la cosa ha sempre funzionato (e secondo me funziona ancora), ma và usata con criterio. Sicuramente l’utente riconosce l’hamburger come simbolo di navigazione in mobilità e questo per gli sviluppatori responsive è ancora un punto fermo.
La cosa interessante è capire come poter ripensare la navigazione delle pagine in mobilità, sforzandosi di capire cosa serve all’utente in quel momento e soprattutto in relazione al dispositivo da cui stà fruendo le nostre pagine.

Per capire meglio l’argomento vi rimando all’articolo preso dai designer di Tradesy.com un portale e-commerce molto conosciuto.
Nell’articolo si parla dell’icona hamburger e di come il suo uso indiscriminato sia una minaccia. Ma la cosa interessante non è questa, quanto il processo che ha portato gli sviluppatori a ripensare la navigazione utente su dispositivi mobili.

Le cose principali sono sostanzialmente 2:
- chiederci cosa all’utente serve quando naviga il sito in mobilità
- non sforzarci di comprimere tutta la navigazione (o mappa del sito) nel menù principale.

In effetti, indipendentemente dalla soluzione che adottiamo (icona hamburger, dropdown, tabs o altro), dobbiamo sforzarci di dividere la navigazione in base all’utente e al device. Chiediamoci ad esempio se la pagina “Chi siamo” in mobilità possa essere davvero utile all’utente che da smartphone vuole solo vedere un prodotto e magari acquistarlo.
E’ sensato spostare questo link magari nel footer o in qualche altra posizione secondaria? Se la risposta è si è possibile che anche altre voci possano essere “declassate” lasciando il focus sulle azioni principali del sito.

Nell’articolo vengono mostrate anche delle soluzioni interessanti per andare in profondità sulle categorie merceologiche per far apprezzare all’utente la profondità dei prodotti offerti. Tutto però parte da una severa razionalizzazione del menù principale che passa a contenere 3 azioni principali: Shop, Sell e Find (tramite la sola icona).

Sicuramente è un’ottima tecnica che centra il focus su sole 3 azioni, ma nel caso specifico non diminuisce il numero di click utili ad una scelta prodotto.
Ad esempio adottando l’icona hamburger l’utente avrebbe potuto lanciare una sidebar che contenesse tutte le categorie merceologiche.
Si tratta di una soluzione simile in termini di numero di click, ma a mio avviso qualsiasi utente veda l’icona capisce che deve cliccare per vedere la navigazione.