Référence · UX · édition complète en 30 planches
Trente principes issus de la psychologie cognitive et de soixante-dix ans de recherche, qui décident de ce qu'un visiteur comprend, retient et pardonne. Pour chacun : la définition en français simple, des exemples concrets, et son application sur ce site même — parce qu'une loi qu'on n'applique pas n'est qu'une citation.
01Paul Fitts · 1954
Le temps pour atteindre une cible dépend de sa distance et de sa taille : plus c'est loin et petit, plus c'est lent — et raté.
Appliquée ici · Toutes les cibles tactiles de ce site font au moins 24 px (44 px pour le menu mobile), et le bouton Réserver vit à portée de pouce.
Lire en détail →
02William Hick & Ray Hyman · 1952
Le temps de décision croît avec le logarithme du nombre de choix. Chaque option ajoutée se paie en hésitation.
Appliquée ici · La navigation principale tient en trois entrées ; Blog et Reels ont déménagé dans le footer. Décider vite, c'est d'abord avoir peu à décider.
Lire en détail →
03Jakob Nielsen · 2000
Vos visiteurs passent l'essentiel de leur temps sur d'autres sites : ils attendent que le vôtre fonctionne comme ceux qu'ils connaissent déjà.
Appliquée ici · Logo en haut à gauche qui ramène à l'accueil, burger à droite, fil d'Ariane dans la médiathèque : l'originalité se dépense ailleurs que sur les conventions.
Lire en détail →
04George Miller · 1956
La mémoire de travail retient environ sept éléments (± deux). Au-delà, il faut regrouper — le « chunking ».
Appliquée ici · Les services sont présentés en six formats, jamais en catalogue ; les capacités s'affichent en pilules regroupées, pas en liste plate de vingt lignes.
Lire en détail →
05Max Wertheimer · 1923
L'œil interprète toute forme ambiguë comme la forme la plus simple possible : la perception économise ses efforts.
Appliquée ici · Le hero est une seule phrase sur une plaque d'encre — pas de collage, pas de widgets. Une idée, une forme.
Lire en détail →
06École de la Gestalt · ≈ 1920
Des éléments proches sont perçus comme un groupe. L'espacement est une information avant d'être une décoration.
Appliquée ici · Sur ce site, la hiérarchie passe par les blancs et les filets — presque jamais par des encadrés ou des fonds de couleur.
Lire en détail →
07Hedwig von Restorff · 1933
Dans une série homogène, l'élément qui diffère est celui qu'on retient. La distinction ne fonctionne que si elle est rare.
Appliquée ici · Une seule couleur d'accent — le vermillon — réservée à la zone privée et aux actions requises. Si tout est accentué, rien ne l'est.
Lire en détail →
08Hermann Ebbinghaus · 1885
On mémorise mieux le premier et le dernier élément d'une série que le milieu.
Appliquée ici · Les réalisations ouvrent et ferment sur les projets les plus forts, et la page d'accueil se termine sur le créneau disponible — la dernière chose lue.
Lire en détail →
09Masaaki Kurosu & Kaori Kashimura · 1995
Ce qui est beau paraît plus simple à utiliser — et on pardonne davantage ses défauts. L'esthétique est un capital de confiance.
Appliquée ici · La typographie, le grain de papier et les micro-animations de ce site ne sont pas cosmétiques : ils achètent la patience du visiteur.
Lire en détail →
10Larry Tesler · ≈ 1985
Toute tâche a une complexité incompressible. On ne peut pas la supprimer — seulement choisir qui la porte : l'utilisateur ou le système.
Appliquée ici · Les images uploadées dans l'admin sont converties, renommées et optimisées automatiquement : la complexité est portée par le code, pas par l'utilisateur.
Lire en détail →
11Daniel Kahneman · 1993
On ne juge pas une expérience à sa moyenne mais à son moment le plus intense et à sa fin.
Appliquée ici · La confirmation de réservation est soignée comme une page d'accueil, et le menu mobile se referme sur un « à bientôt — » manuscrit.
Lire en détail →
12Walter Doherty & Ahrvind Thadani · 1982
Sous 400 ms de temps de réponse, l'attention ne décroche pas : la conversation entre l'humain et la machine reste fluide.
Appliquée ici · Hero sans JavaScript, images AVIF, pages statiques : ce site vise un affichage bien sous la seconde, même en 4G.
Lire en détail →
13Jon Postel · 1980
Soyez libéral dans ce que vous acceptez, strict dans ce que vous produisez. La robustesse naît de la tolérance en entrée.
Appliquée ici · Les formulaires acceptent les espaces, accents et majuscules — la normalisation (slugs, emails) est le travail du code, jamais du visiteur.
Lire en détail →
14Guillaume d'Occam · XIVᵉ siècle
Entre deux solutions équivalentes, la plus simple est la meilleure. Chaque hypothèse ajoutée est une dette.
Appliquée ici · Quand le WebGL du hero coûtait dix secondes de calcul pour un effet que trois dégradés CSS savaient rendre, le WebGL est parti.
Lire en détail →
15Sheena Iyengar & Mark Lepper · 2000
Trop d'options ne ralentit pas seulement la décision : elle donne envie de ne pas décider du tout.
Appliquée ici · Trois formats de rendez-vous, six services, un seul CTA par écran — jamais de mur d'options.
Lire en détail →
16George A. Miller · 1956
Découpée en blocs signifiants, l'information devient lisible et mémorisable : un numéro n'est pas dix chiffres, mais cinq paires.
Appliquée ici · Le SIRET du footer, les dates et les fourchettes de prix sont composés par blocs — jamais en chapelet continu.
Lire en détail →
17Amos Tversky & Daniel Kahneman · 1972
Le jugement prend des raccourcis systématiques — ancrage, cadrage, confirmation. Le contexte décide de ce qu'on croit voir.
Appliquée ici · Les fourchettes de prix sont annoncées avant le premier appel : l'ancrage travaille pour la relation, pas contre elle.
Lire en détail →
18John Sweller · 1988
Chaque élément à traiter puise dans une ressource mentale limitée. Ce que l'interface dépense manque à la tâche.
Appliquée ici · La réservation demande une seule chose à la fois : d'abord le créneau, ensuite seulement le brief.
Lire en détail →
19Mihály Csíkszentmihályi · 1975
L'absorption totale naît quand le défi égale la compétence, sans interruption. Chaque friction en expulse.
Appliquée ici · Dans la médiathèque, upload, conversion et rangement s'enchaînent sans changer de page : rien ne casse l'élan.
Lire en détail →
20Clark Hull · 1932
Plus la fin approche, plus on accélère : l'effort perçu diminue avec la distance restante.
Appliquée ici · La réservation affiche sa progression dès le premier clic — une fin visible est une fin qu'on atteint.
Lire en détail →
21Stephen Palmer · 1992
Des éléments enclos dans une même zone sont perçus comme un groupe — plus fortement encore que par la proximité.
Appliquée ici · Chaque loi de cette page vit dans sa carte : le filet qui l'entoure suffit à dire « ceci va ensemble ».
Lire en détail →
22École de la Gestalt · 1923
Les éléments qui se ressemblent sont perçus comme liés : la forme et la couleur créent des familles.
Appliquée ici · Tous les liens du site portent le même soulignement à filet — la forme annonce la fonction, partout.
Lire en détail →
23Stephen Palmer & Irvin Rock · 1994
Des éléments reliés par un trait sont perçus comme un tout — le lien visuel l'emporte sur toute autre loi de groupement.
Appliquée ici · Dans la frise des projets clients, les jalons sont cousus par un trait : l'appartenance se lit sans légende.
Lire en détail →
24Kenneth Craik · 1943
Chacun aborde une interface avec une idée préconçue de son fonctionnement. Elle réussit quand elle s'y conforme — ou l'enseigne.
Appliquée ici · Le calendrier de réservation ressemble à un calendrier : des cases, des semaines, aujourd'hui cerclé. Aucune notice.
Lire en détail →
25John M. Carroll & Mary Beth Rosson · 1987
Personne ne lit la documentation : on agit d'abord, on comprend ensuite. L'interface doit enseigner en cours d'usage.
Appliquée ici · La médiathèque s'apprend par ses raccourcis affichés en pied d'écran — pas par un mode d'emploi que nul n'ouvrirait.
Lire en détail →
26Vilfredo Pareto · 1896
80 % des effets viennent de 20 % des causes. L'essentiel du soin doit aller à l'essentiel de l'usage.
Appliquée ici · Trois pages concentrent l'essentiel des visites — réalisations, services, réserver. Elles reçoivent l'essentiel du polish.
Lire en détail →
27Cyril N. Parkinson · 1955
Toute tâche s'étale jusqu'à remplir le temps qui lui est alloué. Les contraintes courtes produisent des décisions nettes.
Appliquée ici · Les rendez-vous sont cadrés à 30 minutes, pas « une heure par défaut » : le cadre fait le rythme.
Lire en détail →
28Colin Cherry · 1953
On ne voit que ce sur quoi l'attention est dirigée ; le reste disparaît littéralement — même un gorille au milieu de l'écran.
Appliquée ici · Un seul élément saillant par écran, maximum : l'attention ne peut être dirigée que vers une chose à la fois.
Lire en détail →
29Alan Baddeley & Graham Hitch · 1974
Trois ou quatre éléments actifs à la fois, pas davantage. L'interface doit se souvenir à la place de l'utilisateur.
Appliquée ici · Le fil d'Ariane de la médiathèque garde le chemin sous les yeux : rien à retenir, tout à voir.
Lire en détail →
30Bluma Zeigarnik · 1927
Les tâches inachevées occupent l'esprit davantage que les tâches finies : l'incomplet réclame sa fin.
Appliquée ici · Le badge « alt manquant » de la médiathèque laisse la tâche ouverte à dessein — l'inachevé travaille pour la qualité.
Lire en détail →