I dispositivi TV offrono un insieme limitato di controlli di navigazione per le app. La creazione di uno schema di navigazione efficace per la tua app TV dipende dalla comprensione di questi controlli limitati e dalle limitazioni degli utenti durante l'utilizzo dell'app. Quando crei la tua app per Android per la TV, presta particolare attenzione alla modalità di navigazione dell'utente quando utilizza i pulsanti del telecomando anziché un touchscreen.
Princìpi
Lo scopo è fare in modo che la navigazione risulti naturale e familiare senza dominare l'interfaccia utente o distogliere l'attenzione dai contenuti. I seguenti principi aiutano a stabilire una base di riferimento per un'esperienza utente coerente e intuitiva nelle app TV.
Rendi l'accesso ai contenuti facile e veloce. Gli utenti vogliono accedere rapidamente ai contenuti e con un numero minimo di clic. Organizza le tue informazioni in un modo che richiede il minor numero di schermate.
Segui best practice e suggerimenti per rendere la navigazione prevedibile per gli utenti. Non reinventare inutilmente i pattern di navigazione, poiché ciò porta a confusione e imprevedibilità.
Rendi la navigazione sufficientemente semplice da supportare senza problemi i comportamenti degli utenti adottati su larga scala. Non complicare troppo le cose aggiungendo livelli di navigazione superflui.
Controller
I controller sono disponibili in una vasta gamma di stili, dal telecomando minimalista ai controller di gioco complessi. Tutti i controller includono un pad direzionale (D-pad) e i pulsanti di selezione, home e indietro. Gli altri pulsanti variano in base al modello.
D-pad
Il metodo di navigazione principale sulla TV è tramite il D-pad, che include i tasti hardware direzionali su, giù, sinistra e destra. Il D-pad trasferisce lo stato attivo da un oggetto all'oggetto più vicino nella direzione del pulsante premuto.
Pulsante Seleziona
Consente di selezionare l'elemento sullo schermo attivo.
Pulsante Home
Porta l'utente alla schermata Home del sistema.
Pulsante Indietro
Consente agli utenti di tornare alla visualizzazione precedente.
Pulsante del microfono
Richiama l'Assistente Google o l'input vocale.
Navigazione con D-pad
Su un dispositivo TV, gli utenti possono navigare utilizzando un D-pad o i tasti freccia. Questo tipo di controllo limita il movimento in alto, in basso, a sinistra e a destra. Per creare un'app ottimale ottimizzata per la TV, devi fornire uno schema di navigazione in cui l'utente possa imparare rapidamente a navigare nell'app utilizzando questi controlli limitati.
Il framework Android gestisce automaticamente la navigazione direzionale tra gli elementi di layout, quindi in genere non devi fare altro per l'app. Tuttavia, ti consigliamo di testare accuratamente la navigazione con un controller D-pad per individuare eventuali problemi di navigazione.
Segui queste linee guida per verificare che il sistema di navigazione della tua app funzioni correttamente con un D-pad su un dispositivo TV:
- Assicurati che un utente con un controller D-pad possa accedere a tutti i controlli visibili sullo schermo.
- Per scorrere elenchi con lo stato attivo, assicurati che i pulsanti su e giù del D-pad scorrano l'elenco e che il pulsante di selezione selezioni un elemento dell'elenco. Verifica che gli utenti possano selezionare un elemento nell'elenco e che l'elenco continui a scorrere quando viene selezionato un elemento.
- Assicurati che il passaggio da un controllo all'altro sia semplice e prevedibile.
Modifica la navigazione direzionale
Il framework Android applica automaticamente uno schema di navigazione direzionale in base alla posizione relativa degli elementi attivabili nei layout. Testa lo schema di navigazione generato nella tua app utilizzando un controller D-pad. Dopo il test, se decidi che vuoi che gli utenti si spostino tra i layout in un modo specifico, puoi configurare una navigazione direzionale esplicita per i controlli.
Il seguente esempio di codice mostra come definire il controllo successivo per ricevere lo stato attivo per un oggetto di layout TextView:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
Nella tabella seguente sono elencati tutti gli attributi di navigazione disponibili per i widget dell'interfaccia utente di Android:
| Attributo | Funzione |
|---|---|
nextFocusDown |
Definisce la vista successiva su cui attivare lo stato attivo quando l'utente scorre verso il basso. |
nextFocusLeft |
Definisce la vista successiva su cui attivare lo stato attivo quando l'utente scorre verso sinistra. |
nextFocusRight |
Definisce la vista successiva su cui attivare lo stato attivo quando l'utente scorre verso destra. |
nextFocusUp |
Definisce la vista successiva su cui attivare lo stato attivo quando l'utente va in alto. |
Per utilizzare uno di questi attributi di navigazione espliciti, imposta il valore su android:id di un altro widget nel layout. Assicurati di impostare
l'ordine di navigazione come loop, in modo che l'ultimo controllo reindirizzi lo stato attivo sul primo.
Offri un focus e una selezione chiari
Il successo dello schema di navigazione di un'app sui dispositivi TV dipende da quanto è facile per un utente determinare quale elemento dell'interfaccia utente è attivo. Se non fornisci un'indicazione chiara dell'elemento attivo e quindi dell'elemento su cui un utente può intraprendere un'azione, l'utente potrebbe sentirsi frustrato e uscire dall'app. Per lo stesso motivo, è importante avere sempre a disposizione un elemento attivo per cui un utente possa intervenire subito dopo l'avvio dell'app o in qualsiasi momento in cui è inattiva.
Nel layout e nell'implementazione dell'app, utilizza colore, dimensioni, animazione o una combinazione di questi attributi per aiutare gli utenti a determinare facilmente le azioni successive che potranno intraprendere. Utilizza uno schema uniforme per indicare l'attenzione in tutta l'applicazione.
Android fornisce risorse per l'elenco di stato disabili per implementare le evidenziazioni per i controlli selezionati e selezionati. Il seguente esempio di codice mostra come abilitare il comportamento visivo di un pulsante per indicare che un utente ha raggiunto il controllo e poi lo ha selezionato:
<!-- res/drawable/button.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="@drawable/button_focused" /> <!-- hovered -->
<item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>
Il seguente codice di esempio XML di layout applica l'elenco dello stato precedente richiamabile a un Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Assicurati di fornire spaziatura interna sufficiente all'interno dei controlli attivabili e selezionabili in modo che le alte luci circostanti siano chiaramente visibili.
Navigazione con pulsante Indietro
Per garantire la coerenza tra le app della piattaforma, assicurati che il comportamento del pulsante Indietro sia conforme a queste linee guida.
Utilizza un comportamento prevedibile del pulsante Indietro
Per creare un'esperienza di navigazione facile e prevedibile, quando l'utente preme il pulsante Indietro del telecomando, lo porterà alla destinazione precedente.
Se l'utente passa da una voce di menu a una scheda al centro della pagina e poi preme il pulsante Indietro, il risultato dipende dall'utilizzo o meno della navigazione in alto o a sinistra nell'app:
- L'app utilizza la navigazione dall'alto: riporta l'utente alla parte superiore della pagina scorrendo rapidamente e attivando lo stato attivo sul menu.
- L'app utilizza la navigazione a sinistra: attiva il menu a sinistra e imposta lo stato attivo sulla voce di menu attualmente attiva.
Assicurati che il pulsante Indietro non sia controllato da schermate di conferma o che facciano parte di un loop infinito.
Non farlo.
Evita il blocco di uscita. Consenti agli utenti di uscire dall'app senza
conferma.
Non farlo.
Non entrare mai nel loop infinito di chiusura e apertura del menu. Idealmente, premendo il pulsante Indietro si esce dall'app. Non mostrare un pulsante di uscita nel menu, a meno che non si tratti di un caso speciale, ad esempio un profilo per bambini.
Non visualizzare un pulsante su o indietro
A differenza dei dispositivi portatili, il pulsante Indietro sul telecomando viene utilizzato per tornare indietro su una TV. Non è necessario mostrare un pulsante Indietro virtuale sullo schermo.
Non farlo.
Mostra un pulsante di annullamento, se necessario
Se le uniche azioni visibili sono azioni di conferma, distruttive o di acquisto, è buona norma avere un pulsante Annulla che riporti alla destinazione precedente:
Cosa fare.
Implementare la navigazione a ritroso
Il framework Android in genere gestisce la navigazione a ritroso, come per il D-pad. Se utilizzi il componente Navigazione, puoi supportare diversi grafici di navigazione. A volte potresti dover implementare un comportamento personalizzato, ad esempio impostare il pulsante Indietro per reimpostare lo stato attivo sull'inizio di un lungo elenco.
ComponentActivity, la classe base per FragmentActivity e AppCompatActivity, ti consente di controllare il comportamento del pulsante Indietro utilizzando OnBackPressedDispatcher, che puoi recuperare chiamando getOnBackPressedDispatcher().
Per maggiori informazioni, consulta Fornire una navigazione a ritroso personalizzata.
Controlli di riproduzione sulla TV
La riproduzione di video è una delle funzionalità più importanti sulla TV. È importante che i video player nelle app su Android TV si comportino allo stesso modo. Consulta le linee guida sui controlli di riproduzione per la TV.
Navigazione nelle schede live
Oltre a rispettare i requisiti di qualità delle app TV, le app con un feed TV in diretta integrato nella scheda In diretta devono soddisfare anche i requisiti di riproduzione e direct-back senza problemi, come descritto nelle sezioni seguenti.
Riproduzione senza problemi
La riproduzione senza problemi si applica al comportamento in-app che segue qualsiasi link diretto a canali dal vivo/lineare da Google TV e Android TV.
Gli utenti che fanno clic su un link diretto a un canale dal vivo/lineare da Google TV e Android TV devono essere indirizzati direttamente alla riproduzione del canale, senza bloccare o ritardare le schermate dall'app di destinazione. Non sono consentiti flussi di accesso, flussi di registrazione, video per il branding e altri ritardi.
Tuttavia, se il link diretto avvia il caricamento dell'app di destinazione da un avvio a freddo, il ritardo di avvio prima della riproduzione è consentito. In questo caso sono consentiti anche un video di branding o un'animazione per l'avvio dell'app. È improbabile che un'esperienza di avvio a freddo di questo tipo si verifichi più di una volta per sessione.
Inoltre, se l'accesso al canale con link diretti richiede alcuni secondi, mostrare il branding del canale e/o del servizio è consentito. Tuttavia, la sua durata dovrebbe essere pari a quella necessaria per caricare il canale (e in modo simile ai tempi medi di caricamento del canale all'interno dell'app).
Se l'utente non ha effettuato l'accesso o non è iscritto, puoi bloccare la riproduzione di un canale a pagamento per completare la procedura di accesso o registrazione.
Diretto
Quando gli utenti avviano un'app da un link diretto nella scheda In diretta e poi premono il pulsante Indietro, devono tornare alla scheda In diretta in un'unica pressione, indipendentemente dal tempo trascorso. Questo comportamento di direct-back è obbligatorio per tutti i link diretti della scheda In diretta su Google TV e Android TV.
I link diretti delle schede live si distinguono per un parametro di link diretto aggiunto:
?exit_on_back=[true|false]. Le app devono analizzare questo parametro per determinare
se l'app è stata avviata dalla scheda In diretta. Se exit_on_back è true,
le app devono implementare il comportamento di direct-back.
Tieni presente che se l'utente preme un pulsante diverso dal pulsante Indietro come primo pulsante dopo il link diretto, il requisito di direct-back non viene applicato ed è richiesto solo il comportamento del pulsante Indietro standard.
Ad esempio, supponiamo che dopo aver seguito un link diretto l'utente prema il pulsante di selezione del D-pad, che visualizza un overlay dei controlli. L'utente attende che l'overlay scompaia, quindi preme il pulsante Indietro. Poiché il primo pulsante premuto dopo aver seguito il link diretto è stato il pulsante di selezione del D-pad, il requisito del direct-back non si applica. Viene invece applicata la normale logica dello stack back dell'app.
La pressione ripetuta del pulsante Indietro deve indirizzare l'utente alla directory radice dell'app e poi di nuovo a Google TV o Android TV, senza loop infiniti. Per ulteriori informazioni, consulta la sezione Comportamento prevedibile del pulsante Indietro.
Architettura di navigazione
Destinazione di partenza fissa
La prima schermata che l'utente vede quando avvia l'app da Avvio app è anche l'ultima schermata che vede quando torna ad Avvio app dopo aver premuto il pulsante Indietro.
I link diretti simulano la navigazione manuale
Che si tratti di link diretti o di arrivare manualmente a una destinazione specifica, gli utenti possono utilizzare il pulsante Indietro per navigare tra le destinazioni e tornare a quella di partenza.
I link diretti a un'app da un'altra app simulano la navigazione manuale. Ad esempio, se l'utente accede direttamente a una pagina dei dettagli nell'app Moviestar da Google TV e poi preme il pulsante Indietro, viene indirizzato alla home page dell'app Moviestar.
Cancella percorso a tutti gli elementi attivabili
Consenti agli utenti di navigare nella UI con indicazioni chiare. Se non esiste un percorso diretto per arrivare a un controllo, valuta la possibilità di riposizionarlo.
Sì.
Posiziona i controlli, come l'azione di ricerca mostrata qui, in posizioni che non si sovrappongano ad altri elementi cliccabili.
Non farlo.
Evita layout che contengano controlli in punti difficili da raggiungere. Raggiungere
l'azione di ricerca mostrata qui non è facile da gestire con il D-pad.
Assi
Progetta il tuo layout in modo da sfruttare sia l'asse orizzontale che quello verticale. Assegna a ciascuna direzione una funzione specifica, rendendo veloce la navigazione delle grandi gerarchie.
Sì.
Le categorie possono essere esplorate sull'asse verticale e gli elementi di ciascuna categoria possono essere consultati sull'asse orizzontale.
Non farlo.
Evita gerarchie di layout complesse e nidificate.