Conception de l'interface utilisateur et de l'expérience utilisateur

L’interface utilisateur (UI) combine un design visuel artistique avec une conception d’information centrée sur la communication pour produire des menus, des mises en page de magasins, des affichages tête haute (HUD) et d'autres interfaces avec lesquelles les joueurs interagissent. L’expérience utilisateur (UX) concerne la façon dont les joueurs interagissent avec le jeu, comment ils font connaître leurs choix, et comment ils passent d'un choix à l'autre. Bien que l’UI et l’UX travaillent souvent de manière collaborative, l’UX se concentre davantage sur l'interactivité et l'expérience du joueur plutôt que sur le design visuel et informatif de l’UI.

UI

L’UI partage des informations vitales telles que les points de vie, les objectifs de quête et les prix qui permettent aux joueurs de prendre des décisions et de naviguer dans le jeu. Étant souvent le principal moyen par lequel les jeux communiquent avec le joueur, l’UI est essentielle à l'expérience des joueurs. Une UI mal conçue peut laisser les joueurs confus et frustrés, entraînant une mauvaise rétention, tandis qu'une UI bien conçue peut contribuer à l'engagement et à la monétisation. Une UI efficace utilise les principes suivants :

• Priorisation
• Attention
• Langage visuel
• Conventions
• Cohérence

Priorisation

Partager les informations les plus significatives en premier est connu sous le nom de hiérarchie de l'information. Cela est particulièrement crucial dans les jeux où les joueurs prennent souvent des décisions instantanées basées sur un ensemble d'informations restreint. Lors de la priorisation de l’UI, identifiez ce qui est essentiel ou le plus pertinent pour l'expérience du joueur et assurez-vous que c'est à la fois accessible et facile à localiser. Considérez ces questions :

• Que fait le joueur en ce moment ?
• Quelle est la chose la plus importante dont il doit être conscient ou à laquelle il doit avoir accès ?
• Quels choix doit-il faire ?
• Quelle information a-t-il besoin pour faire ces choix ?
• À quelle fréquence s'engagera-t-il dans ces choix ?

Les informations et les fonctionnalités importantes changent en fonction de facteurs tels que le rôle que le joueur assume, sa position dans le monde en 3D et les objets qu'il détient. L’UI peut être conçue pour ne présenter que ce qui est pertinent contextuellement – en échangeant les boutons et les informations en fonction de ce qui est utile dans chaque contexte. Cela garantit que les joueurs ont toujours ce dont ils ont besoin, sans le désordre de tout ce qui ne leur est pas utile.

Exemples

Les éléments non pertinents peuvent causer confusion et distraction. Spellbound RPG a une UI épurée et minimaliste qui est particulièrement cruciale pour les interfaces mobiles, car les petits écrans peuvent facilement être submergés par des boutons, des écrans et du texte excessifs.

Dans Super Striker League, les interactions des joueurs varient en fonction de la possession du ballon. Sans le ballon, les joueurs peuvent Sprinter et Tacler pour retrouver le contrôle. Une fois en possession, les boutons passent à Deke et Pass, permettant aux joueurs d'esquiver les adversaires et de passer le ballon. En alternant ces boutons, l’UI reste contextuellement utile, évitant les distractions inutiles.

Dans The Survival Game,, les joueurs doivent être conscients de leur état de santé et de faim, et avoir un accès rapide à leur carte, leur inventaire, et leurs outils. Ces informations leur permettent de prendre des décisions et de prioriser des actions pour survivre. Si ces informations ou ces outils sont difficiles à trouver ou manquants, la survie devient plus difficile et inutilement frustrante.

Attention

Malgré une UI minimaliste, priorisée et contextualisée, les joueurs peuvent encore avoir du mal à localiser ce dont ils ont besoin. Les concepteurs d’UI peuvent utiliser plusieurs outils visuels pour capter et guider l'attention des joueurs, tels que :

• Couleur : Les couleurs vives attirent plus l'attention que les couleurs ternes. Utilisez des teintes vives pour le texte crucial, les boutons et d'autres éléments, et des teintes atténuées pour les éléments moins importants. Ce contraste améliore la visibilité et réduit la distraction.
• Taille : Les éléments plus grands sont plus apparents et perçus comme importants par rapport aux plus petits.
• Espace : Les éléments entourés d'un espace négatif ou padding suffisant attirent l'œil.
• Proximité : Les éléments groupés impliquent une connexion. En plaçant des fonctionnalités et des objets liés près les uns des autres, les joueurs peuvent comprendre leur association et les localiser plus facilement.
• Mouvement : Les éléments animés attirent l'attention. Même un léger mouvement peut faire ressortir un élément parmi des homologues statiques. Les effets de particules, les boutons qui bougent et les flèches animées sont souvent utilisés dans des tutoriels pour orientation.

La modération est essentielle avec ces outils. Un usage excessif d'éléments vifs et en mouvement peut submerger et confondre les joueurs plutôt que de les aider.

Exemples

Dans l'UI du pass saisonnier de Jailbreak, une bande de jaune doré se trouve sous les icônes exclusives au pass saisonnier, attirant l'attention sur les récompenses premium et les rendant visuellement distinctes des gratuites.

Dans Dragon Adventures, une priorité visuelle est donnée au paquet de pièces de la plus haute valeur en augmentant sa taille et en l'isolant avec plus de padding, pour le distinguer des petits paquets.

Dans Tower Defense Simulator, la taille et la proximité sont utilisées pour regrouper visuellement et distinguer les skins de tours quotidiens des caisses quotidiennes.

Langage visuel

En plus de diriger l'attention des joueurs vers les éléments les plus importants à l'écran, les concepteurs d'UI développent un langage visuel pour aider les joueurs à comprendre ce qu'ils voient. Un langage visuel est un ensemble de choix de design délibérés et cohérents qui fournissent des informations d'un seul coup d'œil sur l'objectif d'un élément, son statut, ses associations et sa pertinence. Le langage est construit à partir d'outils tels que la forme, la couleur et le style. Certaines utilisations du langage visuel incluent :

Icônes

Les icônes peuvent utiliser une identité visuelle qui transmet du sens et des associations. Par exemple, les icônes liées à des statistiques spécifiques peuvent partager une palette de couleurs et des formes similaires, permettant aux joueurs de reconnaître et de comprendre leur fonction.

Boutons

En tant que forme prédominante d'entrée des joueurs, les boutons doivent être faciles à identifier. Loger des boutons dans un conteneur, comme une couleur entourant le texte ou l'icône, les distingue de l'arrière-plan, les rendant interactifs. Ajouter des reflets ou des ombres peut renforcer leur attrait tactile en suggérant une profondeur 3D.

Texte

Les titres et les en-têtes contenant des informations significatives en hauteur devraient être plus grands et plus gras que le texte normal. Les couleurs hautement lisibles et qui contrastent bien avec la couleur d'arrière-plan sur laquelle elles seront affichées doivent être prises en compte. Des choix stylistiques comme la couleur et le gras peuvent mettre en évidence des informations importantes comme les objets, les statistiques ou les capacités en jeu. Privilégiez toujours la lisibilité lors du choix d'une police.

Une fois le langage visuel conçu, il peut être documenté dans un guide de style, un ensemble de règles et d'exemples qui aide chacun dans l'équipe à comprendre comment appliquer le langage de manière cohérente tout au long du jeu.

Conventions

Les conventions sont des choix de design couramment appliqués qui sont observés à travers de nombreux jeux différents. Quelques exemples incluent :

• Un symbole X sur un bouton qui ferme le dialogue lorsqu'il est pressé
• La couleur grise appliquée aux boutons qui ne sont actuellement pas utilisables
• Une icône de verrou superposée à un bouton ou une fonctionnalité pour indiquer que le joueur ne l'a pas encore gagnée ou débloquée

Étant donné leur utilisation répandue, les joueurs sont généralement familiers avec de telles conventions. Tirer parti de cette familiarité peut rendre une interface plus intuitive et réduire le besoin d'instructions spécifiques au jeu. Jouer à des jeux dans votre genre cible peut aider à identifier les conventions que les joueurs peuvent reconnaître. Un concepteur d'UI peut opter pour une approche unique pour mieux correspondre à son jeu, mais connaître ces conventions éclaire son processus décisionnel.

Cohérence

Quelles que soient les décisions prises par un concepteur d'UI, elles doivent être appliquées de manière cohérente tout au long du jeu. La cohérence aide les joueurs à apprendre à naviguer dans le jeu plus efficacement et empêche confusion et frustration.

Voici quelques exemples de cohérence d’UI dans un jeu :

• La statistique "Santé" apparaît en vert dans tous les textes, les icônes connexes et la barre de santé.
• Chaque fois que le dialogue des PNJ mentionne un objet en jeu, il est mis en évidence en gras.
• Les boutons de fermeture sont toujours carrés, rouges et contiennent un X blanc, n’apparaissant que dans le coin supérieur droit d'un dialogue.
• Chaque fois qu'un joueur ne peut pas se permettre un objet dans le magasin, le prix s'affiche en rouge.

Ces choix sont délibérés, visant à faciliter la compréhension et la navigation des joueurs. En les appliquant de manière cohérente, ils permettent aux joueurs d'associer des éléments connexes, d'identifier des objets importants, de développer une mémoire musculaire, de prendre des décisions éclairées rapidement, et de passer plus de temps immergés dans le jeu.

UX

La conception de l'UX concerne la façon dont les joueurs interagissent avec le jeu, comment ils font connaître leurs choix, et comment ils passent d'un choix à l'autre. Bien que l’UX fonctionne souvent main dans la main avec l'interface utilisateur (UI), elle se concentre davantage sur l'interactivité et l'expérience des joueurs que sur le design visuel et informatif de l’UI.

Comprendre les joueurs

Un objectif principal du designer UX est de créer des interactions et des flux qui sont intuitifs, discrets et pratiques pour les joueurs à utiliser. Ce processus commence par une compréhension des joueurs eux-mêmes, du public ciblé d'un jeu. Lors de l'identification des joueurs d'un jeu, considérez ce qui suit :

• Démographie : La démographie aide à informer les choix de design en révélant des informations généralisées sur un groupe de joueurs. Par exemple, les joueurs plus jeunes sont généralement plus susceptibles de jouer sur des appareils mobiles ou tablettes que sur des ordinateurs personnels, donc les jeux destinés à ce public priorisent souvent la conception et le polissage de l'expérience utilisateur mobile.

• Niveau d'expérience : Les développeurs peuvent choisir de concevoir pour des joueurs ayant peu d'expérience de jeu, une quantité significative, ou quelque part entre les deux. Les interactions familières pour les joueurs expérimentés, comme appuyer sur une touche numérique pour équiper un objet dans une barre d'outils, ou appuyer sur c pour se baisser, peuvent ne pas être évidentes pour les joueurs inexpérimentés, et nécessiter des messages ou formations supplémentaires.

• Familiarité avec le genre : Similaire au niveau d'expérience général, la familiarité avec le genre reflète le niveau d'expérience des joueurs avec un type de jeu spécifique. Les jeux qui tombent dans des genres populaires sur Roblox, comme le jeu de rôle, l'horreur de survie, et le tireur à la première personne, sont susceptibles d'avoir de nombreux joueurs potentiels qui ont déjà joué à un genre similaire. Les jeux dans d'autres genres peuvent avoir moins de joueurs expérimentés, mais ce manque d'expérience peut être compensé par des tutoriels et une utilisabilité.

• Style de jeu : Les joueurs préfèrent souvent des types de jeu spécifiques, allant de la compétition et de la collecte d'accomplissements à l'exploration et à la coopération. Ces préférences ne sont pas seulement reflétées dans les mécaniques de jeu que les joueurs préfèrent, mais influencent également les décisions UX. Les concepteurs prennent en compte quelles interactions prioriser, lesquelles polir et lesquelles présenter aux joueurs. Ils prennent également en compte l'état d'esprit des joueurs lorsqu'ils s'engagent dans ces interactions et les émotions qu'ils visent à évoquer.

Après avoir pris en compte ces facteurs et choisi un groupe de joueurs cible (ou groupes), apprenez à les connaître en les rencontrant, en jouant avec eux, et en découvrant leurs objectifs et préférences pour mieux informer les choix de design.

Concevoir des interactions

Les interactions sont des fonctionnalités qui permettent aux joueurs de vivre et de communiquer leurs choix dans un jeu. Les designers UX veulent que ces interactions soient intuitives et nécessitent le moins d'explications possibles. Pour cela, ils utilisent :

• Conventions
• Métaphores
• Feedback

Conventions

Les conventions sont des conceptions et principes UX que les joueurs peuvent déjà connaître d'autres jeux.

Exemples de conventions incluent :

• L'invite de proximité "E" que les développeurs Roblox utilisent pour signaler aux joueurs qu'un objet est interactif s'ils se tiennent suffisamment près pour qu'il apparaisse.
• La touche "C" permettant à l'avatar du joueur de se baisser pour qu'il puisse se faufiler sous des obstructions ou entrer dans des espaces étroits.
• Les touches numériques équipant des objets de la barre d'outils dans les mains de l'avatar pour qu'ils puissent être utilisés.
• Marcher dans des cercles au sol pour s'inscrire pour un match.

Les conventions s'établissent lorsqu'une mise en œuvre ou un choix de design particulier devient populaire en raison de sa facilité d'utilisation. Par exemple, "C" pour se baisser est facile à retenir car c'est la première lettre du mot "crouch" (se baisser) et est placée à proximité des touches WASD, que les joueurs utilisent pour naviguer. C'est une interaction facile à effectuer rapidement et sous pression, ce qui est idéal puisque tenter de se cacher ou de fuir une menace approche est un cas d'utilisation courant pour la position accroupie.

Métaphores

Les métaphores relient un concept abstrait à un plus familier, créant un raccourci vers la compréhension. Dans cet exemple de Spellbound Wizard RPG, l'acte de lancer des sorts magiques se fait en tirant des cartes d'un deck. L'UI/UX basé sur le deck ancre cet acte abstrait de lancer des sorts, qui n'a pas d'expression réelle, dans quelque chose auquel les joueurs peuvent se rapporter plus facilement et comprendre rapidement.

Feedback

La communication du jeu au joueur est connue sous le nom de feedback. Le feedback aide les joueurs à comprendre une action qu'ils ont effectuée. Il peut contribuer à apprendre comment fonctionne le jeu et ajouter une couche supplémentaire de finition qui rend une fonctionnalité plus satisfaisante à utiliser. Quelques exemples de feedback incluent :

• Un ennemi jouant son animation de réaction "touché" pour indiquer qu'il a subi des dégâts de l'arme du joueur.
• Un bouton qui change de couleur pour indiquer les états survolé, pressé et relâché (sélectionné).
• Un son de caisse enregistreuse "cha-ching!" jouant lorsque le joueur effectue un achat.
• Une barre de progression se remplissant à mesure que le joueur complète des objectifs de quête.

Lorsque le feedback est absent ou insuffisant, les joueurs peuvent ne pas savoir ce qu'ils ont accompli, comprendre si les effets étaient bons ou mauvais, ou même savoir si la fonctionnalité qu'ils utilisent fonctionne correctement ou rencontre des bugs.

Concevoir des flux

De nombreuses interactions sont souvent nécessaires pour qu'un joueur atteigne un objectif. Les designers UX s'intéressent à la manière dont les joueurs naviguent d'une action ou écran d’UI ou choix à l'autre et s'assurent que ces chemins sont logiques et pratiques.

Par exemple, pour équiper un objet sur un avatar dans Berry Avenue RP, un joueur doit :

• Trouver et appuyer sur le bouton Avatar
• Sélectionner une catégorie d'objet (visage, tête, cou, etc)
• Faire défiler pour trouver un objet d'intérêt
• Appuyer sur l'objet pour l'équiper sur son avatar
• Trouver et appuyer sur le bouton Terminé pour quitter la personnalisation de l'avatar

Ces étapes prises ensemble représentent le flux de personnalisation de l’avatar. Ce flux est simple et direct, avec le moins d'étapes possible nécessaires pour équiper un objet. Comme les joueurs n'ont pas à effectuer de nombreuses actions ou à réfléchir trop sur ce qu'ils doivent faire, ce flux est faible en friction, une mesure de l'effort requis pour atteindre un objectif.

La conception de flux efficaces et à faible friction nécessite une réflexion soignée sur les cas d'utilisation. Ces cas d'utilisation peuvent s'exprimer comme des objectifs de joueurs tels que :

• Vouloir pouvoir modifier rapidement un avatar
• Trouver facilement des objets lors de modifications
• Prévisualiser des objets avant sélection
• Retirer facilement un objet après sélection

Ces objectifs guident ensuite la conception d’UI et d’UX de la fonctionnalité :

• Les joueurs accèdent à la fonctionnalité de personnalisation de l'avatar via un bouton bien en vue sur le HUD, et peuvent immédiatement commencer à équiper des objets à leurs avatars
• Les onglets classent les objets en catégories pratiques, et le champ de recherche permet aux joueurs de rechercher des objets directement
• Les objets sont prévisualisés sur l'avatar instantanément
• Les joueurs peuvent retirer l'objet en appuyant à nouveau dessus pour le désélectionner, ou en appuyant dessus dans la liste des objets équipés

Les designers peuvent ensuite commencer à tracer l’UI et planifier les étapes que les joueurs prendront pour atteindre l'objectif de modification de leurs avatars. Ce processus peut être aidé par l'utilisation d'un diagramme de flux, qui représente visuellement les actions des joueurs alors qu'ils naviguent dans l’UI. Ces diagrammes peuvent aider à identifier les étapes négligées, les points de douleur où les étapes ne sont pas claires ou pratiques, et une friction excessive.