Les appareils TV offrent un ensemble limité de commandes de navigation pour les applications. Pour créer un système de navigation efficace pour votre application TV, vous devez comprendre ces commandes limitées, ainsi que les limites des utilisateurs lorsqu'ils utilisent votre application. Lorsque vous créez votre application Android pour TV, accordez une attention particulière à la façon dont l'utilisateur navigue lorsqu'il utilise les boutons de la télécommande au lieu d'un écran tactile.
Principes
L'objectif est que la navigation soit naturelle et familière, sans dominer l'interface utilisateur ni détourner l'attention du contenu. Les principes suivants permettent de définir une référence pour une expérience utilisateur cohérente et intuitive entre les applications TV.
Simplifiez l'accès au contenu. Les utilisateurs souhaitent accéder rapidement au contenu, en un minimum de clics. Organisez vos informations de manière à ce qu'elles nécessitent le moins d'écrans possible.
Suivez les bonnes pratiques et les recommandations pour rendre la navigation prévisible pour les utilisateurs. Ne réinventez pas inutilement les modèles de navigation, car cela entraîne confusion et imprévisibilité.
Simplifiez suffisamment la navigation pour prendre en charge de manière transparente les comportements des utilisateurs largement adoptés comportements. Ne compliquez pas trop les choses en ajoutant des niveaux de navigation inutiles.
Contrôleurs
Les contrôleurs se présentent sous différents styles, allant d'une télécommande minimaliste à des manettes de jeu complexes. Tous les contrôleurs incluent un pavé directionnel, ainsi que des boutons de sélection, d'accueil et de retour. Les autres boutons varient selon le modèle.
Pavé directionnel
La principale méthode de navigation sur un téléviseur est le pavé directionnel, qui comprend des boutons matériels directionnels vers le haut, le bas, la gauche et la droite. Le pavé directionnel transfère le focus d'un objet à l'objet le plus proche dans la direction du bouton enfoncé.
Bouton de sélection
Sélectionne l'élément à l'écran sur lequel le focus est placé.
Bouton d'accueil
Dirige l'utilisateur vers l'écran d'accueil du système.
Bouton Retour
Permet aux utilisateurs de revenir à la vue précédente.
Bouton Micro
Appelle l'Assistant Google ou la saisie vocale.
Navigation par pavé directionnel
Sur un appareil TV, les utilisateurs naviguent à l'aide d'un pavé directionnel ou de touches fléchées. Ce type de commande limite les mouvements vers le haut, le bas, la gauche et la droite. Pour créer une application optimisée pour la TV, vous devez fournir un système de navigation dans lequel l'utilisateur peut rapidement apprendre à naviguer dans votre application à l'aide de ces commandes limitées.
Le framework Android gère automatiquement la navigation directionnelle entre les éléments de mise en page. Vous n'avez donc généralement rien à faire de plus pour votre application. Toutefois, vous devez tester minutieusement la navigation avec un contrôleur de pavé directionnel pour détecter tout problème de navigation.
Suivez ces consignes pour vérifier que le système de navigation de votre application fonctionne correctement avec un pavé directionnel sur un appareil TV :
- Assurez-vous qu'un utilisateur avec un contrôleur de pavé directionnel peut accéder à toutes les commandes visibles à l'écran.
- Pour les listes à faire défiler avec focus, assurez-vous que les boutons haut et bas du pavé directionnel font défiler la liste et que le bouton de sélection sélectionne un élément de la liste. Vérifiez que les utilisateurs peuvent sélectionner un élément de la liste et que la liste continue de défiler lorsqu'un élément est sélectionné.
- Assurez-vous que le passage d'une commande à l'autre est simple et prévisible.
Modifier la navigation directionnelle
Le framework Android applique automatiquement un système de navigation directionnelle en fonction de la position relative des éléments sélectionnables dans vos mises en page. Testez le système de navigation généré dans votre application à l'aide d'un contrôleur de pavé directionnel. Après le test, si vous décidez que vous souhaitez que les utilisateurs parcourent vos mises en page d'une manière spécifique, vous pouvez configurer une navigation directionnelle explicite pour vos commandes.
L'exemple de code suivant montre comment définir la commande suivante pour recevoir le focus pour un objet de mise en page TextView :
<TextView android:id="@+id/Category1" android:nextFocusDown="@+id/Category2" />
Le tableau suivant répertorie tous les attributs de navigation disponibles pour les widgets d'interface utilisateur Android :
| Attribut | Fonction |
|---|---|
nextFocusDown |
Définit la vue suivante pour recevoir le focus lorsque l'utilisateur navigue vers le bas. |
nextFocusLeft |
Définit la vue suivante pour recevoir le focus lorsque l'utilisateur navigue vers la gauche. |
nextFocusRight |
Définit la vue suivante pour recevoir le focus lorsque l'utilisateur navigue vers la droite. |
nextFocusUp |
Définit la vue suivante pour recevoir le focus lorsque l'utilisateur navigue vers le haut. |
Pour utiliser l'un de ces attributs de navigation explicites, définissez la valeur sur l'android:id d'un autre widget dans la mise en page. Veillez à configurer l'ordre de navigation sous forme de boucle, afin que la dernière commande redirige le focus vers la première.
Fournir un focus et une sélection clairs
Le succès d'un système de navigation d'application sur les appareils TV dépend de la capacité d'un utilisateur à déterminer rapidement quel élément de l'interface utilisateur est sélectionné. Si vous n'indiquez pas clairement l'élément sélectionné, et donc l'élément sur lequel un utilisateur peut agir, il peut rapidement se sentir frustré et quitter votre application. Pour la même raison, il est important de toujours avoir un élément sélectionné sur lequel un utilisateur peut agir immédiatement après le démarrage de votre application ou à tout moment où elle est inactive.
Dans la mise en page et l'implémentation de votre application, utilisez la couleur, la taille, l'animation ou une combinaison de ces attributs pour aider les utilisateurs à déterminer les actions qu'ils peuvent effectuer ensuite. Utilisez un système uniforme pour indiquer le focus dans votre application.
Android fournit des ressources de liste d'états Drawable pour implémenter des mises en surbrillance pour les commandes sélectionnées. L'exemple de code suivant montre comment activer le comportement visuel d'un bouton pour indiquer qu'un utilisateur a accédé à la commande, puis l'a sélectionnée :
<!-- 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>
L'exemple de code XML de mise en page suivant applique le drawable de liste d'états précédent à un Button :
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Veillez à fournir un espace suffisant dans les commandes sélectionnables afin que les mises en surbrillance autour d'elles soient clairement visibles.
Navigation par bouton Retour
Pour assurer la cohérence entre les applications sur la plate-forme, assurez-vous que le comportement du bouton Retour respecte ces consignes.
Utiliser un comportement prévisible du bouton Retour
Pour créer une expérience de navigation simple et prévisible, lorsque l'utilisateur appuie sur le bouton Retour de la télécommande, redirigez-le vers la destination précédente.
Si l'utilisateur accède à une fiche au milieu de la page à partir d'un élément de menu, puis appuie sur le bouton Retour, le résultat dépend de l'utilisation de la navigation en haut ou à gauche par l'application :
- L'application utilise la navigation en haut : redirigez l'utilisateur vers le haut de la page en faisant défiler rapidement et en activant le focus sur le menu.
- L'application utilise la navigation à gauche : activez le menu de gauche et concentrez-vous sur l'élément de menu actuellement actif.
Assurez-vous que le bouton Retour n'est pas limité par des écrans de confirmation ni ne fait partie d'une boucle infinie.
Non.
Évitez de limiter la sortie. Permettez aux utilisateurs de quitter l'application sans
confirmation.
Non.
N'entrez jamais dans la boucle infinie de fermeture et d'ouverture du
menu. Idéalement, appuyer sur le bouton Retour permet de quitter l'application. N'affichez pas de bouton de sortie dans le menu, sauf dans un cas particulier, comme un profil enfant.
Ne pas afficher de bouton "Haut" ni "Retour"
Contrairement aux appareils portables, le bouton Retour de la télécommande permet de revenir en arrière sur un téléviseur. Il n'est pas nécessaire d'afficher un bouton Retour virtuel à l'écran :
Non.
Afficher un bouton "Annuler" si nécessaire
Si les seules actions visibles sont des actions de confirmation, destructives ou d'achat, il est recommandé d'avoir un bouton Annuler qui renvoie à la destination précédente :
Oui.
Implémenter la navigation vers l'arrière
Le framework Android gère généralement bien la navigation vers l'arrière, comme pour le pavé directionnel. Si vous utilisez le composant de navigation, vous pouvez prendre en charge différents graphiques de navigation. Vous devrez parfois implémenter un comportement personnalisé, par exemple en faisant en sorte que le bouton Retour réinitialise le focus au début d'une longue liste.
ComponentActivity, la classe de base pour FragmentActivity et AppCompatActivity, vous permet de contrôler le comportement du bouton Retour à l'aide de son OnBackPressedDispatcher, que vous pouvez récupérer en appelant getOnBackPressedDispatcher().
Pour en savoir plus, consultez la page Fournir un retour en arrière personnalisé.
Commandes de lecture sur le téléviseur
La lecture vidéo est l'une des fonctionnalités les plus importantes sur un téléviseur. Il est important que les lecteurs vidéo des applications sur Android TV se comportent de la même manière. Consultez les consignes relatives aux commandes de lecture pour la TV.
Navigation dans l'onglet "En direct"
En plus de respecter les exigences de qualité des applications TV, les applications avec un flux de télévision en direct intégré dans l'onglet "En direct" doivent également répondre aux exigences de fluidité de lecture et de retour direct, comme décrit dans les sections suivantes.
Fluidité de lecture
La fluidité de lecture s'applique au comportement dans l'application après un lien profond vers une chaîne en direct ou linéaire depuis Google TV et Android TV.
Lorsqu'un utilisateur clique sur un lien profond, les règles suivantes s'appliquent :
- Aucun délai : les utilisateurs doivent être redirigés directement vers la lecture de la chaîne sans bloquer ni retarder les écrans, tels que les flux de connexion ou d'inscription, ou les vidéos de branding.
- Exception de démarrage à froid : si le lien profond lance le chargement de l'application cible à partir d'un démarrage à froid, le délai de démarrage est autorisé. Les vidéos ou animations de branding de démarrage de l'application sont également autorisées dans ce cas.
- Exception de délai de chargement : si le réglage de la chaîne prend quelques secondes, l'affichage du branding est autorisé. La durée ne doit pas dépasser le temps nécessaire au chargement de la chaîne.
Si l'utilisateur est déconnecté ou n'est pas abonné, vous pouvez bloquer la lecture d'une chaîne payante pour effectuer un flux de connexion ou d'inscription.
Retour direct
Lorsque les utilisateurs lancent une application à partir d'un lien profond dans l'onglet "En direct", puis appuient sur le bouton Retour, ils doivent revenir à l'onglet "En direct" en une seule pression, quel que soit le temps écoulé. Ce comportement de retour direct est obligatoire pour tous les liens profonds de l'onglet "En direct" sur Google TV et Android TV.
Les liens profonds de l'onglet "En direct" se distinguent par un paramètre de lien profond ajouté : ?exit_on_back=[true|false]. Les applications doivent analyser ce paramètre pour déterminer si l'application a été lancée à partir de l'onglet "En direct". Si exit_on_back est true, les applications doivent implémenter le comportement de retour direct.
Notez que si l'utilisateur appuie sur un bouton autre que le bouton Retour lors de la première pression après le lien profond, l'exigence de retour direct ne s'applique pas et seul le comportement standard du bouton Retour est requis.
Par exemple, supposons qu'après avoir suivi un lien profond, l'utilisateur appuie sur le bouton de sélection du pavé directionnel, ce qui affiche une superposition de commandes. L'utilisateur attend que la superposition disparaisse, puis appuie sur le bouton Retour. Étant donné que le premier bouton enfoncé après le lien profond était le bouton de sélection du pavé directionnel, l'exigence de retour direct ne s'applique pas. Au lieu de cela, la logique normale de la pile "Retour" de l'application s'applique.
Les pressions répétées sur le bouton Retour doivent rediriger l'utilisateur vers la racine de l'application, puis vers Google TV ou Android TV, sans aucune boucle infinie. Pour en savoir plus, consultez la section Comportement prévisible du bouton Retour.
Architecture de navigation
Une architecture de navigation bien définie aide les utilisateurs à comprendre où ils se trouvent dans votre application et comment accéder à différents contenus. Tenez compte des aspects suivants de la conception de la navigation.
Destination de départ fixe
Le premier écran que l'utilisateur voit lorsqu'il lance l'application à partir du lanceur d'applications est également le dernier écran qu'il voit lorsqu'il revient au lanceur d'applications après avoir appuyé sur le bouton Retour.
Les liens profonds simulent la navigation manuelle
Que vous utilisiez les liens profonds ou que vous accédiez manuellement à une destination spécifique, les utilisateurs peuvent utiliser le bouton Retour pour revenir à la destination de départ depuis une destination.
Les liens profonds vers une application à partir d'une autre application simulent la navigation manuelle. Par exemple, si l'utilisateur accède directement à une page d'informations de l'application Moviestar depuis Google TV, puis appuie sur le bouton Retour, il est redirigé vers la page d'accueil de l'application Moviestar.
Chemin d'accès clair à tous les éléments sélectionnables
Permettez aux utilisateurs de naviguer dans votre interface utilisateur avec une direction claire. S'il n'existe pas de chemin direct pour accéder à une commande, envisagez de la déplacer.
Oui.
Placez les commandes, comme l'action de recherche illustrée ici, dans des emplacements qui ne se chevauchent pas
avec d'autres éléments cliquables.
Non.
Évitez les mises en page contenant des commandes dans des endroits difficiles d'accès. Il peut être difficile d'accéder à
l'action de recherche illustrée ici avec le pavé directionnel.
Axes
Concevez votre mise en page pour tirer parti des axes horizontal et vertical. Attribuez une fonction spécifique à chaque direction, ce qui permet de naviguer rapidement dans les grandes hiérarchies.
Oui.
Les catégories peuvent être parcourues sur l'axe vertical, et les éléments de chaque
catégorie peuvent être parcourus sur l'axe horizontal.
Non.
Évitez les hiérarchies de mise en page complexes et imbriquées.