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 (ou UX - User Experience) étudie comment rendre un site :
- Facile à utiliser — L'utilisateur sait quoi faire
- Efficace — L'utilisateur atteint son objectif rapidement
- Satisfaisant — L'expérience est agréable
- Accessible — Utilisable par tous
Les 10 heuristiques de Nielsen
Jakob Nielsen a défini 10 principes fondamentaux de l'utilisabilité :
| # | Heuristique | Application concrète |
|---|---|---|
| 1 | Visibilité de l'état | Montrer où l'utilisateur se trouve |
| 2 | Correspondance monde réel | Utiliser des mots familiers |
| 3 | Contrôle utilisateur | Permettre d'annuler, de revenir |
| 4 | Cohérence et standards | Suivre les conventions du web |
| 5 | Prévention des erreurs | Éviter les erreurs avant qu'elles arrivent |
| 6 | Reconnaissance > rappel | Montrer les options, ne pas les cacher |
| 7 | Flexibilité | Raccourcis pour les experts |
| 8 | Design minimaliste | Pas d'information inutile |
| 9 | Aide à la récupération | Messages d'erreur clairs |
| 10 | Aide disponible | Documentation si nécessaire |
Source : Nielsen Norman Group
Bonnes et mauvaises pratiques
1. Contraste des couleurs
Le contraste est essentiel pour la lisibilité. Les normes WCAG imposent des ratios minimaux.
| Niveau | Texte normal | Grand texte (18px+) |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (recommandé) | 7:1 | 4.5:1 |
❌ Mauvais : Contraste insuffisant
┌─────────────────────────────────────────────────┐
│ │
│ Texte gris clair sur fond blanc │
│ (#AAAAAA sur #FFFFFF) │
│ Ratio : 2.3:1 ❌ │
│ │
│ Difficile à lire, surtout pour les │
│ personnes malvoyantes ou en plein soleil. │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Contraste suffisant
┌─────────────────────────────────────────────────┐
│ │
│ Texte gris foncé sur fond blanc │
│ (#333333 sur #FFFFFF) │
│ Ratio : 12.6:1 ✅ │
│ │
│ Parfaitement lisible dans toutes │
│ les conditions. │
│ │
└─────────────────────────────────────────────────┘Outil de vérification
Utilisez WebAIM Contrast Checker pour vérifier vos combinaisons de couleurs.
2. Longueur des lignes de texte
Des lignes trop longues fatiguent l'œil. Des lignes trop courtes interrompent la lecture.
| Longueur | Confort |
|---|---|
| < 45 caractères | Trop court |
| 60-80 caractères | Optimal ✅ |
| > 90 caractères | Trop long |
❌ Mauvais : Lignes trop longues
┌─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna │
│ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. │
│ │
│ 120+ caractères par ligne = l'œil se perd en revenant à la ligne suivante │
│ │
└─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘✅ Bon : Lignes de longueur optimale
┌───────────────────────────────────────────────────────────────┐
│ │
│ Lorem ipsum dolor sit amet, consectetur adipiscing │
│ elit. Sed do eiusmod tempor incididunt ut labore et │
│ dolore magna aliqua. │
│ │
│ 65-75 caractères par ligne = lecture confortable │
│ │
└───────────────────────────────────────────────────────────────┘En CSS :
css
p {
max-width: 65ch; /* ch = largeur du caractère "0" */
}3. Taille des zones cliquables (mobile)
Sur mobile, les doigts sont imprécis. Les zones cliquables doivent être suffisamment grandes.
| Standard | Taille minimale |
|---|---|
| Apple (iOS) | 44 × 44 px |
| Google (Material) | 48 × 48 px |
| WCAG 2.2 | 24 × 24 px (minimum absolu) |
❌ Mauvais : Zones trop petites
┌─────────────────────────────────────────────────┐
│ │
│ [x] [x] [x] ← Boutons de 20×20px │
│ │
│ Impossible de cliquer précisément │
│ sur mobile. Frustrant et source d'erreurs. │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Zones suffisantes
┌─────────────────────────────────────────────────┐
│ │
│ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ │ │ │ │ │ ← 48×48px │
│ │ ✕ │ │ ✕ │ │ ✕ │ │
│ │ │ │ │ │ │ │
│ └──────┘ └──────┘ └──────┘ │
│ │
│ Facile à toucher, même avec le pouce. │
│ │
└─────────────────────────────────────────────────┘Astuce CSS
Même si l'icône est petite, agrandissez la zone cliquable :
css
button {
min-width: 48px;
min-height: 48px;
padding: 12px;
}4. Espacement et aération
L'espace blanc (whitespace) améliore la lisibilité et réduit la charge cognitive.
❌ Mauvais : Contenu tassé
┌─────────────────────────────────────────────────┐
│Titre du produit │
│Prix: 29.90€ │
│Description: Lorem ipsum dolor sit amet, │
│consectetur adipiscing elit. │
│[Ajouter au panier][Favoris] │
│Produits similaires: │
│[Produit1][Produit2][Produit3] │
└─────────────────────────────────────────────────┘✅ Bon : Contenu aéré
┌─────────────────────────────────────────────────┐
│ │
│ Titre du produit │
│ │
│ Prix : 29.90 € │
│ │
│ Description : │
│ Lorem ipsum dolor sit amet, consectetur │
│ adipiscing elit. │
│ │
│ ┌────────────────────┐ ┌──────────┐ │
│ │ Ajouter au panier │ │ Favoris │ │
│ └────────────────────┘ └──────────┘ │
│ │
│ ───────────────────────────────────── │
│ │
│ Produits similaires │
│ ┌─────┐ ┌─────┐ ┌─────┐ │
│ │ │ │ │ │ │ │
│ └─────┘ └─────┘ └─────┘ │
│ │
└─────────────────────────────────────────────────┘Règle du 8 : Utilisez des multiples de 8px pour vos espacements (8, 16, 24, 32, 48...).
5. Navigation claire
L'utilisateur doit toujours savoir où il est et comment revenir.
❌ Mauvais : Navigation confuse
┌─────────────────────────────────────────────────┐
│ Accueil | Nos solutions | Plus | ≡ │
├─────────────────────────────────────────────────┤
│ │
│ Bienvenue sur notre page │
│ │
│ Où suis-je ? Comment revenir ? │
│ Que contient "Plus" ? │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Navigation explicite
┌─────────────────────────────────────────────────┐
│ 🏠 Accueil Produits Services Contact │
├─────────────────────────────────────────────────┤
│ Accueil > Produits > Catégorie > Article │
├─────────────────────────────────────────────────┤
│ │
│ Nom de l'article │
│ │
│ Fil d'Ariane visible │
│ Bouton retour accessible │
│ Navigation cohérente │
│ │
│ ← Retour aux produits │
│ │
└─────────────────────────────────────────────────┘Éléments essentiels :
- Logo cliquable vers l'accueil
- Menu visible et cohérent
- Fil d'Ariane (breadcrumb) pour les sites profonds
- Indicateur de page active
- Bouton retour quand nécessaire
6. Feedback utilisateur
L'utilisateur doit toujours savoir ce qui se passe après une action.
❌ Mauvais : Pas de feedback
┌─────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────┐ │
│ │ Envoyer │ ← Clic... │
│ └─────────────────────┘ │
│ │
│ ... rien ne se passe ... │
│ A-t-il été envoyé ? Dois-je recliquer ? │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Feedback immédiat
┌─────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────┐ │
│ │ ⏳ Envoi en cours... │ ← État de chargement │
│ └─────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────┐ │
│ │ ✅ Message envoyé avec succès ! │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘Types de feedback :
| 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 |
7. Messages d'erreur
Les messages d'erreur doivent être clairs, précis et constructifs.
❌ Mauvais : Message cryptique
┌─────────────────────────────────────────────────┐
│ │
│ ⚠️ Erreur 422 : Validation failed │
│ │
│ Que dois-je corriger ? │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Message utile
┌─────────────────────────────────────────────────┐
│ │
│ ⚠️ Le mot de passe doit contenir : │
│ • Au moins 8 caractères │
│ • Une lettre majuscule │
│ • Un chiffre │
│ │
│ Mot de passe : [________] ❌ │
│ (5 caractères sur 8 minimum) │
│ │
└─────────────────────────────────────────────────┘Règles pour les messages d'erreur :
- Expliquer ce qui ne va pas
- Indiquer comment corriger
- Placer le message près du problème
- Utiliser un ton positif (pas de reproche)
8. Formulaires efficaces
Les formulaires sont souvent source de friction. Optimisez-les.
❌ Mauvais : Formulaire pénible
┌─────────────────────────────────────────────────┐
│ │
│ Nom* : [__________] │
│ Prénom : [__________] │
│ Email* : [__________] │
│ Téléphone : [__________] │
│ Adresse ligne 1* : [__________] │
│ Adresse ligne 2 : [__________] │
│ Code postal* : [__________] │
│ Ville* : [__________] │
│ Pays* : [__________] │
│ Message* : [__________] │
│ │
│ * Champs obligatoires │
│ │
│ [Envoyer] │
│ │
│ Trop de champs ! Abandon... │
│ │
└─────────────────────────────────────────────────┘✅ Bon : Formulaire minimaliste
┌─────────────────────────────────────────────────┐
│ │
│ Nous contacter │
│ │
│ Nom │
│ [________________________] │
│ │
│ Email │
│ [________________________] │
│ │
│ Message │
│ [________________________] │
│ [________________________] │
│ [________________________] │
│ │
│ ┌───────────────────────┐ │
│ │ Envoyer │ │
│ └───────────────────────┘ │
│ │
└─────────────────────────────────────────────────┘Bonnes pratiques formulaires :
- Demander uniquement les informations nécessaires
- Labels au-dessus des champs (pas à côté)
- Placeholder ≠ label (le placeholder disparaît)
- Validation en temps réel
- Bouton d'action avec verbe explicite ("Envoyer le message" > "Submit")
9. Chargement et performance
La lenteur est l'ennemi de l'expérience utilisateur.
| Temps de chargement | Perception |
|---|---|
| < 100 ms | Instantané |
| 100-300 ms | Rapide |
| 300 ms - 1 s | Acceptable |
| 1-3 s | Perceptible, utilisateur attend |
| > 3 s | Frustrant, risque d'abandon |
Indicateurs de chargement
┌─────────────────────────────────────────────────┐
│ │
│ Chargement < 1 seconde : │
│ Pas besoin d'indicateur │
│ │
│ Chargement 1-3 secondes : │
│ ⏳ Indicateur simple (spinner) │
│ │
│ Chargement > 3 secondes : │
│ ████████░░░░░░░░ 50% │
│ Indicateur de progression │
│ │
└─────────────────────────────────────────────────┘10. Cohérence
La cohérence crée de la prévisibilité et réduit l'effort cognitif.
| Élément | Doit être cohérent |
|---|---|
| Couleurs | Même bleu pour tous les liens |
| Boutons | Même style pour actions similaires |
| Icônes | Même icône = même action |
| Termes | Même mot pour le même concept |
| Position | Navigation toujours au même endroit |
❌ Mauvais : Incohérence
Page 1 : [ACHETER] (bleu)
Page 2 : [Commander] (vert)
Page 3 : [Add to cart] (rouge)✅ Bon : Cohérence
Page 1 : [Ajouter au panier] (bleu)
Page 2 : [Ajouter au panier] (bleu)
Page 3 : [Ajouter au panier] (bleu)Tableau récapitulatif
| Critère | Mauvaise pratique | Bonne pratique |
|---|---|---|
| Contraste | Ratio < 4.5:1 | Ratio ≥ 4.5:1 (AA) ou 7:1 (AAA) |
| Lignes de texte | > 90 caractères | 60-80 caractères |
| Zones cliquables | < 44px | ≥ 48×48px sur mobile |
| Espacement | Éléments collés | Multiples de 8px |
| Navigation | Menu caché, pas de fil d'Ariane | Menu visible, fil d'Ariane |
| Feedback | Aucun retour | Confirmation immédiate |
| Erreurs | "Erreur 422" | Message explicite + solution |
| Formulaires | 15 champs obligatoires | Minimum de champs |
| Chargement | Page blanche | Indicateur de progression |
| Cohérence | Styles variables | Système de design unifié |
Checklist de la Phase 4
Avant de passer à la phase suivante, vérifiez :
- [ ] Contrastes des couleurs validés (ratio ≥ 4.5:1)
- [ ] Longueur des lignes de texte optimisée (≈ 65-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.