<Altri articolifocus

Google sta (finalmente) facendo fuori il navigation drawer?

diFrancesco Baldan18 Marzo 2020

Qualche settimana fa Google ha annunciato con un certo entusiasmo i 15 anni di esistenza di Google Maps, uno dei servizi più usati e più apprezzati in tutto il mondo.

In occasione del compleanno sono state fatte alcune modifiche all’app - quella che più salta all’occhio è sicuramente la nuova icona - ma una in particolare ha creato scalpore: sono apparentemente scomparsi hamburger e drawer.

Momento, momento, momento, momento

Parla come mangi (ahah), cosa sono hamburger e drawer?

Ottima domanda! In effetti questi due nomi potrebbero creare un po’ di confusione, pur riferendosi a due elementi grafici che sono presenti in moltissime applicazioni che usiamo tutti i giorni, da anni.

Per hamburger menu, o, più precisamente, hamburger button, mi riferisco a quell’icona con tre barrette orizzontali che solitamente sta sempre in alto a sinistra nelle applicazioni. Il nome “hamburger” deriva dalla sua somiglianza ad un panino hamburger (un po’ di fantasia, suvvia), con le due righe in alto e in basso ad indicare le fette di pane, e quella centrale ad indicare l’hamburger.

Immagine esplicativa da parte di Google

Il drawer, o navigation drawer, è quell’elemento grafico che solitamente sbuca fuori da sinistra quando clicchiamo sull’hamburger. E contiene un sacco di cose interessanti, spesso link ad altre pagine dell’app o informazioni sull’account loggato.

E’ vero! Ce l’ho pure io quel tasto! / Aspetta, io quel tasto non lo vedo nelle app!

L’hamburger button e il relativo drawer sono elementi che si trovano facilmente nelle applicazioni Android, la stessa Google li ha inseriti, da parecchi anni, in una moltitudine di applicazioni. E così molti sviluppatori Android.

Non sono un’esclusiva del robottino verde, però, e si possono trovare quindi anche in alcune applicazioni iOS: Apple tuttavia ha da sempre preferito un’approccio a tab, piuttosto che l’utilizzo di un drawer, nessuna app sviluppata da Apple ha infatti un drawer (beh, forse l’app delle mail ha una cosa molto simile), nè tantomeno un hamburger button.

Anche le linee guida per lo sviluppo di app cambiano in base al sistema operativo: le specifiche per le app Android comprendono il componente Drawer, quelle Apple per iOS no. Ecco perchè molte app hanno stili diversi in base al sistema operativo per cui sono sviluppate: ad esempio l’app di Telegram ha il drawer su Android ma non ce l’ha su iOS. 

Infine, drawer e hamburger menù non sono un’esclusiva delle applicazioni mobile: si possono trovare anche nei siti web, soprattutto nelle loro versioni mobile.

E quindi Google starebbe rimuovendo il drawer dalle sue applicazioni?

Beh, forse. Ovviamente questo non significa che le app da ora in poi saranno più povere di contenuti: tutto ciò che c’era nel navigation drawer è stato spostato e reso disponile in altre parti delle app.

YouTube è stata una delle prime app di Google ad eliminare il drawer

Però qualche cambiamento in corso c’è. Abbiamo già parlato di Google Maps, che ha rimosso questo elemento grafico qualche settimana fa, ma non è l’unica app di Google ad averlo fatto.

Non sappiamo se YouTube sia stata la prima della lista, sicuramente una delle prime però: nel lontano 2015 (sì, sono già passati cinque anni) il drawer è stato sostituito da alcune tab posizionate appena sotto l’appbar. Nel frattempo l’app è stata aggiornata ancora (e ci mancherebbe, in cinque anni!) e ora le tab sono in basso, più facilmente raggiungibili.

Anche Google Fit una volta aveva il classico hamburger button che apriva un drawer, una volta. Ora è stato sostituito da una bottom navigation bar. Altre app stanno cambiando tutt’ora: ad esempio Google Ads mostra il drawer in certi casi, mentre una bottom bar in altri (in queste situazioni è probabile che Google stia facendo dei test server side, rilasciando il nuovo layout gradualmente e in maniera limitata).

Ma cos’ha di male ‘sto drawer?

Be’, ad essere sinceri c’è più di un motivo per cui il drawer, ma soprattutto l’hamburger menù, è un design pattern un po’ superato. Lo dicono i signori di Nielsen Norman Group (grandi esperti del settore), intanto, e il loro articolo è bello lungo, quindi qualcosa che non va evidentemente c’è.

Noi proviamo a spiegarlo in maniera un po’ più breve:

  • L’hamburger button è poco raggiungibile

    E per forza: gran parte delle volte si trova in alto a sinistra, il punto più lontano da raggiungere con il nostro bel pollicione destro. Inoltre, anche le voci più importanti del drawer saranno sempre in alto. Forse una volta il problema era meno marcato, ma negli ultimi anni i display degli smartphone si sono ingigantiti a dismisura, e ora questa cosa è diventata un problema.

  • Ci sono più operazioni di fare

    Anche questo potrebbe sembrare un problema da poco, ma un drawer ci costringe a fare due tap sullo schermo anzichè uno: uno sull’hamburger button per aprire il drawer e uno sulla voce che vogliamo cliccare. Problemi da terzo millennio, ma pur sempre problemi.

  • Non vediamo subito ciò che ci serve

    Gli elementi che ci servono sono nel drawer, e il drawer dov’è? Nascosto dietro alle cornici del nostro display. E finchè non facciamo tap sul bottone a forma di hamburger non salta fuori.

  • Nell’ultima versione di Android aprire il drawer trascinandolo è quasi impossibile

    Per aprire un classico drawer si può anche fare uno swipe (trascinare il dito, per i non addetti ai lavori) dal bordo sinistro del nostro smartphone verso destra. Questo è possibile da una moltitudine di anni MA… nell’ultima versione di Android, la stessa azione, lo swipe da sinistra verso destra, serve anche per tornare indietro. E quindi capita che si voglia aprire il drawer e si esca invece dall’app.

    Questo è un problema di accessibilità ma non causato dal drawer stesso, semplicemente a Google piace sperimentare senza risolvere i problemi che va a creare.

Io che dopo 112 tentativi riesco ad aprire il drawer con lo swipe nell'ultima versione di Android

Quali sono le alternative?

Ora che la reputazione di drawer e hamburger (button) è calata molto, vediamo insieme alcune alternative o alcuni miglioramenti che si possono apportare per migliorare sensibilmente l’usabilità di un’app.

Bottom Navigation Bar - Immagine da parte di Google

  • Una bella Bottom Navigation Bar

    Mostra solo gli elementi più importanti, è in basso e quindi facilmente raggiungibile dalle dita, è sempre visibile. E’ anche la soluzione che stanno adottando tantissimi per sostituire il drawer, ed anche Google la sta implementando estensivamente (da un po’ è entrata a far parte dei componenti ufficiali Material Design).

    Apple comunque la utilizza fin da iOS 3. Cioè più di dieci anni fa.

Bottom Navigation Drawer - Immagine sempre da parte di Google

  • Un Bottom Navigation Drawer

    Non sembra una grande innovazione, vero? In realtà questa soluzione mantiene tutti gli elementi grafici di cui abbiamo parlato fino ad ora, drawer e hamburger, ma con molti progressi nei confronti dei problemi che avevano: l’hamburger button è in basso e molto più raggiungibile, e il drawer, spuntando dal basso, mostra prima di tutto (e non troppo lontano dal basso) le voci più importanti, e solo poi quelle secondarie.

    Restano da fare due click anziché uno. Soluzione adatta quindi solo per le app usate da gente che non ha fretta.

Conclusioni

Alla fine di tutto, non sappiamo se Google farà il grande passo eliminando il drawer dalle sue applicazioni. Ma abbiamo visto che avrebbe più di un motivo per farlo, o perlomeno di sistemare qualche problema.

E lo stesso dovremmo fare noi tutti sviluppatori o proprietari di applicazioni: a nessuno piace usare un’applicazione che ci limita nell’uso anzichè agevolarci.

In molti lo stanno già facendo: a parte Google e Apple (che fin dall’inizio ha impiegato molta cura in questo) ci sono un sacco di app che negli anni hanno modificato la loro interfaccia utente per risultare sempre più semplice da usare. Parliamo di Spotify, Facebook, Instagram, Netflix, e molti, molti altri.

Ti è piaciuto questo articolo? Iscriviti alla nostra newsletter!