Share
Est-il facile pour votre joueur de concrétiser son intention ou de comprendre ce qui se passe dans votre jeu? Dans ce didacticiel, vous apprendrez à créer une meilleure interface utilisateur en examinant les bons et les mauvais exemples de jeux existants. Vous obtiendrez une liste de questions pour vous guider dans leur conception..
À propos, si vous cherchez un endroit pour commencer, vous pouvez trouver une pléthore de ressources de jeu bien conçues sur Envato Elements..
Actifs de jeu sur Envato Elements En tant que joueurs et développeurs de jeux, nous savons que l'immersion est primordiale. Lorsque vous êtes immergé, vous perdez la notion du temps et vous impliquez dans ce que le jeu présente. L’immersion dans l’immersion dépend en grande partie du fait qu’il est facile pour votre joueur de convertir une idée en une action du jeu - c’est-à-dire la fluidité de l’UX (User Experience) de votre jeu et la qualité de la conception de son interface utilisateur. (UI) est. Un jeu se blesse en fournissant trop peu d’informations ou trop, en demandant trop d’entrées, en déroutant le joueur avec des invites inutiles ou en rendant plus difficile l’interaction d’un nouveau joueur. Une mauvaise interface utilisateur peut même casser votre jeu complètement.
Dans cet article, je ne vous enseignerai pas comment assembler une interface utilisateur. Au lieu de cela, je vais me concentrer sur ce qui rend une interface utilisateur bien conçue ou mal conçue et sur la manière dont vous pouvez appliquer cette réflexion à votre propre jeu. J'examinerai le design de l'interface utilisateur et de l'expérience utilisateur comme une série d'objectifs aussi importants et précis que toute autre partie de votre jeu, en utilisant des exemples de jeux qui ne fonctionnent pas correctement et de jeux qui fonctionnent correctement.
Les termes UI et UX sont parfois (à tort) utilisés de manière interchangeable, mais ils ont des significations spécifiques.
UI, ou Interface utilisateur, fait référence aux méthodes (contrôle du clavier, contrôle de la souris) et interfaces (écran d'inventaire, écran de carte) par lesquelles un utilisateur interagit avec votre jeu. UX, ou Expérience utilisateur, se réfère à la façon intuitive et agréable de ces interactions sont.
En d'autres termes, l'interface utilisateur d'une voiture est son volant, ses pédales, les cadrans et les commandes du tableau de bord; l'UX de la voiture provient d'immatériels tels que la pédale de frein, le moteur accélérant en douceur lorsque vous appuyez sur le gaz, le levier de vitesse ayant juste la bonne quantité de résistance - ces choses qui rendent la voiture agréable à conduire.
En termes simples, le rôle d’une bonne interface utilisateur est de fournir des informations pertinentes de manière claire et rapide, et de s’écarter une fois le travail accompli. Si vous ne prenez qu'un bit d’information de ce tutoriel, qu’il en soit ainsi:
Une bonne interface utilisateur vous dit ce que vous devez savoir, puis vous échappe.
Nous pouvons aller plus loin et réduire le processus de conception de l'interface utilisateur à six questions fondamentales:
Posez ces questions fréquemment lorsque vous concevez et jouez votre jeu. Le monde de la conception d'interface utilisateur est un monde d'inquiétude sans fin, et c'est l'un des rares domaines du développement de jeux où il est normal de rester obsédé..
Un bon exemple est Fallout 3Pipboy - ou plus précisément la courte animation de votre personnage élevant le Pipboy à la hauteur de vos yeux lorsque vous y accédez:
L'animation ne dure qu'une demi-seconde, alors vous n'y réfléchirez peut-être pas. Mais regardez comment cela met à l'épreuve la patience de vos joueurs après avoir assisté à d'innombrables fois au cours d'une partie de 80 heures. Ne concluez jamais que votre joueur "s'habituera" à faire quelque chose d'une manière non optimale. Ils ne feront que salir et dénigrer votre manque de sens du design.
Je crois que le meilleur moyen d'apprendre à concevoir des interfaces utilisateur est de créer des sites Web. Des ressources étonnantes telles que la boîte aux alertes de Jakob Nielsen existent pour vous fournir autant d'informations que vous le souhaitez sur ce qui rend une interface utilisateur facile à utiliser, sur la manière dont les utilisateurs interagissent avec les logiciels, etc..
Note de l'éditeur: Et il y a toujours notre site soeur Webdesigntuts +…
Au centre de ce qui fait une bonne interface utilisateur est facilité d'utilisation, un attribut qui intègre les réponses aux six questions fondamentales mentionnées précédemment. Il reste encore beaucoup à dire sur la convivialité et sur l’utilisation de votre interface, et je vous laisse le soin de choisir. Alertbox et trouvez les parties pertinentes pour votre expérience.
De nombreux programmeurs ont peur de créer des interfaces utilisateur, car ils estiment qu'il s'agit d'un travail créatif, qu'il vaut mieux laisser à quelqu'un comme un artiste qui comprend mieux la présentation. Et pourtant, la conception de l'interface utilisateur est un processus en grande partie logique, parfaitement accessible à un développeur..
En fait, je pense que le programmeur (ou le directeur créatif, ou tout autre membre de votre équipe jouant le rôle le plus direct dans la création de l'expérience de jeu de votre jeu) devrait être responsable de la création de l'interface utilisateur, car ce sont eux qui connaissent le jeu à l'intérieur. et qui sait quelles informations sont importantes et ce qui est accessoire.
Ils doivent se concentrer sur les aspects fonctionnels de l'interface utilisateur: quelle est sa taille, le fait-il (ou devrait-il le faire) défiler, quelles informations sont affichées et où, et comment le joueur y navigue. Mock it up avec deux ou trois couleurs, et ne comptez jamais uniquement sur les changements de couleur pour transmettre des informations. À tout le moins, utilisez ColorOracle ou Coblis pour vous assurer que les daltoniens ne manqueront pas.
Avant d'entrer dans ce domaine, il est important de comprendre que lorsque je parle de mauvaises interfaces utilisateur, je porte ce jugement en fonction des idées et des comportements que j'apporte en tant que joueur sur PC jouant à des jeux avec le clavier et la souris..
Le choix de l'utilisateur en matière de saisie est extrêmement pertinent pour son expérience utilisateur, même si ce n'est pas tout. Quelqu'un qui est habitué à une interface tactile va trouver une interface de bouton maladroite, par exemple, mais une interface de bouton bien conçue sera toujours facile à comprendre et à prédire.
L'interface utilisateur d'Oblivion est un exemple classique d'interface utilisateur incompatible avec une autre. Bien qu'Oblivion ait été porté de consoles vers un PC, il conservait toujours son interface utilisateur centrée sur le contrôleur. Ceci est tout à fait analogue à la sortie d'un jeu sur iOS ou Android et à obliger le joueur à déplacer son curseur à l'écran comme s'il utilisait le trackpad d'un ordinateur portable au lieu de tirer parti du positionnement tactile absolu..
Alors, qu'est-ce qui rend l'interface utilisateur d'Oblivion si mauvaise? C'est une combinaison d'espace inutilisé, de mise à l'échelle incorrecte et de contrôles inappropriés.
J'espère que vous êtes cool avec l'affichage de six éléments à la fois; ces fenêtres ne sont pas ajustables. La partie réelle du menu qui contient les informations pertinentes, telles que le contenu de votre inventaire, utilise seulement 21,7% de l’écran total à une résolution de 1920x1080..
Utiliser seulement un cinquième d'un écran n'est pas si mal que ça: vous pouvez faire beaucoup dans autant d'espace. Le vrai problème est que la taille de la police et des icônes est le double de la taille requise pour l'affichage sur un moniteur PC, ce qui limite considérablement le nombre d'éléments pouvant être affichés..
Une vue en liste linéaire signifie également que vous avez tendance à faire beaucoup de défilement, et l'interface à onglets vous masque tout. Pour vérifier vos effets de statut, vous devez cliquer sur l’onglet Magic, accéder au sous-onglet Effets, puis faire défiler la liste. C’est une chose de cacher des informations rarement utilisées, telles que les statistiques des personnages, derrière des onglets, mais complètement différent de cacher des informations importantes telles que ce qui nuit à votre santé lorsque vous vous promenez..
L'oubli manque aussi raccourcis. Il n'y a pas de bouton Carte pour afficher la carte. vous devez cliquer sur la boussole pour afficher l'onglet Carte. Il n'y a pas de raccourci de clé de vente rapide ou de raccourci de vente de pile vous devez travailler le curseur de quantité avec votre souris et le confirmer en cliquant ou en appuyant sur Entrée. Il n'y a pas de bouton standard pour sortir d'une fenêtre (Escape dans la plupart des jeux), donc vous quittez différentes fenêtres en appuyant sur E, Tab, Escape ou une autre touche..
La suite, Skyrim, résoudrait certains de ces problèmes, mais certains resteraient ou s'aggraveraient. Je suis resté coincé la première fois que j'ai ouvert un coffre dans Skyrim: Escape ne m'a pas sorti de cette fenêtre; la clé d'inventaire ne m'a pas sorti; essayer à nouveau d'utiliser le coffre ne m'a pas fait sortir. Il n'y avait pas de bouton sur lequel vous pouviez cliquer pour sortir ou une invite vous indiquant quoi faire. Cliquer en dehors de la fenêtre ne fonctionnait pas. Devinez quelle clé me laisse enfin sortir du coffre? Sheathe / Ready Weapon, bien sûr.
Les menus de Far Cry 3 sont vraiment gênants pour un utilisateur de PC. Parfois, il ne répond pas aux clics, vous devez donc cliquer trois fois. le chargement des menus peut prendre un certain temps; ce n'est pas vraiment efficace en termes d'espace - vous connaissez l'accord maintenant.
Il a été corrigé, je vais donc me concentrer sur l'état de son HUD dans le jeu lors de sa sortie. Commençons par regarder le HUD dans son prédécesseur, Far Cry 2.
C'est ce que vous voyez la plupart du temps. Des informations telles que les indicateurs de santé et le nombre de munitions s'affichent en fonction des besoins, mais en général, le HUD vous laisse tranquille..
Maintenant regardons Far Cry 3le HUD.
Far Cry 3le HUD ne pas te laisser seul. J'ai du mal à le montrer dans des captures d'écran ou des vidéos; c'est juste quelque chose que vous rencontrez en tant que joueur qui ne cesse de revenir à la réalité. Cela crée un sentiment de claustrophobe.
La mini-carte est grande et opaque, elle vous gêne. Le rappel d'objectif en haut à gauche est également vaste et opaque et vous gêne. Bien qu'il disparaisse au bout de quelques secondes, il a tendance à réapparaître au moment où vous êtes sur le point de commencer à oublier que vous jouez. Lorsque vous vous faites tirer, les indicateurs de frappe apparaissent près du centre de l'écran, là où ils vous gênent à nouveau, au lieu d'apparaître sur les bords mêmes de l'écran, comme dans tous les autres jeux. Si vous collectez suffisamment d'ingrédients pour la fabrication, une autre grande fenêtre pop-up opaque apparaît à droite pour vous faire savoir que vous pouvez créer quelque chose de nouveau..
Chaque fois qu’une de ces fenêtres contextuelles apparaît, le joueur est libéré de l’amusement qu’il éprouvait et lui rappelle qu’il utilise un logiciel. La surabondance d'informations évidentes donne l'impression que le jeu ne fait pas confiance au joueur pour qu'il soit compétent. Le correctif vous permet de désactiver la pire de ces fonctionnalités de HUD, mais la mini-carte est toujours là et les menus sont encore difficiles à utiliser pour les interactions entre la souris et le clavier..
Mais ne passons pas tout ce temps à parler de mauvaises interfaces utilisateur. De bons exemples d'interfaces utilisateur proviennent de jeux qui reconnaissent les limites et les points forts de leurs systèmes.
La plupart des joueurs sur PC s'accordent pour dire que Morrowind (le prédécesseur d'Oblivion) possède l'une des meilleures interfaces utilisateur pour PC, à l'exception d'un problème dont je parlerai plus bas..
Passons en revue les éléments de base de cet écran.
Que signifie cette interface utilisateur pour le lecteur PC? Presque tout est Littéralement un clic. Si vous voulez regarder vos compétences, faites défiler la fenêtre du personnage. Si vous voulez équiper quelque chose, faites-le glisser sur votre poupée en papier. L’interface est rapide et accessible, et presque chaque type d’article dans le monde possède une icône d’inventaire unique. Trouver votre compagnon marteau implique donc une demi-seconde de consultation de votre inventaire net et évolutif..
Le seul détail qui laisse tomber cette interface utilisateur est le fait que les potions et les parchemins réutilisent les icônes d'inventaire; Il existe des icônes uniques pour la qualité de la potion, mais pas pour son effet. Une potion Master Water Breathing ressemble à une potion Master Restore Fatigue..
La saisie de texte avec un contrôleur est peu pratique dans le meilleur des cas et douloureuse dans le pire des cas. Vous ne pouvez pas déplacer vos doigts directement sur une touche, vous devez appuyer sur un bouton, ce qui crée beaucoup de mouvements et d'actions inutiles..
Au-delà du Bien et du Mal éviter tout cela en implémentant ce qui est communément admis comme le meilleur système de saisie de texte pour la console: un ruban infini avec des lettres et des chiffres disposés de manière ordonnée. Le ruban défile rapidement et sans délai, il fournit un retour sonore constant et réagit aux ajustements. C'est un mystère pourquoi les autres jeux n'ont pas suivi son exemple.
Eh bien, j'ai été un peu injuste. D'autres écrans de saisie de texte de type clavier vous permettent de maintenir une direction et de faire défiler toutes les touches de manière séquentielle, mais ils ont souvent un délai avant de commencer à défiler à la vitesse maximale, ou ils ne défilent pas assez rapidement. (Rappelez-vous la question fondamentale, "Dois-je jamais attendre que l'interface charge ou joue une animation?")
Homeworld a commencé en 1999 en tant que premier RTS avec un véritable mouvement tridimensionnel. Pouvoir déplacer les unités sur trois axes constituait un nouveau défi de conception, et Homeworld a été livré avec style et élégance. Le problème: comment représenter un mouvement 3D sur un plan 2D (votre moniteur).
La solution: abordez le plan horizontal traditionnel auquel les joueurs sont habitués.
Ensuite, traiter avec le plan vertical supplémentaire.
L’écran de mouvement fournit également au joueur des outils subtils mais puissants:
Crusader Kings 2 est le genre de jeu complexe à plusieurs niveaux qui vous rend muet. Cependant, son interface fait de son mieux pour vous aider à traverser tout cela. Tout d’abord, de nombreuses boîtes d’aide apparaissent jusqu’à ce que vous soyez suffisamment à l’aise avec cette partie du jeu pour lui dire de s’arrêter. Deuxièmement, il y a cette fonctionnalité merveilleuse. Dites que je veux savoir ce qu'une icône de pièces représente; Je passe la souris dessus et BAM!
Une infobulle sauvage est apparue! Le jeu me dit comment appeler l'icône des pièces, me donne les informations qui s'y rapportent et me dit même comment cette information est organisée. Vous pouvez le faire avec n’importe quel autre élément du jeu et l’infobulle apparaît rapidement pour que je n’aie pas à attendre..
Vous pouvez regarder ceci et dire, "Duh, les info-bulles existent depuis toujours. Bien sûr, il est préférable de sortir lorsque je survole quelque chose." Gardez cela à l'esprit, car il est facile d'oublier.
Il est particulièrement facile d’oublier les info-bulles dans les menus de face de votre jeu. Voici l'infobulle de Vsync dans le menu Options de A Valley Without Wind..
Voici l'infobulle de Vsync dans Half Life 2: Episode 2Menu Options.
Vraiment utile. La plupart des joueurs sur PC qui se promènent dans les options graphiques avancées savent ce qu'est VSync, mais placer une info-bulle est simplement poli.
L'écran de ville de Civ 5 est un excellent exemple de mise à disposition rapide d'informations..
Cet écran unique vous indique: la situation économique et culturelle de tout votre empire; la production de cette ville, y compris la croissance de la population (et la croissance de la frontière si la liste des bâtiments est réduite); les unités et les bâtiments disponibles pour cette ville et le temps qu'il faudra pour les construire; l'étalement de votre ville, ainsi que les tuiles de ressources qu'il contient et les tuiles que travaillent actuellement les citoyens; les bâtiments qui y sont déjà construits et un panneau de gestion des citoyens condensé dans lequel vous pouvez passer à différents profils d'allocation de personnel afin de spécialiser les résultats de cette ville..
Vous pouvez également déplacer les travailleurs entre les tuiles directement sur la carte de la ville, mettant ainsi à profit tout cet espace d'écran..
Reprenons les six questions fondamentales de la conception de l’UI sous la forme de six directives générales:
La conception de l'interface utilisateur est un travail logique dont vous ne devriez pas avoir peur. Faites attention aux jeux auxquels vous jouez, notez comment ils présentent les informations et comment vous vous sentez. Prenez note de ce que vous faites de manière répétitive et de la manière dont elles pourraient être améliorées. Recherchez des informations qui ne servent que de décoration et réfléchissez à ce que vous voulez remplacer. Faites attention aux choses qui vous perturbent. Enfin, demandez toujours à certaines personnes de tester votre jeu devant vous. Dites-leur comment exécuter le jeu, puis observez-le en silence et résistez à l'envie de les guider. C'est assez humiliant.
Accentsconagua