Navigazione TV

I dispositivi TV forniscono 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, nonché delle limitazioni degli utenti durante l'utilizzo dell'app. Quando crei la tua app per Android per TV, presta particolare attenzione al modo in cui l'utente naviga quando utilizza i pulsanti del telecomando anziché un touchscreen.

Principi

L'obiettivo è che la navigazione sia naturale e familiare senza dominare l'interfaccia utente o distogliere l'attenzione dai contenuti. I seguenti principi contribuiscono a stabilire una base di riferimento per un'esperienza utente coerente e intuitiva nelle app TV.

Controller

I controller sono disponibili in una varietà di stili, da un telecomando minimalista a controller di gioco complessi. Tutti i controller includono una croce direzionale (D-pad) e i pulsanti Seleziona, Home e Indietro. Gli altri pulsanti variano a seconda del modello.

D-pad
Il metodo di navigazione principale sulla TV è tramite il D-pad, che include i pulsanti hardware direzionali su, giù, sinistra e destra. Il D-pad trasferisce lo stato attivo da un oggetto a quello più vicino nella direzione del pulsante premuto.

Pulsante Seleziona
Seleziona l'elemento sullo schermo con lo stato attivo.

Pulsante Home
Porta l'utente alla schermata Home del sistema.

Pulsante Indietro
Consente agli utenti di tornare alla visualizzazione precedente.

Pulsante Microfono
Richiama l'Assistente Google o l'input vocale.

Navigazione con il D-pad

Su un dispositivo TV, gli utenti navigano utilizzando un D-pad o i tasti freccia. Questo tipo di controllo limita il movimento a su, giù, sinistra e destra. Per creare un'ottima app ottimizzata per la TV, devi fornire uno schema di navigazione in cui l'utente possa imparare rapidamente a navigare nella tua app utilizzando questi controlli limitati.

Il framework Android gestisce automaticamente la navigazione direzionale tra gli elementi di layout, quindi in genere non devi fare nulla di extra per la tua app. Tuttavia, ti consigliamo di testare attentamente la navigazione con un controller D-pad per scoprire 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 navigare verso tutti i controlli visibili sullo schermo.
• Per gli elenchi a scorrimento con lo stato attivo, assicurati che i pulsanti D-pad su e giù scorrano l'elenco e che il pulsante Seleziona selezioni un elemento nell'elenco. Verifica che gli utenti possano selezionare un elemento nell'elenco e che l'elenco continui a scorrere quando un elemento è selezionato.
• Assicurati che il passaggio da un controllo all'altro sia semplice e prevedibile.

Modificare la navigazione direzionale

Il framework Android applica automaticamente uno schema di navigazione direzionale in base alla posizione relativa degli elementi selezionabili nei layout. Testa lo schema di navigazione generato nella tua app utilizzando un controller D-pad. Dopo il test, se decidi di voler consentire agli utenti di spostarsi nei layout in un modo specifico, puoi configurare la navigazione direzionale esplicita per i controlli.

Il seguente esempio di codice mostra come definire il controllo successivo che riceverà lo stato attivo per un oggetto di layout TextView:

<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />

La tabella seguente elenca tutti gli attributi di navigazione disponibili per i widget dell'interfaccia utente di Android:

Per utilizzare uno di questi attributi di navigazione espliciti, imposta il valore su android:id di un altro widget nel layout. Assicurati di configurare l'ordine di navigazione come un loop, in modo che l'ultimo controllo riporti lo stato attivo al primo.

Fornire uno stato attivo e una selezione chiari

Il successo di uno schema di navigazione di un'app sui dispositivi TV dipende dalla possibilità per un utente di determinare rapidamente quale elemento dell'interfaccia utente è attivo. Se non fornisci un'indicazione chiara dell'elemento attivo e, di conseguenza, dell'elemento su cui un utente può eseguire un'azione, l'utente può rapidamente frustrarsi e uscire dalla tua app. Per lo stesso motivo, è importante che sia sempre attivo un elemento su cui un utente possa eseguire un'azione immediatamente dopo l'avvio dell'app o in qualsiasi momento in cui è inattiva.

Nel layout e nell'implementazione dell'app, utilizza il colore, le dimensioni, l'animazione o una combinazione di questi attributi per aiutare gli utenti a determinare le azioni che possono eseguire successivamente. Utilizza uno schema uniforme per indicare lo stato attivo nell'applicazione.

Android fornisce risorse di elenchi di stati di disegnabili per implementare le evidenziazioni per i controlli attivi e selezionati. Il seguente esempio di codice mostra come attivare il comportamento visivo di un pulsante per indicare che un utente ha navigato fino al controllo e lo ha selezionato:

<!-- res/drawable/button.xml -->
<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>
button.xml

Il seguente esempio di codice campione XML di layout applica la risorsa drawable dell'elenco di stati precedente a un Button:

<Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:background="@drawable/button" />

Assicurati di fornire un padding sufficiente all'interno dei controlli selezionabili e selezionabili in modo che le evidenziazioni intorno a essi siano chiaramente visibili.

Navigazione con il pulsante Indietro

Per garantire la coerenza tra le app sulla piattaforma, assicurati che il comportamento del pulsante Indietro segua queste linee guida.

Utilizzare un comportamento prevedibile del pulsante Indietro

Per creare un'esperienza di navigazione semplice e prevedibile, quando l'utente preme il pulsante Indietro del telecomando, portalo alla destinazione precedente.

Se l'utente naviga da una voce di menu a una scheda al centro della pagina e poi preme il pulsante Indietro, il risultato dipende dal fatto che l'app utilizzi la navigazione in alto o a sinistra:

• L'app utilizza la navigazione in alto: riporta l'utente all'inizio della pagina scorrendo rapidamente e attivando lo stato attivo sul menu.
• L'app utilizza la navigazione a sinistra: attiva il menu laterale sinistro e concentra lo stato attivo sulla voce di menu attualmente attiva.

Assicurati che il pulsante Indietro non sia limitato da schermate di conferma o faccia parte di un loop infinito.

Non farlo.
Evita di limitare l'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 del telecomando viene utilizzato per navigare all'indietro su una TV. Non è necessario mostrare un pulsante Indietro virtuale sullo schermo:

Non farlo.

Mostrare un pulsante Annulla, se necessario

Se le uniche azioni visibili sono le azioni di conferma, distruttive o di acquisto, è una buona pratica avere un pulsante Annulla che riporti alla destinazione precedente:

Fallo.

Implementare la navigazione a ritroso

Il framework Android in genere gestisce bene la navigazione all'indietro, così come il D-pad. Se utilizzi il componente di navigazione, puoi supportare una varietà di grafici di navigazione. A volte, potrebbe essere necessario implementare un comportamento personalizzato, ad esempio fare in modo che il pulsante Indietro reimposti lo stato attivo all'inizio di un lungo elenco.

ComponentActivity, la classe base per FragmentActivity e AppCompatActivity, consente di controllare il comportamento del pulsante Indietro utilizzando il relativo OnBackPressedDispatcher, che puoi recuperare chiamando getOnBackPressedDispatcher().

Per saperne di più, consulta Fornire una navigazione a ritroso personalizzata.

Controlli di riproduzione sulla TV

La riproduzione video è una delle funzionalità più importanti della TV. È importante che i video player nelle app su Android TV si comportino allo stesso modo. Consulta le linee guida per i controlli di riproduzione per la TV.

Navigazione nella scheda In diretta

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 dopo qualsiasi deep link a un canale live o lineare da Google TV e Android TV.

Quando un utente fa clic su un deep link, si applicano le seguenti regole:

• Nessun ritardo: gli utenti devono essere indirizzati direttamente alla riproduzione del canale senza bloccare o ritardare le schermate, ad esempio i flussi di accesso o registrazione o i video di branding.
• Eccezione per l'avvio a freddo: se il deep link avvia il caricamento dell'app di destinazione da un avvio a freddo, è consentito il ritardo di avvio. In questo caso sono consentiti anche video o animazioni di branding di avvio dell'app.
• Eccezione per il ritardo di caricamento: se la sintonizzazione sul canale richiede alcuni secondi, è consentita la visualizzazione del branding. La durata deve essere solo quella necessaria per caricare il canale.

Se l'utente non ha eseguito l'accesso o non ha sottoscritto un abbonamento, puoi bloccare la riproduzione di un canale a pagamento per completare un flusso di accesso o registrazione.

Direct-back

Quando gli utenti avviano un'app da un deep link nella scheda In diretta e poi premono il pulsante Indietro, devono tornare alla scheda In diretta con una singola pressione del pulsante Indietro, indipendentemente dal tempo trascorso. Questo comportamento direct-back è obbligatorio per tutti i deep link della scheda In diretta su Google TV e Android TV.

I deep link della scheda In diretta sono contraddistinti da un parametro di deep link 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 direct-back.

Tieni presente che se l'utente preme un pulsante diverso dal pulsante Indietro come primo pulsante dopo il deep link, il requisito direct-back non si applica ed è richiesto solo il comportamento standard del pulsante Indietro.

Ad esempio, supponiamo che dopo aver seguito un deep link l'utente prema il pulsante Seleziona del D-pad, che visualizza una sovrapposizione dei controlli. L'utente attende che la sovrapposizione scompaia e poi preme il pulsante Indietro. Poiché il primo pulsante premuto dopo aver seguito il deep link è stato il pulsante Seleziona del D-pad, il requisito direct-back non si applica. Viene invece applicata la normale logica del back stack dell'app.

Le pressioni ripetute del pulsante Indietro devono portare l'utente alla radice dell'app e poi a Google TV o Android TV, senza loop infiniti. Per saperne di più, consulta la sezione Comportamento prevedibile del pulsante Indietro.

Architettura di navigazione

Un'architettura di navigazione ben definita aiuta gli utenti a capire dove si trovano nella tua app e come accedere a contenuti diversi. Tieni in considerazione i seguenti aspetti della progettazione della navigazione.

Destinazione di avvio fissa

La prima schermata che l'utente vede quando avvia l'app dal launcher è anche l'ultima schermata che vede quando torna al launcher dopo aver premuto il pulsante Indietro.

Il deep linking simula la navigazione manuale

Che si tratti di deep linking o di navigazione manuale verso una destinazione specifica, gli utenti possono utilizzare il pulsante Indietro per navigare tra le destinazioni fino alla destinazione di avvio.

Il deep linking in un'app da un'altra app simula la navigazione manuale. Ad esempio, se l'utente va direttamente a una pagina dei dettagli dell'app Moviestar da Google TV e poi preme il pulsante Indietro, viene portato alla home page dell'app Moviestar.

Percorso chiaro per tutti gli elementi selezionabili

Consenti agli utenti di navigare nell'interfaccia utente con una direzione chiara. Se non esiste un percorso diretto per raggiungere un controllo, valuta la possibilità di spostarlo.

Fallo.
Posiziona i controlli, come l'azione di ricerca mostrata qui, in posizioni che non si sovrappongano ad altri elementi su cui è possibile fare clic.

Non farlo.
Evita i layout che contengono controlli in posizioni difficili da raggiungere. Potrebbe essere difficile raggiungere l'azione di ricerca mostrata qui con il D-pad.

Assi

Progetta il layout in modo da sfruttare sia l'asse orizzontale sia quello verticale. Assegna a ogni direzione una funzione specifica, in modo da navigare rapidamente in gerarchie di grandi dimensioni.

Fallo.
Le categorie possono essere attraversate sull'asse verticale e gli elementi all'interno di ogni categoria possono essere esplorati sull'asse orizzontale.

Non farlo.
Evita gerarchie di layout complesse e nidificate.