Bases de l'UX et de l'UI des jeux vidéo : Comment les jeux parlent aux joueurs
Équipe Unity - Unity Technologies
Cette page a été traduite automatiquement pour faciliter votre expérience. Nous ne pouvons pas garantir l'exactitude ou la fiabilité du contenu traduit. Si vous avez des doutes quant à la qualité de cette traduction, reportez-vous à la version anglaise de la page web.
Un guide pour débutants sur l'interface utilisateur et l'expérience utilisateur des jeux vidéo : ce qu'est un HUD, les quatre endroits où l'interface peut exister, un processus de conception simple et les bases de l'accessibilité dont chaque jeu a besoin.
Chaque jeu vous parle constamment. Une barre de vie diminue lorsque vous recevez un coup. Un bouton s'illumine lorsque vous pouvez appuyer dessus. Un son se produit lorsque vous ramassez quelque chose. La plupart du temps, vous ne remarquez rien de tout cela, et c'est le but : Un bon design d'interface vous aide à jouer sans vous gêner.
Ce guide couvre les bases de l'interface utilisateur (UI) et de l'expérience utilisateur (UX) des jeux vidéo pour les créateurs débutants : de quoi est faite l'interface, les différents endroits où elle peut exister, un processus simple pour la concevoir, et les bases de l'accessibilité qui aident plus de gens à apprécier votre jeu.
UI vs UX : Quelle est la différence ?
La conception de l'interface utilisateur (UI) d'un jeu est la planification et la création de tout ce que les joueurs utilisent pour comprendre et contrôler un jeu : les menus, les boutons, l'affichage tête haute (HUD), les icônes, les invites, les cartes et les effets de retour d'information. L'expérience utilisateur (UX) est la vue d'ensemble : à quel point le jeu dans son ensemble est facile, clair et agréable à utiliser.
Le test for both est simple. Un bon UI permet aux joueurs de se concentrer sur le jeu. Une mauvaise interface utilisateur gêne, les embrouille ou les frustre.
Une interface de jeu typique, non diégétique. Sur le côté gauche, une figure orange en forme de pilule se tient sur le sol devant un arrière-plan de collines vallonnées et de ciels ensoleillés avec trois nuages. Il y a deux plateformes flottantes. Le premier flotte devant le personnage de pilule orange ; il a trois petites pièces flottant au-dessus de lui. À droite se trouve une plateforme flottante légèrement surélevée avec un coffre au trésor invitant le joueur à appuyer sur « E » pour l'ouvrir. En haut de l'image, de gauche à droite, on trouve : un système de santé représenté par trois cœurs (deux sont pleins et un est vide) ; un chronomètre ; un compteur affichant 1 250 pièces collectées ; et une icône de pause indiquant que le jeu est en pause. En bas de l'image, au centre, il y a un élément d'interface utilisateur montrant les articles disponibles, y compris trois carottes, une potion violette et une clé dorée. Image générée par Unity Spark (Unity Ultra), 22 octobre 2026.
Les éléments constitutifs d'une interface de jeu vidéo
La plupart des interfaces de jeu sont composées de quelques éléments familiers :
- Le HUD: Les informations qui apparaissent à l'écran pendant que vous jouez, comme la santé, le score, un chronomètre ou une mini-carte. Les éléments clés sont généralement situés près des bords de l'écran afin que le centre reste dégagé pour l'action.
- Menus: Les écrans que vous utilisez avant et pendant le jeu – démarrer une partie, changer les paramètres, gérer les objets.
- Prompts: Petits indices qui indiquent aux joueurs quel bouton appuyer ou avec quoi ils peuvent interagir. Afficher les invites permet aux joueurs d'éviter d'avoir à tout mémoriser.
- Commentaires: Les sons, animations et effets qui confirment que quelque chose s'est produit. Chaque pression de bouton doit avoir une réaction visible et audible en une fraction de seconde.
Quatre endroits où votre interface peut vivre
Les concepteurs de jeux décrivent souvent l'interface par son emplacement par rapport au monde du jeu. Un cadre largement utilisé le divise en quatre types :
Interface utilisateur non diégétique
Ce type d'interface se situe en dehors du monde du jeu et n'est visible que pour le joueur. La plupart des éléments HUD classiques, comme une barre de vie dans le coin, s'intègrent ici.
Exemple d'interface utilisateur non diégétique pour un système d'inventaire rendu dans un style plat simple. Le côté gauche de l'inventaire contient 28 emplacements, organisés en quatre rangées de sept. La rangée 1 contient des potions (cinq potions rouges, trois potions bleues, deux potions vertes et huit potions en forme de larme). La ligne 2 contient des armes (une épée, une hache et un bouclier). La ligne 3 contient des matériaux (12 feuilles, huit plumes, deux améthystes, quatre feuilles rouges et neuf cubes métalliques). La ligne 4 contient des objets de quête (une clé et un parchemin). À droite, une potion de guérison est mise en évidence, avec des options pour l'utiliser, la laisser tomber ou l'équiper. Des informations clés sont également affichées sur la potion de guérison (elle restaure 50 points de vie en 3 secondes et peut être vendue pour 25 pièces d'or). Image générée par Unity Spark (Unity Ultra), 22 octobre 2026.
DiegetiqueUI
Ce type d'interface existe à l'intérieur du monde du jeu, donc les personnages peuvent le voir ou l'entendre aussi – par exemple, un affichage de santé intégré à la combinaison d'un personnage ou une carte que le personnage tient réellement.
Image d'art pixel montrant une interface utilisateur diégétique. Point de vue à la première personne d'une carte de jeu tenue par un personnage joueur portant une veste verte avec des poignets en fourrure et une paire de mitaines rouges. Sur son ARM gauche, le joueur porte un brassard avec un HUD affichant ses points de vie totaux, représentés par un cœur et une barre rouge. Dans leur main droite, ils tiennent une lanterne avec une barre orange indiquant la quantité de carburant restante. Image générée par Unity Spark (Unity Ultra), 22 octobre 2026.
Interface utilisateur spatiale
Les éléments d'interface utilisateur spatiale apparaissent dans l'espace 3D du jeu mais ne font pas partie du monde lui-même, comme les contours autour des coéquipiers ou les icônes flottant au-dessus des têtes des personnages.
Meta UI
Les éléments d'interface de Meta sont des effets qui communiquent à travers l'écran lui-même, plutôt qu'à travers un objet dans le monde du jeu, comme des projections de sang ou un flash rouge sur les bords lorsque le joueur subit des dégâts.
Clip vidéo avec des exemples d'interface spatiale et méta. Deux personnages abstraits en forme de pilule se tiennent de chaque côté d'une porte d'ascenseur. La figure de gauche (ROOK) est rendue en bleu avec un losange bleu au-dessus de sa tête indiquant qu'il est amical. Le personnage à droite est rouge avec un signe d'avertissement et une barre de vie partiellement épuisée indiquant qu'il s'agit d'un ennemi. Le seuil est marqué « RÉACTEUR » et se trouve à 140 m du joueur. Toute la scène est entourée d'un effet rouge clignotant indiquant que le joueur est en danger. Vidéo générée par Unity Spark (Unity Ultra), 22 octobre 2026.
La plupart des jeux mélangent plusieurs types d'interface utilisateur. Aller entièrement diégétique est particulièrement difficile : Mettre toutes les informations dans le monde peut rendre un jeu plus difficile à jouer, donc un certain compromis est généralement nécessaire. Si vous voulez une interface qui vit dans le monde, planifiez-la dès le début plutôt que de l'ajouter à la fin.
Un processus en 7 étapes pour concevoir l'interface utilisateur d'un jeu vidéo
Vous n'avez pas besoin d'être designer pour planifier une interface claire. Voici un processus en sept étapes pour concevoir simplement l'interface utilisateur de votre jeu vidéo.
- Énumérer les entrées et les sorties: Écrire tout ce que le joueur doit faire (se déplacer, sauter, mettre en pause, choisir des objets) et tout ce que le jeu doit lui dire (santé, score, objectif, danger). Décidez quels appareils vous allez prendre en charge – tactile, manette ou clavier.
- Prioriser: Classez les résultats par importance et par fréquence de changement. Les informations critiques et en constante évolution vont là où il est facile de les voir. Les options rarement utilisées vont dans les menus.
- Utiliser les affordances: Choisissez des formes, des icônes et des comportements qui suggèrent ce que quelque chose fait – un bouton surélevé semble pressable. Tenez-vous-en aux conventions familières lorsque vous le pouvez.
- Donner un retour instantané: Chaque entrée doit avoir une réaction visible et audible immédiatement.
- Réduire Supprimez le superflu. Un nombre peut-il devenir une simple barre ? Certaines informations peuvent apparaître uniquement quand c'est pertinent, comme un compteur de munitions qui apparaît quand vous êtes bas ?
- Prototype: Esquisser des maquettes rapides, sur papier ou à l'écran.
- Test de jeu: Regardez les gens utiliser votre interface, notez où ils hésitent et répétez.
Principes généraux pour des interfaces de jeux vidéo claires
Un ensemble de directives d'utilisabilité largement utilisées se traduit bien par les jeux. Quelques-uns des plus utiles :
- Montrer ce qui se passe: Informez les joueurs si le jeu est sauvegardé, ce qui est en cours de chargement et combien de points de vie ils ont.
- Utiliser des symboles que les gens connaissent déjà: Un cœur pour la santé, une icône de carte pour la carte.
- Laissez les joueurs revenir: Permettez-leur d'annuler, d'annuler les erreurs et de sauter les scènes qu'ils ont déjà vues.
- Restez constant: Le même bouton doit confirmer partout, et chaque icône doit conserver une signification.
- Éviter les erreurs: Demandez « Êtes-vous sûr ? » avant de supprimer une sauvegarde et désactivez les actions qui ne sont pas possibles.
- Gardez-le propre: Montre seulement ce qui compte maintenant.
Quelques conseils de mise en page aident aussi :
- Gardez le centre de l'écran dégagé pour le jeu.
- Rendre le texte lisible à la distance de vue du joueur – une télévision de l'autre côté de la pièce nécessite un texte plus grand qu'un téléphone.
- Sur les téléphones, utilisez de grandes zones de toucher ; sur les consoles, assurez-vous que chaque menu fonctionne avec une manette.
Bases de l'accessibilité pour la conception de jeux vidéo
La conception d'une interface accessible aide plus de personnes à jouer à votre jeu, et beaucoup des étapes les plus efficaces sont simples. Directives d'accessibilité du jeu énumère celles-ci parmi ses recommandations de base et largement applicables :
- Permettez aux joueurs de remapper les commandes.
- Utilisez une taille de police par défaut facile à lire et un langage simple et clair.
- Fournir un contraste élevé entre le texte ou l'interface et l'arrière-plan.
- Ne transmettez pas les informations essentielles par la couleur seule.
- Ne transmettez pas les informations essentielles par le son seul.
- Fournir des sous-titres pour les discours importants, avec des commandes de volume séparées pour les effets, la parole et la musique.
- Assurez-vous que chaque partie de l'interface fonctionne avec la même méthode d'entrée que le gameplay.
- Rendez les boutons à l'écran grands et bien espacés, en particulier sur les écrans tactiles.
- Offrir différents niveaux de difficulté et sauvegarder les paramètres des joueurs.
Utiliser la couleur, la forme et le son ensemble est une bonne habitude en général, car cela signifie que l'information n'est pas perdue si l'un de ces signaux est manqué.
Un menu de paramètres standard et personnalisable ouvert sur l'écran des options d'accessibilité. Il comprend : trois options de taille de texte différentes ; un commutateur de sous-titres ; des curseurs pour contrôler les niveaux de volume individuels pour la musique, les effets sonores et la parole ; un commutateur de contraste élevé ; et une option pour réaffecter les commandes. Image générée par Unity Spark (Unity Ultra), 22 octobre 2026.
Bonne interface utilisateur contre mauvaise interface utilisateur dans les jeux vidéo
Voici comment les petits choix s'additionnent :
Tableau comparatif du bon vs mauvais UI dans les jeux vidéo. Image générée par Claude Opus 5.5, 23 octobre 2026.
Image montrant une interface utilisateur mal conçue. Une figure orange en forme de pilule se tient sur le sol devant un arrière-plan de collines vallonnées et de ciels ensoleillés avec trois nuages. Divers éléments d'interface utilisateur sont regroupés et se chevauchent au centre de l'écran, bloquant la vue du joueur. Le texte est petit et difficile à lire, tout comme les éléments du menu dans le coin inférieur droit. Image générée par Unity Spark (Unity Ultra), 22 octobre 2026.
Liste de contrôle de la conception de l'interface utilisateur de votre jeu
Avant de partager votre jeu, demandez :
- Les joueurs peuvent-ils toujours voir les informations dont ils ont le plus besoin ?
- Toute action reçoit-elle un retour instantané ?
- Y a-t-il quelque chose à l'écran qui n'est pas nécessaire ?
- Des informations importantes sont-elles présentées de plus d'une manière – pas seulement par la couleur ou le son ?
- Quelqu'un de nouveau peut-il comprendre les commandes sans aide ?
- As-tu regardé quelqu'un d'autre y jouer ?
Laissez les joueurs se concentrer sur le jeu
Les meilleures interfaces sont invisibles. Ils disent aux joueurs exactement ce qu'ils doivent savoir, quand ils doivent le savoir, puis ils s'écartent. Commencez par ce que les joueurs doivent faire et voir, gardez-le simple et testez-le avec de vraies personnes.
Prêt à construire votre première interface de jeu ? Vous n'avez pas besoin d'être développeur. Essayez Unity Spark, la plateforme de création de jeux basée sur navigateur et IA de Unity qui vous permet de décrire votre jeu, de l'affiner dans un éditeur web réel et de le publier pour que d'autres puissent y jouer.
Note sur l'image d'en-tête : Représentation abstraite d'un document de conception de jeu vierge superposé sur un arrière-plan flou bleu et orange. Image générée par Claude Opus 5.5, 7 octobre 2026.