[WRC 10] Analyse utilisateur et application à l'interface

Aujourd’hui, cela fait plusieurs semaines que le jeu est sorti et je suis extrêmement fière du travail accompli que ce soit au niveau design ou des autres corps de métier. Il a fallu prioriser les tâches et l’ensemble des choses prévues initialement n’a pas pu être intégré mais les points les plus gênants de WRC 9 ont pu être corrigé. Sur une production annuelle et dépendante des contraintes de licence, intégrer un workflow UX fut un challenge. A cela s’ajoutait le fait qu’il s’agissait de la première implémentation de méthodes UX au sein de la série WRC et pour certains corps de métier au sein du studio. Parmi la centaine d'écrans, il y a deux fonctionnalités / menus dont je souhaite tout particulièrement vous parler : la refonte du menu principale ainsi que la création de l’éditeur de livrée.

Client : Kylotonn
Produit : Jeu vidéo
Date : septembre 2020 à Juillet 2021
Rôle : UX Designer
Outils : Suite Office, Jira, Suite Adobe (en particulier Adobe XD)
Méthodes :
● Création de workflow
● Renouvellement de la charte graphique avec le pôle UI
● Mise en place d’atelier
● Prototypage
● Brainstorming en game deign et UI
● Test utilisateurs

Instaurer un workflow UX dans un processus établi

Mon arrivée au sein de Kylotonn marqua également l’arrivée du métier d’UX designer sur la série WRC. Au delà de la prise de connaissance du projet, il me fallait également échanger avec les différents pôle de production et définir les logiciel actuellement utilisés et déterminer comment en tant qu’UX designer j’allais m’adapter le plus possible au processus actuel. Mes collègues utilisaient essentiellement la suite Adobe et les multiples passerelles entre Photoshop / Illustrator / After Effect et Adobe XD finirent de me convaincre de passer sur ce logiciel. Une refonte de l’arborescence des dossiers de production fut également menée ainsi qu’une formation Adobe XD organisée par moi-même à l’ensemble des designers d’interface du studio.

Dans un second temps, il fallu définir comment évoluait les fonctionnalités en production. Le flow choisi fut le suivant : Cahier des charges créatif ou Game Design => UX design =>  UI design => Intégration et programmation => validation générale. Chacune de ses étapes se composait également de multiples échanges et brainstorming impliquant un ou plusieurs corps de métiers.

Le troisième point fut de sensibiliser l’ensemble des équipes à mon métier. Trop souvent limité aux interfaces, mon objectif était de donner une vision de l’ensemble de mon impact métier sur la création du jeu : si une association de touche n’est pas logique, si un élément de niveau est gênant, si le retour d’expérience du jeu est négatif… L’UX s’immisce dans tous les éléments du jeu même si le plus visible est l’interface et le reste repose sur de la sensation de jeu. C’est tout ce travail de pédagogie que j’ai également dû mener en interne.

Créer une nouvelle charte graphique en accord avec les demandes UX

La série WRC en tant que jeu de licence doit répondre aux éléments de la charte de WRC promoteur. Courant d’année 2020, celle-ci a connu une refonte qui connu un début d’implémentation sur WRC 9 qui devait se suivre dans WRC 10. Avec l’équipe UI, la charte graphique fut adapté afin de correspondre aux contraintes du jeu vidéo notamment en terme de lisibilité et de navigation. Ainsi le « Orange » fut notre couleur de sélection de part sa visibilité et sa chaleur qui attire le regard du joueur. Le « bleu foncé » de part sa neutralité fut associé au fond, le « bleu clair » à notre éditeur (identité de marque) et le « blanc » en tant que fond de texte ou background de par son fort contraste avec le bleu foncé.

Afin de limiter les problématiques de lisibilité, il fut choisi de limiter davantage l’opacité présente dans les background de WRC9. D’autres interactions furent retravaillées tel que l’ouverture des menus latéraux. Dans WRC 9, il s’ouvrait uniquement au survol du joueur ce qui ne laissait pas la possibilité de lire l’ensemble des menus d’un seul regard, ajoutait un effort de mémorisation et surtout excluait les joueurs possédant un lecteur de menu (ou rendait la navigation assez pénible. Il fut décidé dans WRC 10 de conserver le menu latéral mais déjà apparent avec le nom de celui-ci en dessous afin de faciliter la navigation.

Fonctionnalité 1 : créer une nouvelle identité d’interaction  via le menu principal

Identité de jeu et refonte

Cela faisait plusieurs épisodes que le menu principal de WRC utilisait une même base. Celle-ci aurait très bien fonctionné pour un nouveau WRC cependant le but de cette refonte consistait à apporter davantage de confort de navigation et adapter les menus aux habitudes utilisateurs d’aujourd’hui. Un véritable temps de brainstorming et recherche développement fut consacré à ce menu. Il définit à la fois l’identité graphique mais aussi la logique de navigation de l’ensemble du jeu. Dans un premier temps, il fut décidé que l’on essaierait de ne pas s’éloigner du menu existant tout en mettant en valeur de nouvelles features. Plusieurs prototypes furent créés et animés mais l’ensemble demeurait soit trop proche de la concurrence, soit trop proche de l’existant, soit moins efficace. Il fallu approfondir la réflexion autour de la construction de ce menu pour trouver la solution adaptée.

Arborescence et multitudes de modes

L’une des complexités de la refonte du menu de WRC fut son arborescence composée d’une multitude de mode de jeu dont la demande créative nécessitait que l’ensemble soit au niveau 1, soit celui de la page d’accueil. Cette restriction limita les choix de refonte possible. Pendant notre benchmark, certains écrans de la concurrence servir d’inspiration tandis que d’autres furent écartés. Malgré le nombre conséquent d’écrans consultés, des difficultés de navigation ou de hiérarchisation persistaient.

Finalement, il fut décidé de s’éloigner des jeux vidéo et de s’inspirer d’autres médias qui devaient gérer beaucoup de contenu. L’exemple qui nous apparu comme évident fut Netflix.

En partant de cette base, il fut décider que l’espace de navigation serait le centre de l’écran et que les différents contenu important seraient triés l’aide d’un menu vertical à gauche issu des précédentes maquettes. Les titres de section découpe l’écran principale également et facilite la navigation du joueur. La partie haute se dédia à la présentation du menu au survol.

Adapté un menu à la dimension Live

La seconde difficulté de ce menu reposait sur sa dimension Live. En effet, WRC 10 allait s’enrichir suite à sa sortie de différents contenus et il fallait pour cela penser à des interfaces à la fois « riche » en l’absence de ces contenus mais qui s’adapte par la suite à leur arrivée. L’utilisation d’un scroll horizontal donne cette possibilité à condition d’un minimum de 4 cases par ligne. Cette dimension d’ajout fut également appliqué au menu vertical qui lui aussi bénéficier de l’ajout d’un menu si cela est nécessaire.

Penser un jeu Live demeure un exercice tant il répond à un ensemble de contraintes. A la fois nouvelle et ergonomique, l’interface actuelle répond à l’ensemble des problématiques posées en R & D. Il s’agit du menu qui a demandé le plus de travail mais en tant que signature du titre, il était essentiel de parvenir à remplir toutes les conditions listées ci-dessus.

Annexes & retours des joueurs

• Test vidéo de Monsieur Toc : J’ai testé WRC 10 : Premières IMPRESSIONS + Gameplay FR
• Test vidéo de Galax : WRC 10 - Gameplay FR
• Test vidéo de Hydro : DÉCOUVERTE DE LA BÊTA DE WRC10 (Nouveaux Rallyes, Nouvelle Maniabilité, etc...)
• Test vidéo SlapTrain : WRC10 (Early Access) - FIRST IMPRESSIONS On Thrustmaster T248 w/Display Working!
• Test vidéo Sim's Racing : WRC 10 - Demo Deep Dive - An honest (p)review

Fonctionnalité 2 : implémenter un nouveau mode de jeu par le processus UX

L’un de mes plus gros challenge sur WRC10 fut l’ajout d’un mode d’édition de livrée. Presque un jeu dans le jeu, la demande créative consistait a proposé au joueur un mode accessible et riche afin que celui-ci puisse construire sa livrée.

Définir « Comment on édit » ?

Aujourd’hui, il existe de multiples mode d’édition de voiture. Certains s’axent davantage sur les textures, les fonctionnalités tandis que d’autres se focalisent sur le nombre de modèles. Avant de commencer toutes étapes de production UX, il fallu définir quelles fonctionnalités et richesses de contenus on souhaitait pour ce mode. Cela a eu par la suite de multiple impacts sur le type de navigation, la hiérarchisation des éléments ainsi l’ergonomie associée à la modification même du véhicule.

La prise en main et l’accessibilité resta la priorité tout au long du développement de ce mode. Lorsqu’un élément était incompris ou un test remontait des difficultés, la fonctionnalité était retravaillé afin d’affiner la note d’attention.

Itérer pour enrichir

Le livery editor, une fois sa conception avancée, connu une période de test intensif afin d’exclure le plus de bugs et surtout erreur de design. Des test utilisateurs furent mis en place au sein du studio en fonction des profils de joueur présents. Il fallait également exclurent les personnes à l’origine du mode de jeu.

Chaque test fut réalisé en présence d’un UX designer qui suivait un protocole accompagné d’une grille de relevé défini en amont. La durée des test variaient de 30 minutes à une heure en fonction du profil de joueur. Il était également suivi d’une courte interview puis d’un questionnaire envoyé plus tard dans la journée. Durant toute la durée du test, l’utilisateur était invité à exprimer à haute voix ce qu’il pensait. Bien qu’il existe plusieurs biais à cette technique, cela nous a permis de rebondir sur certains éléments qui n’avaient pas pu être perçu par l’équipe de production.

Suite à ces tests, des listes de corrections étaient établi et intégré puis vérifié les semaines suivantes. La boucle était de une à deux semaines d’intégration suivi d’une session de test.

Créer une interface d’édition cohérente

La création de cette fonctionnalité nécessitait une interface bien particulière. Il fallait à la fois prolonger la direction artistique définie par la charte de WRC 10 et adapter l’interface aux fonctionnalités propre à l’édition de livrée. Plusieurs itérations ont eu lieu, la plus aboutie fut de proposer le choix entre un menu vertical et horizontal. Chacune des deux propositions possédaient ses avantages et ses inconvénients.

Une fois ce choix établi, les plus importantes décisions UX/GD se concentrèrent sur le placement des inputs et les choix de caméras. Il fallut à nouveau réaliser de nombreux tests afin d’obtenir le résultat actuellement en jeu. Il fut nécessaire de signifier à chaque moment au joueur où se situait son curseur dans l’interface que ce soit sur le modèle 3D, dans la hiérarchie de sticker ou la sélection des menus. Le « Orange » et les contours prolongèrent les choix initiaux de direction artistique. Cependant, la sélection sur le modèle 3D nécessita la création d’un shader spécifique et l’écran de gestion des stickers demanda plusieurs niveau d’identification afin d’être compris par le joueur : marqueur de sélection du sticker, placement de la caméra sur le bon côté et shader quelques secondes sur la forme du sticker.

Annexes