Lois de l'UX
Une boîte à outils pratique de 30 principes expliquant comment les gens voient, retiennent, décident et agissent — chacun traduit en décisions que vous pouvez prendre dans une interface réelle. Ce ne sont pas des opinions de style. Ils sont issus de la recherche sur la perception et la cognition, et ils s'appliquent quelle que soit la plateforme, l'époque ou les tendances visuelles.
Utilisez cette compétence pour concevoir une nouvelle UI, diagnostiquer pourquoi un écran existant semble bancal, ou étayer une décision de conception par une raison plutôt qu'une préférence.
Comment effectuer un passage UX
- Nommez le symptôme. « Trop de boutons », « ça semble lent », « les gens abandonnent le formulaire », « personne ne remarque le CTA ». Les symptômes correspondent à des principes — l'index ci-dessous est organisé de cette façon.
- Extrayez les 1 à 3 principes pertinents et lisez leur entrée complète dans
reference/laws.md. Lisez le mécanisme et les pièges, pas seulement la définition — c'est là que se trouve la nuance utile. - Proposez un changement concret à cet écran, et citez le principe par son nom pour que le raisonnement soit vérifiable. Pas « ajoutez plus de contraste » — plutôt : « Effet Von Restorff : faites en sorte que l'action principale soit le seul bouton rempli pour qu'il cesse de rivaliser avec les trois boutons fantômes qui l'entourent. »
- Vérifiez les conflits. Les principes se contredisent parfois. Plus d'espace blanc (Prägnanz) contre plus d'options visibles (découvrabilité). La simplicité (Occam) a un plancher (Tesler). Résolvez délibérément ; n'appliquez pas une loi aveuglément.
- Vérifiez avec les utilisateurs lorsque les enjeux sont réels. Ces principes prédisent bien le comportement, mais ils ne remplacent pas les tests — l'Effet Esthétique-utilisabilité prévient spécifiquement qu'un design agréable peut cacher des tâches dysfonctionnelles.
Les 30 principes, classés par ce qu'ils régissent
Perception et regroupement visuel (Gestalt) — comment l'œil organise un écran avant que quiconque ne lise un mot.
- Loi de proximité · Loi de la région commune · Loi de similarité · Loi de la connectivité uniforme · Loi de Prägnanz · Effet Von Restorff · Attention sélective · Effet esthétique-utilisabilité
Mémoire et attention — ce que les gens peuvent retenir dans leur tête en utilisant votre UI.
- Loi de Miller · Mémoire de travail · Regroupement · Effet de position sérielle · Charge cognitive · Effet Zeigarnik · Règle du pic et de la fin
Prise de décision — comment les choix sont faits, et où ils bloquent.
- Loi de Hick · Surcharge de choix · Biais cognitif · Rasoir d'Occam · Principe de Pareto
Interaction et performance — vitesse, effort, mouvement, élan.
- Loi de Fitts · Seuil de Doherty · Flux · Effet de gradient de but · Loi de Parkinson
Attentes et modèles mentaux — ce que les gens supposent avant même d'arriver.
- Loi de Jakob · Modèle mental · Paradoxe de l'utilisateur actif · Loi de Postel · Loi de Tesler
Index — utilisez-le quand…
| Principe | Utilisez-le quand… |
|---|---|
| Effet esthétique-utilisabilité | Vous devez savoir pourquoi un design plus joli est perçu comme « plus facile » — et pourquoi c'est un piège. |
| Surcharge de choix | Trop d'options font que les gens se figent, décident moins bien ou partent. |
| Regroupement | Un contenu dense ou de longues chaînes nécessitent un regroupement pour être scannables. |
| Biais cognitif | Les décisions s'écartent du « rationnel » — cadrage, valeurs par défaut, ancrage, confirmation. |
| Charge cognitive | L'interface demande au cerveau de retenir ou traiter trop d'informations à la fois. |
| Seuil de Doherty | Tout semble lent ; les réponses dépassent ~400ms ; vous avez besoin d'états de chargement. |
| Loi de Fitts | Dimensionner et placer des boutons, des liens et des cibles tactiles. |
| Flux | Maintenir l'immersion des personnes ; adapter le défi à la compétence ; éliminer les frictions. |
| Effet de gradient de but | Motiver l'achèvement ; progrès qui s'accélèrent près de la fin. |
| Loi de Hick | Le temps de décision augmente avec le nombre et la complexité des choix. |
| Loi de Jakob | Les utilisateurs s'attendent à ce que votre UI se comporte comme toutes les autres qu'ils connaissent. |
| Loi de la région commune | Regrouper avec des bordures, des cartes, des arrière-plans, des conteneurs. |
| Loi de proximité | Regrouper par simple espacement — ce qui est proche est perçu comme lié. |
| Loi de Prägnanz | Réduire la complexité visuelle ; l'œil préfère la lecture la plus simple. |
| Loi de similarité | Un aspect similaire implique une fonction similaire (liens vs. texte brut). |
| Loi de la connectivité uniforme | Relier les éléments associés avec des lignes, des cadres, des conteneurs partagés. |
| Modèle mental | Correspondre à la façon dont les utilisateurs croient déjà que la chose devrait fonctionner. |
| Loi de Miller | La mémoire de travail est limitée (~7±2 éléments) ; regroupez — mais ne limitez pas trop. |
| Rasoir d'Occam | Supprimez chaque élément qui ne gagne pas sa place. |
| Paradoxe de l'utilisateur actif | Les gens ne liront pas la documentation ; enseignez dans le contexte, en ligne, juste à temps. |
| Principe de Pareto | Concentrez les efforts sur les ~20% de fonctionnalités qui génèrent ~80% de la valeur. |
| Loi de Parkinson | Les tâches s'étendent pour remplir le temps ; raccourcissez les étapes, utilisez la saisie automatique, définissez des attentes. |
| Règle du pic et de la fin | Concevez délibérément le moment le plus intense et la fin. |
| Loi de Postel | Acceptez généreusement les entrées désordonnées ; produisez des sorties propres et prévisibles. |
| Attention sélective | Les gens filtrent les choses ; évitez la cécité aux bannières et la cécité au changement. |
| Effet de position sérielle | Les premiers et derniers éléments restent en mémoire ; placez les actions clés aux extrémités. |
| Loi de Tesler | Une certaine complexité est irréductible — laissez le système la porter, pas l'utilisateur. |
| Effet Von Restorff | Rendez la chose importante visuellement distincte (sans imiter une publicité). |
| Mémoire de travail | Favorisez la reconnaissance sur le rappel ; conservez l'état entre les écrans. |
| Effet Zeigarnik | Les tâches inachevées attirent l'attention ; utilisez des indicateurs de progression pour inciter à l'achèvement. |
Combinaisons prêtes à l'emploi
- Désencombrer un écran chargé → Rasoir d'Occam + Loi de proximité + Loi de Miller.
- Supprimer un flux qui semble lent → Seuil de Doherty + Effet de gradient de but + UI optimiste.
- Corriger une nouvelle fonctionnalité confuse → Loi de Jakob + Modèle mental + Paradoxe de l'utilisateur actif.
- Sauver un formulaire abandonné → Loi de Hick + Loi de Parkinson + Loi de Postel + indicateurs de progression (Zeigarnik / gradient de but).
- Améliorer une page d'accueil → Effet Von Restorff + Attention sélective + Effet de position sérielle + Règle du pic et de la fin.
Les entrées complètes — mécanisme, comment appliquer, pièges, et un exemple réel chacun — se trouvent dans reference/laws.md.