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 Android per la TV, presta particolare attenzione alle modalità di navigazione dell'utente quando utilizza i tasti del telecomando anziché un touchscreen.
Princìpi
L'obiettivo è 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 per TV.
Fai in modo che la riproduzione dei contenuti sia facile e veloce. Gli utenti vogliono accedere ai contenuti rapidamente, con un numero minimo di clic. Organizza le tue informazioni in modo che richieda il minor numero di schermate.
Segui le best practice e i suggerimenti per rendere la navigazione prevedibile per gli utenti. Non reinventare inutilmente gli schemi di navigazione, poiché ciò genera confusione e imprevedibilità.
Rendi la navigazione sufficientemente semplice da supportare perfettamente i comportamenti degli utenti adottati su larga scala. Non complicare troppo le cose aggiungendo livelli di navigazione non necessari.
Controller
I controller sono disponibili in tanti stili, da telecomando minimalista a controller di gioco complessi. Tutti i controller includono un d-pad (D-pad) oltre ai pulsanti Seleziona, Home e Indietro. Gli altri pulsanti variano in base al modello.
D-pad
Il principale metodo di navigazione sulla TV è il D-pad, che include pulsanti 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 di selezione
Seleziona 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 una TV, gli utenti possono navigare utilizzando un D-pad o i tasti freccia. Questo tipo di controllo limita il movimento verso l'alto, il basso, a sinistra e a 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 per la tua app. Tuttavia, dovresti testare la navigazione con un controller D-pad per rilevare eventuali problemi di navigazione.
Segui queste linee guida per verificare che il sistema di navigazione dell'app funzioni correttamente con il D-pad su una TV:
- Assicurati che un utente con un controller D-pad possa accedere a tutti i controlli visibili sullo schermo.
- Per gli elenchi a scorrimento 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 nell'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 diretto e prevedibile.
Modifica la navigazione direzionale
Il framework Android applica automaticamente uno schema di navigazione direzionale basato sulla posizione relativa degli elementi attivabili nei layout. Testa lo schema di navigazione generato nella tua app utilizzando un controller D-pad. Se dopo il test decidi che gli utenti devono spostarsi 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 attivare lo stato attivo per un oggetto di layout TextView:
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
La seguente tabella elenca tutti gli attributi di navigazione disponibili per i widget dell'interfaccia utente di Android:
| Attributo | Funzione |
|---|---|
nextFocusDown |
Definisce la vista successiva su cui impostare lo stato attivo quando l'utente scende. |
nextFocusLeft |
Definisce la visualizzazione successiva su cui impostare lo stato attivo quando l'utente naviga verso sinistra. |
nextFocusRight |
Definisce la vista successiva su cui impostare lo stato attivo quando l'utente naviga verso destra. |
nextFocusUp |
Definisce la visualizzazione successiva su cui impostare lo stato attivo quando l'utente si sposta verso l'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 riporti lo stato attivo sul primo.
Fornisci obiettivo e selezione chiari
Il successo dello schema di navigazione di un'app sui dispositivi TV dipende dalla facilità con cui è per un utente determinare 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ò intraprendere un'azione, potrebbe rapidamente sentirsi frustrato e uscire dall'app. Per lo stesso motivo, è importante avere sempre a fuoco un elemento su cui l'utente possa intervenire subito dopo l'avvio dell'app o in qualsiasi momento in cui è inattiva.
Nel layout e nell'implementazione della tua app, utilizza il colore, le dimensioni, l'animazione o una combinazione di questi attributi per aiutare gli utenti a stabilire facilmente quali azioni possono intraprendere successivamente. Utilizza uno schema uniforme per indicare lo stato attivo dell'applicazione.
Android offre risorse per elenchi di stati disegnabili per implementare le evidenziazioni di controlli specifici e selezionati. Il seguente esempio di codice mostra come attivare 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 di stati precedente disegnabile a Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Assicurati di fornire una spaziatura interna sufficiente all'interno dei controlli attivabili e selezionabili in modo che le evidenziazioni circostanti siano chiaramente visibili.
Navigazione con pulsante Indietro
Per garantire la coerenza tra le app della piattaforma, assicurati che il comportamento del pulsante Indietro rispetti queste linee guida.
Usa un comportamento prevedibile del pulsante Indietro
Per creare un'esperienza di navigazione facile e prevedibile, quando l'utente preme il pulsante Indietro del telecomando, riportalo 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 del menu di navigazione in alto o a sinistra nell'app:
- L'app utilizza la navigazione in alto: riporta l'utente nella parte superiore della pagina scorrendo velocemente e attivando lo stato attivo sul menu.
- L'app usa la navigazione a sinistra: attiva il menu laterale a sinistra e imposta lo stato attivo sulla voce di menu attualmente attiva.
Assicurati che il pulsante Indietro non sia bloccato da schermate di conferma o da un loop infinito.
Non farlo.
Evita limiti di uscita. Consenti agli utenti di uscire dall'app senza
conferma.
Non farlo.
Non entrare mai nel ciclo infinito di operazioni di chiusura e apertura del menu. Idealmente, premendo il pulsante Indietro puoi uscire dall'app. Non mostrare il pulsante di uscita nel menu, a meno che non si tratti di un caso speciale, ad esempio un profilo per bambini.
Non visualizzare il pulsante Su o Indietro
A differenza dei dispositivi portatili, il pulsante Indietro sul telecomando viene usato per tornare indietro sulla TV. Non è necessario mostrare sullo schermo un pulsante Indietro virtuale:
Non farlo.
Mostra un pulsante Annulla se necessario
Se le uniche azioni visibili sono quelle di conferma, distruttive o di acquisto, è buona norma disporre di un pulsante Annulla che torni alla destinazione precedente:
Cosa fare.
Implementa la navigazione a ritroso
Il framework Android in genere gestisce bene la navigazione all'indietro, come per il D-pad. Se utilizzi il componente Navigazione, puoi supportare diversi grafici di navigazione. Occasionalmente potresti dover implementare alcuni comportamenti personalizzati, ad esempio fare in modo che il pulsante Indietro riporti lo stato attivo all'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 ulteriori informazioni, consulta Fornire una navigazione a ritroso personalizzata.
Controlli di riproduzione sulla TV
La riproduzione di video è una delle funzionalità più importanti della TV. È importante che i video player nelle app di Android TV si comportino allo stesso modo. Leggi le linee guida per i controlli di riproduzione per la TV.
Navigazione nella scheda Dal vivo
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 directback senza interruzioni, come descritto nelle sezioni seguenti.
Riproduzione senza interruzioni
La riproduzione senza interruzioni si applica al comportamento in-app dopo qualsiasi link diretto al canale 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 schermate dall'app di destinazione. Non sono consentiti flussi di accesso, di registrazione, video di branding e altri ritardi.
Tuttavia, se il link diretto avvia il caricamento dell'app di destinazione da un avvio a freddo, questo ritardo di avvio prima della riproduzione è consentito. In questo caso è consentita anche un'animazione o un video di branding per l'avvio dell'app. È improbabile che un'esperienza di avvio a freddo si verifichi più di una volta per sessione.
Inoltre, se l'ottimizzazione del canale con link diretti richiede alcuni secondi, è consentita la visualizzazione del branding del canale e/o del servizio. Tuttavia, la sua durata dovrebbe essere pari solo al tempo necessario per caricare il canale (e simile ai tempi di caricamento medi del canale all'interno dell'app).
Se l'utente è disconnesso o non è iscritto, puoi bloccare la riproduzione di un canale a pagamento per completare un flusso di accesso o di registrazione.
Direttore
Quando gli utenti avviano un'app da un link diretto nella scheda Dal vivo e premono il pulsante Indietro, devono tornare alla scheda In diretta con una sola pressione, indipendentemente dal tempo trascorso. Questo comportamento è richiesto per tutti i link diretti alla scheda In diretta su Google TV e Android TV.
I link diretti alla scheda Dal vivo sono distinti da un parametro link diretto aggiunto:
?exit_on_back=[true|false]. Le app devono analizzare questo parametro per
determinare se sono state lanciate dalla scheda Pubblicate. Se exit_on_back è true,
le app devono implementare il comportamento direct-back.
Tieni presente che se l'utente preme un pulsante diverso da quello Indietro come primo pulsante dopo il link diretto, il requisito del directback 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 per visualizzare 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 era il pulsante di selezione del D-pad, il requisito del directback non si applica. Viene invece applicata la normale logica dello stack di back dell'app.
Premendo ripetutamente il pulsante Indietro, l'utente deve andare alla root dell'app e poi tornare a Google TV o Android TV, senza loop infiniti. Per ulteriori informazioni, consulta la sezione Comportamento prevedibile del pulsante Indietro.
Architettura di navigazione
Destinazione iniziale fissa
La prima schermata visualizzata dall'utente quando avvia l'app da Avvio app è anche l'ultima che vede l'utente quando torna in Avvio app dopo aver premuto il pulsante indietro.
I link diretti simulano la navigazione manuale
Che si tratti di un link diretto o di spostarsi manualmente verso una destinazione specifica, gli utenti possono utilizzare il pulsante Indietro per raggiungere la destinazione 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 il percorso di tutti gli elementi attivabili
Consenti agli utenti di navigare nell'interfaccia utente con indicazioni chiare. Se il percorso non è diretto per raggiungere un controllo, valuta la possibilità di riposizionarlo.
Sì.
Posiziona i controlli, come l'azione di ricerca mostrata qui, in posizioni che non si sovrappongono ad altri elementi cliccabili.
Non farlo.
Evita layout che contengono controlli in punti difficili da raggiungere. Non è facile gestire l'azione di ricerca mostrata qui con il D-pad.
Assi
Progetta il tuo layout in modo da sfruttare sia gli assi orizzontali sia quelli verticali. Assegna a ogni direzione una funzione specifica, rendendo più veloce l'esplorazione di grandi gerarchie.
Sì.
Le categorie possono essere spostate sull'asse verticale e gli elementi all'interno di ciascuna
categoria possono essere sfogliati sull'asse orizzontale.
Non farlo.
Evita gerarchie di layout complesse e nidificate.