Conception UI et UX

L'interface utilisateur (UI) combine un design visuel artistique avec un design d'information centré sur la communication pour produire des menus, des mises en page de boutique, des affichages tête haute (HUD) et d'autres interfaces avec lesquelles les joueurs interagissent. L'expérience utilisateur (UX) concerne la manière 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 en collaboration, 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 et entraîner une mauvaise rétention, tandis qu'une UI bien conçue peut contribuer à l'engagement et à la monétisation. Une UI conçue efficacement emploie 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 fréquemment 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 ?
• Quelles informations lui sont nécessaires pour faire ces choix ?
• À quelle fréquence s'engagera-t-il dans ces choix ?

Les informations et fonctionnalités importantes changent en fonction de facteurs tels que le rôle que le joueur assume, sa position dans le monde 3D et les objets qu'il détient. L'UI peut être conçue pour ne présenter que ce qui est contextuellement pertinent – 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 qu'ils n'ont pas.

Exemples

Les éléments non pertinents peuvent causer confusion et distraction. Spellbound RPG a une UI propre 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 leur contrôle sur le ballon. Sans le ballon, les joueurs peuvent Sprinter et Tackle pour reprendre 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 santé et de leur statut 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 les actions pour survivre. Si ces informations ou 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 besoin d'aide pour localiser ce dont ils ont besoin. Les designers 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, les boutons et d'autres éléments cruciaux, et des teintes atténuées pour les moins significatifs. Ce contraste améliore la visibilité et réduit la distraction.
• Taille : Les éléments plus grands sont plus visibles et perçus comme importants par rapport aux plus petits.
• Espace : Les éléments entourés d'un espace négatif ou d'un rembourrage ample sont accrocheurs.
• Proximité : Les éléments regroupés impliquent une connexion. En plaçant des fonctionnalités et des objets connexes 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 les tutoriels pour guider.

La modération est essentielle avec ces outils. Une utilisation excessive d'éléments brillants et en mouvement pourrait submerger et confondre les joueurs plutôt que de les aider.

Exemples

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

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

Dans Tower Defense Simulator, à la fois la taille et la proximité sont utilisées pour regrouper visuellement et distinguer les Skins de Tour Quotidiens des Caisses Quotidiennes.

Langage visuel

En plus de diriger l'attention des joueurs vers les éléments les plus importants à l'écran, les designers 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 coup d'œil sur le but, le statut, les associations et la pertinence d'un élément. Le langage est construit à partir d'outils comme la forme, la couleur et le style. Certaines des utilisations du langage visuel incluent :

Icônes

Les icônes peuvent employer une identité visuelle qui transmet un 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 les boutons dans un conteneur, comme une couleur entourant le texte ou l'icône, les distingue de l'arrière-plan, les faisant apparaître interactifs. Ajouter des reflets ou des ombres peut améliorer leur attrait tactile en suggérant une profondeur 3D.

Texte

Les en-têtes et titres contenant des informations significatives de haut niveau devraient être plus grands et plus gras que le texte de corps. Les couleurs qui sont très lisibles et contrastent bien avec la couleur de fond sur laquelle elles seront affichées doivent être considérées. Des choix stylistiques comme la couleur et le gras peuvent mettre en évidence des informations importantes comme les objets du jeu, les statistiques ou les capacités. Priorisez 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 aident tout le monde dans l'équipe à comprendre comment appliquer le langage de manière cohérente à travers le jeu.

Conventions

Les conventions sont des choix de design couramment appliqués que l'on voit dans de nombreux jeux différents. Quelques exemples incluent :

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

É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 designer UI peut opter pour une approche unique pour mieux s'adapter à son jeu, mais connaître ces conventions informe leur processus de prise de décision.

Cohérence

Quelles que soient les décisions qu'un designer UI prend, il doit les appliquer de manière cohérente à travers le jeu. La cohérence aide les joueurs à apprendre à naviguer dans le jeu plus efficacement et prévient la confusion et la frustration.

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

• La statistique "Santé" apparaît en vert dans tout le texte, les icônes associées et la barre de santé.
• Chaque fois que le dialogue d'un PNJ mentionne un objet du 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'une boîte de dialogue.
• Chaque fois qu'un joueur ne peut pas se permettre un objet dans la boutique, 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 rapides et éclairées, et de passer plus de temps immergés dans le jeu.

UX

La conception UX concerne la manière 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 travaille souvent main dans la main avec l'interface utilisateur (UI), elle se concentre davantage sur l'interactivité et l'expérience du joueur 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. Ce processus commence par une compréhension des joueurs eux-mêmes, le public cible d'un jeu. Lors de l'identification des joueurs d'un jeu, considérez les éléments suivants :

• 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 des 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 qui sont familières aux 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 s'accroupir, peuvent ne pas être évidentes pour les joueurs inexpérimentés, et nécessiter un message ou une formation supplémentaire.

• Familiarité avec le genre : Semblable 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 tir à 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 cet écart d'expérience peut être comblé 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 de réalisations à l'exploration et à la coopération. Ces préférences se reflètent non seulement dans les mécaniques de jeu que les joueurs préfèrent, mais influencent également les décisions UX. Les designers considèrent quelles interactions prioriser, lesquelles peaufiner, et lesquelles présenter aux joueurs. Ils prennent également en compte l'état d'esprit que les joueurs auront lorsqu'ils s'engageront dans ces interactions et les émotions qu'ils visent à évoquer.

Après avoir pris en compte ces facteurs et sélectionné un groupe de joueurs cible (ou groupes), apprenez à les connaître en les rencontrant, en jouant avec eux et en apprenant 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 souhaitent que ces interactions soient intuitives et nécessitent le moins d'explications possible. Pour ce faire, ils utilisent :

• Conventions
• Métaphores
• Retours

Conventions

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

Des 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 assez près pour qu'elle apparaisse.
• La touche "C" permettant à l'avatar du joueur de s'accroupir afin qu'il puisse se baisser sous des obstructions ou s'insérer dans des espaces étroits.
• Les touches numériques équipant des objets d'une barre d'outils dans les mains de l'avatar pour qu'ils puissent être utilisés.
• Marcher dans des cercles au sol pour faire la queue pour un match.

Les conventions deviennent établies lorsqu'une mise en œuvre ou un choix de design particulier gagne en popularité en raison de sa facilité d'utilisation. "C" pour s'accroupir, par exemple, est facile à retenir car c'est la première lettre du mot crouch, et est commodément situé à côté de WASD, les touches que les joueurs utilisent pour naviguer. C'est une interaction facile à réaliser rapidement et sous pression, ce qui est idéal puisque tenter de se cacher ou de fuir une menace approchante est un cas d'utilisation courant pour s'accroupir.

Métaphores

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

Retours

La communication du jeu au joueur est connue sous le nom de retour. Le retour aide les joueurs à comprendre qu'une action qu'ils ont entreprise a eu lieu. Cela peut contribuer à apprendre comment le jeu fonctionne et ajouter une couche supplémentaire de polissage qui rend une fonctionnalité plus satisfaisante à utiliser. Quelques exemples de retours 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 l'état survolé, enfoncé et relâché (sélectionné)
• Un effet sonore de caisse enregistreuse "cha-ching!" jouant lorsque le joueur termine un achat
• Une barre de progression se remplissant à mesure que le joueur complète des objectifs de quête

Lorsque le retour est manquant ou insuffisant, les joueurs pourraient 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

Plusieurs 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 d'un écran UI ou d'un 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 sortir de 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 possibles nécessaires pour équiper un objet. Comme les joueurs n'ont pas à effectuer de nombreuses actions ou à réfléchir trop à ce qu'ils doivent faire, ce flux est faible en friction, une mesure de l'effort requis pour atteindre un objectif.

Concevoir des flux efficaces et à faible friction nécessite une réflexion approfondie sur les cas d'utilisation. Ces cas d'utilisation peuvent être exprimés comme des objectifs de joueur tels que :

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

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

• Les joueurs accèdent à la fonctionnalité de personnalisation de l'avatar via un bouton proéminent sur le HUD, et peuvent immédiatement commencer à équiper des objets à leurs avatars
• Les onglets trient 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 alors commencer à disposer l'UI et à planifier les étapes que les joueurs suivront pour atteindre l'objectif de modifier 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 sont floues ou peu pratiques, et la friction excessive.