Tab Bar VS Hamburger menu

L’era del Hamburger menu è finita nel 2014, quando Apple ha letteralmente cestinato il concetto durante la sua conferenza annuale WorldWide Developers Conference (WWDC) a San Francisco, sollecitando gli sviluppatori ad utilizzare il Tab Bar nei loro progetti. Nel maggio di quell’anno, Tech Crunch ha pubblicato un articolo in cui proponeva di “Uccidere il tasto l’hamburger!” rif. “Kill The Hamburger Button“, chiamando l’icona a tre barre “il diavolo”, che abbassa l’engagement e nasconde le opzioni dall’utente. Nel 2015, anche Google ha iniziato a introdurre la “Bottom navigation”, analogo della Tab Bar di Apple, sulle sue piattaforme.

Abbiamo già scritto su questo elemento di design nell’articolo “Hamburger Menu: to use it or not to use it?” Naturalmente, questo tipo di menu è un ottimo modo per risparmiare spazio limitato sugli schermi dei cellulari, ma è anche meno intuitivo per l’utente.

Figura 1:Credit Instagram @alexmuench via @UITrends

Ecco una lista dei principali svantaggi:

• L’icona poco esplicativa (ancora alcuni utenti hanno difficoltà a riconoscere l’icona con tre barre);
• Meno intuitivo;
• Toglie dalla vista dell’utente molte funzionalità fondamentali;
• Meno visibile;
• Problemi di usabilità.

Nielsen Norman Group ha pubblicato uno studio secondo il quale la navigazione nascosta dell’Hamburger menu è meno evidente di quella visibile o parzialmente visibile di un sito web. Questo porta anche ad un aumento del tempo che l’utente impiega per navigare e completare un compito sulla piattaforma.

Ora, invece, vediamo alcuni dei vantaggi:

• Consente di semplificare la UI;
• Offre un layout più chiaro dell’interfaccia;
• Più spazio sullo schermo;
• Design semplice e pulito.

Anche se nel 2021 molte grandi aziende hanno rimosso l’icona hamburger dal loro design e hanno optato per una soluzione più intuitiva come la Tab Bar, in alcuni casi l’icona a tre barre è ancora la soluzione più adottata in parecchi progetti. È perfetta per le App progettate per risolvere un compito di base, come chiamare un taxi o ordinare del cibo, perché libera lo spazio per altri importanti elementi di layout.

Figura 2: Screenshot dell’app Uber, Ciao Spesa, it Taxi

Al contrario dell’Hamburger menu, la Tab Bar ha molti vantaggi che migliorano notevolmente la User Experience:

• non c’è bisogno di toccare un’icona per sapere dove si trova l’utente nell’app, è sempre visibile
• gli utenti vedono sempre tutte le opzioni di top-level navigation
• la Tab bar si trova in una zona facile da raggiungere con le dita da mobile, poiché è “Thumb-friendly”

Lo svantaggio principale di questo tipo di menu è il numero limitato di opzioni di navigazione, dato che solo da tre a sette icone possono essere posizionate nella barra, lasciandole chiaramente visibili agli utenti.
Un altro svantaggio di questo tipo di soluzione è che la barra inferiore occupa parte dello schermo e in alcuni casi questo può diventare critico per l’usabilità dell’app.

Questo tipo di menu richiede agli UX designer e agli sviluppatori dell’app di essere più selettivi riguardo la scelta delle icone che occupano la barra inferiore, perché lo spazio disponibile dello schermo del dispositivo mobile è molto limitato e non c’è modo di nascondere il menu infinito con tre barre come nel caso di Hamburger.

È qui che finalmente si pone la questione non della forma, ma del contenuto. Non bisogna dimenticare che il compito principale della navigazione in un’app è quello di aiutare l’utente a rispondere a queste tre domande:

• Dove sono?
• Dove posso andare?
• Cosa troverò se vado qui?

A questo punto la risposta migliore per le applicazioni mobile è sicuramente il Tab Bar menu, che impedisce all’utente di perdersi nella struttura della piattaforma. All’interno del concetto di Human-centered Design, l’uso intuitivo della navigazione gioca un ruolo cruciale nel garantire una migliore User Experience e, nella maggior parte dei casi, la Tab Bar è la soluzione migliore grazie alla sua presenza discreta ma costante sullo schermo. Questo permette all’utente di concentrarsi sul suo scopo principale e non distrarsi con gli strumenti (o la ricerca di quelli) per raggiungerlo.

“Più le app si comportano come ci aspettiamo, più sono intuitive per noi. Più le app sono intuitive per noi, più è facile per noi concentrarci sui nostri veri obiettivi”.
Mike Stern, Platform Experience and Design Evangelism Manager @Apple.

Lo stesso Mike Stern nel suo discorso “Designing Intuitive User Experiences” durante la WWDC del 2014 ha fatto l’esempio della penna.

Immaginate di ricevere una telefonata con una notizia fantastica: avete vinto una discreta somma di denaro. Per ottenere quei soldi, dovete chiamare il numero che vi hanno detto, e poi vi hanno riattaccato. Siete molto eccitati e avete paura di dimenticare il numero, quindi cercate una penna e un quaderno per scriverlo.
Finalmente trovate una penna e un pezzo di carta e riuscite a scrivere il numero che vi è stato dettato. Sembra abbastanza semplice, vero?

In effetti, in un tale momento di eccitazione potreste aver dimenticato il numero prima di trovare dove scriverlo o nella fretta potreste aver afferrato un oggetto che assomiglia a una penna, così da distrarvi e da sbagliare un paio di cifre.

Inoltre, avete usato l’abilità di scrivere, la capacità di tenere una penna in mano e la coordinazione del vostro sguardo e della mano, che in questo momento non ha richiesto alcuno sforzo mentale supplementare da parte vostra, perché questi processi sono già stati elaborati nel vostro cervello e avvengono intuitivamente. Questo è ciò che vi ha permesso di rimanere sull’obiettivo e di non dimenticare il numero agognato.

Usare le piattaforme digitali non è diverso.

Lo scopo principale del design intuitivo è quello di aiutare l’utente a concentrarsi sull’obiettivo centrale, rendendo l’app il più confortevole possibile, e una navigazione ben progettata gioca un ruolo cruciale in questo.

Nella maggior parte dei casi si opta per la Tab Bar menu, perché risulta più semplice all’utente di orientarsi dentro l’applicazione. Però bisogna sempre trovare la soluzione più adatta per ogni singolo progetto e in alcuni casi l’icona a tre barre può essere quella giusta.