Travail sur l'interface utilisateur

Aujourd'hui Michael Voigt, concepteur en chef IU à BioWare Austin, nous parle de la conception de l'interface utilisateur du jeu.

La vision originale

Durant les premières phases de prototypes, nous avons déterminé que l'interface utilisateur devrait être allégée par rapport à la plupart des MMORPG standard. Nous ne voulions pas qu'elle détourne l'attention au détriment du décor, où qu'elle empiète sur la partie exploration du jeu. Notre ressenti vis-à-vis des autres MMORPG, c'est que leurs IU sont faites de formes alambiquées et remplies de détails. La silhouette recherchée devait être simple et fine, sans que l'on y ajoute d'élément complexe.

Nous avons pensé à l'analogie d'un habitacle de locomotive à vapeur, comparé à celui d'une voiture de sport. L'intérieur de la loco était truffé d'aiguilles et de cadrans, alors que la voiture de sport affiche toutes les informations utiles sur un tableau de bord épuré. Cette illustration montre les différences auxquelles nous avons réfléchi.

ui-blog-01_535x195.jpg
La disposition de l'interface

Comme notre jeu propose de superbes paysages, nous voulions que l'interface utilisateur les complète, plutôt que de les écraser. Le style "voiture de sport" simplifié donnait un effet boîte à lettres, ce qui, à notre sens, laissait moins de place au parasitage visuel.

Au fil de notre travail pour résoudre la complexité de l'interface utilisateur, nous devions veiller à ce que le joueur dispose toujours d'indications et de commandes claires. Cependant, il était aussi primordial de ne pas oublier le joueur habitué aux MMORPG. Il n'était pas question de nous opposer aux standards déjà établis. Les joueurs s'attendent à avoir des touches assignées aux icônes de capacités, par exemple.

Nous avons analysé chaque système et déterminé les éléments à améliorer sans perturber les joueurs habitués, tout en restant intuitifs pour les nouveaux venus. Notre objectif était de proposer une interface de MMORPG à la fois familière et innovante, mais pas intimidante.

Le groupement logique de systèmes

Tandis que les commandes des différents systèmes de jeu prenaient forme, nous avons pris le temps de développer une disposition logique. Nous avons pris l'ensemble de l'écran, divisé par coins. Les commandes ont trouvé leur place dans ces coins pour ne pas éclipser la zone de combat au centre de l'écran. Tout comme les commandes d'une voiture de sport n'empêchent pas de voir la route, les nôtres n'empêchent pas de combattre ou d'explorer l'environnement.

layout.jpg
Disposition de l'interface

Nous avons opté pour la disposition que vous découvrez dans le schéma ci-dessous :

  1. Système de sociabilité : discussion - En haut à gauche
  2. Système de jeu : aide - En haut au centre
  3. Système de mission : en haut à droite
  4. Système de navigation (indicateurs de monde) - En bas à droite
  5. Système de combat : expérience (indicateurs du joueur) - En bas au centre
  6. Système de groupe : partenaire - Bas-centre à gauche

Après avoir conçu cette structure basique, nous avons développé de fausses illustrations. C'était des variations autour de différents styles, certaines imitant des matériaux existants, d'autres restant plus abstraites. Nous avions là une base satisfaisante pour repérer le bon candidat avant de poursuivre.

ui_01.png
ui_02.png
ui_03.png
ui_04.png
ui_05.png
ui_06.png
ui_07.png
ui_08.png
Fausses illustrations

La meilleure d'entre elles a été choisie et creusée davantage. Pendant ces expérimentations, nous nous sommes focalisés sur les objectifs d'origine : que les joueurs, expérimentés ou non, puissent facilement utiliser l'interface. Nous avons aussi décidé que l'IU retenue devait être simple, épurée et complémentaire des environnements.

Ensuite, nous nous sommes concentrés sur les cadres. En d'autres termes, comment les éléments de l'IU s'intègrent dans l'action du jeu. Nous avons remarqué que dans les jeux, la tendance en matière d'enrobage d'interface évoluait vers le minimalisme. Par exemple, si vous prenez un ancien titre de Bioware, vous noterez que souvent, l'interface est assez volumineuse, avec de grands cadres.

En poussant l'analyse, nous avons compris que la résolution était en grande partie responsable de cette tendance. Les cartes graphiques et moniteurs actuels affichent une image bien plus détaillée que les écrans VGA et autres cartes à une seule puce d'antan. Les vieux jeux avaient besoin de plus gros cadres pour assurer la lisibilité du texte. En contrepartie, nous devions rester vigilants, car les résolutions actuelles sont tellement poussées que certains textes peuvent devenir trop petits. Dans The Old Republic, les joueurs pourront régler la taille de la police, mais nous avons tout fait pour offrir une expérience par défaut très accessible.

text.png
Une meilleure densité de texte

Avec tous ces paramètres en tête, nous avons procédé à plusieurs affinages pour réduire la place des cadres à l'écran. Nous voulions que le maximum de l'interface soit réservé aux indicateurs et aux commandes, gardant le strict nécessaire pour l'enrobage.

Une fois cette étape terminée, j'avais le sentiment d'avoir conservé certains éléments pour des raisons purement esthétiques, alors qu'ils auraient pu être réduits. Mais il nous restait encore du temps pour expérimenter... J'y reviendrai plus tard.

Une fois le travail de cadrage terminé, nous avons pris le parti de réduire la densité des informations et autres "lourdeurs" de l'interface utilisateur. Réduire la quantité de texte était un excellent moyen d'y parvenir. Là où c'était possible, nous avons trouvé des méthodes pour remplacer le texte par des icônes. Nous avons réduit à l'essentiel le texte toujours présent à l'écran. En fin de compte, nous sommes parvenus à obtenir une interface assez dégagée.

Implémentation

À ce stade, il nous restait surtout à travailler sur le design, mais avec cette solide structure en place, nous avons commencé à implémenter l'IU dans le jeu. Toujours avec notre vision d'origine en tête, nous avons importé une à une les interfaces dédiées aux différents systèmes de jeu.

 
implement_01.png
implement_02.png
Des systèmes variés

Avec tous les systèmes de jeu présents dans The Old Republic, la phase d'implémentation représentait une tâche considérable. La plupart d'entre eux impliquent pas mal d'interactions avec l'interface, de façons parfois assez variées, mais notre équipe de talentueux développeurs d'interface a vraiment su relever le défi. Ils ont transposé notre vision dans la réalité du jeu. Mon équipe était plutôt enthousiaste de les voir s'affairer pour donner vie à nos concepts, système par système.

Bien que ce soit extrêmement gratifiant d'avoir la vision de mon équipe intégrée au jeu, The Old Republic est en permanence sujet à des tests, intérieurs et extérieurs. Pendant l'implémentation, nous devions toujours réagir aux différents retours et améliorer la qualité de l'interface. Pour nous, le processus se poursuivra jusqu'au lancement, et même au-delà.

Esthétique

Une fois les systèmes centraux en place, nous avons étudié l'esthétique de plus près et décidé de "resserrer les graphismes". Le but était de repousser les limites, d'améliorer toujours plus la qualité générale de l'interface.

 
evolution.png
partyBar.png
Style évolutif

Afin d'y parvenir, nous avons invoqué la puissance de nos infographistes concept pour concrétiser notre vision et augmenter la fidélité du rendu. Une phase uniquement focalisée sur les qualités visuelles était primordiale pour unifier les couleurs et le thème, ainsi que pour l'harmonie générale. Comme vous pouvez le voir sur cette charte graphique, nous avons bossé dur pour assurer la cohérence !

style-guide.jpg
Un thème cohérent

Comme je le disais tout à l'heure, même après avoir travaillé sur l'enrobage, je sentais qu'il restait de l'espace en plus. L'interface n'était pas aussi minimaliste que ce que je m'étais fixé. Quoi qu'il en soit, pendant cette étape esthétique, je pense qu'on a suffisamment dégraissée pour obtenir notre vision d'origine.

Cette phase nous a également permis de repérer quelques éléments négligés jusque-là et de leur accorder toute l'attention nécessaire pour assurer une qualité irréprochable. Cette image représente l'interface de The Old Republic telle qu'elle est à l'heure où je vous parle.

ui_full.jpg
Style évolutif

Notre interface utilisateur a beaucoup changé, au sein d'un marché vidéoludique en perpétuelle évolution. Le pense que nous sommes sur la bonne voie pour atteindre tous nos objectifs. Nous continuerons d'analyser le marché, d'écouter les retours et de nous améliorer, jusqu'à la sortie du jeu et au-delà.

Ça m'a fait très plaisir de partager ces informations avec vous. J'ai hâte de lire vos impressions et vos commentaires une fois que vous pourrez jouer à The Old Republic !

Michael Voigt
Concepteur en chef IU
Source : http://www.swtor.com/fr/actualite/blog/20110429

Réactions (195)

Afficher sur le forum