Compétence en Psychologie UX
Couche consultative pour les décisions de conception web. Met en lumière les principes de psychologie comportementale pertinents lors de la conception de pages et de composants. Il s'agit d'une entrée pondérée — elle informe les décisions, mais ne remplace pas le jugement esthétique, l'identité de marque ou la direction créative.
Quand l'utiliser
À invoquer après la création ou la conception de pages, de composants ou de flux. La compétence fonctionne mieux comme couche de révision — construisez d'abord, puis appliquez la lentille psychologique pour trouver ce qui vous manque :
- Pages d'accueil, pages de tarification, flux d'onboarding
- Entonnoirs d'abonnement/de conversion
- Mises en page de tableaux de bord et présentation des données
- Navigation et architecture de l'information
- Pages produits et processus de paiement e-commerce
- Toute page où vous souhaitez que les utilisateurs effectuent une action spécifique
Processus de décision
Une fois activée, suivez cet ordre :
- Identifiez le type de page — page d'accueil, tarification, onboarding, tableau de bord, paiement, etc.
- Extrayez les 3 à 5 principes les plus pertinents parmi les prescriptions par type de page ci-dessous
- Pour chaque principe, précisez : ce qu'il est → comment l'appliquer à CETTE page spécifique → à quoi ressemble l'anti-modèle
- Pondérez par rapport aux contraintes — l'identité de marque, l'accessibilité et les exigences techniques ont toujours la priorité
- Recommandez des changements spécifiques et implémentables — pas de conseils abstraits. Montrez quoi modifier dans le balisage, la mise en page ou le texte. Si vous pouvez pointer une ligne de code, faites-le.
Comment pondérer
Les principes de psychologie sont une entrée parmi d'autres. La hiérarchie de pondération :
- Identité de marque et vision créative (la plus élevée — le site doit être à la fois beau et pertinent)
- Accessibilité et utilisabilité (non négociable — conformité WCAG, cibles tactiles, contraste)
- Qualité technique (performance, SEO, conception responsive)
- Principes de psychologie (cette compétence — influence subtile, pas de manipulation agressive)
Ne sacrifiez jamais l'esthétique ou la confiance des utilisateurs pour un effet psychologique. Si un principe entre en conflit avec une bonne conception, la bonne conception l'emporte.
Ce que cette compétence N'EST PAS
- PAS un manuel de dark patterns — chaque principe ici est une application strictement éthique
- PAS un système de conception complet — elle enrichit les compétences de conception existantes
- PAS un substitut à la recherche utilisateur — les données utilisateur réelles battent toujours la théorie
- PAS une liste de contrôle rigide — utilisez les principes qui correspondent, ignorez ceux qui ne conviennent pas
Prescriptions par type de page (en ligne)
Les principes principaux par type de page, autonomes pour une consultation rapide. Voir knowledge/page-prescriptions.md pour des conseils détaillés et les erreurs courantes.
Page d'accueil / Landing Page
| Principe | Application |
|---|---|
| Premières impressions | Le héros communique la valeur en moins de 3 secondes. Formée en 50 ms — pas de seconde chance. |
| Ancrage | Commencez par votre indicateur ou affirmation le plus fort. Le premier nombre vu définit la référence. |
| Preuve sociale | Des chiffres réels visibles tôt (utilisateurs, résultats, historique). Les affirmations vagues ne convertissent pas. |
| Parfum d'information | Navigation claire — l'utilisateur sait exactement où aller ensuite. |
| Esthétique-utilisabilité | Le soin visuel gagne la confiance avant même le contenu. Ce qui est beau semble plus facile à utiliser. |
Tarification / Abonnement
| Principe | Application |
|---|---|
| Ancrage | Affichez le niveau premium en premier ou le plus visible visuellement. Tout le reste semble être une bonne affaire. |
| Aversion aux pertes | Formulez autour de ce que les utilisateurs gratuits MANQUENT, pas seulement de ce que les utilisateurs payants obtiennent. Perdre fait 2x plus mal. |
| Effet de défaut | Pré-sélectionnez le niveau recommandé. La plupart des utilisateurs ne modifient jamais les valeurs par défaut. |
| Engagement/cohérence | Les utilisateurs qui ont déjà utilisé des fonctionnalités gratuites sont prêts à s'abonner — chaque étape mène à la suivante. |
Onboarding / Inscription
| Principe | Application |
|---|---|
| Engagement progressif | Petite action gratuite d'abord, compte ensuite, paiement en dernier. |
| Charge cognitive | Une question par écran bat un long formulaire. Supprimez tout ce qui n'est pas essentiel. |
| Effet Zeigarnik | Affichez la progression (étape 2 sur 4). Les tâches incomplètes titillent — les utilisateurs reviennent pour finir. |
| Réciprocité | Donnez de la valeur avant de demander des informations. Accès gratuit à un outil, aperçu ou exemple de résultat. |
Tableau de bord / Affichage de données
| Principe | Application |
|---|---|
| Regroupement | Regroupez les données par catégorie ou priorité — pas une seule liste géante. |
| Mémoire spatiale | Mise en page cohérente pour que les utilisateurs de retour trouvent les choses instantanément. Ne déplacez pas les éléments. |
| Satisfaisance | Mettez en avant l'information la plus importante. Les utilisateurs choisissent la première option acceptable. |
| Reconnaissance plutôt que rappel | Affichez le contexte complet (étiquettes, horodatages, icônes) — ne forcez pas les utilisateurs à se souvenir. |
Paiement
| Principe | Application |
|---|---|
| Charge cognitive | Option de paiement sans compte. Champs de formulaire minimaux. Une décision à la fois. |
| Transparence | Affichez TOUS les coûts avant l'étape de paiement. Les frais surprises sont la cause n°1 d'abandon. |
| Aversion aux pertes | Badges de confiance et garanties À CÔTÉ du bouton de paiement, pas dans le pied de page. |
| Effet de défaut | Pré-sélectionnez l'expédition standard. Pré-cochez "Enregistrer les informations". Réduisez les décisions. |
Page À propos / Confiance
| Principe | Application |
|---|---|
| Autorité | Méthodologie, sources de données, expertise de l'équipe — prouvez que vous savez ce que vous faites. |
| Hiérarchie de la confiance | Cette page sert les utilisateurs aux niveaux 2-3 (intérêt → confiance). Ne demandez pas la vente ici. |
| Transparence | Soyez honnête sur les limites, pas seulement sur les forces. La vulnérabilité construit la confiance. |
Exemples d'implémentation au niveau du code
Ancrage (page de tarification)
Avant — tous les niveaux égaux, pas d'ancrage :
<div class="plans">
<div class="plan">Basique — 19 €/mois</div>
<div class="plan">Pro — 49 €/mois</div>
<div class="plan">Entreprise — 99 €/mois</div>
</div>
Après — Pro ancré comme valeur par défaut visuelle :
<div class="plans">
<div class="plan">Basique — 19 €/mois</div>
<div class="plan featured"> <!-- visuellement proéminent, pré-sélectionné -->
<span class="badge">Le plus populaire</span>
Pro — 49 €/mois
</div>
<div class="plan">Entreprise — 99 €/mois</div>
</div>
Pourquoi : Le niveau mis en avant devient l'ancrage. Basique semble être une bonne affaire en comparaison. Entreprise existe pour faire paraître Pro raisonnable. Le badge "Le plus populaire" ajoute une preuve sociale.
Aversion aux pertes (CTA d'abonnement)
Avant — formulé en termes de gain :
<button>Obtenir l'accès Premium</button>
<p>Débloquez toutes les fonctionnalités et le contenu premium.</p>
Après — formulé en termes de perte :
<button>Conserver mon accès Premium</button>
<p>Sans Premium, vous perdrez l'accès aux analyses quotidiennes,
aux tableaux de bord sauvegardés et au support prioritaire.</p>
Pourquoi : "Vous perdrez l'accès" déclenche l'aversion aux pertes (~2x plus fort que les gains équivalents). Le CTA utilise "Conserver" — le présentant comme la protection de quelque chose qu'ils possèdent déjà.
Effet Zeigarnik (progression d'onboarding)
Avant — aucune indication de progression :
<form>
<h2>Parlez-nous de vous</h2>
{/* 8 champs sur une seule page */}
</form>
Après — étapes avec progression visible :
<div className="progress-bar">
<div className="step completed">Profil</div>
<div className="step active">Préférences</div> {/* actuel */}
<div className="step">Révision</div>
</div>
<form>
<h2>Étape 2 sur 3 — Vos préférences</h2>
{/* 2-3 champs seulement */}
</form>
Pourquoi : Les barres de progression incomplètes créent une tension psychologique. Les utilisateurs reviennent pour terminer ce qu'ils ont commencé. Diviser 8 champs en 3 étapes de 2-3 champs réduit la charge cognitive ET crée l'attrait de l'achèvement.
Charge cognitive (Paiement)
Avant — création de compte obligatoire :
<h2>Créer un compte pour continuer</h2>
<input placeholder="Email" />
<input placeholder="Mot de passe" />
<input placeholder="Confirmer le mot de passe" />
<button>Créer un compte et payer</button>
Après — paiement sans compte avec création de compte différée :
<h2>Paiement</h2>
<input placeholder="Email (pour le reçu)" />
<button>Payer maintenant</button>
<p class="subtle">Vous souhaitez enregistrer vos informations pour la prochaine fois ?
<a href="/create-account">Créez un compte</a> après le paiement.</p>
Pourquoi : Chaque champ supplémentaire est un point de décision qui provoque l'abandon. Obtenez la vente d'abord. La création de compte est une petite demande APRÈS qu'ils se soient déjà engagés (principe d'engagement/cohérence).
Catégories de principes (11)
| Catégorie | Nombre | Idée centrale |
|---|---|---|
| Attention | 4 | Les utilisateurs voient moins que ce que vous pensez |
| Gestalt | 8 | Le regroupement visuel guide la compréhension |
| Mémoire | 10 | La reconnaissance bat le rappel ; regroupez tout |
| Sensemaking | 3 | Les modèles mentaux façonnent les attentes |
| Prise de décision | 5 | Moins de choix, des résultats plus clairs |
| Moteur/Interaction | 3 | Grandes cibles, réponses rapides |
| Motivation | 4 | Autonomie + compétence + appartenance |
| Biais cognitifs | 10 | Les valeurs par défaut persistent ; les premières impressions ancrent |
| Persuasion | 9 | Confiance avant la demande ; prouver avant de promettre |
| Émotion | 6 | Le beau semble plus facile ; le plaisir gagne la loyauté |
| Éthique | 3 | Ligne claire entre persuasion et manipulation |
Total : 65 principes — voir knowledge/principles.md pour la base de données complète avec définitions et implications de conception.
Anti-modèles (À ne jamais faire)
- Compteurs de rareté factices — si ce n'est pas réel, ne l'affichez pas
- Confirmshaming — "Non, je ne veux pas économiser de l'argent" est manipulateur
- Coûts cachés au paiement — la cause n°1 d'abandon de panier
- Continuité forcée — les abonnements difficiles à résilier ruinent toute confiance
- Mésinformation — astuces visuelles pour forcer des clics erronés
- Preuve sociale factice — témoignages fabriqués ou chiffres gonflés
- Options par défaut obscures — pré-cocher des options que l'utilisateur n'a pas demandées
- Motel à cafards — facile d'entrer, impossible de sortir
Source
Principes dérivés du guide d'étude "Psychology for UX" de NN/g (112 ressources dans 11 catégories), adaptés en motifs de conception actionnables. Fondements académiques : Kahneman (Théorie des perspectives), Norman (Conception émotionnelle), Cialdini (Influence), Hick, Fitts, Miller, Zeigarnik.