aj3x/claude-skills

Design : la fonction d'abord, rien d'inutile

Position

Un bon design est le chemin le plus court et honnête entre une personne et ce qu'elle essaie d'accomplir. La forme et la fonction se complètent, et dans les meilleurs travaux, on ne peut pas les distinguer. La forme suit la fonction (Sullivan) ; moins, mais mieux (Rams).

Règle de priorité : quand la forme et la fonction sont en conflit, la fonction gagne. Toujours. La beauté se gagne par la clarté, la proportion et l'adéquation, jamais au détriment de l'utilisabilité, de la rapidité, de l'accessibilité ou de l'honnêteté. Rien d'inutile, rien de futile : chaque élément doit justifier son existence par le travail qu'il accomplit.

La sobriété n'est pas la fadeur. L'objectif est un design qui disparaît dans l'usage (les « outils neutres » de Rams, le « supernormal » de Morrison et Fukasawa, le « vide » de Muji), pas un design qui s'annonce.

Procédure de décision

À appliquer pour chaque élément, fonctionnalité, choix de style ou animation :

1. À quelle tâche cela sert-il ? Nommez l'utilisateur et l'objectif en une phrase. Si vous ne le pouvez pas, arrêtez-vous et trouvez-le.
2. Quel travail cet élément accomplit-il ? (informer, permettre une action, grouper, orienter, donner un retour, construire la confiance, aider à la reconnaissance). Pas de travail : supprimez-le.
3. Peut-il être supprimé, fusionné ou différé ? Essayez de le supprimer. Si rien n'est perdu, il reste supprimé. Si une chose est perdue, demandez-vous si un élément plus simple pourrait la porter.
4. Nuit-il à une tâche ? Vérifiez la rapidité, la clarté, le taux d'erreur, l'accessibilité, la charge, l'attention. Tout dommage mesurable à la fonction l'emporte sur la fonction, aussi beau soit-il.
5. La version la plus simple est-elle honnête et complète ? Préférez le motif conventionnel à moins qu'il n'y ait une raison fonctionnelle de s'en écarter (Loi de Jakob).
6. Puis affinez la forme : alignement, espacement, rythme, hiérarchie, cohérence. Le soin à ce stade est de la rigueur (Rams #8), pas de la décoration.

Quand deux options fonctionnent également, choisissez celle avec le moins de pièces, le moins d'états et le moins de mots.

Principes à mettre en pratique

L'attribution se trouve dans references.md. Paraphrasé, non cité.

Principe	En pratique
Rams : utile	Supprimez tout ce qui ne sert pas la tâche. Fonctionnalités, couleurs, bordures, icônes, contenu.
Rams : compréhensible	L'interface s'explique d'elle-même. Étiquettes plutôt qu'icônes mystérieuses ; état visible ; pas de manuel nécessaire.
Rams : discret	Le chrome recule, le contenu mène. Palette de base neutre, un accent pour l'action principale.
Rams : honnête	Pas d'urgence factice, de progrès factice, de promesses exagérées ou de contrôles qui prétendent. Le chargement montre l'état réel.
Rams : durable	Évitez les tendances éphémères (verre, dégradés gratuits, mises en page novatrices). Utilisez une typographie, une grille et des tokens durables.
Rams : rigoureux	Les cas limites, les états vides/erreur/chargement, les chaînes longues et les petits détails font partie du design.
Rams : le moins de design possible	Réduisez à l'essentiel, puis vérifiez que l'essentiel est correct.
Loi de Hick	Moins de choix, groupés. Une action principale par vue ; divulgation progressive pour le reste.
Loi de Fitts	Les cibles fréquentes et principales sont grandes et proches de l'endroit où se trouvent déjà le pointeur/le pouce. Minimum ~44 px pour les cibles tactiles (24 px CSS comme seuil bas selon WCAG 2.2).
Loi de Jakob	Utilisez des motifs familiers (placement de la navigation, comportement des formulaires, icônes). La nouveauté nécessite un bénéfice fonctionnel.
Loi de Miller / regroupement	Ne vous fiez pas au comptage de 7 éléments ; regroupez les informations en morceaux significatifs et gardez l'ensemble de travail petit.
Charge cognitive	Montrez seulement ce qui est nécessaire maintenant. Ne forcez pas les gens à se souvenir d'un écran à l'autre ; portez le contexte en avant.
Seuil de Doherty	Répondez en moins de ~400 ms. Au-delà, montrez un retour immédiat, des squelettes ou des mises à jour optimistes ; ne bloquez jamais silencieusement.
Loi de Tesler	La complexité est conservée. Absorbez-la dans le système (valeurs par défaut, inférence, automatisation), pas dans l'utilisateur, à moins que l'exposer ne soit le but.
Loi de Postel	Acceptez des entrées variées (espaces, formats, casse) ; émettez des sorties cohérentes et strictes. Validez avec douceur, expliquez avec précision.
Gestalt : proximité, région commune, similarité, connexité	Regroupez par espacement avant les bordures, les bordures avant les boîtes. L'espacement est la structure la moins coûteuse. Fonction similaire, aspect similaire.
Effet esthétique-utilisabilité	Le polissage rend les choses plus faciles et achète de la tolérance, mais il peut masquer de réels défauts d'utilisabilité. Testez avec des tâches réelles ; ne l'utilisez jamais comme raison de livrer un flux défectueux.
Von Restorff	Rendez la chose importante différente. Si tout est souligné, rien ne l'est.
Position sérielle, pic-fin	Placez les éléments clés en premier/dernier dans les listes et les flux ; rendez la dernière étape et les moments d'erreur prévenants.
Zeigarnik, gradient d'objectif	Montrez la progression sur les tâches en plusieurs étapes et sauvegardez le travail partiel.
Tufte : encre-données	Dans les graphiques et les tableaux, chaque marque doit porter des données. Supprimez le chartjunk, les grilles lourdes, la 3D, les légendes redondantes ; étiquetez directement.
Norman : affordances, signifiants, retours	Les contrôles semblent opérables ; chaque action reçoit un accusé de réception visible ; faites correspondre les contrôles aux effets ; rendez les erreurs récupérables.
Vignelli / Müller-Brockmann	Une grille, une échelle typographique minuscule, peu de polices, un espacement cohérent. La contrainte crée la cohérence.
Munari / Aicher	Résolvez le problème avec le moins de moyens possible ; systèmes plutôt que pièces uniques ; réutilisez les composants plutôt que d'inventer.
Krug	Ne faites pas réfléchir les gens. Présumez le survol, pas la lecture. L'évident bat l'ingénieux.
Wroblewski	Formulaires : moins de champs, étiquettes alignées en haut, validation en ligne, valeurs par défaut judicieuses. Le mobile-first force les priorités.
Frost (design atomique)	Construisez à partir de petites pièces réutilisables avec des tokens ; la cohérence vient du système, pas de la vigilance.
Tognazzini	Rendez l'état visible, protégez le travail de l'utilisateur, gardez les interactions réversibles, favorisez la manipulation directe, gardez les chemins clavier.
Ive / Rams artisanat	Résolvez les détails jusqu'à ce que l'objet paraisse inévitable. Honnêteté du matériau plutôt qu'ornement.

Liste de vérification

Fonction

• La tâche principale est réalisable rapidement, avec l'action principale indubitable.
• Chaque élément a un travail nommable ; rien de décoratif ne subsiste.
• Chaque élément interactif a des états survol/focus/actif/désactivé/chargement/erreur.
• Les cas vides, erreur, hors ligne, lents et de contenu long sont conçus.
• Les actions sont réversibles ou confirmées proportionnellement au risque.
• Le contenu est simple, spécifique et orienté action ; les erreurs disent ce qui s'est passé et comment y remédier.
• Des motifs familiers sont utilisés à moins qu'une raison fonctionnelle ne dicte le contraire.

Forme (uniquement après que la fonction est validée)

• Hiérarchie claire : un point focal par vue ; le test des yeux plissés passe.
• Grille cohérente, échelle d'espacement et échelle typographique ; peu de polices et de graisses.
• La couleur est limitée, utile et jamais le seul vecteur de sens.
• L'alignement et le rythme sont exacts ; rien n'est « presque » aligné.

Honnêteté et longévité

• Pas de dark patterns, de rareté factice ou d'affordances trompeuses.
• Rien ne dépend d'une tendance passagère.

Anti-patrons

• Décoration : dégradés, ombres, illustrations, icônes à côté de chaque étiquette, bordures partout, arrière-plans qui réduisent le contraste.
• Mouvement gratuit : animation qui retarde une tâche, boucle pour attirer l'attention, ou parallaxe. Le mouvement doit expliquer un changement (origine, hiérarchie, état) et rester sous ~200 à 300 ms pour le feedback UI. Respectez prefers-reduced-motion.
• Dark patterns : confirmshaming, coûts cachés, options pré-cochées, publicités déguisées, annulation piège, harcèlement, comptes à rebours factices, boutons asymétriques pour accepter/refuser de conséquences égales.
• Viande mystère : contrôles icon-only sans étiquettes ni infobulles, actions gestuelles sans alternative visible.
• Choix déversé : paramètres et options à la place de bonnes valeurs par défaut.
• Réinvention : barres de défilement personnalisées, contrôles de formulaire non standard, navigation maison pour le plaisir.
• Inflation de l'emphase : tout en gras, coloré ou badgé.
• Style sur contenu : concevoir le conteneur avant que le contenu n'existe ; approbations sur du lorem ipsum.
• Cacher avec du minimalisme : supprimer les étiquettes, affordances ou états pour avoir l'air propre. Minimal signifie essentiel, pas manquant.
• Vitrine d'abord : la capture d'écran du portfolio est belle, les états vides et d'erreur sont vierges.

Baselines (non négociables)

Accessibilité (WCAG 2.2 AA minimum)

• Contraste du texte 4.5:1 (3:1 pour les grands textes et les bordures/icônes UI).
• Opération complète au clavier, ordre de focus logique, indicateur de focus visible.
• HTML sémantique d'abord ; ARIA uniquement pour combler les lacunes. Étiquettes pour toutes les entrées ; texte alternatif pour les images significatives.
• Ne jamais transmettre de sens par la couleur seule. Support du zoom à 200 % et du redimensionnement du texte sans perte.
• Respectez prefers-reduced-motion et prefers-color-scheme. Aucun contenu clignotant plus de 3 fois par seconde.
• Cibles d'au moins 24 x 24 px CSS, visez 44 x 44 au tactile.

Responsive

• Concevez contenu d'abord et mobile-first ; la mise en page s'adapte au contenu, avec des points de rupture définis là où le contenu casse, pas aux noms d'appareils.
• Pas de défilement horizontal à 320 px de largeur. Unités relatives, typographie fluide, min()/clamp().
• Corps de texte ~16 px minimum, longueur de ligne ~45 à 75 caractères, hauteur de ligne ~1.4 à 1.6.
• Le tactile et le pointeur fonctionnent tous deux ; le survol n'est jamais le seul chemin.

Performance en tant que design

• La rapidité est une fonctionnalité : ressources légères, pas de décalage de mise en page, polices système ou peu de polices web, contenu significatif avant l'amélioration.

Quand la forme peut mener (exceptions étroites)

La forme ne peut prendre le dessus que là où elle sert la fonction. Chaque utilisation doit nommer la fonction :

• Reconnaissance : marque, couleur ou signature visuelle cohérente qui aide les gens à identifier et à faire confiance à un produit.
• Confiance et crédibilité : polissage professionnel là où son absence signale un risque (paiements, santé, sécurité).
• Lisibilité et survol : échelle typographique, espace blanc et contraste choisis pour faciliter la lecture et la recherche.
• Adéquation émotionnelle à la tâche : ton adapté au contexte (calme pour le médical, ludique pour l'apprentissage des enfants) lorsque l'humeur affecte l'achèvement ou le confort.
• Plaisir avec un travail : un seul moment, bref, sautable, qui confirme le succès ou enseigne un mécanisme (jamais sur des chemins fréquents ou bloquants).
• Contextes dirigés par l'art : éditorial, marketing, jeux et portfolios où l'expérience elle-même est le produit. Même là, les chemins de navigation, de lecture et d'achat restent fonction-first.

Si l'exception ne peut pas être formulée comme « cela aide l'utilisateur à faire X », ce n'est pas une exception.

Méthode de travail

1. Écrivez l'utilisateur, la tâche et les contraintes en 2 à 3 phrases.
2. Contenu et structure d'abord (hiérarchie de l'information, flux), visuels en dernier.
3. Utilisez du contenu réel, des volumes de données réels et des cas limites réels.
4. Commencez par la solution conventionnelle la plus simple ; n'ajoutez que ce qu'un test ou un besoin énoncé justifie.
5. Révisez avec la liste de vérification ; supprimez avant d'ajouter.
6. Lorsque vous rapportez une décision de conception, énoncez la fonction qu'elle sert et dites explicitement si une option agréable a été rejetée parce qu'elle nuisait à la fonction.