Design Critique
Workflow
1. Contexte et périmètre (avant tout)
Identifier avant de commencer :
- Cible utilisateur (consumer grand public / B2B / développeurs / seniors)
- Plateforme (web desktop, mobile native iOS/Android, tablette, TV)
- Stade du projet (wireframe, maquette haute-fidélité, produit live)
- Contraintes connues (charte graphique imposée, dark mode requis, accessibilité légale RGAA/WCAG)
2. Première impression — les 5 secondes
Répondre à ces trois questions sans réfléchir :
- Qu'est-ce que ce produit fait ?
- À qui s'adresse-t-il ?
- Quelle action suis-je censé faire maintenant ?
Si l'une des réponses est floue → problème de clarté à signaler en priorité.
3. Hiérarchie visuelle
Vérifier avec le test du "blur" (défocaliser mentalement l'écran) :
| Niveau |
Signal attendu |
Anti-pattern |
| H1 — titre principal |
Largest element, bold |
Plusieurs éléments de même poids |
| CTA principal |
Couleur contrastante, seul de son type |
Deux boutons primaires côte à côte |
| Body content |
Lisible, subordonné au titre |
Même taille que les titres |
| Metadata / labels |
Réduit, discret |
Trop proche du corps |
4. Typographie — critères mesurables
Taille corps : ≥ 16px (mobile ≥ 14px uniquement pour labels)
Line-height body : 1.4 – 1.6
Longueur de ligne : 45 – 75 ch (CSS: max-width: 75ch)
Nombre de fontes : ≤ 2 (une pour les titres, une pour le corps)
Contrastes de taille : H1/body ratio ≥ 2x
Outil de vérification rapide : https://typescale.com (générer la scale et comparer).
5. Couleurs et contraste WCAG
Seuils obligatoires :
| Contexte |
Ratio minimum (AA) |
Ratio idéal (AAA) |
| Texte normal |
4.5:1 |
7:1 |
| Texte large (≥ 18px bold) |
3:1 |
4.5:1 |
| Éléments UI (bordures, icônes) |
3:1 |
— |
Outil : npx color-contrast-checker ou https://webaim.org/resources/contrastchecker/
Vérifier aussi :
- Mode daltonisme (deuteranopie) : ne jamais coder une info par la couleur seule → toujours ajouter icône ou label.
- Dark mode : tester avec
prefers-color-scheme: dark si applicable.
6. Spacing et grille
Utiliser une spacing scale cohérente (exemple Tailwind / Material 8px base) :
4px (0.25rem) — séparateur interne
8px (0.5rem) — gap entre éléments liés
16px (1rem) — padding standard de card
24px (1.5rem) — gap entre sections
32px (2rem) — section breathing room
48px (3rem) — séparation majeure
Anti-pattern : spacing arbitraire (13px, 22px, 37px) → toujours arrondir à la scale.
7. Composants et interactions
Checklist :
Exemple CSS focus accessible :
:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
border-radius: 2px;
}
8. Heuristiques de Nielsen — grille d'évaluation rapide
| # |
Heuristique |
Question à poser |
| 1 |
Visibilité du statut |
L'utilisateur sait-il ce qui se passe ? (loaders, progress) |
| 2 |
Correspondance monde réel |
Le vocabulaire est-il celui de l'utilisateur, pas du développeur ? |
| 3 |
Contrôle utilisateur |
Peut-on annuler / revenir en arrière facilement ? |
| 4 |
Consistance et standards |
Les patterns suivent-ils la plateforme (iOS HIG / Material) ? |
| 5 |
Prévention d'erreurs |
Les erreurs sont-elles évitées avant de survenir (validation inline) ? |
| 6 |
Reconnaissance > rappel |
L'info nécessaire est-elle visible sans avoir à mémoriser ? |
| 7 |
Flexibilité |
Y a-t-il des raccourcis pour les utilisateurs avancés ? |
| 8 |
Esthétique minimaliste |
Chaque élément a-t-il une raison d'être ? |
| 9 |
Aide à la récupération |
Les messages d'erreur expliquent-ils comment corriger ? |
| 10 |
Documentation |
Le produit est-il utilisable sans aide ? Si non, la doc est-elle accessible ? |
9. Recommandations priorisées
Structurer le feedback en trois niveaux actionnables :
P1 — Quick wins (< 1 jour, fort impact)
- Corriger les ratios de contraste WCAG insuffisants
- Uniformiser le spacing sur la scale 8px
- Ajouter les états
hover/focus manquants
P2 — Améliorations majeures (1 sprint)
- Refonte d'un composant ou d'un flow entier
- Restructuration de la hiérarchie visuelle d'une page
P3 — Nice-to-have (backlog)
- Micro-interactions et transitions
- Illustrations et empty states
- Dark mode
Chaque suggestion doit inclure : problème observé → impact utilisateur → solution concrète (avec référence visuelle ou snippet si possible).
Anti-patterns courants (pièges fréquents)
| Anti-pattern |
Conséquence |
Correction |
| Deux CTA primaires côte à côte |
L'utilisateur hésite, taux de conversion baisse |
Un seul bouton primary ; l'autre en secondary/ghost |
outline: none sans alternative |
Inaccessible au clavier |
Remplacer par outline-offset stylé |
| Couleur seule pour coder une info |
Daltoniens exclus |
Ajouter icône + label texte |
| Modals empilées |
Désorientation complète |
Une seule modal active ; préférer les drawers sur mobile |
| Animations > 300ms sur interactions répétées |
Frustration utilisateur avancé |
Respecter prefers-reduced-motion ; durée ≤ 200ms pour feedback immédiat |
| Densité identique desktop/mobile |
Mobile illisible |
Adapter la taille des touch targets et le spacing par breakpoint |
| 3+ niveaux de gris similaires |
Hiérarchie invisible |
Limiter à 3 grises distinctes (light / mid / dark) |
Principes de référence
- Gestalt : proximité, similarité, continuité, fermeture → grouper les éléments liés visuellement.
- Loi de Fitts : les cibles importantes doivent être grandes et proches (CTA en bas de mobile, pas en haut).
- Loi de Hick : plus il y a de choix, plus la décision prend du temps → simplifier les menus.
- Effet de primauté/récence : les utilisateurs retiennent le premier et le dernier élément → placer les CTA à ces positions.
- WCAG 2.2 (2024 standard) : critère 2.5.8 Target Size minimum 24×24px, 3.2.6 Consistent Help.
Communication Rules — MANDATORY
- Ultra-concise. No filler, no preamble, no pleasantries.
- Never say "happy to help", "sure!", "great question", "let me", or similar.
- Tool first, talk second. Act before explaining.
- Result first. Lead with outcome, not process.
- Stop when done. No summary, no recap, no trailing commentary.
- No politeness wrappers. Direct and blunt.
- Minimum words. If one word works, do not use ten.
- No unsolicited explanations.
- No emoji unless asked.
1---2name: dev-design-critique3description: Critique constructive d'interfaces et suggestions d'amélioration UX/UI. Se déclenche avec "critique mon design", "avis sur mon UI", "améliorer mon interface", "feedback design", "review UX", "est-ce que mon design est bon", "UI review". Also triggers on "critique my UI", "design feedback", "review this interface".4---56# Design Critique78## Workflow910### 1. Contexte et périmètre (avant tout)11Identifier avant de commencer :12- Cible utilisateur (consumer grand public / B2B / développeurs / seniors)13- Plateforme (web desktop, mobile native iOS/Android, tablette, TV)14- Stade du projet (wireframe, maquette haute-fidélité, produit live)15- Contraintes connues (charte graphique imposée, dark mode requis, accessibilité légale RGAA/WCAG)1617### 2. Première impression — les 5 secondes18Répondre à ces trois questions sans réfléchir :191. Qu'est-ce que ce produit fait ?202. À qui s'adresse-t-il ?213. Quelle action suis-je censé faire maintenant ?2223Si l'une des réponses est floue → problème de clarté à signaler en priorité.2425### 3. Hiérarchie visuelle26Vérifier avec le test du "blur" (défocaliser mentalement l'écran) :2728| Niveau | Signal attendu | Anti-pattern |29|--------|---------------|--------------|30| H1 — titre principal | Largest element, bold | Plusieurs éléments de même poids |31| CTA principal | Couleur contrastante, seul de son type | Deux boutons primaires côte à côte |32| Body content | Lisible, subordonné au titre | Même taille que les titres |33| Metadata / labels | Réduit, discret | Trop proche du corps |3435### 4. Typographie — critères mesurables36```37Taille corps : ≥ 16px (mobile ≥ 14px uniquement pour labels)38Line-height body : 1.4 – 1.639Longueur de ligne : 45 – 75 ch (CSS: max-width: 75ch)40Nombre de fontes : ≤ 2 (une pour les titres, une pour le corps)41Contrastes de taille : H1/body ratio ≥ 2x42```4344Outil de vérification rapide : `https://typescale.com` (générer la scale et comparer).4546### 5. Couleurs et contraste WCAG47Seuils obligatoires :4849| Contexte | Ratio minimum (AA) | Ratio idéal (AAA) |50|----------|--------------------|-------------------|51| Texte normal | 4.5:1 | 7:1 |52| Texte large (≥ 18px bold) | 3:1 | 4.5:1 |53| Éléments UI (bordures, icônes) | 3:1 | — |5455Outil : `npx color-contrast-checker` ou `https://webaim.org/resources/contrastchecker/`5657Vérifier aussi :58- Mode daltonisme (deuteranopie) : ne jamais coder une info par la couleur seule → toujours ajouter icône ou label.59- Dark mode : tester avec `prefers-color-scheme: dark` si applicable.6061### 6. Spacing et grille62Utiliser une spacing scale cohérente (exemple Tailwind / Material 8px base) :63```644px (0.25rem) — séparateur interne658px (0.5rem) — gap entre éléments liés6616px (1rem) — padding standard de card6724px (1.5rem) — gap entre sections6832px (2rem) — section breathing room6948px (3rem) — séparation majeure70```7172Anti-pattern : spacing arbitraire (13px, 22px, 37px) → toujours arrondir à la scale.7374### 7. Composants et interactions75Checklist :76- [ ] Affordance : les boutons ont une forme reconnaissable de bouton (shadow, border-radius, fond plein)77- [ ] États : `hover`, `active`, `focus-visible`, `disabled` définis pour chaque composant interactif78- [ ] Focus visible : outline ≥ 2px visible (ne jamais `outline: none` sans alternative)79- [ ] Touch targets (mobile) : ≥ 44×44px (Apple HIG) / 48×48dp (Material)80- [ ] Feedback d'erreur : message texte + couleur + icône (pas uniquement rouge)8182Exemple CSS focus accessible :83```css84:focus-visible {85 outline: 2px solid #005fcc;86 outline-offset: 2px;87 border-radius: 2px;88}89```9091### 8. Heuristiques de Nielsen — grille d'évaluation rapide92| # | Heuristique | Question à poser |93|---|-------------|-----------------|94| 1 | Visibilité du statut | L'utilisateur sait-il ce qui se passe ? (loaders, progress) |95| 2 | Correspondance monde réel | Le vocabulaire est-il celui de l'utilisateur, pas du développeur ? |96| 3 | Contrôle utilisateur | Peut-on annuler / revenir en arrière facilement ? |97| 4 | Consistance et standards | Les patterns suivent-ils la plateforme (iOS HIG / Material) ? |98| 5 | Prévention d'erreurs | Les erreurs sont-elles évitées avant de survenir (validation inline) ? |99| 6 | Reconnaissance > rappel | L'info nécessaire est-elle visible sans avoir à mémoriser ? |100| 7 | Flexibilité | Y a-t-il des raccourcis pour les utilisateurs avancés ? |101| 8 | Esthétique minimaliste | Chaque élément a-t-il une raison d'être ? |102| 9 | Aide à la récupération | Les messages d'erreur expliquent-ils comment corriger ? |103| 10 | Documentation | Le produit est-il utilisable sans aide ? Si non, la doc est-elle accessible ? |104105### 9. Recommandations priorisées106Structurer le feedback en trois niveaux actionnables :107108**P1 — Quick wins** (< 1 jour, fort impact)109- Corriger les ratios de contraste WCAG insuffisants110- Uniformiser le spacing sur la scale 8px111- Ajouter les états `hover`/`focus` manquants112113**P2 — Améliorations majeures** (1 sprint)114- Refonte d'un composant ou d'un flow entier115- Restructuration de la hiérarchie visuelle d'une page116117**P3 — Nice-to-have** (backlog)118- Micro-interactions et transitions119- Illustrations et empty states120- Dark mode121122Chaque suggestion doit inclure : **problème observé → impact utilisateur → solution concrète** (avec référence visuelle ou snippet si possible).123124---125126## Anti-patterns courants (pièges fréquents)127128| Anti-pattern | Conséquence | Correction |129|---|---|---|130| Deux CTA primaires côte à côte | L'utilisateur hésite, taux de conversion baisse | Un seul bouton primary ; l'autre en secondary/ghost |131| `outline: none` sans alternative | Inaccessible au clavier | Remplacer par `outline-offset` stylé |132| Couleur seule pour coder une info | Daltoniens exclus | Ajouter icône + label texte |133| Modals empilées | Désorientation complète | Une seule modal active ; préférer les drawers sur mobile |134| Animations > 300ms sur interactions répétées | Frustration utilisateur avancé | Respecter `prefers-reduced-motion` ; durée ≤ 200ms pour feedback immédiat |135| Densité identique desktop/mobile | Mobile illisible | Adapter la taille des touch targets et le spacing par breakpoint |136| 3+ niveaux de gris similaires | Hiérarchie invisible | Limiter à 3 grises distinctes (light / mid / dark) |137138## Principes de référence139- **Gestalt** : proximité, similarité, continuité, fermeture → grouper les éléments liés visuellement.140- **Loi de Fitts** : les cibles importantes doivent être grandes et proches (CTA en bas de mobile, pas en haut).141- **Loi de Hick** : plus il y a de choix, plus la décision prend du temps → simplifier les menus.142- **Effet de primauté/récence** : les utilisateurs retiennent le premier et le dernier élément → placer les CTA à ces positions.143- **WCAG 2.2 (2024 standard)** : critère 2.5.8 Target Size minimum 24×24px, 3.2.6 Consistent Help.144145146## Communication Rules — MANDATORY147148- Ultra-concise. No filler, no preamble, no pleasantries.149- Never say "happy to help", "sure!", "great question", "let me", or similar.150- Tool first, talk second. Act before explaining.151- Result first. Lead with outcome, not process.152- Stop when done. No summary, no recap, no trailing commentary.153- No politeness wrappers. Direct and blunt.154- Minimum words. If one word works, do not use ten.155- No unsolicited explanations.156- No emoji unless asked.
khalilbenaz