Charte : accueil, installation, tutoriel, aide #30
@@ -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 |
|
||||
| `accueil-tutoriel-aide.md` | Accueil, installation sans intrusion, tutoriel des règles (forme et première version du texte), aide en questions |
|
||||
| `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 |
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
# Accueil, installation, tutoriel et aide
|
||||
|
||||
Règles de l'étape 0e.5 (et 1g pour le tutoriel). Maquettes : rangée « Étape
|
||||
0e.5 » du canevas https://claude.ai/artifact/CQw6vbDpi6XQqVWQa4sANe et
|
||||
l'artboard « Accueil ». Les textes sont une **première version, à valider par
|
||||
Pierre**. Comportement général : `interaction.md`.
|
||||
|
||||
## Accueil
|
||||
|
||||
**Premier lancement** (aucune partie ni leçon enregistrée) : le logo, le
|
||||
plateau en position de départ, « Bienvenue à la table », une phrase, puis deux
|
||||
grands choix :
|
||||
|
||||
- **« Je découvre »** (action principale) → le tutoriel, étape 1 ;
|
||||
- **« Je connais les règles »** → une partie tout de suite.
|
||||
|
||||
Le choix ne revient plus. Le tutoriel reste dans le menu.
|
||||
|
||||
**Ensuite**, de haut en bas :
|
||||
|
||||
1. **La partie en cours** : miniature du plateau, comptes de points,
|
||||
« Reprendre la partie » (seule action principale de l'écran) et
|
||||
« Nouvelle partie ». Sans partie en cours : « Nouvelle partie » devient
|
||||
l'action principale.
|
||||
2. **L'invitation à installer**, si elle doit apparaître (voir plus bas).
|
||||
3. **La prochaine leçon** : une seule carte (titre, état, progression,
|
||||
« Continuer » en secondaire), avec le lien « Toutes les leçons ».
|
||||
4. **La progression résumée**, en une ligne `caption` : « 1 leçon terminée
|
||||
sur 8 · 12 parties jouées · 4 gagnées ».
|
||||
5. En pied de page, la phrase de l'Atelier du Huit.
|
||||
|
||||
Pas de chiffres d'erreur ou d'équité sur l'accueil : ils viennent avec
|
||||
l'analyse.
|
||||
|
||||
## Installation
|
||||
|
||||
Le but : proposer l'installation au bon moment, une fois, sans jamais
|
||||
interrompre.
|
||||
|
||||
- **Jamais** au premier lancement, jamais pendant une partie, jamais en
|
||||
fenêtre qui s'impose.
|
||||
- **Quand** : à partir de la fin de la **première partie terminée**, quand le
|
||||
joueur a vu ce que vaut l'app.
|
||||
- **Où** : une carte compacte sur l'accueil (symbole, « Installer
|
||||
Ustagammon », « Sur l'écran d'accueil, en plein écran, sans réseau. »,
|
||||
bouton « Installer » et croix « Plus tard »), et une ligne « Installer
|
||||
l'application » dans le menu, toujours présente tant que l'app n'est pas
|
||||
installée.
|
||||
- **« Plus tard »** masque la carte ; elle revient une seule fois, après
|
||||
trois parties de plus. Ensuite, seul le menu la propose.
|
||||
- **Chrome Android** : le bouton déclenche l'invite du système, gardée depuis
|
||||
l'événement `beforeinstallprompt`. Sans cet événement (navigateur qui ne
|
||||
propose pas l'installation), le même bouton ouvre la marche à suivre.
|
||||
- **Firefox Android** : une feuille en trois étapes numérotées (menu ⋮,
|
||||
« Installer » ou « Ajouter à l'écran d'accueil », confirmer), qui se ferme
|
||||
par « J'ai compris ».
|
||||
- **iPhone (Safari)** : même feuille, avec ces étapes : bouton de partage,
|
||||
« Sur l'écran d'accueil », « Ajouter ».
|
||||
- **Une fois installée** (`display-mode: standalone`, ou événement
|
||||
`appinstalled`) : plus aucune proposition, la ligne du menu disparaît.
|
||||
|
||||
## Tutoriel des règles
|
||||
|
||||
### Forme
|
||||
|
||||
- Huit étapes, chacune en **écrans courts** : un titre, un plateau illustré,
|
||||
deux ou trois phrases. Une étape sur deux finit par un écran **« à vous »**
|
||||
où le joueur fait le geste sur le vrai plateau, contrôlé par le moteur.
|
||||
- En haut : une barre de progression en huit segments (`accent` pour les
|
||||
étapes faites) et « Passer » à droite. En bas : « Retour » et
|
||||
« Continuer ».
|
||||
- Les positions sont données par leurs identifiants gnubg (ADR 0013) ; le
|
||||
plateau est le composant de l'app, non jouable sauf sur les écrans
|
||||
« à vous ». Aucune règle n'est codée hors du moteur : un écran « à vous »
|
||||
demande au moteur si le coup du joueur fait partie des coups permis attendus.
|
||||
- **Les pions bougent** : sur un écran d'explication, le coup illustré se joue
|
||||
tout seul après une seconde, pion par pion (`duration-fast`), puis reste
|
||||
affiché ; « Revoir » le rejoue. Sur les écrans à flèches (sens du jeu), un
|
||||
tracé en pointillés `text` sur un liseré ivoire, jamais en brique (la brique
|
||||
veut dire « à faire »).
|
||||
- Un geste juste : coche `verdict-good`, vibration « pion posé », phrase
|
||||
courte, « Continuer » devient l'action principale. Un geste faux : le pion
|
||||
revient, et une phrase dit pourquoi, sans le mot « erreur ».
|
||||
- Chaque terme nouveau est un lien vers sa fiche du glossaire, à sa première
|
||||
apparition.
|
||||
|
||||
### Texte, première version
|
||||
|
||||
1. **Le but du jeu.** « Vous avez quinze pions ivoire, l'ordinateur quinze
|
||||
pions noyer. Chacun fait faire le tour du plateau à ses pions, puis les
|
||||
sort. Le premier qui a sorti tous les siens gagne la partie. »
|
||||
2. **Dans quel sens avancer.** « Vos pions ivoire font le tour du plateau dans
|
||||
le sens des pointillés : ils partent d'en haut à droite, passent à gauche,
|
||||
puis reviennent en bas jusqu'aux six dernières flèches, en bas à droite.
|
||||
C'est là que vous les rassemblerez avant de les sortir. Les pions noyer de
|
||||
l'ordinateur font le même chemin, en sens inverse. »
|
||||
3. **Les dés et les doubles.** « Chaque dé déplace un pion d'autant de
|
||||
flèches. Avec 5 et 2, vous jouez un pion de 5 et un pion de 2, ou le même
|
||||
pion de 5 puis de 2. Un double se joue quatre fois : avec 4-4, vous avancez
|
||||
quatre fois de 4. » *À vous* : jouer 3-1 en faisant le point 5 (8/5 6/5).
|
||||
4. **Frapper un pion seul.** « Un pion seul sur une flèche s'appelle un blot.
|
||||
Si vous vous posez dessus, vous le frappez : il part sur la barre et devra
|
||||
refaire tout le chemin. Une flèche où l'adversaire a deux pions ou plus est
|
||||
fermée : vous ne pouvez pas vous y poser. » *À vous* : frapper le blot du
|
||||
point 7 avec 6-1.
|
||||
5. **Rentrer depuis la barre.** « Votre pion frappé attend sur la barre, au
|
||||
milieu. Avant de jouer quoi que ce soit d'autre, il doit rentrer dans le
|
||||
camp adverse, en haut à droite. Chaque dé indique une flèche d'entrée :
|
||||
avec 3 et 4, la 22 ou la 21. Si les deux flèches sont fermées, votre tour
|
||||
passe. »
|
||||
6. **Sortir ses pions.** « Quand vos quinze pions sont dans les six dernières
|
||||
flèches, vous pouvez commencer à les sortir : un 6 sort un pion de la
|
||||
flèche 6, un 1 un pion de la flèche 1. Touchez le pion, puis la sortie à
|
||||
droite. » *À vous* : sortir deux pions avec 6-3.
|
||||
7. **Gammon et backgammon.** « Une partie gagnée vaut 1 point. Si
|
||||
l'adversaire n'a sorti aucun pion quand vous finissez, c'est un gammon :
|
||||
2 points. S'il lui reste en plus un pion sur la barre ou dans votre camp,
|
||||
c'est un backgammon : 3 points. »
|
||||
8. **Le videau.** « Le cube aux faces 2, 4, 8, 16, 32 et 64 sert à miser.
|
||||
Avant de lancer vos dés, vous pouvez proposer de doubler la valeur de la
|
||||
partie. L'ordinateur prend, et la partie continue en valant le double, ou il
|
||||
passe, et vous gagnez tout de suite. Celui qui a pris garde le cube : lui
|
||||
seul pourra redoubler. » *À vous* : décider de prendre ou passer, avec une
|
||||
phrase du maître ensuite.
|
||||
|
||||
Fin du tutoriel : « Vous connaissez les règles. Le reste s'apprend en jouant,
|
||||
et le maître vous accompagne. » → « Jouer ma première partie ».
|
||||
|
||||
## Aide
|
||||
|
||||
L'aide n'est plus une copie brute des fichiers : c'est une page organisée en
|
||||
questions, avec un ton. **La source reste unique** (ADR 0008) : les mêmes
|
||||
fichiers servent d'aide et de tests.
|
||||
|
||||
- **Trois onglets** : « Jouer » (les scénarios), « Les mots du jeu » (le
|
||||
glossaire), « À propos ». Le tutoriel est proposé en tête de page.
|
||||
- **« Jouer »** : un scénario = une question repliable (`details`), fermée par
|
||||
défaut sauf celle qui correspond à l'écran d'où l'on vient.
|
||||
- Le **titre du scénario** est la question, formulée comme le joueur se la
|
||||
pose : « Comment jouer un coup ? », « Je me suis trompé de pion », « Je ne
|
||||
peux rien jouer avec mes dés ». C'est un changement de titre dans les
|
||||
`.feature` : les tests n'en dépendent pas.
|
||||
- La **description du scénario** (le paragraphe sous le titre) est la
|
||||
réponse affichée. Elle se lit seule, au présent, au « vous ».
|
||||
- Les **étapes Gherkin** ne s'affichent pas dans l'aide : elles restent la
|
||||
preuve que l'app fait ce que dit la réponse. « Voir sur le plateau » ouvre
|
||||
la position de l'exemple quand le scénario en donne une (lien ADR 0013).
|
||||
- La **description de la fonctionnalité** sert d'introduction à l'onglet.
|
||||
- **« Les mots du jeu »** : une fiche du glossaire = une carte (le mot, son nom
|
||||
anglais en `caption` italique, « En bref », les renvois), triées par ordre
|
||||
alphabétique, avec un champ de recherche en tête.
|
||||
- **Ton** : celui du maître de café, patient et concret. Pas de « Étant
|
||||
donné que », pas de vocabulaire technique (moteur, scénario, événement).
|
||||
Reference in New Issue
Block a user