Phase 4 — Ergonomie et bonnes pratiques UX
Principe clé
« Don't make me think! » (Ne me faites pas réfléchir !) — Steve Krug
Un site ergonomique est un site où l'utilisateur trouve ce qu'il cherche sans effort.
Qu'est-ce que l'ergonomie web ?
L'ergonomie web (UX) rend un site :
- Facile à utiliser — l'utilisateur sait quoi faire
- Efficace — il atteint son objectif rapidement
- Satisfaisant — l'expérience est agréable
- Accessible — utilisable par tous
Les 10 heuristiques de Nielsen en posent les fondements théoriques.
Les 10 règles d'ergonomie
| # | Règle | ❌ Mauvais | ✅ Bon |
|---|---|---|---|
| 1 | Contraste | Ratio < 4.5:1 | ≥ 4.5:1 (AA) — détail Phase 6 |
| 2 | Longueur de ligne | > 90 caractères | 60-80 caractères (max-width: 65ch) |
| 3 | Zones cliquables | < 44px | ≥ 48×48px sur mobile |
| 4 | Espacement | Éléments collés | Multiples de 8px (voir Phase 3) |
| 5 | Navigation | Menu caché, pas de repère | Logo cliquable + menu visible + fil d'Ariane + page active |
| 6 | Feedback | Aucun retour visuel | Confirmation immédiate sur chaque action |
| 7 | Messages d'erreur | « Erreur 422 » | Explicite + comment corriger |
| 8 | Formulaires | 15 champs obligatoires | Minimum, labels au-dessus, validation temps réel |
| 9 | Chargement | Page blanche figée | Indicateur (spinner < 3s, barre > 3s) |
| 10 | Cohérence | Styles variables | Système unifié (couleurs, icônes, termes) |
Vérifier les contrastes
Outil : WebAIM Contrast Checker.
Détails par règle
Règle 3 — Zones cliquables (CSS)
| Référence | Taille minimale |
|---|---|
| Apple (iOS) | 44 × 44 px |
| Google (Material) | 48 × 48 px |
| WCAG 2.2 | 24 × 24 px (minimum absolu) |
Astuce : agrandir la zone même si l'icône est petite.
css
button {
min-width: 48px;
min-height: 48px;
padding: 12px;
}Règle 6 — Feedback par type d'action
| Action | Feedback attendu |
|---|---|
| Clic sur bouton | Changement visuel immédiat |
| Soumission formulaire | Indicateur de chargement |
| Succès | Message de confirmation |
| Erreur | Message explicite + solution |
| Survol | Changement de curseur/couleur |
Règle 7 — Messages d'erreur (4 règles)
- Expliquer ce qui ne va pas
- Indiquer comment corriger
- Placer le message près du problème
- Utiliser un ton positif (pas de reproche)
Exemple : ❌ « Erreur de saisie » → ✅ « L'email doit contenir un @. »
Règle 8 — Formulaires efficaces
- Demander uniquement les informations nécessaires
- Labels au-dessus des champs (pas à côté)
- Placeholder ≠ label — le placeholder disparaît à la saisie
- Validation en temps réel (pas seulement au submit)
- Bouton avec verbe explicite : « Envoyer le message » > « Submit »
Règle 9 — Temps de chargement perçu
| Temps | Perception | Indicateur |
|---|---|---|
| < 100 ms | Instantané | aucun |
| 100-300 ms | Rapide | aucun |
| 300 ms - 1 s | Acceptable | aucun |
| 1-3 s | Perceptible, l'utilisateur attend | spinner |
| > 3 s | Frustrant, risque d'abandon | barre de progression |
Checklist de la Phase 4
- Contrastes des couleurs validés (ratio ≥ 4.5:1)
- Longueur des lignes de texte optimisée (60-80 caractères)
- Zones cliquables suffisantes sur mobile (≥ 48×48px)
- Espacements cohérents (multiples de 8px)
- Navigation claire avec indicateur de position
- Feedback prévu pour toutes les actions utilisateur
- Messages d'erreur clairs et constructifs
- Formulaires simplifiés au maximum
- Indicateurs de chargement prévus
- Cohérence visuelle sur toutes les pages
Prochaine étape
Les bonnes pratiques sont définies. Passez à la Phase 5 — Maquettes pour visualiser votre interface avant de coder.