Repenser la conception de l'interface utilisateur pour la plate-forme TV

Une introduction aux ingrédients de base d'une interface utilisateur TV

De nos jours, une grande majorité de consommateurs coupent le cordon avec la télévision payante, mais cela ne signifie pas qu'ils ont fui le grand écran pour consommer leur contenu. Selon une publication de données par Nielsen, les habitudes de visionnage des adultes américains ont révélé que 92 % de tous les visionnements ont toujours lieu sur l'écran de télévision. Ce sont des chiffres assez énormes.

Plus de 92 % du visionnage chez les adultes américains se fait toujours sur l'écran de télévision.

Le sens de "regarder la télévision" a beaucoup changé au cours des dernières décennies. Nous ne sommes plus limités à une télécommande et à un décodeur pour remplir nos écrans ; nous utilisons des téléviseurs intelligents, ou diffusons en utilisant des rondelles comme Roku, Amazon Fire et Apple TV, ou connectons des consoles de jeux vidéo comme Xbox et Playstation. Et chacun de ces appareils permet une interface utilisateur beaucoup plus puissante que votre guide à l'écran à l'ancienne.

Payer pour regarder des programmes diffusés ou VOD via des services en ligne basés sur un abonnement tels que Hulu, Netflix ou Amazon représente 26 % des répondants en ligne dans le monde (Nielsen). C'est un nombre important. Cependant, 72 % des personnes interrogées ont confirmé qu'elles payaient toujours pour regarder leur contenu via une connexion TV traditionnelle.

Cela signifie-t-il que la connexion TV traditionnelle est là pour rester ?

Nous semblons tous penser que les coupe-cordons là-bas représenteraient un nombre plus élevé. Nielsen rapporte que 116,4 millions de foyers aux États-Unis devraient regarder la télévision au cours de la saison 2015-16. C'est un nombre énorme et le rapport a également révélé qu'environ 9,5 millions de ces foyers sont passés à la télévision gratuite en direct. De tous les services de streaming, Netflix (60,7%) semble être en avance sur le jeu, suivi d'Amazon Prime Video (49,4%) et de Hulu (26%). Je crois que l'une des principales raisons pour lesquelles les gens coupent le cordon est que nous ne voulons payer que ce que nous utilisons.

Par rapport aux ordinateurs et même aux téléphones portables, la conception d'interfaces utilisateur pour la télévision est encore un domaine relativement nouveau. C'est aussi une plateforme fondamentalement différente et la façon dont nous consommons notre contenu est différente. La conception pour la télévision nécessite un ensemble unique de considérations, notamment la taille de l'écran et la distance du spectateur, les contraintes techniques et le contexte d'utilisation. Les utilisateurs sont dans une expérience « allongée », assis à une distance moyenne de 10 pieds et l'interface utilisateur et l'expérience doivent refléter cela. Contrairement aux tablettes et téléphones à écran tactile, les interactions sur les téléviseurs se font via le D-pad (pavé de contrôle directionnel) à l'aide d'une télécommande ou d'une manette de jeu vidéo, ce qui ajoute à la complexité.

L'affichage

Les téléviseurs ne sont pas comme les tablettes et les téléphones.

Les téléviseurs ont beaucoup changé au fil du temps, passant d'un énorme meuble encombrant à un écran minimaliste élégant accroché au mur. À l'époque où les téléviseurs occupaient tout le salon, ils utilisaient une technologie qui produisait des images incohérentes sur les téléviseurs, en particulier près des bords. Pour compenser ces problèmes, les téléviseurs CRT étaient soumis à un surbalayage. Cela signifie simplement que les images ont été légèrement agrandies afin que les bords ne soient pas en dehors des limites de la zone de visualisation.

Traditionnellement, les diffuseurs anticipaient cela et voulaient éviter que leurs informations critiques ne soient affichées trop près des bords de l'écran. Pour résoudre ce problème, ils ont créé une zone de sécurité de titre pour afficher le texte sans distorsion et une zone de sécurité d'action où l'image peut être affichée en toute sécurité.

Pour des raisons indépendantes de notre volonté, le surbalayage est toujours d'actualité… même sur vos nouveaux téléviseurs HD. La quantité de surbalayage n'est pas uniforme d'un téléviseur à l'autre. Pour vous assurer que toutes vos informations principales telles que les titres et les actions importantes sont en sécurité, conservez-les dans les marges de sécurité.

Il n'existe actuellement pas de « norme » pour les zones d'action sûres ; il est principalement défini par la plate-forme elle-même. Google garde sa zone de sécurité étroite et celle d'Apple est un peu plus généreuse. D'après mes nombreuses recherches sur le web, ces zones varieront entre 85% et 95% d'un écran de télévision par rapport au centre. Afin de répondre aux exigences de toutes les différentes plates-formes sur lesquelles vous pourriez travailler, je suggérerais d'utiliser une zone de sécurité de 60 pixels de marges supérieure et inférieure et de 90 pixels de marges latérales. Cela signifie que toutes vos informations principales devront tenir dans cette zone afin de s'adapter à tous les écrans de télévision et de répondre à toutes les exigences de la plate-forme.

Pour commencer la conception de votre nouvelle interface utilisateur de télévision, créez un nouveau canevas 1920 x 1080. Votre rembourrage (zone de sécurité) doit être de 90 pixels sur les côtés (gauche et droite) ainsi que de 60 pixels pour le haut et le bas. Vous pouvez obtenir votre téléchargement de fichier gratuit ici.

La navigation

Comment haut-bas-gauche-droite façonne les interfaces TV.

En tant que concepteur, le matériel que nous concevons définira certains de nos modèles de conception. Sur mobile, nous balayons, tapotons, appuyons longuement, tirons, etc. pour effectuer des actions. Les onglets et les menus sont utilisés comme modèles de navigation sur nos appareils. La télévision offre un très grand canevas qui peut facilement devenir trop complexe s'il n'est pas bien fait. Voir de longues rangées de contenu afin de maximiser la quantité visible pour les utilisateurs est devenu un élément standard des interfaces utilisateur de télévision.

Contrairement aux appareils mobiles que nous contrôlons avec nos doigts, la majorité des interfaces utilisateur TV sont contrôlées par un D-pad et utilisées à distance de l'écran. Que ce soit sur une télécommande ou une manette de jeu, le D-pad limite la navigation à quatre directions : haut, bas, gauche et droite.

Chaque plate-forme a également ses propres conventions établies. Sur Xbox, par exemple, les déclencheurs fournissent un contrôle "Page Up" et "Page Down" tandis que les pare-chocs sont utilisés pour tabuler entre les vues de contenu. Il existe également un certain nombre de boutons « utilisateur expérimenté » sur chaque plate-forme avec lesquels les joueurs plus expérimentés seraient familiers.

L'autre élément critique des interfaces utilisateur TV est l' état de mise au point. Sans la possibilité de toucher l'écran ou d'utiliser une souris, les utilisateurs doivent naviguer jusqu'à l'élément qu'ils souhaitent sélectionner. Lorsque l'utilisateur navigue dans l'application, différents éléments de l'interface utilisateur doivent être mis en surbrillance, indiquant qu'un élément de navigation est mis au point.

Les états de mise au point et de surbrillance lors de la conception pour la télévision sont très importants. Cet état de focus est l'élément qui met en surbrillance un composant sélectionnable et indique l'emplacement actuel de l'utilisateur à l'écran. La forme sous laquelle le focus est affiché peut varier ; selon le composant, cependant, la cohérence sera toujours la clé. Une mise au point claire et très visible aide l'utilisateur à reconnaître rapidement sa position actuelle à l'écran et facilite la navigation. Lorsqu'un utilisateur détourne momentanément le regard du téléviseur, puis retourne son regard, l'option actuellement sélectionnée pour la navigation devrait automatiquement être claire. Chaque élément à l'écran doit être accessible par le curseur, et il doit toujours être clair où le curseur peut se déplacer ensuite.

Exemples de conceptions qui pourraient amener les utilisateurs à se demander où ils se trouvent dans l'application. Ces exemples ne fournissent pas suffisamment d'indication visuelle (état de mise au point) du positionnement. Les utilisateurs doivent pouvoir voir clairement où ils se trouvent à tout moment sans avoir à monter ou descendre. Vous devriez être en mesure de détourner le regard du téléviseur et de l'arrière tout en connaissant votre position.

Typographie

Lecture à dix mètres de distance.

Les applications TV sont souvent appelées expériences de dix pieds, un terme qui fait référence à une distance commune entre vous et votre téléviseur. Contrairement à d'autres appareils tels que les téléphones portables et les ordinateurs de bureau, la télévision est conçue pour être davantage un environnement « détendez-vous et détendez-vous ». Compte tenu de cette distance, nous devons traiter une interface utilisateur un peu différemment que nous le ferions sur le Web ou sur mobile.

Les écrans de télévision sont généralement plus grands que les appareils mobiles et les écrans d'ordinateur de bureau, mais ils sont vus d'une plus grande distance. La lisibilité devient une caractéristique importante, ce qui signifie que la taille du texte et des autres éléments doit être ajustée en conséquence. Selon votre âge, 18px serait probablement la plus petite taille lisible et ne convient que pour les étiquettes non essentielles, comme un onglet de sourcil. Même ainsi, en règle générale, les tailles de police choisies ne doivent jamais être inférieures à 24 pts. C'est ce que je considérerais comme la taille de police minimale pour s'adapter à chaque type d'utilisateur.

La clé d'une bonne typographie à la télévision est de tester constamment. Les caractères fins et petits sur votre moniteur auront l'air propres et nets, mais une fois sur un téléviseur, ils peuvent apparaître soufflés ou devenir inintelligibles.

Lignes de balayage

Que sont les lignes de balayage ?

Contrairement aux écrans de bureau, mobiles et tablettes, l'image sur un écran de télévision est composée de lignes de balayage paires et impaires. Le téléviseur restitue ces lignes en phases alternant rapidement entre des lignes de balayage paires et impaires. Tout pixel (ou ligne de pixels) tombant sur une seule ligne de balayage scintillera. Afin d'éviter le scintillement de vos éléments à l'écran, vous devez toujours garder vos lignes sur des nombres pairs et pas plus minces que 2 pixels. C'est quelque chose à considérer lorsque vous travaillez sur des projets multiplateformes et que vous vous préparez à transférer vos conceptions à partir d'appareils tactiles (mobiles et tablettes), où vous pouvez souvent vous retrouver à créer des boutons de bordure 1px, pour la télévision.

Une autre façon d'éviter ces lignes ou formes floues est de vous assurer que vos conceptions sont toujours parfaites au pixel près. L'exemple ci-dessous est un bon exemple de lignes créées à l'aide de nombres impairs. Comme vous pouvez le voir, on en voit clairement les effets, et cela devient déstabilisant pour les yeux.

Couleur

Les écrans de télévision ont des limites.

Le premier élément à garder à l'esprit est que les téléviseurs ont une valeur gamma beaucoup plus élevée que les ordinateurs de bureau, les tablettes et les combinés. La meilleure façon de décrire comment le gamma affecte la qualité de l'image est que le gamma représente le niveau de différence de luminosité entre chaque étape de l'échelle de gris, ou à quelle vitesse les noirs deviennent plus lumineux. Nous percevons deux fois la lumière comme étant seulement une fraction plus brillante. Les différentes marques et modèles de téléviseurs varient considérablement en ce qui concerne la luminosité, l'affichage et d'autres paramètres. Comme le type, la couleur doit être testée tôt et souvent sur les téléviseurs.

Quelques lignes directrices à suivre lors du choix de vos couleurs : Les couleurs vives peuvent devenir dures pour les yeux lorsque vous regardez la télévision la nuit ou dans une pièce sombre. Évitez d'utiliser trop de couleurs saturées (en particulier le rouge) et l'utilisation intensive de blanc dans les grands éléments ou les arrière-plans. Le blanc pur créera des halos et autres distractions visuelles. Lors du choix des blancs, il est recommandé de choisir une valeur hexadécimale #f1f1f1 pour éviter tout scintillement. Afin d'augmenter la lisibilité, assurez-vous de créer suffisamment de contraste entre vos éléments

La règle générale est d'éviter les bords nets entre les couleurs très contrastées (en particulier les couleurs vives à côté des couleurs sombres), et d'éviter les couleurs "chaudes" comme les rouges et les jaunes très saturés. Celles-ci saignent plus facilement que les couleurs moins saturées ou les couleurs plus froides telles que les bleus et les verts.

Testez toujours les couleurs sur un téléviseur réel pour comprendre comment vos choix de couleurs se traduisent sur grand écran. Si possible, prévisualisez votre application sur plusieurs téléviseurs, car les couleurs peuvent varier considérablement d'un modèle de téléviseur à l'autre. Branchez simplement le câble HDMI de votre téléviseur et testez-le.

Les bases

Petites choses à considérer.

Ces éléments doivent être utilisés pour guider vos conceptions dans leur ensemble. Les principales considérations lors de la conception de vos interfaces utilisateur TV sont la simplicité et l'interaction légère.

Bien que bon nombre des principes fondamentaux et des meilleures pratiques en matière de conception d'interactions s'appliquent toujours, la télévision est utilisée de manière plus détendue, contrairement à un ordinateur ou un appareil mobile. L'interface utilisateur d'un téléviseur doit être claire, simple et visuelle. La conception nécessite simplicité et clarté avec une faible densité d'informations. Les éléments doivent être grands et suffisamment espacés pour être lus à distance. Présentez un ensemble clair d'actions ou d'options pour chaque écran.

Cette conception est propre et simple, utilisant de beaux gros traitements de cartes. Les états de mise au point sont obtenus avec une échelle et des ombres portées qui sont alignées avec le reste de la conception épurée. Les métadonnées ne sont également visibles qu'au survol, ce qui permet aux utilisateurs de rester concentrés sur la carte actuelle.

Placez le contenu ou les options les plus importants en premier sur l'écran afin qu'ils soient facilement visibles et navigables par l'utilisateur. Les niveaux d'écran inutiles doivent être supprimés. Entrer dans différents niveaux et en ressortir doit être facile et évident.

Le facteur le plus crucial lors de la conception d'une application TV est d'inclure une navigation claire et précise pour les opérations de l'utilisateur. Si la navigation est ambiguë, les utilisateurs se sentiront confus et peu sûrs.

En bref, les utilisateurs doivent toujours savoir exactement où ils se trouvent dans une application. N'oubliez pas que l'utilisateur n'utilise que les commandes de base pour naviguer. Les fonctions Déplacer, Retour, Entrée et autres fonctions de navigation de base doivent être claires. Les utilisateurs doivent pouvoir utiliser les opérations qu'ils souhaitent avec ces actions.

En tant que concepteurs, notre travail consiste à créer et à concevoir des interfaces utilisateur qui permettent aux utilisateurs d'accéder au contenu d'une manière claire et facile à naviguer. Nous ne pouvons pas nous attendre à ce que les utilisateurs adaptent de nouvelles habitudes juste pour qu'ils puissent voir notre contenu. Au lieu de cela, nous devons adapter nos interfaces utilisateur afin qu'elles puissent être utilisées dans l'obscurité par quelqu'un qui nous donne moins que sa pleine intention, et avec un périphérique d'entrée très limité. C'est tout un défi, mais le gain potentiel est énorme. Amusez-vous à concevoir!

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques