Navigation sur le téléviseur

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

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.

Contrôleur

  • 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 "Accueil"

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.

Application avec navigation supérieure

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
Application avec navigation de gauche

Le menu de gauche est activé, et l'utilisateur est redirigé vers l'élément de menu actif.

Application avec navigation de gauche

Assurez-vous que le bouton "Retour" n'est pas contrôlé par des écrans de confirmation ni fait partie d'une boucle infinie.

Évitez le blocage de sortie. Les utilisateurs doivent pouvoir quitter l'application sans aucune confirmation.

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.

Évitez d'afficher un bouton Retour à l'écran. Les utilisateurs peuvent utiliser le bouton Retour de la télécommande.

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.

Affichez un bouton d'annulation (si nécessaire) pour permettre à l'utilisateur de revenir à la page précédente.

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

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.

Placez les commandes, telles que l'action de recherche, à des emplacements qui ne se chevauchent pas avec d'autres éléments cliquables.
Évitez les mises en page contenant des commandes dans les endroits difficiles d'accès. Il n'est pas facile d'atteindre l'action de recherche illustrée ici avec le pavé directionnel.

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.

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.
Évitez les hiérarchies de mise en page complexes et imbriquées.