Un primer sulla navigazione Android

Qualsiasi veicolo utilizzato da qualcuno per spostarsi tra le scene nell'interfaccia, questa è la navigazione

Non appena si collegano due schermate insieme in un'app, si ha la navigazione. Tale collegamento, qualunque esso sia, è il veicolo che trasporta gli utenti tra quegli schermi. E sebbene la creazione della navigazione sia relativamente semplice, la creazione della navigazione giusta per i tuoi utenti non è sempre semplice. In questo post daremo uno sguardo ad alcuni dei più comuni schemi di navigazione utilizzati su Android, su come incidono sulla navigazione a livello di sistema e su come mescolare e abbinare i motivi per adattarli alla tua interfaccia e ai tuoi utenti.

Definizione della navigazione

Prima di scavare in schemi di navigazione comuni, vale la pena fare un passo indietro e trovare un punto di partenza per pensare alla navigazione nella tua app.

Le specifiche di Material Design hanno alcune ottime indicazioni su come affrontare la definizione delle strutture di navigazione, ma ai fini di questo post possiamo ridurre tutto in due semplici punti:

  • Costruisci la navigazione in base a compiti e contenuti
  • Costruisci la navigazione per le persone

Costruire la navigazione in base alle attività e ai contenuti significa suddividere le attività che le persone eseguiranno e ciò che vedranno lungo il percorso e mappare le relazioni tra i due. Determina come le attività si relazionano tra loro - quali attività sono più o meno importanti, quali attività sono fratelli, quali nidificano l'una nell'altra e quali attività verranno eseguite più o meno spesso.

È qui che entra in gioco la navigazione per le persone: le persone che usano la tua interfaccia possono dirti se funziona per loro o no, e la tua navigazione dovrebbe essere costruita intorno aiutandole ad avere successo nella tua app.

Una volta che sai come funzionano insieme le attività nella tua app, puoi decidere quali contenuti gli utenti devono vedere lungo la strada e quando e come presentarla; questo esercizio dovrebbe fornire una buona base per decidere quali schemi meglio servire l'esperienza della tua app.

Trova indicazioni più dettagliate sulla suddivisione di attività e comportamenti per la navigazione nelle Specifiche del materiale.

🗂 Schede

Definizione

Le schede consentono di spostarsi rapidamente tra le viste dei fratelli all'interno della stessa schermata principale. Sono complanari, il che significa che possono essere trascinati in giro e vivono in una barra delle schede estensibile e identificabile.

Le schede sono ideali per filtrare, segmentare o fornire profondità ai contenuti correlati. Contenuti non correlati o contenuti con una gerarchia profonda possono essere meglio serviti utilizzando altri schemi di navigazione.

Trova tutti i dettagli sulla progettazione di schede qui e sull'implementazione delle schede qui.

Schede in azione

Riproduci musica, Google+, Riproduci edicola

Riproduci musica (sopra, a sinistra) utilizza le schede per aggiungere profondità alla libreria musicale, organizzando gli stessi contenuti generali in modi diversi per adattarsi a diversi mezzi di esplorazione.

Google+ (sopra, al centro) utilizza le schede per segmentare le raccolte, un singolo tipo di contenuto che porta a contenuti molto eterogenei più profondi nell'app.

Play Edicola (in alto a destra) utilizza le schede nella schermata Libreria per presentare diversi insiemi delle stesse informazioni: una scheda presenta una raccolta olistica a più livelli, mentre l'altra mostra un insieme condensato di titoli.

Storia

Le schede esistono su un livello insieme, all'interno della stessa schermata principale. Pertanto, la navigazione tra le schede non dovrebbe creare la cronologia né per il pulsante Indietro del sistema né per il pulsante Su dell'app.

Cassetti di navigazione

Definizione

Il cassetto di navigazione è generalmente un riquadro verticale attaccato al bordo sinistro della tela. I cassetti possono manifestarsi off-screen o on, persistenti o meno, ma condividono sempre alcune caratteristiche comuni.

In genere, il cassetto di navigazione elenca le destinazioni principali che sono pari o fratelli tra loro. Un cassetto nav può essere utilizzato in app con diverse destinazioni principali e alcune destinazioni di supporto uniche come impostazioni o aiuto.

Se si combina il cassetto con un altro componente di navigazione principale, ad esempio nav inferiore, il cassetto può contenere destinazioni secondarie o destinazioni importanti che non seguono direttamente nella gerarchia dal nav inferiore.

Quando utilizzi il cassetto di navigazione, tieni presente quali tipi di destinazioni stai presentando: l'aggiunta di troppe destinazioni o destinazioni che rappresentano livelli diversi nella gerarchia dell'app può creare confusione.

Inoltre, fai attenzione alla visibilità: il cassetto può essere utile per ridurre la visibilità o compattare la navigazione lontano dall'area principale del contenuto, ma ciò può anche essere uno svantaggio a seconda di come devono essere presentate e accessibili le destinazioni nella tua app.

Ottieni una guida dettagliata sulla progettazione del cassetto di navigazione qui e sull'attuazione qui.

Cassetti di navigazione in azione

Play Store, Google Camera, Posta in arrivo

Il Play Store (in alto a sinistra) utilizza il cassetto di navigazione per puntare a diverse sezioni del negozio, ognuna dedicata a un diverso tipo di contenuto.

Google Camera (sopra, al centro) utilizza il cassetto per le destinazioni di supporto: si tratta principalmente di destinazioni che aumentano l'esperienza di acquisizione, oltre a un percorso alle impostazioni.

Inbox (sopra, a destra) ha un cassetto di navigazione estensibile che può essere piuttosto lungo. Nella parte superiore sono presenti le destinazioni principali che presentano diversi segmenti della tua e-mail, mentre in basso sono presenti segmenti di supporto chiamati bundle.

Poiché il cassetto di navigazione in Posta in arrivo può richiedere così tanto tempo, le voci "impostazioni" e "aiuto e feedback" sono presentate in un foglio persistente, accessibile da qualsiasi parte del cassetto.

Storia

I cassetti Nav dovrebbero generalmente creare la cronologia per il pulsante Indietro del sistema quando l'app ha una destinazione "Home" distinta. Nel Play Store, la destinazione principale è la voce App e giochi, che in realtà presenta all'utente la navigazione a schede per visualizzare i contenuti evidenziati di tutti i tipi. Quindi il Play Store crea la cronologia per tornare a quella destinazione da altre aree dell'app.

Allo stesso modo Google Camera riporta gli utenti alla modalità di acquisizione primaria predefinita, meno qualsiasi aumento.

La voce

Lo stesso vale per Google Maps (sopra): qualsiasi destinazione nel cassetto viene presentata come uno strato in cima o come un potenziamento alla schermata della mappa principale, quindi il pulsante Indietro ci riporta a una lavagna pulita.

Potresti notare che il Play Store (sopra) non cambia l'indicatore del cassetto di navigazione nella barra degli strumenti in un pulsante "su" una volta che navighi verso una destinazione. Questo perché le destinazioni primarie nel riquadro sono su un livello uguale nella gerarchia di navigazione dell'app. Dal momento che non ti stai muovendo più a fondo nell'app selezionando "Film e TV" dal cassetto, non puoi andare più in alto. Sei ancora al livello superiore, solo su uno schermo parallelo.

Nav inferiore

Definizione

Su Android, il componente di navigazione inferiore è composto da tre a cinque destinazioni principali. È importante sottolineare che "altro" non è una destinazione. Né sono menu né finestre di dialogo.

La navigazione in basso funziona meglio quando la tua app ha un numero limitato di destinazioni di primo livello disparate (il nav in basso non dovrebbe mai scorrere) che devono essere immediatamente accessibili. Uno dei principali vantaggi di una "barra in basso" è la possibilità di passare istantaneamente da una schermata secondaria a una schermata principale non correlata, senza dover prima tornare al genitore corrente.

È importante notare che mentre le destinazioni nella barra in basso dovrebbero essere tutte uguali nella gerarchia di navigazione dell'app, gli elementi nella barra in basso non sono complanari come sono le schede e non dovrebbero essere presentati come tali.

Scorrere tra le destinazioni nella barra in basso suggerisce una relazione tra destinazioni che non esiste. Ogni destinazione dovrebbe essere un genitore discreto, non un fratello delle altre destinazioni. Se le destinazioni nella tua app sono simili o presentano contenuti simili, potrebbero essere più adatte alle schede.

Qui trovi indicazioni più dettagliate sulla progettazione del fondo navale e qui i dettagli di implementazione.

Nav in basso in azione

Google Foto

Il navigatore inferiore ha alcune considerazioni interessanti oltre la sua definizione di base. Probabilmente la più complessa è la nozione di quanto persistente dovrebbe essere la barra in basso. La risposta, come in tante decisioni di progettazione, è "dipende".

In genere la barra in basso persiste nell'intera app, ma ci sono alcuni casi che potrebbero giustificare nascondere la barra in basso. Se l'utente entra in una gerarchia molto superficiale - su schermi monouso come la composizione dei messaggi - o se l'app vuole presentare un'esperienza più coinvolgente un passo o due in profondità nella gerarchia, la barra in basso potrebbe essere nascosta.

In Google Foto (sopra), il menu di navigazione in basso scompare all'interno degli album. Gli album sono presentati come un livello secondario nella gerarchia e l'unica ulteriore azione di navigazione è l'apertura di una foto, che a sua volta si apre in cima all'interfaccia utente dell'album. Questa implementazione soddisfa la regola del "singolo scopo" per nascondere il nav di fondo e allo scopo di creare un'esperienza più coinvolgente quando l'utente supera il livello superiore.

Ulteriori considerazioni

Se la barra è persistente nell'intera app, la successiva considerazione logica sarebbe il comportamento quando si salta da una destinazione all'altra usando la barra. Se l'utente ha diversi livelli in profondità in una gerarchia derivante da una destinazione e passa a un'altra destinazione e quindi torna alla prima, cosa dovrebbero vedere? La schermata principale o la schermata secondaria su cui erano state interrotte?

Questa decisione dovrebbe essere informata da coloro che utilizzano la tua app. In generale, toccando un elemento nella barra in basso dovrebbe andare direttamente alla schermata associata, non a un livello più profondo della gerarchia, ma come con qualsiasi linea guida - deviare con uno scopo.

Storia

Il navigatore inferiore non dovrebbe creare la cronologia per il pulsante Indietro del sistema. Approfondire le gerarchie derivanti dalle destinazioni di navigazione in basso può creare la cronologia per il pulsante Indietro del sistema e il pulsante Su dell'app, ma la barra in basso può fungere anche da tipo di navigazione storica.

Toccando un elemento nel menu di navigazione in basso dovresti portarti direttamente alla destinazione associata e toccarlo di nuovo dovrebbe tornare al livello principale o aggiornare il livello principale se l'utente è già lì.

🕹 Navigazione nel contesto

Definizione

La navigazione nel contesto comprende qualsiasi interazione di navigazione al di fuori dei componenti sopra descritti. Ciò include elementi come pulsanti, riquadri, carte e qualsiasi altra cosa che porti l'utente altrove in un'app.

La navigazione nel contesto è in genere meno lineare della navigazione esplicita: le interazioni possono trasportare l'utente attraverso una gerarchia, tra diversi passaggi in gerarchie discrete o completamente fuori dall'app.

Cerca maggiori informazioni sulla navigazione nel contesto qui.

Navigazione contestuale in azione

Orologio, Google e Google Calendar

Nell'app Orologio (sopra, a sinistra) è presente un FAB; l'app di Google (sopra, al centro) si basa principalmente sulle informazioni disposte all'interno delle carte; e Google Calendar (in alto a destra) crea riquadri per eventi.

L'attivazione del FAB in Clock (sopra, a sinistra) ti porta a una schermata di selezione dell'orologio mondiale, toccando la scheda meteo nell'app Google (sopra, al centro) ti porta a una pagina dei risultati di ricerca per "weather", e toccando una tessera evento in Calendar (sopra, a destra) ti porta ai dettagli di quell'evento.

Vediamo anche in questi screenshot i diversi modi in cui la navigazione nel contesto può trasportare l'utente. Nell'app Orologio siamo a un livello inferiore rispetto all'orologio stesso, nell'app Google siamo finiti sostanzialmente con un potenziamento della schermata principale e in Calendar abbiamo aperto una finestra di dialogo a schermo intero.

Storia

Non esistono regole rigide per la creazione della cronologia tramite la navigazione nel contesto. La creazione della cronologia dipende interamente dal tipo di navigazione nel contesto utilizzata dall'app e dalla posizione dell'utente. Nei casi in cui non è chiaro esattamente quale tipo di cronologia debba essere creata, è bene sapere cosa fanno i pulsanti su e indietro in generale.

Pulsanti Su, Indietro e Chiudi

I pulsanti Indietro, Su e Chiudi sono tutti importanti per navigare nell'interfaccia utente di Android, ma sono spesso fraintesi. I tre pulsanti in realtà hanno un comportamento piuttosto semplice da una prospettiva UX, quindi ricordare le seguenti regole dovrebbe aiutarti a uscire da qualsiasi situazione imbarazzante.

  • Su si trova nella barra degli strumenti dell'app quando l'utente ha disceso la gerarchia dell'app. Naviga indietro nella gerarchia in ordine cronologico fino a quando l'utente raggiunge una schermata principale. Poiché il pulsante su non viene visualizzato nelle schermate principali, non dovrebbe mai uscire da un'app.
  • Il retro è sempre presente nella barra di navigazione del sistema. Naviga indietro cronologicamente, indipendentemente dalla gerarchia delle app, anche se la schermata cronologica precedente era all'interno di un'altra app. Elimina inoltre elementi temporanei come finestre di dialogo, fogli inferiori e sovrapposizioni.
  • Chiudi viene in genere utilizzato per eliminare i livelli transitori dell'interfaccia o eliminare le modifiche in una finestra di dialogo a schermo intero. Considera la schermata dei dettagli dell'evento in Google Calendar (mostrata di seguito). La natura temporanea della schermata dei dettagli diventa ancora più chiara su schermi più grandi. In Posta in arrivo (di seguito), la transizione da Posta in arrivo a messaggio suggerisce che il messaggio è un livello in cima alla posta in arrivo, quindi il pulsante di chiusura è appropriato. Gmail (sotto) posiziona il messaggio come un livello distinto dell'app e utilizza il pulsante su.
Calendario, Posta in arrivo e Gmail

Fare riferimento in particolare al comportamento back vs up nelle Specifiche del materiale qui.

Combinazione di modelli

Durante questo primer abbiamo visto esempi di app che implementano con successo ciascuno dei vari componenti di navigazione espliciti. Molti di questi esempi riescono anche a combinare i modelli di navigazione per formare una struttura che abbia senso per gli utenti. Per concludere, esaminiamo un paio di quegli esempi con un occhio al mixaggio e alla corrispondenza.

Google+

Forse l'esempio più ovvio è Google+ (sopra), che mescola tutti i modelli di cui abbiamo discusso: schede, un riquadro di navigazione, un menu di navigazione inferiore e una navigazione nel contesto.

Per scomporlo, il nav in basso è il focus in G +. Fornisce l'accesso a quattro destinazioni di livello superiore. Le schede aumentano due di quelle destinazioni segmentando il loro contenuto in categorie sensibili. Il cassetto di navigazione contiene altre destinazioni, sia primarie che secondarie, a cui è possibile accedere meno frequentemente.

Play Store

Il Play Store (sopra) utilizza principalmente un cassetto di navigazione, utilizza spesso la navigazione nel contesto e occasionalmente utilizza le schede.

Negli scatti sopra, vediamo destinazioni raggiunte attraverso il cassetto di navigazione. Il cassetto è ancora accessibile su queste schermate perché sono tutte destinazioni principali. Appena sotto la barra degli strumenti vediamo i chip per navigare verso le selezioni di contenuto filtrate, un esempio di navigazione nel contesto. Nei grafici delle app, le schede vengono utilizzate per ordinare l'intera libreria tracciata in segmenti specifici.

Google Calendar

Google Calendar (sopra) utilizza un riquadro di navigazione e la navigazione nel contesto e utilizza entrambi in modi davvero interessanti.

Il cassetto in Calendar non è standard, utilizzato principalmente per aumentare il calendario. Il calendario stesso è controllato da un pannello della barra degli strumenti in espansione e tessere colorate conducono gli utenti ai dettagli dell'evento.

Ulteriori informazioni sulla combinazione di schemi di navigazione qui.

Hai altre domande?

La navigazione è un argomento complesso. Speriamo che questo primer fornisca una buona base per comprendere i principi di navigazione comuni su Android. Se hai ancora domande, lascia una risposta o raggiungi la nostra prima sessione #AskMaterial con i team di Material Design & Design Relations su Twitter qui!