Conception d'une plate-forme de jeu en nuage sur Android TV - Étude de cas sur la conception UI / UX

C'était un lundi normal jusqu'à ce que le client propose un nouveau projet à concevoir sur Android TV. Nous avons eu la vaste expérience de la conception de différentes dispositions d'interface utilisateur pour le Web, les mobiles, les tablettes et les systèmes de points de vente, mais c'était la première fois que nous devions concevoir quelque chose pour une télévision intelligente. Nous étions curieux de concevoir quelque chose de nouveau et avons accepté l'offre.

“Il y a toujours une première fois”

Nous étions enthousiastes à l'idée de créer quelque chose comme ça pour la première fois. Nos outils étaient prêts, mais nous avons également commencé simultanément à recueillir les inspirations et les données nécessaires à la conception de notre première application Android TV.

À propos du projet

Le client nous a dit l'exigence; l'application portait sur la plateforme de jeu en nuage. Quelque chose qui sonnait vraiment bien et nous rendait vraiment excité de travailler. Nous avons effectué des recherches sur les utilisateurs et les fonctionnalités de l'application et sur la manière de la représenter sur Android TV. La chose la plus importante à considérer était que la présentation d'Android TV était très différente de celle des présentations Web et mobiles classiques.

Les directives sur les matériaux de Google nous ont aidés à commencer la conception.

Navigation TV Android

Mise en page Android TV et à distance

La première chose à faire était de comprendre le périphérique dans lequel l'utilisateur utilisera l'application. Nous avons compris que l'utilisateur avait différents périphériques d'entrée à utiliser. Mais dans ce cas, l'utilisateur utilisera principalement une télécommande Android ou une manette de jeu pour naviguer. La navigation était ce que nous prenions au sérieux, car nous voulions que l’utilisateur suive des étapes minimales et nous ne devrions pas ressentir la complexité d’utiliser l’interface.

Crédits d'image Google Design

Nous avons suivi la disposition des matériaux standard, qui semble familière à l'utilisateur et qui est très facile à naviguer. Nous avons créé une section avec défilement horizontal (axe X) et l'utilisateur peut changer de section par défilement vertical (axe Y). Le tiroir a été conservé au cas où l’utilisateur choisirait de modifier les paramètres, d’explorer des catégories et d’autres fonctions secondaires.

Structure de conception Artboard pour Android TV

Recherche

Nous avons effectué des recherches sur les plates-formes de jeu actuelles telles que Vortex et avons également pris référence sur des consoles de jeu telles que Xbox et Play Station. Ces dispositions nous ont aidés à comprendre les interfaces de jeu et la manière dont les données sont présentées à la télévision. Nous avons également examiné brièvement les interfaces populaires sur Android TV telles que Netflix et Youtube pour différents modèles de disposition et référence de convivialité.

Crédits d'image Windows Central

Toutes les applications de référence que nous avons vues avaient pour principal objectif les bannières et étaient conçues de manière à ce que l'utilisateur puisse facilement naviguer à travers le pavé de navigation à 4 directions. Nous avons conclu en conservant le moins possible de polices pour offrir à l'utilisateur une expérience cinématographique familière et intuitive. En outre, la taille de la police devait rester visible et volumineuse, car l'utilisateur se trouvait à une distance de 5 à 10 pieds du téléviseur.

Sélection de couleur

Couleurs

Nous avions toujours aimé les espaces blancs et l’aspect minimal de l’application, mais dans ce cas, le blanc n’était pas la couleur que les utilisateurs voulaient voir sur grand écran. Nous avons donc décidé d’utiliser des couleurs sombres et mates qui seraient moins perceptibles par l’utilisateur. En outre, l’arrière-plan sombre met en évidence les bannières de jeu et lui donne un aspect intuitif.

Comme l'application était destinée au jeu, nous avions l'intention de garder un vecteur de polygone en arrière-plan afin de donner à l'utilisateur une expérience de parallaxe. Les couleurs étaient sombres, ce qui a permis à l’utilisateur de se concentrer sur le contenu de l’application.

Recherche d'utilisateurs

Nous avons effectué une recherche sur les utilisateurs et classé 2 catégories pour les utilisateurs.

Classification des utilisateurs

John aime explorer de nouveaux jeux alors que Smith souhaite continuer le même jeu pendant longtemps. Donc, avec ces résultats, nous avons mis au point des fonctionnalités telles que Recommendations for John et Jeux récemment joués pour Smith. En outre, la mise en page est restée simple afin que les deux puissent naviguer facilement et jouer à des jeux sans aucun effort.

Disposition de la carte

La présentation de la carte était parfaite pour offrir une expérience cinématographique aux utilisateurs. La carte sélectionnée mettra en évidence et augmentera selon la conception matérielle. Nous avons gardé Infinite Scrolling pour le haut, qui ne contient que des bannières des jeux sans aucune information textuelle. De plus, nous avons conservé les jeux récemment joués avec la disposition des matériaux et le défilement horizontal.

Conception de cartes

Il était important de donner à l'utilisateur la même expérience cinématographique que celle fournie par les applications telles que Netflix, Youtube et d'autres applications. De plus, nous voulions que l'utilisateur dispose d'une navigation transparente à travers les écrans et les sections.

Résultats finaux

Finalement, l'hiver est arrivé et c'était le moment de l'action. Nous avons analysé tous les aspects et essayé de le représenter visuellement. La cartographie conceptuelle et la structure filaire étaient terminées et l'interface utilisateur avait son tour. Nous avions tout ce dont nous avions besoin et il fallait l'exécuter.

Structure d'application

Nous avons eu le résultat pour le design: goût du jeu et bannières colorées. Nous avons soumis l'interface dans laquelle ont eu les retours positifs. Nous l'avons également testé sur Android TV et il a eu les résultats escomptés.

Interface utilisateur finale

Le voyage était aventureux et avait beaucoup de leçons à apprendre. Android TV était quelque chose dans lequel nous aimerions concevoir à nouveau. Cette conception nous a appris la diversité des appareils et les différentes expériences d'utilisation.

Merci pour la lecture!