Experience Design
Le kit ux-ui-kit rend les interfaces correctes : tokens, composants, états, accessibilité, rendus vérifiés. Cette compétence décide à quoi l'interface doit ressembler pour être à la fois utilisée et mémorisée, et transforme cela en décisions concrètes que le kit peut construire. Elle répond à : que doit-on remarquer en premier, ce qui doit rester familier, où l'originalité mérite sa place, ce qui bouge et ce qui reste immobile, comment les interactions communiquent, où l'expérience culmine et comment elle se termine, et ce qui reste une fois la couche impressionnante retirée.
Où cela se situe
| Couche | Possède | Compétence |
|---|---|---|
| Stratégie web | ce que le site doit accomplir et dire, structure des pages, preuve, confiance, conversion, SEO | website-excellence |
| Direction de l'expérience (cette compétence) | attention, familiarité et originalité, direction artistique, composition et rythme, interaction, mouvement, moments signature, adaptation, validation expérientielle | experience-design |
| Exécution et vérification | tokens, composants, code, copie, barrières | apply-aesthetic, brandkit, design-tokens, design-component, design-code, image-to-code, ux-writing, prototype, redesign, design-review, a11y-audit, performance, design-qa |
N'utilisez le contexte stratégique que lorsqu'il modifie une décision d'interface. Si le public, l'offre ou l'objectif de la page d'un site web ne sont pas résolus, obtenez-les d'abord via website-excellence, ou énoncez l'hypothèse et continuez. Les UI de produits, applications et tableaux de bord arrivent directement ici.
Étape 0 : dimensionner le processus
Choisissez la profondeur avant tout le reste. Les cadres de référence sont des outils de jugement, pas des étapes que chaque demande doit traverser.
| Mode | Utilisation | Ce qu'il faut produire |
|---|---|---|
| Rapide | un composant, un état, une modification d'écran ou une correction dans un système établi | Lisez le registre de décisions de conception du projet s'il existe. Ordre d'attention pour la vue concernée, une carte d'interaction ou de mouvement uniquement pour ce qui change, l'analyse des anti-patrons, puis construisez. Pas de thèse. |
| Standard | une nouvelle page, un nouveau flux ou une nouvelle famille d'écrans, ou la refonte d'un de ceux-ci | Brief d'expérience et thèse, carte d'attention, budget de nouveauté, une seule direction (alternatives uniquement pour un réel compromis), carte de rythme, carte d'interaction et de mouvement, notes d'adaptation, auto-critique, registre de décisions. |
| Signature | un site ou un lancement qui définit une marque, une refonte d'identité, ou une demande explicite pour quelque chose de mémorable | Tout ce qui est dans Standard, plus exploration de concepts (trois directions vraiment différentes, comparées, une choisie), moments signature conçus, un prototype de la pièce la plus risquée, et un plan de validation expérientielle. |
Vérification de retenue. Dans un service gouvernemental, un paiement, une authentification, des paramètres, de la documentation, un tableau de bord opérationnel, ou une tâche médicale ou financière, le budget de nouveauté dans les chemins de tâches est proche de zéro. La personnalité réside dans la typographie, la clarté, le ton, la précision et la qualité du feedback. Savoir quand la retenue est la décision la plus forte fait partie du travail.
La boucle
Exécutez les étapes nécessaires au mode. Chacune pointe vers la référence qui contient la méthode.
- Comprendre. Rédigez le brief d'expérience : intention de l'utilisateur, contexte d'arrivée, attention principale, résultat, ton, ce qui reste familier, contraintes, ce dont on doit se souvenir. [01]
- Établir. Rédigez la thèse d'expérience et la hiérarchie d'attention (niveaux 1 à 4) pour chaque vue clé. La thèse filtre toute décision ultérieure. [01]
- Explorer (Signature, ou lorsque la première idée est la valeur par défaut de la catégorie). Trois directions qui diffèrent par le concept, pas par la couleur ; comparez conservateur, différencié et audacieux ; choisissez ; enregistrez ce qui a été rejeté et pourquoi. Arrêtez d'explorer une fois le choix clair. [02]
- Diriger. Définissez trois à sept règles de direction artistique et traduisez la thèse en conséquences pour la mise en page, la typographie, l'échelle, l'espace, la densité, la couleur, l'imagerie, les surfaces, les composants, l'interaction, le mouvement et le comportement responsive. [02]
- Composer. Dessinez la carte de rythme : le travail de chaque section, la densité et l'intensité, où se trouve le calme, où se situe le pic, comment cela se termine. Laissez le contenu choisir sa forme au lieu d'en-tête, paragraphe, trois cartes. [03]
- Interagir. Rédigez des cartes d'interaction pour les interactions significatives (intention, affordance, déclencheur, réponse, feedback, état, récupération, continuité) et couvrez les états de chargement, vide, erreur, succès, interrompu et marginal. [04]
- Chorégraphier. Créez la carte de mouvement : ce qui bouge, ce qui reste immobile, une carte de mouvement par mouvement significatif avec sa classe de budget et une version conçue pour mouvement réduit. [05]
- Pic. Choisissez zéro à trois moments signature et appliquez le test signature à chacun. [06]
- Adapter. Redécidez l'expérience pour les petits écrans, le tactile, le clavier, le zoom et le reflow, le mouvement réduit et les appareils peu puissants ; définissez l'échelle de dégradation. [07]
- Tester sous contrainte et éditer. Passez les décisions majeures au filtre de décision et les ambitieuses au test de réalité d'implémentation ; puis l'analyse des anti-patrons, le test d'interchangeabilité, le test d'intégrité du concept et l'auto-critique de sept perspectives ; puis retirez ce qui ne mérite pas sa place. [08]
- Transmettre et vérifier. Passez la Spécification d'Expérience aux compétences de construction. Exécutez les barrières du kit et
motion_audit.mjs; rendez et regardez à environ 375 et 1440 px, clavier uniquement, avec mouvement réduit émulé. [07, 08] - Valider, affiner et se souvenir. Testez les hypothèses les plus risquées avec la méthode la moins coûteuse pouvant y répondre ; corrigez les faiblesses à plus fort impact plutôt que de polir des détails de faible valeur ; mettez à jour le registre de décisions de conception. [08]
Non-négociables
- Rendre nécessairement familier ce qui doit l'être ; rendre distinctif ce qui a du sens. Navigation, formulaires, paiement, authentification, recherche, paramètres et récupération d'erreur conservent un comportement conventionnel, sauf si des preuves provenant du public justifient un changement. Exprimez la marque autour d'eux.
- L'accessibilité est une donnée d'entrée du design. WCAG 2.2 AA est le minimum. Rien d'essentiel ne dépend uniquement du survol, du glisser-déposer, du mouvement, de la couleur ou du son. Chaque mouvement a une version conçue pour mouvement réduit, pas seulement une version supprimée.
- Pas de mouvement sans objectif. Chaque mouvement significatif nomme ce qu'il communique et sa classe de budget : essentiel, améliorant, expressif, expérimental ou à éviter.
- Pas d'interaction sans feedback et sans récupération. Chaque action significative est reconnue dans environ 100 ms et peut être annulée, interrompue ou retentée, le cas échéant.
- Chaque amélioration a un mode de défaillance. Le contenu et les tâches principales fonctionnent encore lorsque JavaScript, les médias lourds et l'animation sont supprimés.
- La variation doit porter un sens. Modifiez la composition, la densité ou l'intensité parce que le contenu, le rythme, la hiérarchie ou l'émotion le demande, jamais seulement pour éviter la répétition.
- Les références donnent des principes, pas des surfaces. Ne reconstruisez jamais l'identité d'une vraie entreprise pour quelqu'un d'autre ; extrayez pourquoi une référence fonctionne et exprimez-la différemment.
- Dépensez la nouveauté, ne la saupoudrez pas. Budget typique : Rapide 0, Standard 0 à 1, Signature 1 à 2 idées non familières, concentrées là où elles créent du sens ou de la mémoire.
- Étiquetez la confiance sur les affirmations matérielles (ci-dessous) et ne déclarez jamais un résultat que vous n'avez pas mesuré (Protocole de Vérification du kit).
- Dimensionnez l'analyse à la décision. Pas de théorie pour les choix évidents ; décidez et passez à autre chose.
Sortie : la Spécification d'Expérience
Remplissez templates/experience-spec.md à la profondeur du mode : environ dix lignes pour Rapide, une à deux pages pour Standard, deux à quatre pour Signature. Lors de la construction, la spécification est un plan de travail qui pilote le code ; gardez son langage hors des copies de page et des commentaires de code, et résumez uniquement les décisions qui comptent dans la transmission. Pour les travaux Standard et Signature, rédigez ou mettez à jour le registre de décisions de conception du projet à partir de templates/design-decision-record.md, et lisez-le en premier à chaque tâche ultérieure dans ce projet.
Transmissions
| Décision prise ici | Exécutée par |
|---|---|
| Les règles de direction artistique deviennent des tokens (rôles de couleur, type, espace, rayon, profondeur, mode et durées de mouvement) | brandkit pour une nouvelle fondation ou apply-aesthetic pour une existante, puis design-tokens |
| Les composants et leurs états, à partir des cartes d'interaction | design-component, puis design-code |
| Pages et écrans à partir de la spécification | design-code, ou image-to-code lors de la construction à partir d'une référence |
| Mise à niveau d'une UI existante après le diagnostic de généricité | redesign |
| Copie pour les actions, erreurs, états vides et feedback | ux-writing |
| Prototypes des moments signature et des interactions risquées | prototype |
| Barrières : contraste dans tous les états, axe, pièges de focus, débordement responsive, goût, mouvement | a11y-audit, design-qa, performance, et node ~/.claude/ux-ui-kit/scripts/motion_audit.mjs <page> |
| Revue notée d'un écran à travers les prismes de fondation et d'expérience | design-review |
Les règles du kit lient toujours la construction : tokens uniquement, les 8 états de composant, le Protocole de Vérification dans ~/.claude/ux-ui-kit/CLAUDE.md, pas d'emoji.
Étiquettes de confiance
Utilisez-les sur les recommandations qu'un lecteur pourrait prendre pour des faits. N'étiquetez pas chaque phrase.
| Étiquette | Signification | Équivalent website-excellence |
|---|---|---|
| Convention de haute confiance | motif largement établi avec une forte valeur d'utilisabilité | Convention actuelle, ou Standard |
| Orientation soutenue par des preuves | appuyée par une norme ou une recherche pertinente ; dites ce que couvrent les preuves | Standard / exigence, Preuves solides |
| Inférence spécifique au projet | raisonnée à partir de ces utilisateurs, contraintes et objectifs ; énoncez l'hypothèse | Inférence |
| Hypothèse créative | un jugement destiné à créer un sentiment ou un souvenir ; testable, non prouvable par la recherche | Heuristique pratique |
| Opportunité expérimentale | nouveau, résultat incertain ; justifiez-le et testez-le avant de vous y fier | Preuves limitées/contextuelles, plus un plan de validation |
La recherche peut fixer des contraintes et signaler des risques. Elle ne peut pas choisir la seule direction artistique correcte.
Références
Chargez uniquement ce dont le mode et le problème ont besoin.
- 01 Brief, thèse et attention : brief d'expérience, thèse, les trois niveaux de réponse, hiérarchie d'attention, proportionnalité par contexte, quand la retenue gagne.
- 02 Concepts et direction artistique : territoires créatifs, différence conceptuelle, fiches de direction et comparaison, de l'intention à l'exécution, typographie, couleur, imagerie, surfaces, utilisation des références et de la bibliothèque de styles.
- 03 Composition, rythme et contenu : conception dans le temps, carte de rythme, contraste et rythme, densité et pause, interfaces façonnées par le contenu, cartes, outils de composition.
- 04 Conception d'interaction : cartes d'interaction, test de communication, budget de nouveauté, timing du feedback, mises à jour optimistes, annulation, formulaires, états d'expérience, parité d'entrée, transformation de motifs, interactions signature, utilisation répétée.
- 05 Système de mouvement : preuves, objectifs du mouvement, classes de budget, carte et fiches de mouvement, timing, easing et ressorts, chorégraphie, mouvement lié au défilement, transitions de vue, mouvement réduit en tant que design, performance, mobile, outils, tests.
- 06 Moments signature : types de moments, mémorabilité sans spectacle, pic et fin, sélection, test signature, formes immobiles, prototypage.
- 07 Adaptation et dégradation : responsive en tant qu'adaptation, requêtes d'entrée et de capacité, requêtes de conteneur, zoom et reflow, portée, niveaux d'appareils, échelle de dégradation, modes de défaillance, accessibilité pour les fonctionnalités expressives, vérifications de rendu.
- 08 Critique, validation et mémoire : filtre de décision, test de réalité d'implémentation, analyse des anti-patrons IA, tests d'interchangeabilité et d'intégrité, boucle d'auto-critique, édition impitoyable, passage de finition, méthodes de validation pour la clarté et pour le ressenti, registre de décisions de conception.