Tutti i pollici, perché raggiungere la navigazione dovrebbe sostituire la barra di navigazione in iOS Design

La barra di navigazione è esclusa

UINavigationBar, in breve barra di navigazione, è in circolazione sin dall'iPhone originale. Storicamente, le navbar sono state comode e chiare, facili da capire e facili da costruire.

Quindi i telefoni si sono gonfiati, tanto che l'iPhone 7 Plus ha soppiantato le vendite dell'iPad mini. Ora, se possiedi un iPhone moderno, le barre di navigazione possono sembrare ingombranti - letteralmente fuori dal mondo.

Schermi in crescita significano che la distanza tra la barra di navigazione e i nostri pollici è cresciuta. Lo schermo su un 7 Plus è così alto che ci vorrebbe un aumento della lunghezza del pollice del 150 percento per raggiungere quei fastidiosi pulsanti con una mano. Solo un'altra o due nocche. Niente di strano.

Le Touch Zone di Hurff illustrano la raggiungibilità del pollice destro.

Man mano che i dispositivi cambiano, il nostro linguaggio visivo cambia con loro. È tempo di allontanarsi dalla barra di navigazione a favore della navigazione a portata di pollice. Ai fini di questo articolo, chiameremo Reach Navigation.

Perché la barra di navigazione è fuori dal mondo

Navbar è un pilastro dell'applicazione "standard di sistema", utilizzata in Telefono, Messaggi, Posta, Calendario e innumerevoli altri. Ci sono molte ragioni per cui ha guadagnato il favore:

  • iOS standard Apple ha creato la barra di navigazione per essere personalizzabile, scalabile, accessibile e facile da implementare. Poiché è uno standard iOS, è riconoscibile tra le app.
  • Navigazione I lati sinistro e destro della barra di navigazione offrono spazio per i pulsanti. L'area a sinistra spesso sposta gli utenti nella gerarchia e l'area a destra è in palio. Il pulsante Indietro informa gli utenti che non si trovano nella vista principale.
  • Titolo Fornisce una posizione coerente per il testo che definisce la funzione della vista. Poiché la barra di navigazione rimane sempre sullo schermo, aiuta a stabilire ulteriormente la gerarchia delle informazioni.
  • Compagno alla barra delle schede Se nella parte inferiore dello schermo è presente una riga di icone toccabili (ovvero una barra delle schede), posizionare altre icone nella parte superiore dello schermo aiuta a separare la relazione padre / figlio.
  • Logo Il tuo cliente può mettere un logo qui! Genio. Lol jk, lo trovo pacchiano, ma sto divagando.
Alcuni esempi di navbar per il tuo divertimento.

Oh mio Dio, tante ottime ragioni per usare una barra di navigazione nel tuo progetto. Tranne dannazione! Adesso è difficile alzare il pollice.

Stando così le cose, parliamo dei contro di Navbar:

  • È più difficile tornare indietro. Puoi scorrere dal bordo, a condizione che la vista in cui ti trovi non abbia nulla che scorra in orizzontale, ma se lo fa sei in città.
  • Dare un nome a tutte le opinioni è un dolore. Non tutte le schermate richiedono un titolo persistente e alcune richiedono etichette troppo lunghe per adattarsi. Lasciare un'area di navigazione vuota spreca spazio sullo schermo e sembra sterile.
  • La navigazione richiede due mani. Se riesci a tenere un dispositivo in una mano, dovresti essere in grado di utilizzare il dispositivo con una mano. Si sente meglio ed è più conveniente in un mondo pieno di carrelli della spesa da spingere e bambini da trasportare.
  • Le app semplici diventano più complesse del necessario. Le navbar tendono a condurre a un'architettura dell'informazione che scorre in profondità. È facile da sviluppare per la divulgazione progressiva orizzontale, il che significa che può essere una battaglia per espandersi in linea o utilizzare un foglio.

Tutto ok. Ora sappiamo come i navbar possono essere una schifezza. Quindi, cosa stiamo facendo?

Raggiungi la navigazione e Apple

Come designer iOS, questa è la parte in cui sostengo la mia tesi sottolineando come Apple stia già incorporando Reach Navigation. Pronto? Inizieremo con due dei modi ovvi in ​​cui Apple può ospitare schermi mobili più grandi.

Al posto di un pulsante Indietro, torna indietro scorrendo dal bordo sinistro.

Innanzitutto, non devi più premere il pulsante Indietro, puoi tornare indietro scorrendo dal bordo sinistro. Puoi anche controllare il movimento dello schermo mentre scorre all'indietro, permettendoti di sbirciare una schermata precedente prima di impegnarti. Non funziona in tutte le app, ma quando riesci a guardare la transizione dell'etichetta posteriore nel titolo, che è semplicemente bello.

Toccando leggermente due volte il pulsante Home si sposta il contenuto verso il basso.

In secondo luogo, iOS include una funzione chiamata Raggiungibilità, in cui i contenuti dello schermo si spostano verso il basso per aiutarti a raggiungere i pulsanti nella parte superiore quando si tocca leggermente due volte il pulsante Home. Funzionabile per ora, ma sembra una soluzione Bandaid.

Ora qui è dove la svolta verso Reach Nav diventa più evidente. Apple ha già iniziato a cancellare le loro app dalla barra di navigazione. Maps e Music hanno entrambi riprogettazioni strutturali per iOS 10 che hanno diminuito o rimosso la necessità di navbar.

Apple Music passa da iOS 9 (a sinistra) a iOS 10 (a destra). La rimozione della barra di navigazione ha consentito di aumentare le dimensioni dell'etichetta della vista principale. Bella.

Ora entrambe le app usano un foglio che puoi scorrere verso il basso per chiudere.

Apple Maps cambia da iOS 9 (a sinistra) a iOS 10 (a destra). L'interfaccia utente è quasi completamente invertita. Le impostazioni della mappa e il blocco sulla posizione corrente sono più difficili da raggiungere, mentre la ricerca e i risultati hanno la priorità.

Alcuni pulsanti posteriori in Apple Music sono sopravvissuti al blocco chop per iOS 10, ma sembrano contrassegnati per la rimozione in un sistema operativo futuro. È sciocco assegnare così tanto spazio orizzontale a un pulsante che occupa solo il 20 percento degli immobili. Apple Music è inoltre tornata a una semplice etichetta Back invece di descrivere la destinazione di ritorno, una pietra angolare della funzionalità del pulsante Indietro tramite la versione iOS 7.

Il pulsante Indietro in iOS 10 sta occupando molto spazio qui. Sembra temporaneo, no? Sì.

Quindi sembra che questa sia la direzione presa da Apple, che ti dà la possibilità di spostare i tuoi progetti di conseguenza.

Incorporando la portata di navigazione

Ecco alcuni dettagli su come incorporare Reach Nav nelle tue app. Se stai lavorando su:

Una nuova app che utilizza una barra delle schede:

  • Usa i fogli che compaiono dal basso e possono essere spazzati via.
  • Invece di mettere pulsanti importanti come Filtro o Cambia vista in alto, vedi se riesci a spostarli sopra la barra delle schede.
  • Fai delle conversazioni su quali funzioni sono fondamentali per la missione, prima di scegliere le schede per il tuo prezioso schermo immobiliare.
  • Non inserire un pulsante di destinazione, ad esempio Cerca, Carrello, Nuovo messaggio, nella barra di navigazione. Crea una scheda o incorporala nell'area del contenuto.

Una nuova app senza barra delle schede:

  • Prova un cassetto esposto come Maps o fogli come Mail.
  • Devo dirlo? Dai la priorità al posizionamento dei pulsanti nella parte inferiore dello schermo.

Un rinnovamento di un design legacy:

  • Sposta gli oggetti più usati in basso.
  • Assicurati di scorrere dal bordo dello schermo per tornare indietro funziona per tutte le viste.
  • Scopri cosa puoi annidare per liberare spazio nelle aree dello schermo più utilizzabili.
  • Rimuovi le azioni importanti dal punto in alto a destra della barra di navigazione e mettile altrove.
Una rapida interpretazione di come Safari potrebbe spostare la barra degli indirizzi in basso, rimuovere la barra degli strumenti e mantenere comunque la funzionalità.

Infine, ci sono alcune eccezioni nel mettere i pulsanti mission-critical a portata di mano. Se un'azione ha conseguenze gravi, spostare il pulsante fuori dalla portata è un modo per aiutare l'utente a evitare un errore. Quindi, se un caso di pollici grossi potrebbe costare a qualcuno migliaia di dollari o eliminare un documento importante, sposta un po 'quelle opzioni.

Esempi di Reach Nav in the Wild

Le nuove app Apple non sono gli unici prodotti che stanno iniziando a rispettare Reach Nav. Lyft e Pokémon Go mettono tutto a portata di mano.

Pokémon Go e Lyft utilizzano Reach Navigation.

Alcune altre app come Overcast hanno iniziato a utilizzare i fogli che consentono di scorrere verso il basso.

L'annuvolamento utilizza fogli che consentono agli utenti di scorrere verso il basso.

L'app Twitter per iOS rimuove la necessità di scorrere dal bordo dello schermo per tornare indietro, ora puoi scorrere da qualsiasi luogo.

Aspettati di vedere più app che spostano la funzionalità in basso nella parte più raggiungibile dello schermo. È abbastanza facile adattarsi, anche se le app con funzionalità eccessive avranno il maggior numero di problemi.

Resta in contatto

La barra di navigazione è stata una parte essenziale di iOS da quando Apple ha rilasciato il primo kit di sviluppo e ci ha aiutato bene. Ma è tempo di lasciarsi andare.

Accettiamo di smettere di attaccare pulsanti importanti nella parte superiore dello schermo. Una migliore navigazione è a portata di mano.

Brad Ellis è il fondatore di Tall West, un'agenzia di design i cui clienti includono Airbnb e Target. È vincitore dell'Apple Design Award e ha ricevuto due Webbys per la progettazione di app. Se ti piacerebbe lavorare insieme, mandalo a Brad su Tallwest.com.

Collaboratori: Ronan Rooney e Maggie Mason