Les téléviseurs fournissent 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 et les limites des utilisateurs lorsqu'ils utilisent votre application. Lorsque vous créez votre application Android pour TV, portez une attention particulière à la navigation de l'utilisateur lorsqu'il utilise des boutons de télécommande plutôt qu'un écran tactile.
Principes
L'objectif est que la navigation semble naturelle et familière sans dominer l'interface utilisateur ni détourner l'attention du contenu. Les principes suivants permettent de définir une base de référence pour une expérience utilisateur cohérente et intuitive sur toutes les applications TV.
Accédez rapidement et facilement au contenu. Les utilisateurs veulent accéder rapidement au contenu, en un minimum de clics. Organisez vos informations de manière à utiliser 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 peut être source de confusion et d'imprévisibilité.
Simplifiez la navigation pour prendre en charge facilement les comportements des utilisateurs couramment adoptés. Ne compliquez pas trop les choses en ajoutant des couches de navigation inutiles.
Contrôleurs
Les manettes sont disponibles dans différents styles, allant d'une télécommande minimaliste aux manettes de jeu complexes. Toutes les manettes 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
Sur un téléviseur, la méthode de navigation principale consiste à utiliser le pavé directionnel, qui comprend des boutons matériels dans les directions haut, bas, gauche et droite. Le pavé directionnel transfère la mise au point d'un objet vers l'objet le plus proche dans la direction du bouton enfoncé.
Bouton de sélection
Sélectionne l'élément actif à l'écran.
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 des 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 excellente application optimisée pour les téléviseurs, 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 d'autre à faire pour votre application. Toutefois, vous devez tester minutieusement la navigation avec un contrôleur de 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 doté d'un pavé directionnel peut accéder à toutes les commandes visibles à l'écran.
- Pour les listes déroulantes avec focus, 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 dans la liste et que la liste défile toujours lorsqu'un élément est sélectionné.
- Assurez-vous que le basculement entre les commandes est 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 se déplacent d'une manière spécifique dans vos mises en page, vous pouvez configurer une navigation directionnelle explicite pour vos commandes.
L'exemple de code suivant montre comment définir la commande suivante afin de recevoir le focus d'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 à sélectionner lorsque l'utilisateur descend. |
nextFocusLeft |
Définit la vue suivante qui sera sélectionnée lorsque l'utilisateur parcourra la gauche. |
nextFocusRight |
Définit la vue suivante à sélectionner lorsque l'utilisateur accède à la page vers la droite. |
nextFocusUp |
Définit la vue suivante à afficher lorsque l'utilisateur remonte. |
Pour utiliser l'un de ces attributs de navigation explicites, définissez la valeur sur l'android:id d'un autre widget de la mise en page. Veillez à configurer l'ordre de navigation sous la forme d'une boucle, afin que la dernière commande redirige le curseur sur la première.
Fournir une mise au point et une sélection claires
Le succès du schéma de navigation d'une application sur les téléviseurs dépend de la facilité avec laquelle un utilisateur peut déterminer quel élément de l'interface utilisateur est sélectionné. Si vous n'indiquez pas clairement l'élément sélectionné et, par conséquent, l'élément sur lequel l'utilisateur peut effectuer une action, il peut rapidement être frustré et quitter votre application. Pour la même raison, il est important de toujours avoir un élément sur lequel l'utilisateur peut agir 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 ensuite. Utilisez un schéma uniforme pour indiquer l'intérêt d'une application dans votre application.
Android fournit des ressources de liste d'états drawable pour implémenter les mises en surbrillance des commandes ciblé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'état précédent à un Button:
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:background="@drawable/button" />
Assurez-vous d'ajouter une marge intérieure suffisante dans les commandes sélectionnables afin que les zones en surbrillance autour d'elles soient clairement visibles.
Navigation avec le bouton Retour
Pour assurer la cohérence entre les applications sur la plate-forme, assurez-vous que le comportement du bouton "Retour" suit ces consignes.
Utiliser le comportement prévisible du bouton "Retour"
Pour créer une expérience de navigation simple et prévisible, redirigez l'utilisateur vers la destination précédente lorsque l'utilisateur 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:redirigez l'utilisateur vers le haut de la page en faisant défiler rapidement la page et en activant le curseur dans le menu.
- L'application utilise la navigation de gauche:activez le menu de gauche et placez le curseur sur l'élément de menu actuellement actif.
Assurez-vous que le bouton "Retour" n'est pas restreint par des écrans de confirmation ou ne fait pas partie d'une boucle infinie.
Non.
Évitez le contrôle de sortie. Permettez aux utilisateurs de quitter l'application sans confirmation.
Non.
N'entrez jamais dans la boucle infinie pour fermer et ouvrir le menu. Dans l'idéal, 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 d'annulation si nécessaire
Si les seules actions visibles sont des actions de confirmation, destructrices ou d'achat, il est recommandé d'utiliser un bouton Annuler qui permet de revenir à la destination précédente:
À faire.
Implémenter le retour arrière
Le framework Android gère généralement bien la navigation vers l'arrière, comme pour le pavé directionnel. Le composant Navigation est compatible avec divers graphiques de navigation. Parfois, vous devrez peut-être implémenter un comportement personnalisé, comme faire en sorte que le bouton "Retour" réinitialise le ciblage 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 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. Reportez-vous aux consignes relatives aux commandes de lecture pour les téléviseurs.
Navigation par 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 lecture et de retour direct simples, comme décrit dans les sections suivantes.
Une lecture fluide
La lecture fluide s'applique au comportement dans l'application après un lien profond vers une chaîne en direct/linéaire depuis Google TV et Android TV.
Les utilisateurs qui cliquent sur un lien profond de chaîne en direct/linéaire depuis Google TV et Android TV doivent être redirigés directement vers la lecture de la chaîne, sans bloquer ni retarder l'écran de l'application cible. Les parcours de connexion, d'inscription, de promotion de vidéos et autres ne sont pas autorisés.
Toutefois, si le lien profond lance le chargement de l'application cible à partir d'un démarrage à froid, ce délai de démarrage avant la lecture est autorisé. Une vidéo ou une animation de branding au démarrage de l'application est également autorisée dans ce cas. Il est peu probable qu'un tel démarrage à froid se produise plusieurs fois par session.
De plus, si l'activation d'une chaîne avec lien profond prend quelques secondes, il est autorisé à afficher le branding de la chaîne et/ou du service. Cependant, sa durée ne doit pas dépasser le temps nécessaire au chargement du canal (et comme le temps de chargement moyen du canal dans l'application).
Si l'utilisateur est déconnecté ou n'est pas abonné, vous pouvez bloquer la lecture d'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 une seule fois sur Retour, quel que soit le temps écoulé. Ce comportement de retour direct est requis 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 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 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 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. Au lieu de cela, la logique normale de la pile "Retour" 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
Destination de départ fixe
Le premier écran que l'utilisateur voit lorsqu'il lance l'application à partir du lanceur est également le dernier écran que l'utilisateur voit lorsqu'il revient au lanceur après avoir appuyé sur le bouton "Retour".
Les liens profonds simulent la navigation manuelle
Qu'il s'agisse de liens profonds ou d'un accès manuel à une destination spécifique, les utilisateurs peuvent utiliser le bouton "Retour" pour revenir aux destinations jusqu'à la destination de départ.
L'ajout de liens profonds vers une application depuis une autre application simule 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.
Effacer le chemin d'accès à tous les éléments sélectionnables
Permettez aux utilisateurs de naviguer dans votre interface utilisateur de manière claire. S'il n'est pas possible d'accéder directement à une commande, envisagez de la déplacer.
À faire.
Placez les commandes, comme l'action de recherche illustrée ici, à des endroits qui ne chevauchent pas d'autres éléments cliquables.
Non.
Évitez les mises en page contenant des commandes dans des endroits difficiles d'accès. Il n'est pas facile d'accéder à l'action de recherche indiquée ici à l'aide du pavé directionnel.
Haches
Concevez votre mise en page pour tirer parti des axes horizontaux et verticaux. Attribuez à chaque direction une fonction spécifique afin de pouvoir naviguer rapidement dans les grandes hiérarchies.
À faire.
Les catégories peuvent être parcourues sur l'axe vertical, et les éléments de chacune d'elles peuvent être parcourus sur l'axe horizontal.
Non.
Évitez les hiérarchies de mise en page complexes et imbriquées.