Cet article sera une analyse de plusieurs leçons UX / UI que nous avons apprises en observant attentivement lors de l'exposition quelques centaines de personnes qui testaient les premières versions de notre jeu Steamhounds .


Pour comprendre le contexte, je dirai que Steamhounds est un jeu au tour par tour, un mélange de JRPG et de combat tactique sur la grille. Les joueurs peuvent lutter contre l'IA, mais nous avons essayé de les motiver à jouer les uns contre les autres chaque fois que possible, assis à côté de différents moniteurs.

En général, avant de mener cette expérience, la disposition de base et la présentation des informations dans notre jeu n'étaient pas absolument terribles. Les joueurs et utilisateurs expérimentés qui connaissent le genre traitent généralement le jeu sans notre interférence. Mais lors de tels événements en direct, il y a des gens qui n'ont jamais vu de tels jeux auparavant, et ces joueurs nous aident beaucoup, montrant ces bizarreries et hypothèses cachées que nous avons faites à la conception du jeu.

Alors, sans plus tarder, passons à nos observations:

Problème 1: les gens ne lisent pas le texte

Je pense que la plupart des développeurs sont conscients de ce problème. Étonnamment, une grande proportion de joueurs saute tout texte que vous leur montrez. Nous avons constaté que la grande majorité (> 80%) des joueurs ont simplement cliqué sur l'écran d'instructions que nous avons ajouté au début de la démo, qui décrivait les bases du gameplay:


Menu avec instructions. Seuls 20% des joueurs prennent la peine de le lire (et 100% d'entre eux gagnent la bataille)

Nous avons également péché - pour être honnête, qui lit les instructions lors de l'achat d'un nouveau gadget? Nous nous attendons à ce qu'il soit convivial, et nous pouvons plus ou moins apprendre à l'utiliser à l'aide de l'intuition et de l'expérimentation.

Nous attendions cela, le problème le plus grave était que même pendant le jeu, de nombreux joueurs manquaient également des invites à l'écran . Cela a le plus affecté l'expérience utilisateur lorsqu'ils n'ont pas remarqué d'instructions indiquant quoi faire ensuite:

Solution

Nous savons que le texte à l'écran est généralement la dernière chose vers laquelle les joueurs ont tendance à se tourner lorsqu'ils sont bloqués. Rendons donc impossible de rater:


Nous utilisons le mouvement pour attirer l'attention sur l'infobulle lorsqu'elle apparaît, puis continuons de l'animer jusqu'à ce que le joueur suive les instructions .

C'était difficile à remarquer. Après avoir forcé le joueur à faire attention à lui, nous nous sommes pratiquement débarrassés des situations lorsque les joueurs ont demandé: "que dois-je faire ensuite?".

Nous pourrions probablement améliorer le système en animant le texte et en l'organisant de manière à ce qu'il attire l'attention sur les tuiles sur lesquelles vous devez cliquer pour sélectionner une position.

---

Problème 2: les objets interactifs doivent être visibles

Nous omettons l'évidence: les boutons doivent ressembler à des boutons, et le joueur doit comprendre quelles options sont disponibles à tout moment.

Dans Steamhounds, un joueur doit choisir une action dans le menu (une capacité, par exemple, "attaquer à distance" ou "position défensive") à son tour. Lorsque cela se produit, un menu apparaît:


Cela fonctionne très bien - une invite audio claire est lue et une animation de rotation qui attire l'attention lorsque le menu est étendu sur une plus grande partie de l'écran. Personne n'a eu de problème pour comprendre que vous devez cliquer sur l'un de ces boutons. Le problème est qu'après avoir choisi une action, le menu disparaît et le joueur doit choisir un endroit sur le champ de bataille où sa capacité doit être ciblée.

Nous avons remarqué qu'à ce stade, certains joueurs sont bloqués, parcourant l'écran avec la souris à la recherche d'éléments avec lesquels vous pouvez interagir :


Le joueur cherche ce que vous pouvez cliquer sur l'écran, et son irritation augmente chaque seconde

Solution

Bien que nous mettions en évidence les tuiles sur lesquelles vous pouvez cliquer, elles se distinguent plutôt faiblement. La situation est aggravée par le fait que les joueurs regardent souvent brièvement l'adversaire avant de choisir une action, sans remarquer que les allocations de tuiles apparaissent. Voici comment nous avons résolu ce problème:


Les tuiles scintillantes attirent l'attention d'un joueur

Si le joueur ne déplace pas le curseur sur une tuile appropriée pendant un certain temps, nous activons le scintillement.

Ce simple changement a eu l'effet souhaité - lors de la prochaine session de test, nous avons rarement eu à informer le joueur que pour continuer, il devait cliquer sur la tuile. Nous avons à nouveau appliqué le principe bien connu - vous pouvez utiliser le mouvement / animation pour attirer l'attention . Lorsque le scintillement attire leur attention, ils déplacent inévitablement la souris sur l'une des tuiles, et la sélection ultérieure rend son objectif évident.

---

Problème 3: les appels à l'action doivent être instantanés / contextuels

Les développeurs indépendants parlent souvent de l'idée d'un «appel à l'action» dans le marketing des jeux - les utilisateurs doivent «s'abonner à la newsletter», «ajouter le jeu à la liste de souhaits!» ou "a écrit des critiques sur Steam!" Mais aussi dans le jeu, il y a des moments où le joueur doit faire un choix ou effectuer une certaine action. Alors pourquoi ne pas appliquer certains de ces principes pour rendre le prochain clic ou décision du joueur aussi clair que possible?

Avant le début de la bataille dans Steamhounds, les joueurs doivent définir des positions initiales et des racks («formations») pour leur équipe. Le processus de définition de la formation ne devient pas immédiatement apparent pour tous les joueurs.

Voici à quoi ressemblait l'écran:


Instructions ennuyeuses et verbeuses pour la mise en place d'une formation d'escouade

Bien qu'il indique au joueur tout ce que vous devez savoir pour définir la formation, quelques problèmes surviennent - (a) les joueurs ne lisent pas le texte et (b) les instructions sont présentées comme un seul bloc de texte qui ne ressemble pas à un appel à l'action clair . Mauvaise chose.

Solution

Puisque nous avons déjà mis en œuvre un beau texte accrocheur, pourquoi ne pas l'appliquer pour briser ce bloc d'instructions ennuyeux?


Maintenant, nous guidons le joueur étape par étape - il doit d'abord «cliquer sur le personnage pour définir son rack», puis «choisir un rack», «choisir une position», etc.

Utilisez des conseils contextuels indiquant ce que les joueurs doivent faire en ce moment . Ainsi, ils passent par l'ensemble du processus par étapes et ne sont pas effrayés par de longues feuilles d'instructions.

---

Problème: une terminologie brève et technique doit être utilisée avec modération

Nous avons étudié la conception de jeux et maîtrisé un langage très spécifique utilisé pour décrire les règles du jeu. Nous connaissons des descriptions avec des mots-clés qui peuvent être trouvés sur les cartes Magic: le Rassemblement ou dans le livre de règles du jeu de société - "attaquer une créature" , "défausser 3 cartes" , "inflige des dégâts à tous les personnages voisins" . Si vous êtes habitué à une telle langue, ces instructions sont absolument claires et sans ambiguïté pour vous. Mais je suis sûr que vous avez joué à des jeux avec des joueurs plus occasionnels qui interprètent parfois les règles d'une manière que votre cerveau de conception pense totalement imprévue.

Dans Steamhounds, la majeure partie du texte avec de longues descriptions de règles se trouve dans les info-bulles qui s'affichent lorsque vous sélectionnez l'une des capacités du personnage. Au départ, nous voulions rendre ces descriptions aussi concises et strictes que possible - au final, nous n'avons pas besoin d'énormes lignes de texte contextuelles dans ces info-bulles. Par conséquent, nous avons essayé de les réduire à une, au plus deux, courtes phrases:


Une description agréablement brève mais problématique de la capacité de concentration: «Donne la concentration»

Tout semble correct, non? Mais nous avons remarqué que les joueurs utilisent trop rarement cette capacité .

Solution

Nous pensions que la principale raison de l'impopularité de la Focus était que les joueurs qui n'avaient pas lu attentivement les règles qui leur avaient été montrées plus tôt, n'avaient tout simplement pas le contexte nécessaire pour comprendre l'importance ou les avantages de la capacité . De nombreux joueurs sautent la familiarisation avec les règles et survolent ce bouton, pour la première fois ils rencontrent la mention des mécanismes de Focus. Par conséquent, nous avons apporté le changement suivant:


Une description un peu plus détaillée: «Donne le focus. Déverrouille vos capacités les plus puissantes. "

Oui, la description est devenue un peu bavarde. Mais nous avons remarqué que la proportion de personnes utilisant cette capacité a augmenté. Le nouveau texte «vend» simultanément la capacité au joueur et fournit un contexte supplémentaire pour qu'il puisse comprendre son importance à partir de l'infobulle elle-même, même s'il n'a pas lu les règles.

De ce problème, nous avons extrait un principe général: décrire les choses de manière cool ou attrayante, et nous efforcer de rendre les principaux effets de la mécanique évidents pour tous les joueurs, et pas seulement pour ceux qui ont déjà appris des informations ailleurs .

---

Problème 5: les gens sont biaisés à propos de certains mots

Nous avons fait des observations intéressantes sur la façon dont le langage que nous utilisons incite certains joueurs à interpréter les règles de manière inattendue. Nous avons estimé que cela est le résultat d'associations profondément enracinées avec ces mots qu'ils ont.


Ancienne description de Vigor Potion: «Choisissez une cible. Sa prochaine attaque fera deux fois plus de dégâts. "

Quel est le problème ici? Le mot «cible» a une connotation agressive .

Le mot «cible» est souvent utilisé dans le texte des règles comme un terme neutre pour tout ce que la capacité vise. Les joueurs expérimentés peuvent déjà s'y habituer et comprennent que la capacité décrite ci-dessus est évidemment une amélioration que vous devez utiliser sur vos propres personnages. Mais l'association entre le mot «cible» et l'attaque était si forte que certains joueurs pensaient que cette capacité devrait être utilisée sur l'ennemi, de sorte que la prochaine attaque causerait des dégâts supplémentaires.

Solution

Il semblait que nous devions abandonner l'utilisation d'un tel langage technique. Voici comment nous avons résolu le problème:


Description améliorée: «Renforce un allié. Sa prochaine attaque fera deux fois plus de dégâts. »

Pour le concepteur, cette approche est assez douloureuse - cette description semble trop verbeuse. Cependant, nous avons remarqué que le nouveau texte éliminait essentiellement le malentendu concernant l'effet de cette capacité, et les joueurs ont cessé d'essayer de la diriger vers leurs ennemis. Les développeurs doivent considérer les nuances de sens et le public cible, et trouver un équilibre dans ce qui lui convient. Un texte trop long des règles est certainement un problème, mais une légère redondance permet de souligner le style et le caractère du jeu.

Leçon utile: regardez les testeurs de jeu pour voir si les choix de terminologie ont des conséquences inattendues . Même parmi les utilisateurs anglophones, cela peut dépendre fortement de la culture.

---

Problème 6: les gens ont des associations avec certaines couleurs

Ce problème est similaire au sujet précédent sur la connotation des mots. Les couleurs sont également associées à certains sentiments ou concepts. Nous l'avons déjà utilisé dans le jeu, créant des surlignages de tuiles pour démontrer les effets de capacité. Rouge - agression, vert - soutien / défense, etc.


Carreaux rouges effrayants soulignant

Dans la plupart des cas, cela a parfaitement fonctionné. Mais il y avait une association que nous ne pouvions pas prévoir, et cela a dérouté quelques joueurs. Ils ont associé la couleur rouge non à l' agression , mais à une mauvaise action . Par conséquent, lorsqu'ils survolaient une cible pour l'attaquer, ils étaient confus - ils pensaient que le jeu leur parlait de l'impossibilité de viser ce personnage (en fait, le jeu n'affiche simplement pas la tuile si elle n'est pas la bonne cible).

Solution

Nous avons essayé d'éviter les «intersections» d'associations conflictuelles. Notre solution:


Presque les mêmes (mais pas tout à fait) tuiles de surbrillance rouge-orange

Nous venons de déplacer le rétro-éclairage rouge plus près d'une teinte légèrement orange. Il reste à voir si cela a vraiment résolu le problème (qui n'a en fait affecté que quelques joueurs). Mais le plus drôle, c'est que personne d'autre n'avait tort de cette façon.

Par conséquent, je répète, revérifiez que votre interprétation n'affecte pas négativement les associations qui existent dans l'esprit des joueurs .

---

Problème 7: les clics supplémentaires sont mauvais

Nous le savions déjà, nous avons donc conçu et configuré l'interface utilisateur pour éliminer les clics inutiles. Le problème est survenu après un add-on réalisé à la dernière minute dans l'assemblage du jeu, spécialement conçu pour la démonstration lors d'événements.

À la fin de la bataille, les fanfares jouent et un grand message «Victoire» ou «Défaite» apparaît à l'écran:


Ensuite, le joueur peut cliquer n'importe où sur l'écran pour quitter la bataille et revenir au menu principal. Nous avons changé l'assemblage de démonstration afin qu'après avoir quitté la bataille, le joueur verra la boîte de dialogue d'abonnement à la liste de diffusion.

Cela semblait être une excellente idée, mais elle avait un défaut fatal. Le moment où le message «victoire» ou «défaite» apparaît à l'écran est exactement le moment où les joueurs se serrent la main (ou commencent à se disputer) et se lèvent de leur siège. La bataille est terminée et il n'y a plus de sens à s'asseoir devant l'ordinateur. Ils sont donc partis sans même voir la boîte de dialogue de la liste de diffusion .

Solution

Le jeu devrait automatiquement afficher après quelques secondes l'écran d'abonnement à la newsletter.


Pour être honnête, nous aurions dû prévoir cela à l'avance, mais la fonction a été ajoutée au dernier moment. Cependant, un simple changement - éliminant un clic facultatif - a multiplié par trois le nombre d'abonnements à notre newsletter par rapport au résultat précédent. Au diable ces clics optionnels!

---

Conclusions

• Utilisez des mouvements / animations pour attirer l'attention sur les conseils de texte
• Rendre les éléments d'interface utilisateur interactifs évidents
• Considérez les indices comme des appels à l'action. Rendez-les instantanés et contextuels.
• Ne cherchez pas avec un langage technique et essayez de transmettre le contexte pour aider les joueurs à comprendre leurs décisions
• Vérifiez les associations mentales inattendues avec les couleurs, les mots, etc.
• Navigation UI fluide en éliminant les clics facultatifs

J'espère que les principes décrits dans cet article seront utiles dans votre propre jeu. Mais surtout, nous espérons que nous pourrons vous convaincre de la valeur de l'approche standard: regarder de nouveaux joueurs, trouver des moments où ils se coincent ou se confondent, puis dériver les principes de base et les appliquer à l'ensemble du jeu.


Données et observations recueillies à PlayExpo Londres. J'adore les feuilles de calcul.

Nous avons ajouté un code de collecte de métriques à l'assemblage de démonstration sur les résultats des batailles, la fréquence du choix et des capacités de chaque personnage, diverses informations sur le moment d'utilisation de l'interface utilisateur. Cela nous a définitivement aidés et a permis, d'un point de vue scientifique, d'approcher les mesures de l'impact des changements que nous avons opérés. Mais la majeure partie des leçons a probablement été reçue dans la bonne vieille façon de «regarder le joueur de côté et de garder des notes manuscrites».

Aucun de nous n'était un expert UX (et officieusement, cet article était intitulé «7 erreurs UX que nous pouvons éviter»). Comme la plupart des équipes de développement qui n'ont pas de spécialiste UI / UX distinct, nous avons essayé de suivre le bon sens et de suivre les recommandations les plus simples. Mais lorsque vous êtes si profondément plongé dans votre propre projet, il est difficile d'évaluer objectivement toutes ses rugosités. Le nouveau look du nouveau testeur de jeu est incroyablement précieux - utilisez-les aussi souvent que possible!