Sapevamo che la moda è un ciclo che dura 20 anni. Il design mobile ha un ciclo molto più veloce: 7 anni!
La prova è che con la "tabbar" questa barra di schede che era la stella della navigazione quando le applicazioni iOS sono state rilasciate nel 2008, è tornata ad essere la struttura applicativa più popolare per i lettori digitali.
Ti offro una retrospettiva delle modalità di navigazione per le interfacce mobili negli ultimi 7 anni, concentrandoti su 4 periodi principali della progettazione mobile.
Io-tempo : Il "tabbar"
La barra delle schede è stato il primo grande principio di navigazione su iOS. Questa ergonomia ha l'enorme vantaggio di essere estremamente semplice:
• spenton conosce la sua posizione nell'applicazione,
• abbiamo una vista delle altre sezioni accessibili.
I più grandi player del web avevano optato per questa ergonomia: l'Appstore, LeMonde.fr… e ovviamente Facebook. In qualità di designer mobile, la tabbar ha semplificato la creazione di applicazioni ben strutturate ed efficienti!
Ma questa modalità di navigazione presentava alcuni grossi difetti:
• occupava più del 10% dello schermo: 49 pixel sui 480 pixel offerti dall'iPhone 3G.
• non è stato possibile personalizzarlo. Siamo stati condannati a rimanere su una base nera e un'icona blu attiva che ha causato una forte insoddisfazione per i marchi con un rosso dominante ad esempio...
• La tabbar offriva un massimo di 5 slot, il che rappresentava un problema per un catalogo ampio o estremo in una semplice applicazione in cui c'erano solo 2 grandi sezioni.
Nel 2011 Facebook rivoluzionerà le applicazioni mobili introducendo un nuovissimo principio di navigazione:e Mozzo.
Tempo II : L'Hub
L'hub è una continuità di esperienza del telefono stesso: l'interfaccia dell'iPhone, ad esempio, è un hub esteso su più pagine.
Sembra del tutto naturale applicare questo concetto all'interno di un'applicazione stessa.
Facebook aprirà la strada con la sua V3. Gli altri grandi player digitali seguiranno progressivamente fino a che l'Hub non diventerà il principale standard di navigazione.
Citiamo i casi di Linkedin, Allociné e quasi tutte le applicazioni bancarie francesi.
L'hub sperimenterà miglioramenti con l'interfaccia Metro di Microsoft che offriva informazioni "calde" anziché icone.
Sintetico :
I vantaggi dell'Hub
- Una visione esauriente delle mie sezioni
- Facilità d'uso che rispetta l'uso nativo del telefono
Gli svantaggi dell'Hub
- L'hub appiattisce tutto senza concentrarsi sulla sezione principale dell'app.
- Un altro punto l'hub è freddo: non si evolve attraverso le notizie, che danno un'impressione di immobilità e applicazione senza vita.
- Infine l'Hub richiede una grafica di alta qualità altrimenti ci esponiamo alla "galleria degli orrori"
Tempo III : Il menu dell'hamburger
Facebook nella sua V.4 riprogetterà completamente la sua applicazione per iPhone con l'aspetto di un menu nascosto in cui troveremo tutto il contenuto, lasciando così la parte inferiore dello schermo al contenuto. Per Facebook, che genera oltre l'85% del suo pubblico con il feed delle notizie, questa struttura assume il suo pieno significato.
Nasce il menù hamburger!
Quasi tutte le applicazioni seguiranno Facebook: Linked-in, Allociné...
Questa struttura consente inoltre di condividere i costi dei design funzionali con l'iPad perché il menu laterale del tablet sarà posizionato come un menu a "L". Troviamo questa ergonomia su molti siti come amazon.com o facebook.com. tra gli altri.
Anche la struttura del menu hamburger ha un vantaggio: permette di aggiungere un numero infinito di categorie. Il menu dell'hamburger sarà molto popolare tra i commercianti di m e gli attori della stampa che hanno molte categorie da mostrare.
Comparirà presto un problema: gli utenti premono pochissimo su questo menù di hamburger e molte categorie vengono trascurate e osserviamo un calo di audience per le sezioni secondarie.
I vantaggi del Menù Hamburger
- Lascia più spazio possibile per il contenuto,
- Ergonomia condivisa con tablet,
- Promemoria: siti web in “L”,
- Consente di aggiungere un numero infinito di categorie.
Gli svantaggi di Menu hamburger
- L'impressione che il menu dell'hamburger sia solo un tappeto in cui si nasconde ciò con cui non si sa cosa fare.
In sintesi:
Fuori dalla vista, fuori dal mondo!
IV tempo : La Tabbar 2a generazione
Come preambolo a questa nuova versione della Tabbar, vi invito a leggere questo articolo:
– Perché abbiamo bandito il menu dell'hamburger dalla nostra app per iPhone –
https://redbooth.com/blog/hamburger-menu-iphone-app
In sintesi, questo servizio mobile BtoC è migrato dal Menu burger al Tabbar e ha osservato le seguenti cifre:
+ 70% tempo di utilizzo dell'app
------------
+65% apertura dell'applicazione
Facebook tornerà alla tabbar nel 2015, che gli consentirà, tra le altre cose, di mostrare la sua applicazione Messenger.
Questa tabbar V2 consente di visualizzare le notifiche sulle diverse sezioni per evidenziarle e premere per scoprirle.
Ora siamo liberi di progettarlo come meglio crediamo e di integrare i colori e i caratteri dei nostri clienti.
Una barra delle schede ideale offre solo 5 antipasti, ma è possibile aggiungere un "menu hamburger" come quinto antipasto, che mostrerà tutte le restanti categorie del servizio.
La barra delle schede diventerà molto rapidamente il nuovo standard per tutte le applicazioni.
Da Airbnb ad Allociné, da Linkedin a Voyages SNCF, quasi tutti i principali attori progettano la loro applicazione sotto questa architettura. Uno degli ultimi baluardi del menù degli hamburger è appena caduto con Spotify.
Per fare questo esercizio stiamo conducendo un workshop smistamento delle carte con i nostri clienti .
I vantaggi del Tabbar V2
- Mostra il contenuto principale,
- Consente all'utente di essere attratto da categorie secondarie tramite un sistema di notifica,
- Ergonomia dominata dalla grande maggioranza degli utenti,
- La tabbar può supportare il DNA del marchio tramite colori o pittogrammi.
Gli svantaggi del Tabbar V2
- La funzione schiena si allontana dalla zona di comfort per l'utente,
- La tabbar non è ovvia per una "traduzione" su Android perché è in conflitto con i pulsanti fisici del telefono.
Conclusione : Revisione e follow-up
Come abbiamo visto, il Tabbar è tornato ad essere uno standard. Ovviamente ci sono ancora attori importanti che non ci sono stati, e il più delle volte per ragioni pragmatiche. Ad esempio Monde.fr ha deciso di mantenere il menu dell'hamburger per costringere l'utente a vedere l'estensione del suo contenuto.
Possiamo notare spesso la presenza del menu burger anche nel caso di applicazioni single task: l'applicazione Camera o Slack che si concentra sul canale generale.
Quindi il prossimo? Ebbene se seguiamo la logica dovremmo rivedere il ritorno dell'Hub, ma il fallimento di Windows 10 e la tendenza è piuttosto verso un mix globale di queste strutture. Ci sono app fuori misura come Snapchat che beccano su tutti questi dispositivi.
Una delle novità che ho potuto apprezzare è la nuova versione di Parisien.fr che offre la navigazione per tag legati ad argomenti caldi nelle notizie. È un consumo immediato di contenuti: molto mobile friendly.
Quando osserviamo cosa si sta facendo su VR e più in particolare su Playstation VR, troviamo un derivato dell'HUB in modalità coverflow che aveva fatto il periodo di massimo splendore delle prime applicazioni mobili. È il ritorno di una tendenza? A suivre ...
Romain Landsberg, Partner e fondatore @UXRepublic
