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 l'interface utilisateur de votre téléviseur, tenez compte de ces commandes limitées et de la manière dont l'utilisateur navigue à l'aide des boutons de la télécommande au lieu d'un écran tactile.
![Image héros de la navigation](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/cover-navigation.webp?authuser=8&hl=fr)
Sélection
- Le contrôleur offre des fonctionnalités de navigation limitées (de haut en bas, à gauche et à droite). Soyez donc attentif à la façon dont cela peut façonner la conception de l'interface utilisateur de votre application.
- La navigation doit être naturelle et familière.
- Créez une expérience de navigation simple avec le bouton "Retour" de la télécommande.
- Si l'utilisateur ne peut pas accéder directement à un contrôle, envisagez de le déplacer.
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.
Efficace
Faites en sorte que l'accès au contenu soit simple et rapide. Les utilisateurs veulent accéder au contenu rapidement, avec un nombre minimal de clics. Organisez vos informations de manière à avoir le moins d'écrans possible.
Prévisibilité
Suivre les bonnes pratiques et les recommandations pour que la navigation soit prévisible pour les utilisateurs. Ne réinventez pas les modèles de navigation inutilement, car cela risque de prêter à confusion et d'être imprévisible.
Intuitive
Simplifiez la navigation pour qu'elle soit compatible avec les comportements largement adoptés. Ne compliquez pas trop en ajoutant des couches de navigation inutiles.
Contrôleur
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 "Sélectionner", "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, qui comprend des boutons physiques directionnels vers le haut, le bas, la gauche et la droite.
- Bouton "Sélectionner" : permet de sélectionner l'élément sélectionné à l'écran. Appuyez de manière prolongée pour afficher plus d'options.
- 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 : permet d'appeler l'Assistant Google ou la saisie vocale.
Navigation avec le pavé directionnel
Sur un téléviseur, les utilisateurs naviguent à l'aide d'un pavé directionnel à quatre directions: haut, bas, gauche et droite. Pour créer une application TV optimale, concevez un schéma de navigation permettant à l'utilisateur d'apprendre rapidement à utiliser votre application à l'aide des quatre touches fléchées. Le pavé directionnel déplace le curseur d'un élément vers l'élément le plus proche dans la direction correspondante.
Pour tester le bon fonctionnement de la navigation dans votre application avec un pavé directionnel sur un téléviseur, tenez compte des points suivants:
- Assurez-vous qu'un utilisateur peut accéder à tous les éléments sélectionnables à l'écran.
- Assurez-vous que la direction de la navigation est simple et prévisible.
- Pour faire défiler les listes, assurez-vous que les boutons haut et bas du pavé directionnel font défiler toute la liste et que chaque élément de la liste peut être sélectionné.
Bouton "Accueil"
En appuyant sur le bouton d'accueil, l'utilisateur revient toujours à l'écran d'accueil ou au Lanceur d'applications de Google TV. L'application actuelle est suspendue par défaut en arrière-plan.
Un appui prolongé sur le bouton d'accueil affiche le tableau de bord du système sur Google TV et la grille d'applications sur Android TV. Le comportement par défaut peut varier selon le fabricant.
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 prévisible, renvoyez l'utilisateur à la destination précédente lorsqu'il appuie sur le bouton "Retour" de la télécommande. En fin de compte, l'utilisateur doit accéder à la page d'accueil ou au lanceur d'applications de Google TV s'il continue d'appuyer sur le bouton Retour.
L'utilisateur est redirigé en haut de la page en faisant défiler rapidement l'écran et active le menu.
![Appli avec navigation supérieure](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-top-navigation.webp?authuser=8&hl=fr)
Le menu de gauche est activé, et l'utilisateur est redirigé vers l'élément de menu actif.
![Application avec navigation de gauche](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-left-navigation.webp?authuser=8&hl=fr)
Assurez-vous que le bouton "Retour" n'est pas contrôlé par des écrans de confirmation ni fait partie d'une boucle infinie.
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-gating.webp?authuser=8&hl=fr)
À éviter
Ne pas afficher de bouton "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 virtuel Retour à l'écran.
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/back-no-button.webp?authuser=8&hl=fr)
À éviter
Afficher le bouton "Annuler" 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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/show-cancel.webp?authuser=8&hl=fr)
À faire
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 de créer des liens profonds ou d'accéder manuellement à une destination spécifique, les utilisateurs peuvent utiliser le bouton "Retour" pour accéder à la destination de départ depuis n'importe quelle section de l'application.
![Les liens profonds simulent la navigation manuelle](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/arch-deep-linking.webp?authuser=8&hl=fr)
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
Donnez aux utilisateurs la possibilité 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.
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/clear-ui-do.webp?authuser=8&hl=fr)
À faire
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/clear-ui-dont.webp?authuser=8&hl=fr)
À éviter
Axe
Concevez votre mise en page de façon à tirer parti des axes horizontaux et verticaux. Attribuez à chaque direction une fonction spécifique pour accélérer la navigation dans de grandes hiérarchies.
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/axis-do.webp?authuser=8&hl=fr)
À faire
![](https://developer.android.google.cn/static/design/ui/tv/guides/foundations/images/navigation/axis-dont.webp?authuser=8&hl=fr)