From 95167da223fa02f23e558bafa3e17cdf1141bb5c Mon Sep 17 00:00:00 2001 From: Pierre MARTIN Date: Tue, 3 Nov 2026 10:04:59 +0100 Subject: [PATCH] =?UTF-8?q?Charte=20:=20crit=C3=A8res=20de=20recette=20des?= =?UTF-8?q?ign=20de=20l'=C3=A9cran=20de=20jeu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 --- docs/identite/charte/README.md | 1 + docs/identite/charte/recette-ux.md | 45 ++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 docs/identite/charte/recette-ux.md diff --git a/docs/identite/charte/README.md b/docs/identite/charte/README.md index d06d273..8a5be9a 100644 --- a/docs/identite/charte/README.md +++ b/docs/identite/charte/README.md @@ -14,6 +14,7 @@ Décisions : ADR 0010. Fichiers du logo et des icônes : `../logo/`. | Fichier | Contenu | | --- | --- | | `guide-de-marque.md` | Règles d'usage : ton, couleurs, typographie, formes, mouvement, icônes, composants | +| `recette-ux.md` | Critères de recette design de l'écran de jeu, à cocher sur les captures et sur le téléphone | | `interaction.md` | Comportement : réponse immédiate, annuler plutôt que confirmer, mouvement, vibrations, clavier, mises en page de l'écran de jeu (portrait, paysage, ordinateur), pictogrammes | | `tokens.json` | Toutes les valeurs, thèmes clair et sombre, avec une note d'usage par couleur | | `bundle.css` | Styles des composants ; mêmes noms de classes que `web/app.css` | diff --git a/docs/identite/charte/recette-ux.md b/docs/identite/charte/recette-ux.md new file mode 100644 index 0000000..25718de --- /dev/null +++ b/docs/identite/charte/recette-ux.md @@ -0,0 +1,45 @@ +# Recette design de l'écran de jeu + +Critères vérifiables sur les captures de `make test-browser` (412×915, +915×412, 844×320, thèmes clair et sombre) et à la main sur le Fairphone 4. +Chaque ligne se coche ou se refuse ; une ligne refusée dit pourquoi. +Référence : `interaction.md`, maquettes « Révision UX » du canevas. + +## Toutes tailles + +- [ ] Flèches impaires en `point-a`, paires en `point-b` ; 12 et 13 de couleurs différentes. +- [ ] Une seule action principale (brique) visible à la fois. +- [ ] Aucun `window.confirm` ni `alert` dans le code de l'app (`grep -rn "confirm(\|alert(" app/src` vide). +- [ ] Aucune cible tactile sous 44 × 44 px (boutons, pictogrammes, dés, videau). +- [ ] Textes à lire : 13 px au moins ; numéros des flèches : 12 px au moins. +- [ ] Thème sombre : aucune couleur codée en dur hors `tokens` ; le cadre se distingue du fond. +- [ ] Anneau de focus `focus` visible au clavier sur chaque élément interactif. +- [ ] `overscroll-behavior: none` : tirer vers le bas ne recharge pas la page. + +## Portrait (412 × 915) + +- [ ] Ordre de haut en bas : barre haute, bandeau ordinateur, plateau, bandeau joueur, ligne du maître ou du dernier coup, consigne, barre d'actions collée en bas. +- [ ] Stabilité : sur une partie complète, la position verticale du plateau et de la barre d'actions ne varie pas d'un pixel (comparer les boîtes entre deux captures successives). +- [ ] Barre haute : pictogrammes avec libellé de 13 px (Aide, Plein écran, Menu) ; pas de bouton « Nouvelle partie ». +- [ ] Comptes de points en 20 px gras, chiffres alignés ; le bandeau du joueur qui a la main est teinté `accent-soft` ; l'écart s'écrit « mène de N ». +- [ ] Plus de durée de calcul « (0,5 s) » dans les messages. +- [ ] Aucun coup possible : dés barrés et message ; le tour ne passe qu'au toucher des dés. +- [ ] Conseil du maître : une ligne, après le coup du joueur seulement ; toucher l'ouvre. + +## Paysage (915 × 412 et 844 × 320) + +- [ ] Le cadre noyer touche les quatre bords ; aucune marge de page, aucune colonne de texte. +- [ ] Flèches d'au moins 44 px de large ; pions d'au moins 22 px de diamètre à 844 × 320. +- [ ] Colonne de commandes à gauche : menu en haut, videau au milieu, annuler (ou revoir) en bas ; colonne des sorties libre. +- [ ] Comptes en pastilles aux deux bouts de la barre, 13 px, couleur du camp ; ils ne chevauchent pas les pions sur la barre. +- [ ] Consigne et dés dans la bande centrale, sans chevaucher un pion. +- [ ] Rotation portrait ↔ paysage en cours de partie : la position, la sélection et les dés sont conservés. +- [ ] Fin de partie : panneau centré sur un voile, « Revoir la partie » et « Nouvelle partie ». + +## Comportement + +- [ ] Un toucher sur un pion produit un effet visible en moins de 100 ms (trace de performance de Playwright). +- [ ] Déplacements à 160 ms en `easing-standard`, sans rebond ; coups de l'ordinateur pion par pion ; tout est instantané avec `prefers-reduced-motion`. +- [ ] « Nouvelle partie » depuis le menu : effet immédiat, bandeau « Reprendre l'ancienne » 10 s, et la reprise restaure la partie exacte. +- [ ] Vibrations aux quatre moments, coupées par l'interrupteur du menu (test unitaire sur `haptic()` ; ressenti à la main). +- [ ] Écran maintenu allumé pendant une partie, interrupteur dans le menu. -- 2.54.0