ricarossetto/grandma-proof

Anti-grand-mère

Imaginez Mamie Rose : 70 ans, peu scolarisée, vue de près faible, peur qu'un mauvais clic casse tout. Si elle peut utiliser l'écran seule, tout le monde le peut.

Cette compétence comporte deux moitiés. La première régit ce que vous construisez (règles 1 à 4). La seconde régit comment vous travaillez (règles 5 à 7). Les deux s'appliquent simultanément.

Pour qui vous construisez

Avant de concevoir un écran, parcourez ces quatre personnes. L'écran doit fonctionner pour les quatre.

Personne	À quoi elle ressemble	Ce dont elle a besoin de l'écran
Mamie Rose, 70 ans	Incertaine de là où elle clique, se perd, peur des erreurs	Gros texte, gros boutons, un seul chemin, toujours un retour possible
M. Joe	Peu scolarisé, lit lentement, ne maîtrise pas la langue de l'application	Mots de tous les jours, phrases courtes, icônes accompagnées de texte
Kaï, 17 ans	A grandi sur TikTok, abandonne en 3 secondes si ça rame ou déroute	Réponse instantanée au toucher, pas de menus dans les menus, fluide
Béatrice, débutante	N'a jamais eu besoin d'un « système » et doit maintenant faire quelque chose de complexe	Un écran chaleureux qui dit la prochaine étape ; des erreurs qui n'effraientent ni ne blâment

Aucun d'eux ne lit un manuel. Aucun ne sait ce que signifient « tableau de bord », « module », « synchronisation » ou « session expirée ».

Partie A — Ce que vous construisez

1. Simplicité

La cible est un écran facile, pas un écran vide. En supprimer trop déroute aussi.

• Un écran, un travail. Chaque écran a une action principale, visible sans défilement. Les autres actions sont plus discrètes.
• Moins de boutons. Comptez les clics de la tâche la plus courante et essayez d'en supprimer un. Les actions rares vont dans un menu « Plus » ; les actions inutilisées disparaissent.
• Moins de texte. Supprimez tout texte dont la suppression ne laisse personne perdu. Titres jusqu'à 5 mots. Phrases jusqu'à 12 mots.
• Gardez ce qui guide. Gardez toujours : où suis-je, que dois-je faire maintenant, comment revenir en arrière. Boutons à icône uniquement pour les universels (fermer, retour, recherche).
• Ne demandez que ce qui est nécessaire. Un champ que le système peut déterminer n'est pas une question. Les longs formulaires deviennent de courtes étapes avec « Étape 2 sur 4 ».
• Choisissez pour elle. Présélectionnez l'option la plus courante. Les paramètres avancés restent cachés jusqu'à ce qu'on les cherche.

2. Mamie

Mots

• Utilisez le mot qu'elle utilise à la maison : « connexion », pas « authentification » ; « enregistrer », pas « persister » ; « supprimer », pas « effacer l'enregistrement ».
• Pas d'acronymes ni de termes techniques à l'écran. Si un terme est inévitable, expliquez-le en une phrase courte la première fois.
• Le bouton dit ce qui se passe : « Envoyer la commande », « Supprimer la photo ». Jamais un simple « OK », « Confirmer » ou « Cliquez ici ».
• Même nom pour la même chose sur tous les écrans.

Taille et lecture

• Texte du corps d'au moins 16 px ; préférez 18 px. Contraste d'au moins 4,5 pour 1.
• Tout ce qui est cliquable fait au moins 48 × 48 px avec 8 px de dégagement par rapport à son voisin.
• Ne signalez jamais uniquement par la couleur. Ajoutez une icône ou un mot.

Ne pas se perdre

• Chaque écran montre où la personne se trouve et a un « Retour » au même endroit.
• Les changements d'écran utilisent une transition courte (150 à 250 ms) qui montre d'où l'on vient et où l'on va. Rien ne saute, ne clignote ni ne bouge tout seul.
• Après chaque action, l'écran répond immédiatement : « Enregistré », « Envoyé ». Si cela prend plus d'une seconde, montrez qu'il travaille.
• Rien ne fonctionne uniquement par un geste caché (balayage, appui long, double tap). Un bouton visible fait toujours la même chose.

Pas de peur des erreurs

• Les actions peuvent être annulées. Là où ce n'est pas possible, demandez d'abord avec les deux issues écrites en toutes lettres : « Supprimer la photo » et « Garder la photo ».
• Les messages d'erreur disent ce qui s'est passé et quoi faire, sans blâme : « Nous n'avons pas trouvé ce numéro. Vérifiez les chiffres et réessayez. »
• Les écrans vides disent la prochaine étape : « Vous n'avez pas encore de commandes. Appuyez sur Nouvelle commande pour commencer. »
• N'effacez jamais ce qu'elle a tapé à cause d'une erreur.

3. Alignement

L'IA a tendance à produire des boutons de travers, des boîtes de tailles différentes et du texte collé aux boutons. Ne produisez pas cela.

• Même ligne. Les boutons d'un groupe partagent une même ligne de base et une même hauteur.
• Même taille. Les boutons d'un groupe partagent la hauteur, le rayon des coins, la police et le remplissage. Si les largeurs diffèrent beaucoup, alignez sur la plus large.
• Mêmes proportions. Les cartes et boîtes d'une liste partagent la largeur et la hauteur de ligne. Le texte long se tronque avec des points de suspension ; il n'étire pas la boîte.
• Une seule règle. Tout l'espacement provient d'une seule échelle (4, 8, 12, 16, 24, 32, 48 px). Pas de valeurs aberrantes comme 13 px ou 22 px.
• Un seul bouton en valeur. Un bouton principal par écran. Les autres utilisent le style secondaire, toujours le même.
• Les boutons gardent leurs distances avec le texte. Au moins 24 px entre un bouton et tout bloc de texte. Ne placez pas une phrase juste au-dessus ou en dessous d'un bouton.
• Les boutons n'ont pas de légendes. Ne mettez pas de texte à l'écran pour expliquer un bouton. Si un bouton a besoin d'explication, son libellé est mauvais : changez le libellé. L'explication supplémentaire va dans l'info-bulle affichée au survol (title ou tooltip, plus aria-label pour les lecteurs d'écran).
• Vérifiez en mesurant. Après construction, ouvrez l'écran, prenez une capture d'écran et comparez les hauteurs, largeurs et écarts. Lire le code ne suffit pas.

4. Pas de look IA

Lisez references/ai-tells.md avant de créer une page d'accueil, un écran d'introduction ou un texte promotionnel. En bref :

• La « page d'accueil GPT » est interdite : un bloc de texte géant centré avec une phrase choc et un mot en italique, un badge pilule au-dessus, deux boutons en dessous et trois cartes d'icônes juste après.
• Interdits comme réflexes : dégradés violets ou bleu-violet, lueur néon, verre givré, texte dégradé, émoji à la place des icônes, ombres colorées, cartes dans des cartes.
• Interdites les preuves inventées : chiffres, témoignages, logos clients ou évaluations qui n'existent pas.
• Interdit le langage commercial : « Transformez », « Élevez », « Révolutionnez », « sans effort », « Ce n'est pas X. C'est Y. »
• À la place : montrez le vrai produit, dites en mots simples ce qu'il fait et placez l'action principale près du haut.

Le test : si le bloc pouvait être collé tel quel sur le site d'un autre produit, il est générique. Refaites-le avec le contenu de ce produit.

Partie B — Comment vous travaillez

5. Parlez simplement

La personne de l'autre côté n'est peut-être pas programmeuse, même si elle utilise un mot technique. Utiliser un terme ne prouve pas qu'elle maîtrise le sujet.

• Commencez par le résultat : ce qui a changé et ce que la personne fait maintenant.
• Phrases courtes, mots courants. Termes techniques seulement quand nécessaire, avec quelques mots d'explication à côté.
• Ne balancez pas de noms de fichiers, commandes ou code sauf si demandé. Si la personne doit exécuter quelque chose, donnez des étapes numérotées.
• Dites simplement ce qui a fonctionné, ce qui n'a pas fonctionné et ce qui manque.
• Si la personne demande le détail technique, alors donnez-le en entier.

6. Divisez le travail avec des sous-agents

Les sous-agents accélèrent le travail et améliorent le résultat. Utilisez-les chaque fois que la tâche a plus d'une partie, même si personne n'a rien configuré.

• Trouvez l'outil. Utilisez ce que l'environnement offre : un outil d'agent ou de tâche, des agents en arrière-plan, des sessions parallèles, ou l'appel de l'agent lui-même depuis la ligne de commande.
• Divisez en parties indépendantes et lancez-les toutes en même temps : recherche, chaque écran, chaque fichier, tests, relecture.
• Donnez à chaque sous-agent un briefing complet : objectif, fichiers impliqués, ce qu'il ne doit pas toucher et ce qu'il doit retourner. Il part de zéro et n'a pas vu la conversation.
• Ayez toujours un relecteur. Un sous-agent qui n'a pas écrit le travail vérifie le résultat par rapport aux règles 1 à 4.
• Deux sous-agents ne modifient jamais le même fichier en même temps.
• Vous êtes responsable du résultat. Vérifiez ce qui est revenu avant de dire que c'est fini.
• Pas d'outil sous-agent : faites les mêmes parties en passes séparées, une par une, plus une passe de relecture finale avec les yeux de quelqu'un qui n'a pas écrit.

Une tâche en une étape (changer un mot, répondre à une question) vous la faites simplement.

7. Décidez sans déranger l'humain

Ne revenez pas vers l'humain pour confirmer des détails. Chaque petite question brise son rythme.

Doute simple : décidez par débat. Suivez le script dans references/debate.md :

1. Écrivez le doute en une phrase, avec les deux options.
2. Lancez deux débatteurs en même temps, un par option. Chacun défend la sienne en 5 lignes maximum.
3. Lancez un juge, qui lit les deux et choisit. Le critère du juge est toujours : ce qui est le mieux pour Mamie et le plus facile à annuler.
4. Suivez la décision du juge et continuez.
5. À la fin, rapportez chaque décision en une ligne : « J'ai choisi un bouton vert plutôt que bleu car il a plus de contraste. »

Sans outil sous-agent, menez le débat vous-même : écrivez le meilleur argument pour chaque côté, puis jugez.

Demandez à l'humain seulement quand :

• l'action ne peut pas être annulée (supprimer des données, publier, envoyer un message, dépenser de l'argent) ;
• la réponse dépend de quelque chose que lui seul connaît (un mot de passe, une préférence personnelle, une règle métier) ;
• la demande a deux lectures qui mènent à des travaux très différents.

Dans ces cas, posez une question, avec les options prêtes, et continuez sur tout ce qui ne dépend pas de la réponse.

Avant de livrer : le test Mamie

Ouvrez l'écran réel et vérifiez. Si un élément échoue, corrigez-le avant de livrer.

1. 5 secondes. Après 5 secondes d'observation, pouvez-vous dire à quoi sert l'écran et où cliquer ?
2. Une action principale. Un seul bouton attire-t-il plus l'attention que les autres ?
3. Mots de la maison. Y a-t-il un mot que Mamie n'utiliserait pas ? Remplacez-le.
4. Doigts épais. Tout ce qui est cliquable fait-il 48 px ou plus, avec de l'espace autour ?
5. Retour. Pouvez-vous revenir en arrière et annuler sur chaque écran ?
6. Règle. Les boutons et boîtes d'un groupe sont-ils de la même taille et sur la même ligne ?
7. Bouton seul. Chaque bouton est-il libre de toute phrase collée expliquant ce qu'il fait ?
8. Look IA. Rien de la liste des signes d'IA n'apparaît-il ?
9. Téléphone. L'écran fonctionne-t-il à 360 px de large, sans défilement latéral ?
10. Réponse simple. Ce que vous allez dire à l'utilisateur tient-il en quelques phrases sans jargon ?

Quand vous livrez, dites en une ligne combien d'éléments ont réussi et lequel vous avez corrigé.