Conception UI/UX

L'interface utilisateur (UI) combine le design visuel artistique avec le design d'informations axé sur la communication pour produire des menus, des布局 de boutique, des têtes-à-tête affichés (HUDs) et d'autres interfaces avec lesquelles les joueurs interagissent. L'interface utilisateur (Expérience utilisateur)

IU

L'interface utilisateur partage des informations vitales comme 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 donné que c'est souvent la façon principale dont les jeux communiquent avec le joueur, l'interface utilisateur est critique pour les joueurs. Mal conçue, l'interface utilisateur peut laisser les joueurs confondus et frustrés et mener à une monétisationrétention, tandis que l'interface utilisateur conçue judicieusement peut contrib

• Priorisation
• Attention
• Langage visuel
• Conventions
• Consistance

Priorisation

La première partie de l'information la plus significative est la hiérarchie de l'information. Ceci est particulièrement crucial dans les jeux où les joueurs prennent fréquemment des décisions instantanées en fonction d'un ensemble restreint d'informations. Lors de la priorisation de l'interface, identifiez ce qui est essentiel ou le plus pertinent pour l'expérience du joueur et assurez-vous qu'il est à la fois accessible et facile à localiser. Considérez ces questions :

• Qu'est-ce que le joueur fait à ce moment-là ?
• Qu'est-ce qui est le plus important pour qu'ils s'en rendent compte, ou aient accès ?
• Quels choix ont-ils à faire ?
• Quelles informations ont-ils besoin pour prendre ces choix ?
• À quelle fréquence ils s'engagent-ils dans ces choix ?

Les informations et les fonctionnalités importantes changent au cours d'un jeu, en fonction de facteurs tels que le rôle que joue le joueur, leur emplacement dans le monde du jeu et les articles qu'ils contiennent. L'interface utilisateur peut être conçue pour présenter uniquement ce qui est pertinent contextuellement - échanger 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 clutter de tout ce qui ne l'est pas.

Exemples

Les éléments irrélevants peuvent causer de la confusion et de la distraction. RPG lié par le sort > a une interface utilisateur 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 si oui ils contrôlent la balle. Sans la balle, les joueurs peuvent courir et plaquer pour reprendre le contrôle. Une fois en possession, les boutons basculent à Deke et Pass, ce qui permet aux joueurs d'esquiver les adversaires et de passer la balle. En alternant ces boutons, l'interface reste contextuellement utile, évitant les distractions inutiles.

Dans Le jeu de survie, les joueurs doivent être au courant de leur état de santé et de leur statut de faim, et avoir un accès rapide à leur carte, leur inventaire et leurs outils. Cette information permet à eux de prendre des décisions et prioriser des actions pour la survie. Si cette information ou ces outils sont difficiles à trouver ou manquent, la survie devient plus difficile et inutilement frustrante.

Attention

Malgré une interface utilisateur minimaliste, priorisée et contextualisée, les joueurs peuvent toujours avoir besoin d'aide pour localiser ce dont ils ont besoin. Les concepteurs d'interface utilisateur peuvent utiliser plusieurs outils visuels pour capturer et guider l'attention des joueurs, tels que :

• Couleur : Les couleurs vives attirent l'attention plus que les couleurs sombres. Utilisez des teintes vibrantes pour le texte crucial, les boutons et d'autres éléments, et couleurs muées pour les couleurs moins importantes. Cela améliore la visibilité et réduit la distraction.
• Taille : Les éléments plus grands sont plus visibles et perçus comme plus importants par rapport aux plus petits.
• Espace : Les éléments entourés d'un espace négatif ou d'un espacement important attirent l'œil.
• Proximité : Les éléments groupés impliquent une connexion. En plaçant des éléments et des articles similaires les uns aux autres, les joueurs peuvent comprendre leur associativité et les localiser plus facilement.
• Mouvement : Les éléments animés attirent l'attention. Même un léger mouvement peut attirer l'attention sur un élément parmi les homologues statiques. Les effets de particules, les boutons flottants et les flèches animées sont souvent utilisés dans les tutoriels pour fournir des conseils.

La modération est la clé avec ces outils. L'utilisation excessive de éléments brillants et en mouvement peut débord et confondre les joueurs plutôt que les aider.

Exemples

Dans la Jailbreak sa saison passée UI, une bande de jaune doré se trouve sous les icônes de la saison passée exclusive, attirant l'attention sur les récompenses premium et les rendant visuellement distinctes des gratuites.

Dans Dragon Adventures, le pack de pièces de plus grande valeur est donné au plus grand pack de pièces en augmentant sa taille et en le séparant avec plus de rebord, pour le distinguer des packs plus petits.

Dans Tower Defense Simulator, à la fois la taille et la proximité sont utilisées pour visualiser visuellement les skins de la tour quotidiens des caisses quotidiennes.

Langage visuel

En plus de diriger l'attention des joueurs sur les éléments les plus importants sur l'écran, les concepteurs d'interface utilisateur développent une langue visuelle pour aider les joueurs à comprendre ce qu'ils voient. Une langue visuelle est un ensemble de choix de conception délibérés et cohérents qui fournissent des informations à un coup d'œil sur le but, l'statut, les associaciones et la pertinence d'un élément. L'interface utilisateur est construite à partir d'outils comme forme, couleur et

Icônes

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

Boutons

En tant que forme prévalente d'entrée des joueurs, les boutons doivent être faciles à identifier. L'hébergement des boutons dans un conteneur, comme la couleur entourant le texte ou l'icône, les distingue du fond, ce qui les rend interactifs. Ajouter des surbrillance ou des ombres peut améliorer leur apparence tactile en suggérant une profondeur 3D.

Texte

Les en-têtes et les titres contenant de l'information de haut niveau devraient être plus grands et plus gros que le corps du texte. Les couleurs qui sont hautement lisibles et bien contre la couleur de l'arrière-plan qu'elles affichent devraient être envisagées. Les choix stylistiques comme la couleur et le soulignage peuvent mettre en évidence des informations importantes comme des articles dans le jeu, des statistiques ou des capacités. Toujours prioriser la lisibilité lors du choix d'une police.

Une fois que la langue visuelle a été conçue, il peut être documenté dans un Style Guide, un ensemble de règles et d'exemples qui aident tout le monde dans l'équipe à comprendre comment appliquer la langue de manière cohérente dans tout le jeu.

Conventions

Les conventions sont des choix de conception couramment appliqués qui sont vus dans de nombreux jeux différents. Certaines exemples incluent :

• Un symbole X sur un bouton qui ferme la boîte de dialogue lorsqu'il est appuyé
• La couleur grise appliquée aux boutons qui ne sont actuellement pas utilisables
• Une icône de verrouillage au-dessus d'un bouton ou d'une fonctionnalité pour indiquer que le joueur ne l'a pas encore gagné ou déverrouillé

En raison de leur utilisation omniprésente, les joueurs sont généralement familiers avec ces conventions. En tirant parti de cette familiarité, vous pouvez 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'interface peut opter pour une approche unique pour mieux s'adapter à leur jeu, mais en connaissant ces conventions, vous informe de leur processus de décision.

2> DOORS2>

Consistance

Quelles que soient les décisions qu'un concepteur d'interface utilisateur prend, elles devraient s'appliquer de manière cohérente dans tout le jeu. La cohérence aide les joueurs à naviguer dans le jeu plus efficacement et empêche la confusion et la frustration.

Voici quelques exemples de cohérence de l'interface dans un jeu :

• La statistique « Santé » apparaît en vert dans tout le texte, les icônes liées et la barre de santé.
• Le dialogue de l'NPC mentionne toujours un itemdans le jeu, il est souligné en gros.
• Les boutons de fermeture sont toujours carrés, rouges et contiennent un X blanc, qui apparaît seulement dans le coin supérieur droit d'un dialogue.
• Lorsqu'un joueur ne peut pas se permettre un article 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 cohérentement, ils permettent aux joueurs d'associer des éléments liés, d'identifier des éléments importants, de développer de la mémoire musculaire, de prendre des décisions rapides et de passer plus de temps dans le jeu.

Expérience utilisateur

La conception UX se rapporte à la façon dont les joueurs interagissent avec le jeu, comment ils font leurs choix connus au jeu et comment ils passent d'un choix à l'autre. Bien que le UX soit souvent travaillé en équipe avec l'interface utilisateur (UI), il est plus axé sur l'interactivité et l'expérience du joueur que le design visuel et informatif de l'interface utilisateur (UI).

Comprendre les joueurs

L'objectif principal du concepteur d'interface utilisateur est de créer des interactions et des flux qui sont intuitifs, non intrusifs et faciles à utiliser pour les joueurs. Ce processus commence par une compréhension des joueurs eux-mêmes, de l'audience cible pour un jeu. Lors de l'identification des joueurs d'une expérience, tenez compte des éléments suivre:

• Démographie : La démographie aide à informer les choix de conception en révélant des informations génériques sur un groupe de joueurs. Par exemple, les jeux destinés à cette audience sont généralement plus susceptibles de s'exécuter sur les appareils mobiles ou les tablettes que les ordinateurs personnels, ce qui priorise généralement la conception et le polissage de l'expérience de l'utilisateur mobile.

• Niveau d'expérience : Les développeurs peuvent choisir de concevoir pour les joueurs avec peu d'expérience de jeu, une quantité importante, ou quelque part entre les deux. Les interactions qui sont familières aux joueurs expérimentés, telles que le clic sur une touche pour équiper un élément dans une barre d'outils, ou le clic sur c pour s'accroupir, peuvent ne pas être évidentes pour les joueurs inexpérimentés et nécessitent une messagerie ou une formation supplémentaires.

• Familiarité du genre : Semblable au niveau d'expérience général, la familiarité du genre reflète le niveau d'expérience des joueurs avec un type de jeu spécifique. Les jeux qui tombent dans les genres populaires sur Roblox, tels que le jeu de rôle, le survival horror et le tir à la première personne, ont probablement de nombreux joueurs potentiels qui ont joué à un jeu similaire auparavant. Les jeux dans d'autres gen

• Style de jeu : Les joueurs préfèrent souvent des types spécifiques de jouer, allant de la compétition et de la collecte de succès à 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 elles influencent également les décisions UX. Les concepteurs prennent en compte les interactions qu'ils engagent avec ces interactions et les émotions qu'ils visent à susc

Après avoir examiné ces facteurs et sélectionné un groupe de joueurs cibles (ou groupes), en savoir plus en les rencontrant, en jouant avec eux et en apprenant sur leurs objectifs et leurs préférences pour mieux informer les choix de conception.

Concevoir des interactions

Les interactions sont des fonctionnalités qui permettent aux joueurs d'expérimenter et de communiquer leurs choix dans un jeu. Les concepteurs UX veulent que ces interactions soient intuitives et nécessitent le moins de description possible. Pour ce faire, ils utilisent :

• Conventions
• Métaphores
• Commentaires

Conventions

Les conventions sont des conceptions d'interface utilisateur et principes que les joueurs peuvent déjà être familiers avec d'autres jeux.

Les exemples de conventions incluent :

• La proximité "E" que les développeurs de Roblox utilisent pour signaler aux joueurs qu'un élément est interagible s'ils se tiennent assez près pour qu'il apparaisse.
• La touche « C » qui permet à l'avatar du joueur de s'accroupir afin qu'il puisse traîner sous des obstacles ou s'adapter à des espaces exigus.
• Nombre de clés équipant des objets dans une barre d'outils dans les mains de l'avatar afin qu'ils puissent être utilisés.
• Marcher en cercle sur le sol pour rejoindre une correspondred'attente.

Les conventions seissent lorsqu'une certaine implémentation ou choix de conception gagne en popularité en raison de sa facilité d'utilisation. "C" pour s'accroupir, par exemple, est facile à souvenir en raison de son premier lettre dans le mot crouch, et est facilement situé à côté de WASD, les touches que les joueurs utilisent pour naviguer. Il est une interaction rapide et sous pression, ce qui est idéal car essayer de se cacher ou de fuir d'

Métaphores

Les métaphores transforment un concept abstrait en un plus familier, en créant un raccourci de compréhension. Dans cet exemple à partir de Spellbound Wizard RPG, le fait de lancer des sorts est effectué en dessinant des cartes à partir d'un deck. L'interface utilisateur basée sur le deck renforce le fait que les sorts d'abstraction, qui n'ont pas d'expression réelle, sont exécutés en dessinant des cartes à partir

Commentaires

La communication du jeu au joueur est connue sous le nom de retournez à l'arrière. Le retour aide les joueurs à comprendre que l'action qu'ils ont prise a eu un effet dans le jeu. Il peut contribuer à l'apprentissage de la façon dont le jeu fonctionne et ajouter une couche supplémentaire de polonais qui rend une fonction plus satisfaisante à utiliser. Certains exemples de retour incluent :

• Un ennemi qui joue sa réaction d'animation 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 de survole, d'appression et de libération (sélectionné)
• Un effet sonore de caisse « cha-ching! » jouant lorsque le joueur termine un acheter
• Une barre de progression se remplissant lorsque le joueur atteint les objectifs de quête

Lorsque les commentaires sont manquants ou insuffisants, 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

Plusieurs interactions sont souvent requises pour qu'un joueur atteigne un but. Les concepteurs UX se soucient de la façon dont les joueurs naviguent d'une action ou d'un écran ou d'un choix à l'autre et s'assurent que ces chemins sont logiques et conviviaux.

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

• Trouvez et appuyez sur le bouton Avatar
• Sélectionnez une catégorie d'objet (visage, tête, cou, etc)
• Faites défiler pour trouver un élément d'intérêt
• Appuyez sur l'article pour l'équiper sur leur avatar
• Trouvez et appuyez 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 facile, avec autant de étapes que possible nécessaires pour équiper un item. Parce que les joueurs n'ont pas à effectuer beaucoup d'actions ou à réfléchir trop sur ce qu'ils doivent faire, ce flux est bas dans friction, une mesure de l'effort requis pour atteindre un objectif.

La conception de flux efficaces et à faible frottement nécessite une attention toute particulière aux cas d'utilisation. Ceux-ci peuvent être exprimés comme objectifs des joueurs tels que :

• Vouloir pouvoir modifier rapidement un avatar
• Rechercher facilement des éléments pendant la modification
• Aperçu des articles avant la sélection
• Suppression facile des éléments après la sélection

Ces objectifs guident ensuite le design de l'interface utilisateur et de l'interface utilisateur de la fonctionalité:

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

Les concepteurs peuvent alors commencer à définir l'interface utilisateur et à planifier les étapes que les joueurs emprunteront pour atteindre l'objectif de modifier leurs avatars. Ce processus peut être aisé en utilisant un diagramme de flux, qui représente visuellement les actions des joueurs pendant qu'ils naviguent dans l'interface. Ces diagrammes peuvent aider à identifier les étapes négligées, les points d'arrêt où les étapes ne sont pas claires ou inconvénientes, et la fr