Les téléviseurs offrent un ensemble limité de commandes de navigation pour les applications. Pour créer un schéma 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, prêtez une attention particulière à la façon dont l'utilisateur navigue lorsqu'il utilise des boutons de 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 pour téléviseur.
Faites en sorte que l'accès au contenu soit rapide et facile. Les utilisateurs souhaitent accéder au contenu rapidement, avec un nombre minimal de clics. Organisez vos informations de manière à avoir le moins d'écrans possible.
Suivez les bonnes pratiques et les recommandations pour que la navigation soit prévisible pour les utilisateurs. Ne réinventez pas inutilement les modèles de navigation, car cela risque de prêter à confusion et d'être imprévisible.
Simplifiez la navigation pour qu'elle soit parfaitement compatible avec les comportements d'utilisateurs largement adoptés. Ne compliquez pas trop en ajoutant des couches de navigation inutiles.
Contrôleurs
Les manettes se déclinent dans de nombreux styles, d'une télécommande minimaliste aux manettes de jeu complexes. Toutes les manettes comprennent un pavé directionnel, ainsi que des boutons "Select" (Sélectionner), "Home" (Accueil) et "Retour". Les autres boutons varient selon les modèles.
Pavé directionnel
La principale méthode de navigation sur téléviseur consiste à utiliser le pavé directionnel. Il comprend des boutons matériels directionnels vers le haut, le bas, la gauche et la droite. Le pavé directionnel transfère la sélection 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 qui est mis en surbrillance.
Bouton d'accueil
Redirige l'utilisateur vers l'écran d'accueil du système.
Bouton Retour
Permet aux utilisateurs de revenir à la vue précédente.
Bouton du micro
Appelle l'Assistant Google ou la saisie vocale.
Navigation avec le pavé directionnel
Sur un téléviseur, les utilisateurs peuvent naviguer à 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 télévision, vous devez fournir un schéma de navigation permettant à l'utilisateur d'apprendre rapidement à 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 pavé directionnel pour détecter les problèmes de navigation.
Suivez ces consignes pour vérifier que le système de navigation de votre application fonctionne bien avec un pavé directionnel sur un téléviseur:
- Assurez-vous qu'un utilisateur disposant d'un pavé directionnel peut accéder à toutes les commandes visibles à l'écran.
- Pour faire défiler des listes actives, assurez-vous que les boutons 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 celle-ci défile toujours lorsqu'un élément est sélectionné.
- Veillez à ce que le passage d'une commande à l'autre soit simple et prévisible.
Modifier la navigation directionnelle
Le framework Android applique automatiquement un schéma de navigation directionnel en fonction de la position relative des éléments sélectionnables dans vos mises en page. Testez le schéma de navigation généré dans votre application à l'aide d'un pavé directionnel. Après les tests, si vous décidez que vous souhaitez que les utilisateurs passent d'une mise en page à une autre 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 qui sera ciblée 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 qui doit être sélectionnée lorsque l'utilisateur fait défiler la page vers le bas. |
nextFocusLeft |
Définit la vue suivante qui doit être sélectionnée lorsque l'utilisateur accède à la gauche. |
nextFocusRight |
Définit la vue suivante qui doit être sélectionnée lorsque l'utilisateur navigue vers la droite. |
nextFocusUp |
Définit la vue suivante qui doit être sélectionnée lorsque l'utilisateur accède au haut de la page. |
Pour utiliser l'un de ces attributs de navigation explicites, définissez la valeur sur le android:id d'un autre widget de la mise en page. Veillez à configurer l'ordre de navigation sous forme de boucle, de sorte que la dernière commande redirige vers la première.
Fournir un focus et une sélection clairs
Le succès du schéma de navigation d'une application sur les téléviseurs dépend de la facilité avec laquelle l'utilisateur peut déterminer quel élément de l'interface utilisateur est au premier plan. Si vous n'indiquez pas clairement l'élément sélectionné, et donc l'élément sur lequel un utilisateur peut effectuer une action, il peut rapidement être frustré et quitter votre application. Pour cette raison, il est important de toujours avoir un élément actif sur lequel l'utilisateur peut effectuer une action immédiatement après le démarrage de votre application ou à chaque fois qu'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 facilement les actions qu'ils peuvent effectuer. Utilisez un schéma uniforme pour indiquer la priorité de votre application.
Android fournit des ressources de liste d'états drawables pour implémenter les mises en surbrillance des commandes sélectionnées et 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 -->
<?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>
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" />
Assurez-vous de fournir une marge intérieure suffisante dans les commandes sélectionnables afin que les mises en surbrillance qui les entourent soient clairement visibles.
Navigation via le bouton Retour
Pour assurer la cohérence entre les applications de 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, renvoyez l'utilisateur à la destination précédente lorsqu'il appuie sur le bouton "Retour" de la télécommande.
Si l'utilisateur passe d'un élément de menu à une fiche au milieu de la page, puis appuie sur le bouton "Retour", le résultat varie selon que l'application utilise la navigation supérieure ou la navigation de gauche:
- L'application utilise la navigation supérieure:renvoyez l'utilisateur en haut de la page en faisant défiler rapidement la page et en activant le focus sur le menu.
- L'application utilise la navigation de gauche:activez le menu de gauche et sélectionnez l'élément de menu actuellement actif.
Assurez-vous que le bouton "Retour" n'est pas contrôlé par des écrans de confirmation ni fait partie d'une boucle infinie.
À ne pas faire.
Évitez le blocage de sortie. Autorisez les utilisateurs à quitter l'application sans confirmation.
À ne pas faire.
N'entrez jamais dans la boucle infinie de fermeture et d'ouverture du menu. Idéalement, il suffit d'appuyer sur le bouton Retour pour quitter l'application. N'affichez pas de bouton de sortie dans le menu, sauf s'il s'agit d'un cas particulier, tel qu'un profil enfant.
N'afficher aucun 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:
À ne pas faire.
Afficher un bouton d'annulation si nécessaire
Si les seules actions visibles sont des actions de confirmation, destructrices ou d'achat, il est recommandé de disposer d'un bouton Annuler qui permet de revenir à la destination précédente:
À faire.
Implémenter la navigation vers l'arrière
Le framework Android gère généralement bien la navigation vers l'arrière, comme le fait le pavé directionnel. Si vous utilisez le composant Navigation, vous pouvez prendre en charge divers graphiques de navigation. Parfois, vous devrez peut-être implémenter un comportement personnalisé, par exemple demander au bouton "Retour" de réinitialiser le curseur 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 section Fournir un retour arrière personnalisé.
Commandes de lecture sur le téléviseur
La lecture des vidéos est l'une des fonctionnalités les plus importantes des téléviseurs. Il est important que les lecteurs vidéo des applications Android TV se comportent de la même manière. Consultez les consignes relatives aux commandes de lecture pour les téléviseurs.
Onglets de navigation "En direct"
En plus de respecter les exigences de qualité des applications TV, les applications disposant d'un flux de télévision en direct intégré dans l'onglet "En direct" doivent également respecter les exigences de lecture fluide et de retour direct, comme décrit dans les sections suivantes.
Une lecture fluide
La lecture fluide s'applique au comportement dans l'application après tout lien profond vers une chaîne en direct ou linéaire depuis Google TV et Android TV.
Les utilisateurs qui cliquent sur un lien profond vers une chaîne en direct/linéaire depuis Google TV et Android TV doivent être redirigés directement vers la chaîne, sans blocage ni retard d'écran dans l'application cible. Les flux de connexion, d'inscription, les vidéos de branding et les autres retards ne sont pas autorisés.
Toutefois, si le lien profond lance le chargement de l'application cible après un démarrage à froid, ce délai de démarrage avant la lecture est autorisé. Dans ce cas, une vidéo ou une animation de branding pour le démarrage d'une application est également autorisée. Il est peu probable qu'une telle expérience de démarrage à froid se produise plusieurs fois par session.
De plus, si l'accès à la version avec lien profond prend quelques secondes, l'affichage du branding de la chaîne et/ou du service est autorisé. Cependant, sa durée ne doit être que le temps nécessaire au chargement du canal (et semblable aux temps de chargement moyens du canal dans l'application).
Si l'utilisateur est déconnecté ou n'est pas abonné, vous pouvez bloquer la lecture pour une chaîne payante afin de terminer un processus 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 appuyant simplement sur le bouton "Retour", 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 des onglets "En direct" se distinguent par l'ajout d'un paramètre de lien profond : ?exit_on_back=[true|false]. Les applications doivent analyser ce paramètre pour déterminer si elles ont été lancées à partir de l'onglet "En direct". Si exit_on_back est défini sur 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 sur le bouton après le lien profond, l'exigence concernant le retour direct ne s'applique pas. 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 fait apparaître une superposition de commandes. L'utilisateur attend que la superposition disparaisse, puis appuie sur le bouton "Retour". Étant donné que le premier bouton appuyé après avoir suivi le lien profond était le bouton de sélection du pavé directionnel, l'exigence de retour direct ne s'applique pas. C'est la logique normale de la pile "Retour" de l'application qui s'applique.
Appuyer plusieurs fois sur le bouton "Retour" doit rediriger l'utilisateur vers la racine de l'application, puis vers Google TV ou Android TV, sans boucles infinies. Pour en savoir plus, consultez la section Comportement prévisible du bouton Retour.
Architecture de 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 dans le lanceur après avoir appuyé sur le bouton "Retour".
Les liens profonds simulent la navigation manuelle
Qu'il s'agisse d'un lien profond ou d'une navigation manuelle vers une destination spécifique, les utilisateurs peuvent utiliser le bouton "Retour" pour revenir à la destination de départ dans les destinations.
Créer un lien profond dans une application à partir d'une autre application simule la navigation manuelle. Par exemple, si l'utilisateur accède directement à une page d'informations dans 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 vers tous les éléments sélectionnables
Permettez aux utilisateurs de naviguer dans votre interface utilisateur de façon claire. S'il n'existe pas de chemin direct pour accéder à un contrôle, envisagez de le déplacer.
À faire.
Placez les commandes, comme l'action de recherche illustrée ici, à des emplacements qui ne se chevauchent pas avec d'autres éléments cliquables.
À ne pas faire.
Évitez les mises en page contenant des commandes dans des endroits difficiles d'accès. Il n'est pas facile d'atteindre l'action de recherche illustrée ici à l'aide du pavé directionnel.
Axes
Concevez votre mise en page de façon à tirer parti à la fois des axes horizontaux et verticaux. attribuer à chaque direction une fonction spécifique, ce qui permet de naviguer rapidement dans de grandes hiérarchies ;
À faire.
Il est possible de balayer les catégories sur l'axe vertical, et de parcourir les éléments de chaque catégorie sur l'axe horizontal.
À ne pas faire.
Évitez les hiérarchies de mise en page complexes et imbriquées.