Barre delle schede e navigazione in basso: regole di progettazione che reggono
Come progettare le barre delle schede e la navigazione in basso su iOS e Android: da 3 a 5 destinazioni, navigazione non azioni, etichette, badge, visibilità e stati attivi animati.
Punto chiave
Utilizza una barra delle schede o la navigazione in basso per tre o cinque destinazioni di primo livello, non per le azioni. Assegna a ogni scheda un'icona e un'etichetta, mantieni la barra visibile mentre le persone si spostano tra le sezioni, evita l'overflow delle schede "Altro" dove puoi e usa i badge con parsimonia. Anima leggermente lo stato attivo in modo che le persone vedano dove si trovano.
Cosa dicono le piattaforme
Material Design 3 afferma che le barre di navigazione forniscono l'accesso a da tre a cinque destinazioni, ciascuna con un'icona ed un'etichetta, e una destinazione è sempre attiva. Le linee guida di Apple dicono di utilizzare una barra delle schede per la navigazione, di non fornire azioni, di mantenerla visibile mentre le persone si spostano tra le sezioni (tranne quando una modale la copre) e di evitare schede in eccesso.
Scelta delle schede
Le schede rappresentano la struttura dell'app:
- Scegli le sezioni che le persone usano più spesso, non tutte le sezioni che hai.
- Utilizza sostantivi per le destinazioni ("Biblioteca"), non verbi per le azioni ("Carica").
- Inserisci azioni nello schermo stesso, in una barra degli strumenti o in un pulsante di azione mobile.
- Se te ne servono più di cinque, riconsidera la tua struttura prima di aggiungere una scheda "Altro".
Etichette e distintivi
Le schede composte solo da icone risparmiano spazio ma costringono le persone a indovinare. Le etichette rendono la navigazione più chiara, soprattutto per le icone meno comuni. I badge dovrebbero segnalare qualcosa su cui le persone devono agire; un distintivo sempre presente smette di farsi notare.
Conserva lo stato per scheda
Apple rileva che le barre delle schede consentono alle persone di cambiare sezione preservando lo stato di navigazione corrente all'interno di ciascuna sezione. Il ritorno a una scheda dovrebbe mostrare il punto in cui si era interrotto, non ripristinare l'inizio.
Movimento
Una piccola transizione sull'indicatore attivo, come una pillola che scorre o un'icona che si riempie, aiuta le persone a tenere traccia di dove si trovano. Mantienilo veloce, inferiore a circa 250 millisecondi, evita di far rimbalzare ogni icona a ogni tocco e semplificalo quando è attivo il movimento ridotto.
Principi chiave da ricordare
- Da tre a cinque destinazioni di altissimo livello
- Navigazione, non azioni
- Icona più etichetta per ogni scheda
- Mantienilo visibile e preserva lo stato di ogni scheda
- Movimento sottile e veloce in stato attivo
Domande frequenti
Fonti
- Navigation bar guidelines — Material Design 3
- Tab bars — Linee guida per l'interfaccia umana di Apple