Une introduction aux ingrédients de base d'une interface utilisateur TV
La grande majorité des consommateurs de nos jours coupent le câble avec la télévision payante, mais cela ne signifie pas qu'ils ont fui le grand écran pour en consommer le contenu.
Selon une publication de données de Nielsen Selon les habitudes américaines d'observation des adultes, 92% de tout le visionnage se déroule toujours sur l'écran de télévision. Ces chiffres sont très importants.
Plus de 92% de l'audience des adultes américains est toujours à 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 à un boîtier filaire et déporté pour remplir nos écrans; nous utilisons Smart TV, ou diffusons en utilisant des disques 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 bien plus puissante que votre ancien guide à l'écran.
Payer pour regarder des programmes diffusés ou VOD via des services en ligne basés sur un abonnement comme Hulu, Netflix ou Amazon représente 26% des répondants en ligne mondiaux ( Nielsen ). C'est un nombre important. Cependant, 72% des personnes interrogées ont confirmé qu'elles paient 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 coupeurs de corde 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-2016. Il s'agit d'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 OTA. De tous les services de streaming disponibles, Netflix (60,7%) semble être en avance sur le jeu, suivi d'Amazon Prime Video (49,4%) et Hulu (26%). Je pense 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 de l'interface utilisateur pour la télévision est encore un domaine relativement nouveau. C'est aussi une plate-forme 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, y compris la taille de l'écran et la distance du spectateur, les limitations techniques et le contexte d'utilisation. Les utilisateurs vivent une expérience «détendue», assis à une distance moyenne de 3 mètres et l'interface utilisateur et l'expérience doivent en tenir compte. Contrairement aux tablettes tactiles et aux téléphones, les interactions sur les téléviseurs se font via D-pad (contrôle directionnel) à l'aide d'une télécommande ou d'un contrôleur de jeu vidéo, ce qui rend les publicités plus complexes.
Le moniteur
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 à un écran minimaliste élégant suspendu à un mur. Lorsque 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 ont été soumis à un surbalayage. Cela signifie simplement que les images ont été légèrement agrandies afin que les bords ne soient pas hors des limites de la zone de visualisation.
Traditionnellement, les diffuseurs prévoyaient 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 sûre pour un titre pour afficher le texte sans distorsion et une zone d'action sûre où l'image pourrait être affichée en toute sécurité.
Pour des raisons indépendantes de notre volonté, le surbalayage est toujours une chose ... même sur vos nouveaux téléviseurs HD. La quantité de surbalayage n'est pas cohérente entre les téléviseurs. Pour vous assurer que toutes vos informations primaires, telles que les titres et les stocks importants, sont sécurisées, conservez-les dans des marges sûres.
Il n'existe actuellement aucune «norme» pour les zones d'action sûres, car elles sont principalement définies par la plateforme elle-même. Google maintient sa zone de sécurité étroite et Apple est un peu plus généreux. D'après mes nombreuses recherches sur le web, ces zones varient entre 85% et 95% d'un écran de télévision du centre. Afin de répondre aux exigences de toutes les différentes plates-formes avec lesquelles vous pourriez travailler, je suggérerais d'utiliser une zone de sécurité de marges supérieure et inférieure de 60 pixels et de marges latérales de 90 pixels. Cela signifie que toutes vos informations primaires devront s'intégrer dans cette zone pour accueillir tous les écrans de télévision et répondre à toutes les exigences de la plate-forme.
Pour commencer la conception de votre nouvelle interface utilisateur TV, créez un nouveau canevas de 1 920 x 1 080. Son remplissage (zone de sécurité) doit être de 90 pixels sur les côtés (gauche et droit), ainsi que de 60 pixels pour le haut et le bas. Vous pouvez obtenir votre fichier gratuit le télécharger ici .
La navigation
Comment 'haut-bas-gauche-droite' forment les interfaces TV.
En tant que concepteur, le matériel avec lequel nous concevons définira certains de nos modèles de conception. Sur le mobile, nous passons, appuyons, 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 une grande toile qui peut facilement devenir trop complexe si elle n'est pas bien faite. L'affichage de longues lignes de contenu afin de maximiser la quantité de ce qui est 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 plupart 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 plateforme a également ses propres conventions établies. Sur Xbox, par exemple, les déclencheurs fournissent un contrôle «Page précédente» et «Page suivante» tandis que les butoirs sont utilisés pour passer d'une vue à l'autre du contenu. Il existe également un certain nombre de boutons «utilisateurs expérimentés» sur chaque plateforme que les joueurs plus expérimentés connaissent.
L'autre élément critique des interfaces utilisateur TV est l'état de la mise au point. Sans la possibilité de toucher l'écran ou d'utiliser une souris, les utilisateurs doivent accéder à 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 pour indiquer qu'un élément de navigation est en focus.
Concentrez-vous et mettez en évidence les états lors de la conception pour la télévision car ils sont très importants. Cet état de mise au point est l'élément qui met en évidence un composant sélectionnable et indique l'emplacement actuel de l'utilisateur à l'écran. La façon dont la mise au point est affichée 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 sur l'écran et facilite la navigation. Lorsqu'un utilisateur se détourne momentanément du téléviseur puis le regarde, il doit être clair quelle option est sélectionnée pour la navigation. 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 mises en page susceptibles de laisser les utilisateurs se demander où ils se trouvent dans l'application. Ces exemples ne fournissent pas une indication visuelle suffisante (état de la mise au point) du positionnement. Les utilisateurs doivent pouvoir voir clairement où ils se trouvent à tout moment sans avoir à se déplacer vers le haut ou vers le bas. Vous devez être capable de détourner le regard du téléviseur et vice versa tout en connaissant sa position.
rendement palmier à huile par hectare
Typographie
Lisez à dix pieds 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 mobiles et les ordinateurs de bureau, la télévision est définie pour être davantage un environnement de «détente et de plaisir». Compte tenu de cette distance, nous devons traiter une interface utilisateur légèrement différente de celle que nous 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 moniteurs d'ordinateurs de bureau, mais sont vus à 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. En fonction de votre âge, 18px serait probablement la plus petite taille lisible et ne serait appropriée que pour les balises non essentielles, comme un cil de sourcil. Néanmoins, en règle générale, les tailles de police choisies ne doivent jamais être inférieures à 24 pt. 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. Le texte petit et fin sur votre moniteur aura l'air propre et net, mais une fois sur un téléviseur, il peut sembler soufflé ou être inintelligible.
la valorisation comparable au marché est basée sur le résultat net et le taux de capitalisation de la startup.
La clé d'une bonne typographie à la télévision est de tester en permanence. Les caractères minces et petits sur votre moniteur auront l'air propres et nets, mais une fois sur un téléviseur, ils peuvent sembler soufflés ou devenir inintelligibles.
Lignes d'exploration
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 impaires et égales. La télévision transforme ces lignes en phases en alternant rapidement entre les lignes de balayage impaires et paires. Tout pixel (ou ligne de pixels) qui tombe sur une seule ligne de balayage clignotera. Afin d'éviter le scintillement de vos éléments sur l'écran, vous devez toujours garder vos lignes de nombres pairs et pas plus fines que 2 pixels. C'est quelque chose à prendre en compte lorsque vous travaillez sur des projets multiplateformes et que vous vous préparez à transférer vos conceptions sur des appareils tactiles (mobiles et tablettes), où vous pouvez souvent 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 créations sont toujours parfaites au pixel près. L'idée suivante est un bon exemple de lignes créées à l'aide de nombres irréguliers. Comme vous pouvez le voir, nous pouvons clairement voir les effets de cela, et cela devient obsédant pour les yeux.
Couleur
Les moniteurs 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 appareils de bureau, les tablettes et les téléphones. 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 la vitesse à laquelle les noirs deviennent plus lumineux. Nous percevons la lumière deux fois plus qu'une fraction de plus. 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 règles à suivre lors du choix de vos couleurs: Les couleurs vives peuvent être dures pour les yeux lorsque vous regardez la télévision la nuit ou dans une pièce sombre. Évitez la surutilisation des couleurs saturées (en particulier le rouge) et l'utilisation intensive du blanc sur de grands éléments ou arrière-plans. Le blanc pur créera des halos et autres distractions visuelles. Lors du choix des espaces, 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 consiste à éviter les bords nets entre les couleurs très contrastées (en particulier les couleurs vives aux côtés des couleurs sombres), et d'éviter les couleurs «chaudes» telles que 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 comme les bleus et les verts.
Testez toujours les couleurs sur un vrai téléviseur 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 à l'autre. Branchez simplement le câble HDMI de votre téléviseur et essayez-le.
La base
Quelques petites choses à considérer.
Ces éléments doivent être utilisés pour guider vos créations dans leur ensemble. Les considérations les plus importantes lors de la conception de l'interface utilisateur de votre téléviseur sont la simplicité et l'interaction légère.
Bien que de nombreux principes de base et bonnes pratiques pour la conception d'interactions s'appliquent toujours, la télévision est utilisée d'une 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 requiert simplicité et clarté avec une faible densité d'informations. Les articles doivent être suffisamment grands et suffisamment espacés pour être lus à distance. Présente un ensemble clair d'actions ou d'options pour chaque écran.
Cette conception est propre et simple, utilisant de beaux gros traitements sur la carte. Les états de mise au point sont obtenus avec une échelle et des ombres portées alignées sur le reste de la conception épurée.
Cette conception est propre et simple, utilisant de jolis traitements de grandes cartes. Les états de mise au point sont obtenus avec une échelle et des ombres portées alignées sur le reste de la conception épurée. Les métadonnées ne sont également visibles que dans l'état _hover_, permettant aux utilisateurs de rester concentrés sur la carte actuelle.
Cette conception est propre et simple, utilisant de jolis traitements de grandes cartes. Les états de mise au point sont obtenus avec une échelle et des ombres portées alignées sur le reste de la conception épurée.
Repousser les limites des modèles de téléviseurs traditionnels. Cela offre une approche cinématographique alternative au traitement habituel des cartes 16 x 9 que beaucoup d'autres utilisent. Par rapport à de nombreux autres services, l'objectif était de ramener le menu en bas de l'écran
Repousser les limites des modèles de téléviseurs traditionnels. En mettant l'actualité au premier plan, les utilisateurs se concentrent sur une seule actualité à la fois plutôt que sur lignes et lignes de contenu.
Les interfaces utilisateur pour enfants doivent être intuitives, amusantes et faciles à utiliser. Cette conception montre que les entreprises peuvent pousser leurs conceptions au-delà d'un système de grille traditionnel en se concentrant sur des cartes 1x1, 2x3 ou même 16x9.
Mettez 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 sortir à nouveau devrait être facile et évident.
Le facteur le plus important 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 Move, Back, Enter et les autres fonctions de navigation de base doivent être claires. Les utilisateurs doivent pouvoir utiliser les opérations qu'ils souhaitent avec ces actions.
L'objectif était de repousser les limites de la conception de la télévision traditionnelle. Vous trouvez des moyens créatifs de démontrer le large éventail de contenus disponibles aux utilisateurs tout en le rendant intuitif et facile à utiliser.
En tant que concepteurs, notre travail consiste à créer et à concevoir des interfaces utilisateur qui permettent aux utilisateurs d'accéder au contenu de manière claire et facile à naviguer. Nous ne pouvons pas nous attendre à ce que les utilisateurs adoptent de nouvelles habitudes pour pouvoir visualiser notre contenu. Nous devons plutôt adapter nos interfaces utilisateur afin qu'elles puissent être utilisées dans l'obscurité par quelqu'un qui nous donne moins que leur pleine intention, et avec un périphérique d'entrée très limité. C'est un gros défi, mais le gain potentiel est énorme. Amusez-vous à concevoir!
