Modelli di navigazione per app mobile: schede, menu laterali e flussi annidati

Parti dalla struttura, non dal componente

Elenca le destinazioni dell'app e raggruppale secondo il modello mentale dell'utente. Una destinazione come Cerca può affiancare Home allo stesso livello; il dettaglio di un elemento salvato appartiene sotto Salvati. Se le persone devono passare spesso tra destinazioni allo stesso livello, mantieni visibili quelle scelte. Se di solito passano da una raccolta a un elemento e poi tornano indietro, una pila di viste o un flusso annidato comunica naturalmente la relazione.

Distingui le destinazioni dalle azioni. Scrivere, condividere, filtrare e ordinare modificano o agiscono sul contesto corrente; di solito non sono luoghi dell'app. Mettile in una barra degli strumenti, un menu o un controllo contestuale invece di trasformare ogni azione in una voce della navigazione principale.

• Nomina le attività che le persone svolgono ripetutamente e individua le aree che devono essere raggiungibili da ovunque.
• Disegna le relazioni tra elementi principali e secondari prima di scegliere i controlli di navigazione.
• Mantieni coerenti nell'aspetto e nel comportamento le destinazioni allo stesso livello gerarchico.

Confronta i tre modelli

Una barra a schede o di navigazione rende visibili alcune destinazioni principali e permette di passare rapidamente dall'una all'altra. Funziona quando le destinazioni sono allo stesso livello e ogni etichetta è riconoscibile senza spiegazioni. Mantieni selezionata l'area corrente. Evita di ammassare azioni non correlate nella barra o di lasciare che destinazioni importanti scompaiano in un menu di overflow.

Un menu laterale di navigazione può contenere un insieme più ampio e raggruppato di destinazioni e talvolta il passaggio tra account o spazi di lavoro. Un menu modale risparmia spazio sullo schermo, ma richiede un passaggio aggiuntivo per aprire e scegliere e copre temporaneamente i contenuti. Sui telefoni compatti questo costo può far sembrare nascoste le destinazioni frequenti. Le indicazioni Android attuali di Material 3 preferiscono una barra di navigazione per tre-cinque destinazioni su schermi compatti e adattano la navigazione alle finestre più grandi; le indicazioni Material precedenti che raccomandavano menu laterali per cinque o più destinazioni non vanno considerate una soglia attuale universale.

La navigazione annidata usa un elenco, una scheda o un link per aprire una vista secondaria, con titolo e controllo Indietro che conservano il percorso. Si adatta a categorie, impostazioni, dettagli di prodotto e attività passo per passo. Un annidamento profondo diventa frustrante quando la gerarchia è nascosta, il comportamento di Indietro è incoerente o bisogna risalire ripetutamente per raggiungere un elemento dello stesso livello. Aggiungi ricerca, scorciatoie o una struttura principale più chiara quando le persone saltano spesso tra rami diversi.

Scegli in base alla frequenza delle attività e alle dimensioni dello schermo

Chiediti quanto spesso le persone passano tra aree durante una sessione tipica. Un insieme compatto e stabile di destinazioni molto frequenti favorisce una barra visibile. Se l'uso si concentra soprattutto su un'attività o sulla lettura di un dettaglio, mantieni la navigazione più discreta e lascia spazio ai contenuti. Un menu laterale può funzionare per sezioni meno frequenti, ma verifica che si possano trovare e che sia possibile tornare senza indovinare.

Progetta per dimensioni della finestra, orientamento e convenzioni della piattaforma. Le Human Interface Guidelines attuali di Apple descrivono la barra a schede dell'iPhone come navigazione principale e supportano una presentazione adattiva tra barra a schede e barra laterale su iPad. Material 3 chiama il suo modello compatto barra di navigazione e offre forme diverse quando aumenta lo spazio disponibile. Questi modelli condividono uno scopo ma non sono componenti identici: segui posizione, comportamento e adattamento nativi invece di copiare l'interfaccia di una piattaforma su un'altra.

Rendi affidabili orientamento e recupero

Le sole icone rendono la navigazione più difficile da imparare e possono essere poco chiare per chi usa un lettore di schermo. Dai alle destinazioni etichette brevi e visibili, esponi semanticamente lo stato selezionato e assicurati che i controlli abbiano nomi accessibili e aree di tocco utilizzabili. Controlla il contrasto negli stati selezionato e non selezionato, il testo ingrandito, la localizzazione e i layout da destra a sinistra. Prova VoiceOver o TalkBack e, dove supportato, la navigazione tramite tastiera o interruttori; il focus dovrebbe spostarsi in modo prevedibile quando si apre un menu laterale, si sceglie una destinazione o si chiude una vista.

Il recupero fa parte della navigazione. Mantieni distinti Indietro e Chiudi: Indietro ripercorre una gerarchia, mentre Chiudi esce da una presentazione temporanea o modale. Conserva una posizione utile e i dati inseriti quando si cambia area principale o si torna da un dettaglio. Quando una destinazione è vuota o temporaneamente non disponibile, mantieni stabile il suo posto e spiega lo stato anziché rimuovere o disabilitare silenziosamente la navigazione. Per un'attività distruttiva o costosa, chiarisci il percorso di ritorno prima dell'impegno finale.

Una verifica pratica della navigazione

Percorri l'app con un'attività reale, poi ripeti con le funzioni di accessibilità attive. Registra se le persone riescono a identificare l'area corrente, raggiungere una destinazione frequente e recuperare dopo una scelta sbagliata. Confronta lo stesso percorso su un telefono compatto e una finestra più grande; un layout adattivo dovrebbe conservare l'architettura delle informazioni mentre il controllo cambia forma.

Usa la raccolta di schermate per confrontare esempi reali di sezioni e flussi delle app, poi valuta ciascuno rispetto alle attività del tuo prodotto. Il modello più solido mantiene leggibile la struttura mentre l'app cresce e rende chiaro il percorso di ritorno dopo un'interruzione.

• Un nuovo utente riesce a spiegare le aree principali dalle sole etichette?
• È facile passare tra destinazioni allo stesso livello, con la selezione mostrata chiaramente?
• Le schermate di dettaglio mostrano un titolo significativo e un percorso Indietro prevedibile?
• Aprire e chiudere un menu laterale conserva il contesto e sposta sensatamente il focus accessibile?
• Etichette, aree di tocco, contrasto e stati selezionati restano utilizzabili con testo ingrandito e tecnologie assistive?
• Una persona può tornare senza perdere input in bozza, posizione di scorrimento o un punto utile nella gerarchia?
• La struttura si adatta a uno schermo più grande senza duplicare navigazioni principali in conflitto?