UI/UX et HUD : spécifier l’interface du jeu dans le GDD

Rôle de la UI/UX et du HUD dans un GDD

Dans un GDD, la section UI/UX décrit ce que le joueur voit, ce qu’il peut faire et comment il comprend l’état du jeu via des écrans (menus) et un HUD (informations en jeu). L’objectif est de rendre l’interface prévisible, lisible et cohérente avec les actions du joueur, tout en limitant la surcharge visuelle.

On distingue généralement :

• Écrans : titre, options, sélection de niveau, pause, fin de partie (et éventuellement chargement, crédits).
• HUD en jeu : barre de vie, score, timer, inventaire minimal (et indicateurs contextuels).
• Événements UI : règles d’affichage/masquage, messages, tutoriel contextualisé.

Étape par étape : spécifier l’interface dans le GDD

1) Lister les écrans et leur objectif

Commencez par une liste exhaustive des écrans, chacun avec : objectif, actions possibles, conditions d’accès, sorties (où mène l’écran).

2) Définir le HUD : informations minimales et priorités

Le HUD doit afficher uniquement ce qui est nécessaire à la décision immédiate. Pour un jeu 2D simple, on spécifie typiquement :

• Barre de vie : état de survie, lisible en un coup d’œil.
• Score : progression/objectif (si pertinent).
• Timer : pression temporelle (si le gameplay l’exige).
• Inventaire minimal : 1 à 3 slots (ex. clé, bombe, potion) ou un objet actif.

Dans le GDD, pour chaque élément HUD, précisez : position, format, valeurs, états, règles d’animation, conditions d’affichage.

Continuez dans notre application.

Vous pouvez écouter le livre audio écran éteint, recevoir un certificat gratuit pour ce cours et accéder également à 5 000 autres cours en ligne gratuits.

Ou poursuivez votre lecture ci-dessous...

Téléchargez l'application

3) Règles d’ergonomie à documenter

Hiérarchie visuelle

• Primaire (survie/objectif immédiat) : vie, alertes critiques.
• Secondaire (performance) : score, timer.
• Tertiaire (confort) : inventaire, icônes d’aide.

Règle pratique : si deux éléments se battent pour l’attention, l’un doit devenir contextuel (apparaît seulement quand utile).

Lisibilité

• Contraste suffisant entre HUD et décor (fond semi-transparent, contour, ombre portée).
• Taille minimale cohérente (éviter les chiffres trop petits).
• Icônes simples, reconnaissables, cohérentes (même style, même épaisseur de trait).

États (normal / alerte / critique)

Définissez des seuils et un rendu. Exemple pour la vie :

• Normal : 100% à 40% (couleur neutre, animation nulle).
• Alerte : 39% à 20% (teinte plus chaude, pulsation lente).
• Critique : 19% à 0% (pulsation rapide, vignettage léger, son bref optionnel).

Dans le GDD, notez les seuils exacts et l’intention : « attirer l’attention sans gêner la lecture de l’action ».

Animations utiles (pas décoratives)

• Feedback d’événement : score qui “pop” quand il augmente, slot d’inventaire qui clignote lors d’un ramassage.
• Transitions : fondu court entre écrans, slide discret du panneau pause.
• Guidage : surbrillance d’un bouton par défaut au clavier/manette.

Spécifiez durée et courbe (ex. 150–250 ms, easing out) et surtout quand l’animation se déclenche.

Spécification des écrans (exemples concrets)

Écran Titre

• Composants : logo (image), boutons (Jouer, Options, Quitter), version (optionnel).
• Navigation : souris (hover/click), clavier/manette (focus visible, navigation verticale).
• Règles : bouton par défaut = Jouer ; Échap/B = Quitter (avec confirmation si nécessaire).
• Transitions : fondu vers Sélection niveau (200 ms).

Écran Options

• Sections : Audio, Contrôles, Accessibilité.
• Audio : Master, Musique, SFX (0–100), bouton “Rétablir défaut”.
• Contrôles : affichage des touches, remappage (si prévu), sensibilité (si applicable).
• Accessibilité : taille HUD (S/M/L), contraste HUD (Normal/Élevé), réduction des flashs (On/Off).
• Règles : appliquer immédiatement ou bouton “Appliquer” (à préciser).

Écran Sélection niveau

• Liste/grille de niveaux : vignette, nom, statut (verrouillé/déverrouillé), meilleur score/temps (si existant).
• Aperçu : courte description, objectifs, difficulté indicative.
• Règles : niveaux verrouillés non cliquables, affichage des conditions de déverrouillage.

Écran Pause

• Déclencheur : touche Pause/Échap.
• Effet : geler gameplay, assombrir fond, afficher menu.
• Actions : Reprendre, Options, Recommencer (si prévu), Quitter niveau.
• Règles : empêcher double déclenchement (debounce 200 ms) ; retour direct au jeu sur Reprendre.

Écran Fin de partie (victoire/défaite)

• Affichage : résultat (victoire/défaite), stats (score, temps, collectibles), récompenses/déblocages.
• Actions : Rejouer, Suivant (si victoire), Menu.
• Règles : sauvegarde des résultats avant affichage ; “Suivant” absent si dernier niveau.

Spécification du HUD en jeu (format GDD)

Utilisez une fiche par élément. Exemple de structure :

Élément: Barre de vie (HP)  
But: Indiquer la survie du joueur  
Position: Haut-gauche (marge 16 px)  
Format: Barre horizontale + icône cœur  
Valeur: HP actuel / HP max  
États: Normal (40–100%), Alerte (20–39%), Critique (0–19%)  
Animations: 
- Dégâts: flash 120 ms + shake 6 px 
- Régénération: remplissage progressif 200 ms  
Affichage: Toujours visible en jeu, masqué en cinématique  
Accessibilité: Mode contraste élevé = contour épais + fond sombre

Exemples de fiches (résumé) :

• Score : haut-droite ; nombre + icône ; animation “pop” à +points ; masqué si mode sans score.
• Timer : haut-centre ; mm:ss ; passe en état alerte à < 30 s (couleur/animation) ; clignote à < 10 s.
• Inventaire minimal : bas-droite ; 3 slots max ; slot actif surligné ; apparition temporaire (2 s) lors d’un ramassage.

Wireframes simples (description textuelle + zones)

Un wireframe dans le GDD peut être une description zonée (sans graphisme) qui fixe la disposition. Ci-dessous, des exemples pour un jeu 2D.

Wireframe A — Écran Titre

Zone 1 (haut-centre, 20% hauteur): Logo du jeu (image)  
Zone 2 (centre, colonne): Boutons  
- Jouer  
- Sélection niveau  
- Options  
- Quitter  
Zone 3 (bas-centre): Indication contrôles (icônes uniquement)  
Zone 4 (bas-droite): (optionnel) icône accessibilité

Wireframe B — Sélection niveau (grille + panneau aperçu)

Zone 1 (haut): Titre "Sélection" + bouton Retour (gauche)  
Zone 2 (gauche 65%): Grille 3xN de vignettes niveaux  
- Verrouillé: vignette grisée + icône cadenas  
- Déverrouillé: vignette normale + surbrillance au focus  
Zone 3 (droite 35%): Panneau aperçu  
- Nom du niveau  
- Objectif(s) (liste courte)  
- Meilleur score/temps  
Zone 4 (bas-droite): Bouton Lancer

Wireframe C — HUD en jeu (jeu 2D)

Haut-gauche: Barre de vie + icône  
Haut-centre: Timer (si actif)  
Haut-droite: Score  
Bas-droite: Inventaire minimal (3 slots) + slot actif  
Bas-gauche: (optionnel) Indicateur interaction contextuel (icône seule)

Wireframe D — Pause (overlay)

Fond: Jeu assombri (overlay 60%)  
Centre: Panneau menu  
- Reprendre  
- Options  
- Recommencer (optionnel)  
- Quitter niveau  
Bas: Raccourcis (icônes) pour Retour/Valider

Événements UI : quand afficher/masquer et quels messages

Documentez les événements sous forme de règles. Exemple de tableau d’événements :

Messages UI (toasts) : règles pratiques

• Format : icône + texte court (si vous autorisez du texte en jeu), sinon icône + son + animation.
• Empilement : max 3 messages ; les plus anciens disparaissent.
• Priorité : un message critique (ex. “Inventaire plein”) remplace un message informatif.
• Non-intrusif : ne pas masquer le personnage ni la zone d’action principale.

Tutoriel contextualisé

Le tutoriel contextualisé s’affiche au moment où l’action devient pertinente. Dans le GDD, décrivez chaque “nœud” de tutoriel :

ID: TUTO_DASH  
Condition: le joueur obtient la compétence dash ET n’a pas encore dash  
Déclencheur: entrée dans une zone avec obstacle franchissable uniquement par dash  
Affichage: panneau discret près du bas (ou bulle près de l’obstacle)  
Contenu: icône touche + pictogramme de mouvement  
Masquage: après 1 utilisation réussie OU après 10 s  
Anti-spam: ne pas réafficher pendant 5 minutes

Livrables à inclure dans votre GDD

1) Liste des écrans

• Titre
• Options
• Sélection niveau
• Pause
• Fin de partie (victoire/défaite)

2) Spécification des éléments UI

• HUD : barre de vie, score, timer, inventaire minimal (fiches détaillées)
• Composants communs : boutons (états normal/hover/focus/disabled), panneaux, overlays
• Règles d’accessibilité : taille HUD, contraste, réduction des flashs

3) Exemples de wireframes (jeu 2D)

• Wireframe écran Titre (zones)
• Wireframe Sélection niveau (grille + aperçu)
• Wireframe HUD en jeu (positions)
• Wireframe Pause (overlay)