L'interface utilisateur (UI) combine un design visuel artistique avec un design d'information centré sur la communication pour produire des menus, des plans de magasin, des affichages en tête (HUD) et d'autres interfaces avec lesquelles les joueurs interagissent.L'expérience utilisateur (Expérience utilisateur) se rapporte à la façon dont les joueurs interagissent avec le jeu, à la manière dont ils font connaître leurs choix au jeu, et à la manière dont ils passent d'un choix à l'autre.Bien que l'interface utilisateur et l'expérience utilisateur fonctionnent souvent de manière collaborative, l'UX porte un focus plus important sur l'interactivité et l'expérience du joueur plutôt que sur le design visuel et informationnel de l'interface utilisateur.
UI
L'interface utilisateur partage des informations vitales telles que les points de frappe, les objectifs de quête et les prix qui permettent aux joueurs de prendre des décisions et de naviguer dans le jeu.Parce que c'est souvent la première façon dont les jeux communiquent avec le joueur, l'interface utilisateur est cruciale pour l'expérience des joueurs.Une interface utilisateur mal conçue peut laisser les joueurs confus et frustrés et entraîner une mauvaise rétention, tandis qu'une interface utilisateur conçue avec expertise peut contribuer à l'engagement et à la monétisation.L'interface utilisateur conçue efficace emploie les principes suivants :
- Priorisation
- Attention
- Langage visuel
- Conventions
- Cohérence
Priorisation
Partager d'abord les informations les plus importantes est connu sous le nom de hiérarchie de l'information.C'est particulièrement important dans les jeux où les joueurs prennent souvent des décisions instantanées en se basant sur un ensemble restreint d'informations.Lorsque vous priorisez l'interface utilisateur, identifiez ce qui est essentiel ou le plus pertinent pour l'expérience du joueur et assurez-vous qu'il soit à la fois accessible et facile à localiser.Considérez ces questions :
- Qu'est-ce que le joueur fait en ce moment ?
- Quelle est la chose la plus importante pour qu'ils soient au courant, ou aient accès ?
- Quels choix ont-ils à faire ?
- Quelles informations ont-ils besoin pour faire ces choix ?
- À quelle fréquence s'engageront-ils dans ces choix ?
Les informations et les fonctionnalités importantes changent au cours d'une partie, en fonction de facteurs tels que le rôle que joue le joueur, de leur emplacement dans le monde du jeu et des objets qu'ils détiennent.L'interface utilisateur peut être conçue pour présenter uniquement ce qui est important 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 qu'ils n'ont pas.
Exemples
Les éléments sans importance peuvent causer de la confusion et de la distraction.RPG Spellbound > a une interface utilisateur propre et minimaliste qui est particulièrement importante 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 savoir s'ils contrôlent le ballon.Sans la balle, les joueurs peuvent sprinter et plaquer pour reprendre le contrôle.Une fois en possession, les boutons passent à Deke et Pass, ce qui permet aux joueurs d'esquiver les adversaires et de passer le ballon.En alternant ces boutons, l'interface utilisateur reste contextuellement utile, évitant les distractions inutiles.
Dans Le jeu de survie, les joueurs doivent être conscients de leur statutde santé et de leur faim, et avoir un accès rapide à leur carte, à leur inventaire et à leurs outils.Cette information leur permet de prendre des décisions et de prioriser des actions pour la survie.Si cette information ou ces outils sont difficiles à trouver ou manquants, la survie devient plus difficile et frustrante inutilement.
Attention
Malgré une interface utilisateur minimaliste, prioritaire et contextualisée, les joueurs peuvent toujours avoir besoin d'aide pour localiser ce dont ils ont besoin.Les designers d'interface 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 plates.Utilisez des teintes vibrantes pour le texte crucial, les boutons et d'autres éléments, et des tons plus doux 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 encerclés par un espace négatif ou un rembourrage important attirent l'œil.
- Proximité : Les éléments groupés impliquent une connexion.En plaçant des fonctionnalités et des éléments 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 ses homologues statiques.Les effets de particules, les boutons vacillants et les flèches animées sont souvent utilisés dans les tutoriels pour guider.
La modération est la clé avec ces outils. Une utilisation excessive d'éléments brillants et mobiles peut submerger et confondre les joueurs plutôt que de les aider.
Exemples
Dans l'interface utilisateur du passe de saison de Évasion, 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 Aventures de dragons, la priorité visuelle est donnée au paquet de pièces de plus grande valeur en augmentant sa taille et en le séparant avec plus d'espace, pour le distinguer des paquets plus petits.
Dans Simulateur de défense de tour, à 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 sur l'écran, les concepteurs d'interface utilisateur développent un langage visuel pour aider les joueurs à comprendre ce qu'ils voient.Un langage visuel est un ensemble de choix de conception délibérés et cohérents qui fournissent des informations en un coup d'œil sur le but, le statut, les associations et la pertinence d'un élément.La langue est construite à partir d'outils comme la forme, la couleur et le style.Certains des usages du langage visuel incluent :
Icônes
Les icônes peuvent utiliser une identité visuelle qui transmet le sens et les associations.Par instance, les icônes liées à des 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édominante d'entrée du joueur, les boutons doivent être faciles à identifier.Les boutons d'hébergement dans un conteneur, tels qu'une couleur entourant le texte ou l'icône, les distinguent du fond, les faisant apparaître interactifs.Ajouter des mises en évidence ou des ombres peut améliorer leur attrait tactile en suggérant une profondeur 3D.
Texte
Les en-têtes et les titres contenant des informations de haut niveau importantes devraient être plus grands et plus audacieux que le texte du corps.Les couleurs qui sont très lisibles et se contrastent bien contre la couleur de l'arrière-plan sur laquelle elles seront affichées doivent être prises en compte.Les choix stylistiques comme la couleur et l'italique peuvent mettre en évidence des informations importantes comme les objets du jeu, les statistiques ou les capacités.Privilégiez toujours la lisibilité lors du choix d'une police.
Une fois que la langue visuelle a été conçue, elle peut être documentée dans un guide de style, 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 à travers le jeu.
Conventions
Les conventions sont des choix de conception couramment appliqués qui sont vus dans de nombreux jeux différents. Certains 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 ne sont actuellement pas utilisables
- Une icône de verrouillage superposée sur un bouton ou une fonction pour indiquer que le joueur ne l'a pas encore gagné ou débloqué
Étant donné leur large utilisation, les joueurs sont généralement familiers avec de telles conventions.L'utilisation 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 d'interface utilisateur peut opter pour une approche unique pour mieux s'adapter à son jeu, mais la connaissance de ces conventions informe son processus de prise de décision.
X Fermez les boutons dans Vents de la fortune , Aventures de dragon , Simulateur de combat de robots et DOORS >
Cohérence
Quelles que soient les décisions qu'un concepteur d'interface utilisateur prend, elles doivent être appliquées de manière cohérente tout au long du 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é.
- Chaque fois que le dialogue NPC mentionne un itemen jeu, il est mis en évidence en caractères gras.
- Les boutons de fermeture sont toujours carrés, rouges et contiennent une X blanche, n'apparaissant que dans le coin supérieur droit d'un dialogue.
- Chaque fois qu'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 du joueur.En les appliquant de manière cohérente, ils permettent aux joueurs d'associer des éléments liés, d'identifier des éléments importants, de développer la mémoire musculaire, de prendre des décisions rapides et informées, et de passer plus de temps immergé dans le jeu.
Expérience utilisateur
Le design UX se rapporte à la façon dont les joueurs interagissent avec le jeu, à la manière dont ils font connaître leurs choix au jeu et à la manière dont ils passent d'un choix à l'autre.Bien que l'UX fonctionne souvent de pair avec l'interface utilisateur (UI), il se concentre plus sur l'interactivité et l'expérience du joueur que sur le design visuel et informationnel de l'interface utilisateur.
Comprendre les joueurs
L'un des objectifs principaux du designer UX est de créer des interactions et des flux intuitifs, invisibles et pratiques pour que les joueurs puissent les utiliser.Ce processus commence par une compréhension des joueurs eux-mêmes, de l'audience prévue pour un jeu.Lors de l'identification des joueurs d'une expérience, tenez compte du suivre:
Démographie : La démographie aide à informer les choix de conception 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, de sorte que les jeux destinés à cette audience privilégient souvent la conception et le polissage de l'expérience utilisateur mobile.
niveaud'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 familières aux joueurs expérimentés, telles que le tapotage d'une touche numérique pour équiper un élément dans une barre d'outils ou la pression de c pour s'accroupir, peuvent ne pas être évidentes pour les joueurs inexpérimentés et nécessitent un message 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 spécifique de jeu.Les jeux qui tombent dans des genres populaires sur Roblox, comme le jeu de rôle, l'horreur de survie et le tireur en première personne, sont susceptibles d'avoir de nombreux joueurs potentiels qui ont déjà joué à un jeu similaire.Les jeux d'autres genres peuvent avoir moins de joueurs expérimentés, mais cet écart d'expérience peut être surmonté grâce à des tutoriels et à l'utilisabilité.
Style de jeu : Les joueurs favorisent souvent des types de jouerspé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 elles influent également sur les décisions UX.Les designers envisagent quelles interactions prioriser, quelles polir et quelles présenter aux joueurs.Ils tiennent également compte de l'état d'esprit que les joueurs auront lorsqu'ils interagiront avec ces interactions et des émotions qu'ils visent à susciter en eux.
Après avoir pris en compte ces facteurs et sélectionné un groupe cible de joueurs (ou des groupes), découvrez-les en les rencontrant, en jouant avec eux et en apprenant à propos de leurs objectifs et 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 designers UX veulent que ces interactions soient intuitives et nécessitent le moins d'explications possible.Pour ce faire, ils utilisent :
- Conventions
- Métaphores
- Retour
Conventionnes
Les conventions sont des designs et des principes UX auxquels les joueurs peuvent déjà être familiers d'autres jeux.
Des exemples de conventions incluent :
- L'invite de proximité « E » que les développeurs de Roblox utilisent pour signaler aux joueurs qu'un élément est interactif s'ils se trouvent assez près pour qu'il apparaisse.
- La touche « C » permettant à l'avatar du joueur de s'accroupir afin qu'il puisse se faufiler sous les obstacles ou s'adapter dans des espaces étroits.
- Les touches numériques équipent des objets de barre d'outils dans les mains de l'avatar afin qu'ils puissent être utilisés.
- Se promener dans des cercles sur le terrain afin d'être en file d'attente pour un correspondre.
Les conventions sont établies lorsqu'une implémentation ou un choix de conception spécifique gagne en popularité en raison de son utilisation facile.« C » pour s'accroupir, par exemple, est facile à retenir car c'est la première lettre du mot s'accroupir, et est facilement situé à côté de WASD, les touches 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 approchante est un cas d'utilisation commun pour s'accroupir.
Métaforces
Métaphores lient un concept abstrait à un concept plus familier, créant un raccourci pour 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 deck.L'interface utilisateur/expérience de base basée sur le pont traduit l'acte abstrait de lancer des sorts, qui n'a pas d'expression dans la vie réelle, en quelque chose que les joueurs peuvent plus facilement et rapidement comprendre.
Commentaires
La communication du jeu au joueur est connue sous le nom de retour de feed-back.Les commentaires aident les joueurs à comprendre qu'une action qu'ils ont prise a eu un effet dans le jeu.Il peut contribuer à apprendre comment le jeu fonctionne et ajouter une couche supplémentaire de polonais qui rend une fonction plus satisfaisante à utiliser.Certains exemples de commentaires incluent :
- Un ennemi joue son animation de réaction "hit" pour indiquer qu'il a subi des dommages de l'arme du joueur
- Un bouton qui change de couleur pour indiquer l'état survoler, déprimé et libéré (sélectionné)
- Un effet sonore de caisses enregistreuses "cha-ching!" qui se joue lorsque le joueur termine un acheter
- Une barre de progression se remplit lorsque le joueur termine les objectifs de la quête
Lorsque les commentaires manquent ou sont 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.
Flux de conception
De nombreuses interactions sont souvent nécessaires pour que le joueur termine un objectif.Les designers UX sont préoccupés par la façon dont les joueurs naviguent d'une action ou d'un écran d'interface utilisateur ou d'un choix à l'autre et s'assurent que ces chemins sont logiques et pratiques.
Par exemple, pour équiper un article sur un avatar dans Berry Avenue RP, un joueur doit :
- Recherchez 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
- Tapez sur l'élément 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 direct, avec le moins de pas possible nécessaires pour équiper un item.Parce que les joueurs n'ont pas à effectuer beaucoup d'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.
La conception de flux efficaces et à faible friction nécessite une réflexion attentive sur les cas d'utilisation. Ces cas d'utilisation peuvent être exprimés en tant qu'objectifs du joueur tels que :
- Vous souhaitez pouvoir modifier rapidement un avatar
- Trouver facilement des éléments en modifiant
- Prévisualisation des éléments avant sélection
- Suppression facile de l'élément après sélection
Ces objectifs guident ensuite le design de l'interface utilisateur et de l'expérience utilisateur de la fonctionalité:
- Les joueurs accèdent à la fonctionnalité de personnalisation de l'avatar via un bouton important sur l'HUD et peuvent immédiatement commencer à équiper des objets sur leurs avatars
- Les onglets trient les articles dans des catégories pratiques, et le champ de recherche permet aux joueurs de rechercher des articles directement
- Les articles sont prévisualisés sur l'avatar instantanément
- Les joueurs peuvent supprimer l'élément en tapant dessus à nouveau pour le désélectionner, ou en tapant dessus dans la liste des éléments équipés
Les designers peuvent ensuite commencer à définir l'interface utilisateur et planifier les étapes que les joueurs prendront pour terminer 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 lorsqu'ils naviguent dans l'interface utilisateur.Ces diagrammes peuvent aider à identifier les étapes oubliées, les points de douleur où les étapes sont imprécises ou gênantes, et la friction excessive.
