Les coulisses de la refonte de l’interface de création de personnage

La sortie de Shadowlands a offert la possibilité d’améliorer et de repenser le processus de création de personnage. Découvrez l’envers du décor en compagnie de Jeff Liu, concepteur d’interface senior, pour en apprendre plus sur les origines de ce processus.

Salutations, citoyens d’Azeroth ! Je m’appelle Jeff Liu et je suis concepteur d’interface senior pour l’équipe responsable de l’interface utilisateur de World of Warcraft. Je vais vous en dire un peu plus à propos de la refonte de la création de personnage, qui a accompagné la sortie de Shadowlands. Dernièrement, de nouvelles options de personnalisation incroyables ont fait leur apparition, nous avons donc pensé que c’était le moment idéal pour lever le voile et vous faire découvrir un peu plus l’envers du décor concernant les choix de création que nous avons faits pour l’interface utilisateur (IU).

Auparavant, j’ai pu travailler sur les refontes du système de transmogrification et de l’hôtel des ventes. Le genre de projet que je préfère, et de loin, c’est remettre de vieilles interfaces utilisateur au goût du jour. J’étais donc très emballé à l’idée de repenser l’interface de création de personnage.

Cette refonte a eu lieu dans le cadre de la nouvelle expérience d’introduction, qui comprenait la nouvelle zone de départ des confins de l’Exil. La création de personnage est la première interface avec laquelle un nouveau joueur interagit, nous voulions donc la moderniser pour susciter une première impression réussie. L’équipe de conception graphique des personnages a également participé au projet en ajoutant de nouvelles options de personnalisation pour Shadowlands, et la mise à jour de l’interface utilisateur s’est avérée être le moment idéal.

La nouvelle interface

Pour rappel, voici à quoi ressemblait l’ancienne interface de création de personnage :

La séparation des écrans de sélection de classe et de race est l’une des premières choses que nous avons entreprises. Vous pouviez choisir votre classe sur le premier écran, puis votre race sur le deuxième :

Par exemple, si vous souhaitiez jouer un Elfe de la nuit, vous deviez retourner sur l’écran précédent, choisir une classe différente, puis effectuer des va-et-vient entre les deux interfaces afin de consulter toutes les options.

Oui, ce n’était pas idéal.

Cette situation ne nous convenait pas, nous avons donc presque abandonné l’ancienne interface pour faire peau neuve. Lors des dernières réunions, mes collègues de l’équipe de conception d’interface utilisateur, Crash Reed et Ray Ocampo, ont eu l’idée de séparer les races de chaque côté de l’écran :

L’un des points forts de cette interface est la manière dont la Horde et l’Alliance se font face pour instaurer d’emblée une rivalité entre les deux factions.

Afficher sa vraie nature

À partir de notre nouvelle interface, j’ai réévalué le nombre d’informations présentes à l’écran pour les joueurs. L’ancienne interface de création de personnage était riche en informations sous forme de descriptions :

Le problème, lorsqu’il y a trop d’informations à l’écran (bien que cela peut s’avérer utile), c’est d’empêcher le joueur de faire un choix qui pourrait être plus simple.

La nouvelle interface permet aux nouveaux joueurs d’éviter de se retrouver paralysés par la quantité d’informations. Nous avons raccourci de nombreuses descriptions au profit d’éléments visuels et sonores afin d’expliquer les différentes races et classes. Nous avons préféré vous montrer un mage en train de lancer une boule de feu, plutôt que de vous le décrire.

Ces archétypes issus de l’heroic fantasy seront déjà familiers pour la plupart des nouveaux joueurs, grâce à la pop culture. Le fait qu’un guerrier manie une épée, porte une armure relativement lourde et utilise des attaques de mêlée est un fait connu de la majorité d’entre nous.

Nous avons trié les classes selon un ordre qui aiderait les nouveaux joueurs à rapidement identifier celle qui leur conviendrait :

Les trois premiers sont les archétypes les plus forts et les plus connus. Les trois suivants sont légèrement moins forts. Par exemple, quelqu’un qui n’a jamais joué à un jeu vidéo ne saura probablement pas ce que fait un prêtre. Enfin, il y a les classes hybrides, plus complexes.

Notez que cet ordre n’a pas été élaboré pour indiquer la difficulté de chaque classe, mais pour comprendre plus facilement les concepts et leur utilité sans devoir y apporter d’explication supplémentaire.

Les races sont plutôt un choix esthétique. Nous ne voulions pas que les joueurs se préoccupent des compétences raciales, alors nous les avons cachés par défaut.

L’objectif n’est pas d’inciter les joueurs a créer un personnage qu’ils joueront toute leur vie ; ils en apprendront bien plus sur les races et les classes en jouant, plutôt qu’en parcourant l’interface de création de personnage.

Ce que nous voulons, c’est que les nouveaux joueurs choisissent la race qui leur plaît le plus visuellement, la classe qu’ils préfèrent, puis qu’ils se lancent dans le jeu !

Un dessin vaut mieux qu’un long discours

Après avoir retiré tout le texte, nous avons décidé de créer de nouvelles animations afin de mieux vendre la personnalité de la classe.

Nous avons commencé par explorer les possibilités d’animations. Nous avons fait particulièrement attention à la durée des animations, car nous ne voulions pas qu’elles s’éternisent.

Voici les premiers modèles conceptuels créés par notre responsable des animations, Ian Lang :

Après avoir choisi la direction à suivre, l’équipe responsable des animations a créé une séquence pour chaque classe en collaboration avec l’équipe des effets spéciaux afin de sélectionner les effets qui donneront le meilleur aperçu de chaque compétence. Une fois cette tâche terminée, un concepteur du son s’est chargé de faire correspondre chaque animation à un son.

Les équipes des animations, des effets spéciaux et du son ont fait un travail remarquable pour apporter un aspect héroïque à chaque classe. Les animations se sont révélées être les éléments clés de la nouvelle interface de création de personnage.

Restez concentrés

L’un de nos objectifs principaux était de capter votre attention grâce à l’apparence du personnage au centre de l’écran. Nous souhaitions vous donner l’impression de créer un super-héros. Cette philosophie nous a amenés à prendre la plupart des décisions lors du processus de création.

Plutôt que de conserver l’apparence traditionnelle de World of Warcraft, nous avons opté pour un style plus minimaliste. Nous avons retiré les éléments esthétiques trop élaborés sur les côtés, comme les anciennes bannières de faction, car elles étaient trop distrayantes et prenaient trop d’importance sur votre personnage.

Nous avons ajouté une grande ombre sur les contours de l’écran pour donner l’impression que le personnage est sous les projecteurs, comme dans une vitrine.

Nous avons également disposé les éléments de l’interface de manière à attirer votre regard là où nous le souhaitions.

Enfin, nous avons rendu l’arrière-plan plus flou lorsque vous zoomez pendant le mode de personnalisation. Le personnage est mis en valeur et vous pouvez vous concentrer sur son apparence.

Nouveaux joueurs

Les nouveaux joueurs ont une version de l’interface de création différente de celle des joueurs vétérans. Mon souhait était de leur proposer une expérience plus simple et plus épurée.

Par exemple, seules les races fondatrices sont exposées, et leurs noms sont affichés sous leurs portraits.

Il y a également quelques différences plus subtiles.

En tant que joueur vétéran, le premier personnage qui vous vient à l’esprit est une combinaison aléatoire entre une race et une classe. Pour les nouveaux joueurs, le premier personnage qui leur sautera aux yeux est un Humain ou un guerrier orc (peu importe le genre). Cela fait écho à l’idée d’intégrer les nouveaux joueurs en leur montrant quelque chose qui leur est familier.

Les personnages sont également générés d’une manière un peu différente pour les nouveaux joueurs. Puisqu’il s’agit probablement de leur premier contact avec l’univers de Warcraft, j’ai senti qu’il était primordial que chaque race soit facile à lire visuellement. C’est pourquoi nous avons retiré les options qui obscurcissaient le visage, comme les tatouages, les peintures de guerre et les coiffes, lorsque le personnage était généré aléatoirement.

Pas d’inquiétude ! Lorsque le joueur accède au mode de personnalisation, il peut tout à fait sélectionner ces options.

De plus, les nouveaux joueurs verront un avertissement dans l’interface de personnalisation :

Grâce aux commentaires des utilisateurs, nous avons vu que certains des nouveaux joueurs avaient peur de finaliser la création de leur personnage. Ce qui paraît logique, pas vrai ? Si vous pensez que c’est votre dernière chance de personnaliser votre personnage, vous allez prendre votre temps pour vous assurer qu’il soit parfait. Cet avertissement leur permet de continuer en toute confiance et de se lancer plus rapidement dans le jeu.

Personnalisation de personnage

En parlant de personnalisation de personnage, jetons un œil aux premiers modèles conceptuels pour cette interface. Vous pouvez constater à quel point le style a évolué depuis l’ancienne interface :

À un moment, j’ai essayé d’opter pour une interface plus libre où les options ne seraient pas rangées dans des cases :

Nous n’aimions pas l’aspect désordonné de l’interface, contrairement à sa sensation d’ouverture. J’ai donc décidé d’associer cette sensation à nos premières idées où nous avions groupé les options en plusieurs catégories :

Nous nous rapprochons du résultat final !

Le sélecteur d’options

Vous remarquerez que les options dans le dernier modèle conceptuel sont contrôlées par des curseurs. Ce contrôle a subi de nombreux changements au cours de son développement.

L’ancienne interface affichait de grandes miniatures de portraits sur la droite. Si vous jetez un œil à ces exemples, difficile de dire en quoi ces options de visage diffèrent les unes des autres :

Tout cela ne colle pas vraiment (voire absolument pas) à notre volonté d’attirer votre attention sur votre personnage au centre de l’écran.

Nous avons donc réfléchi à une commande d’interface qui pourrait remplacer ces portraits.

Je ne souhaitais pas utiliser un mélange de différentes commandes (comme des cases à cocher, des boutons ou des sélecteurs de couleurs), car je me disais que l’interface aurait l’air désordonnée et surchargée. Mon envie était d’utiliser une seule commande qui pourrait fonctionner pour tous les types d’options.

En revanche, notre principal objectif était de vous permettre de basculer rapidement d’une option à l’autre afin de les comparer plus facilement.

Les premiers changements ne permettaient pas une comparaison facile et la navigation entre les différentes options était un véritable problème.

Les curseurs permettaient de basculer d’une option à l’autre rapidement, mais sans précision. Les curseurs sont souvent utilisés pour se déplacer d’un extrême à l’autre (du plus petit au plus grand, par exemple), ce qui n’était pas utile pour la plupart de ces options.

Finalement, j’ai imaginé un menu déroulant avec plusieurs colonnes qui remplissaient tous nos objectifs :

1. Il permet de basculer rapidement d’une option à l’autre.
2. Il permet de visualiser toutes les options en même temps.
3. Ce contrôle d’interface utilisateur est polyvalent et unique. Il peut être utilisé pour les noms et les couleurs. Dans certains cas, il est même possible de mélanger les deux dans le même menu déroulant.
4. Votre attention est conservée sur votre personnage au centre de l’écran.
5. Et probablement le meilleur aspect : il vous permet de prévisualiser les options en temps réel en passant simplement votre curseur sur celles-ci.

Les icônes de catégorie

Toutes les options de personnalisation sont rangées dans une des trois catégories. Voici comment les catégories et leurs icônes ont évolué :

À l’origine, j’avais prévu cinq catégories, mais j’ai changé d’avis après les avoir testées en jeu.

Je trouvais cela un peu maladroit de mettre les options de cheveux dans la deuxième catégorie, alors que le choix de la coiffure est généralement l’une des premières choses à faire. Je les ai donc déplacées dans la première catégorie avec les options de visage.

La plupart des races n’ont pas beaucoup d’options de corps et de tatouage, j’ai donc mis ces deux catégories ensemble. Et c’est ainsi que nous nous sommes retrouvés avec ces trois catégories finales.

Salon de coiffure

Vous vous souvenez peut-être que le salon de coiffure possédait une interface utilisateur complètement différente de celle de la création de personnage. Depuis la refonte, nous nous sommes dit qu’il était plus logique d’utiliser la même pour les deux.

Certains salons de coiffure étaient malheureusement trop sombres, car la luminosité était basée en fonction de l’environnement dans lequel ils se trouvaient. De plus, ce défaut faussait la perception des couleurs dans certains cas. Le vert pouvait être confondu avec le jaune, par exemple.

L’équipe artistique a résolu ce problème en appliquant une lumière totalement neutre autour de votre personnage lorsque vous utilisez la chaise de barbier. À présent, la luminosité est correcte et la perception des couleurs reste fidèle.

Dans le salon de coiffure, vous pouvez désormais changer le sexe de votre personnage. Voici une vidéo du tout premier changement de sexe enregistré par l’ingénieur qui a ajouté cette nouvelle option.

Bugs

Nous avons dû corriger de nombreux bugs visuels au cours de ce projet :

Vous pouvez remercier l’équipe d’assurance qualité de vous avoir épargné ce massacre !

À la revoyure

La refonte de l’interface de création de personnage était un immense travail d’équipe qui a demandé l’intervention des concepteurs graphiques des personnages, animateurs, producteurs, analystes de test, concepteurs sonores, chercheurs dédiés à l’expérience utilisateur et ingénieurs ( découvrez leur article !). Nous espérons avoir élaboré une interface utilisateur agréable et moderne qui facilitera la création de millions de personnages dans les années à venir.

J’espère que vous avez aimé découvrir les coulisses de la refonte de l’interface de création de personnage. Merci de nous avoir lus !

Jeff Liu

Concepteur d’interface senior pour World of Warcraft