Chaque composant est montré dans toutes ses variantes et
tous ses états. Un composant qui n'a qu'un état heureux est un composant
à moitié fait.
Carte produit
Fiche 28 · carte-produit · 3 variantes · 4 états
A · Vitrine — la carte ne prend aucune décision :
elle nomme, situe, chiffre. C'est le défaut Catharsis, et le seul style au lancement : trois
articles. Whisker l'emploie pour ses quatre bacs, Oura pour ses trois bagues.
Le piège du titre long. À 185 px de large, un nom
français dépasse presque toujours. Le titre réserve deux lignes et sa hauteur est fixée,
sinon deux cartes voisines cessent de s'aligner.
Les états. Rupture — le prix reste lisible et la
fiche reste ouvrable, jamais un mur. Chargement — une ossature qui a la forme du
contenu attendu, donc la grille ne saute pas à l'arrivée des données.
B · Catalogue — la carte prend une décision :
laquelle j'ouvre. Visuel plein cadre 4:5, ajout rapide. Non retenu au lancement : sur
trois articles il crie « catalogue » et livre « échantillon ». Construit parce qu'il devient
une variante commutable dans l'éditeur de thème.
L'emplacement de la note reste vide, et c'est
délibéré. CatLang n'a jamais été vendu : aucune étoile, aucun nombre d'avis, nulle part —
même en maquette. Voir la fiche 03.
L'ordre est imposé — sur-titre, H1, phrase de
preuve, description tronquée à quatre lignes, liens frères, rayons, barre de contrôle, puis la
grille. C'est l'ordre de Gymshark, le seul du corpus à tout avoir, et c'est aussi son ordre de
DOM. Le compte ne va pas dans le titre, il va dans la barre : c'est une conséquence du
tri et du filtrage, pas une propriété du titre. Aucune preuve chiffrée sous le H1, et c'est délibéré : Whisker écrit « le choix n° 1,
plus de 2 millions de clients », CatLang n'a jamais été vendu. La ligne dit ce qui est vrai.
Boutique
Tous les produits
Quatre références, un seul appareil : tout ce qui est ici va avec CatLang.
CatLang, ses cartouches aromatiques et ses recharges de sacs. Un bac qui se vide seul, une odeur qui ne s'installe pas, et une application qui traduit ce que votre chat vous dit depuis toujours. Chaque accessoire de cette page est pensé pour le même appareil et pour le même geste : ne plus avoir à y penser. Les cartouches se remplacent en une seconde, sans outil ; les sacs sont découpés à la mesure du tiroir.
Description dépliée. Le texte complet reste dans le
DOM à l'état tronqué — la troncature est en CSS, jamais un chargement au clic : sinon il n'est
pas indexé. Le déclencheur est un button aria-expanded, pas un lien : il ne mène
nulle part.
Boutique
Tous les produits
CatLang, ses cartouches aromatiques et ses recharges de sacs. Un bac qui se vide seul, une odeur qui ne s'installe pas, et une application qui traduit ce que votre chat vous dit depuis toujours. Chaque accessoire de cette page est pensé pour le même appareil et pour le même geste : ne plus avoir à y penser. Les cartouches se remplacent en une seconde, sans outil ; les sacs sont découpés à la mesure du tiroir.
Variante bannière — désactivée par défaut. Quatre
marques sur six n'en ont pas, dont les deux du secteur de Catharsis. Quand elle existe, c'est
le modèle Litter-Robot : le texte dans un panneau plein à côté de l'image, jamais posé
dessus, et plafonné à 240 px. Les 379 px de Ridge coûtent 45 % du premier écran, et son texte
blanc repose sur une photo dont le contraste n'est garanti nulle part.
Cartouches aromatiques
Quatre parfums, une cadence : la bonne odeur au bon moment.
Cartouches
Boutique
La cartouche se loge dans le tiroir et se libère après chaque passage, jamais avant. Elle se remplace en une seconde, sans outil.
État long — un nom de collection à
rallonge. Le titre passe à la ligne et ne se tronque jamais : c'est le mot-clé de la
page et le seul repère du visiteur arrivé par un lien externe. La description, elle, garde ses
quatre lignes.
Boutique · Accessoires
Cartouches aromatiques et recharges de sacs compatibles CatLang première génération
CatLang, ses cartouches aromatiques et ses recharges de sacs. Un bac qui se vide seul, une odeur qui ne s'installe pas, et une application qui traduit ce que votre chat vous dit depuis toujours. Chaque accessoire de cette page est pensé pour le même appareil et pour le même geste : ne plus avoir à y penser. Les cartouches se remplacent en une seconde, sans outil ; les sacs sont découpés à la mesure du tiroir, et le pack réunit les trois.
États vide, chargement,
erreur. Vide : la collection n'a aucun produit publié — on dit lequel des deux
cas c'est, et on donne l'issue. Chargement : l'ossature a la forme du contenu attendu,
donc la page ne saute pas à l'arrivée des données. Erreur : ce qui a échoué, et la reprise.
Chargement de la description de la collection, dont l'ossature réserve exactement quatre lignes pour que la grille ne remonte pas quand le texte arrive.
États rupture, succes,
desactive. Rupture : toute la collection est en réapprovisionnement — dit une
seule fois, sans date, parce que la promesse de livraison a une seule source de vérité
dans la boutique (constat B4 : deux promesses contradictoires à 15 px d'écart). Succès : le
filtrage a abouti, le compte est déjà en role="status" et n'a pas besoin d'une
seconde région vivante qui parlerait par-dessus. Désactivé : collection en aperçu, barre
inerte, compte conservé.
Le déclencheur, fermé. Un mot et une icône,
jamais une icône seule — et il affiche la valeur courante. C'est le seul point où l'on
s'écarte des quatre marques : toutes affichent Sort nu, donc leur visiteur ignore
dans quel ordre il regarde après un rechargement ou un retour depuis une fiche. Si la place
manque à 390 px, c'est la valeur qui se coupe, jamais le mot.
Le tri n'a pas pu être appliqué.
L'ordre affiché est resté celui de la collection.
« Prix décroissant » n'existe plus pour cette collection.
La feuille, ouverte (data-ouvert posé en
dur — un tiroir fermé ne se voit pas sur une capture). Pas de titre, pas de bouton de
validation, pas de croix : le tri s'applique au choix de l'option et la feuille se ferme. C'est
le contraire de la feuille de filtres, et le contraste est délibéré — le tri est un
choix unique et immédiat, le filtrage une composition qu'on valide. Quatre options, pas huit, et Pertinence est coché sans être en tête : huit
options obligent Cuts à descendre à 36 px de pas pour tenir dans l'écran. L'état sélectionné se
signale trois fois : pastille pleine, coche à l'intérieur, libellé souligné.
États erreur, rupture,
vide. Rupture est le cas qu'on n'anticipe jamais : la valeur de tri mémorisée
dans l'URL n'existe plus pour cette collection. Elle reste visible, barrée, et l'ordre de repli
est nommé — sinon le visiteur croit avoir mal lu. Vide : un seul produit, rien à
trier ; le composant dit pourquoi il ne sert à rien ici.
Le tri n'a pas pu être appliqué.
L'ordre affiché est resté celui de la collection.
« Prix décroissant » n'existe plus pour cette collection.
États chargement, succes,
desactive, sur le déclencheur. Chargement : la grille se retrie, la valeur
passe en ossature de la largeur d'un libellé — pas de la largeur du bouton, sinon elle annonce
un contenu qui n'arrivera pas. Succès : la valeur choisie est affichée, c'est tout le retour
dont le composant a besoin. Désactivé : enable_sort = false, ou un seul produit.
Le tri n'a pas pu être appliqué.
L'ordre affiché est resté celui de la collection.
« Prix décroissant » n'existe plus pour cette collection.
Réglage par défaut de Catharsis :
enable_filters = false. Whisker et Litter-Robot vendent exactement ce
catalogue — un appareil, ses variantes, ses consommables — et n'exposent que le tri.
Un panneau de filtres sur quatre produits est un composant vide qui annonce un catalogue qu'on
n'a pas. Le composant est construit pour le jour où le catalogue le justifie, pas avant.
La feuille, ouverte. Une feuille basse, pas
un plein écran : Gymshark laisse 127 px de page visible derrière son voile, Cuts prend les
844 px et ne laisse qu'une flèche de retour dans le coin le plus dur à atteindre au pouce. Le
visiteur garde le contexte de ce qu'il filtre. Rond pour le tri, carré pour les facettes : la forme porte la cardinalité, et les deux
familles cohabitent dans le même panneau sans qu'aucun texte n'ait à l'expliquer. C'est le
meilleur détail du panneau de Gymshark et il ne coûte rien.
La barre d'action dit « Voir les N produits », jamais « Appliquer » ; elle porte le
compte dès l'ouverture à zéro facette cochée ; elle n'est jamais grisée ; et le nombre porte sa
propre encre, parce que c'est la donnée qui bouge et non le texte du bouton.
⚠ Question ouverte, déclarée non tranchée. « Le compte
de résultats se met-il à jour à la volée au cochage, ou seulement à la validation ? » Les deux
captures censées le prouver montrent en réalité le centre de préférences cookies OneTrust
(CAPTURES-DOUTEUSES.md) : la modale interceptait les clics, et l'outil a rendu
« succès » sur une facette jamais atteinte. Les deux comportements sont donc construits :
data-maj="direct" (le compte bouge au cochage) et
data-maj="validation" (il ne bouge qu'au clic sur la barre). Le fondateur
tranche. Ci-dessous, une facette est cochée et le compte est descendu de 12 à 5 — c'est
l'hypothèse « direct », montrée, pas affirmée.
Les puces de filtres actifs — ajoutées contre le
corpus. Aucune des quatre marques n'en a, et c'est un défaut, pas une doctrine : chez
Gymshark, panneau fermé, rien à l'écran ne dit qu'un filtre est posé. Une puce est
une seule cible : le libellé et la croix ensemble, jamais deux cibles de 16 px collées.
La puce visible fait 32 px, la cible en fait 44 — ce ne sont pas la même boîte.
État long : huit filtres empilés sur 390 px de large. Le rail défile
horizontalement ; la largeur se donne aux enfants, jamais au rail (piège B1).
L'état vide — le plus important du lot.
Une collection filtrée à zéro est le cas réel le plus fréquent, et le plus souvent bâclé. Il ne
dit pas seulement « rien » : il dit ce qui s'est passé (trois filtres posés en même
temps) et il donne l'issue, à un geste — retirer le filtre nommé, ou repartir de la
collection entière. Les puces restent au-dessus : c'est là que se retire un filtre.
États erreur, chargement,
rupture, desactive. Erreur : les facettes n'ont pas pu être
chargées — la collection reste consultable sans filtre, et c'est dit. Chargement : le compte de
la barre d'action passe en ossature de la largeur d'un nombre, le libellé reste lisible ; on
n'efface pas la phrase pour animer un chiffre. Rupture : une valeur de facette qui ne ramène
plus rien reste lisible et annoncée (« Réapprovisionnement · 0 »), jamais retirée en
silence — sinon le visiteur croit qu'elle n'a jamais existé.
Zéro défilement infini — décision unanime des six
marques, pas une préférence : il vole le pied de page, donc les mentions légales obligatoires
en France, casse le retour arrière et rend la position irrécupérable. Un seul bouton sur quatre franchit le plancher tactile de 44 px. Ridge fait 42, Cuts 43,
Litter-Robot 30 × 23 px sur le composant le plus cliqué en série de la page. Seul Gymshark
passe, à 52 px, et il y arrive par le rembourrage : la cible grandit avec le texte au
lieu d'être figée par une hauteur, donc elle survit à une traduction plus longue.
Le compteur est toujours là, et en role="status" : sans lui, « charger
plus » est un puits sans fond. Gymshark est le seul à l'afficher — dans un p sans
rôle, donc muet après un chargement. On prend le composant et on corrige le défaut.
Variante amont. C'est le seul mécanisme
du corpus qui résout le retour depuis une fiche produit : la position vit dans l'URL, donc la
page est partageable et restaurable — et sans ce bouton, l'amont de la collection devient
inaccessible. Asymétrie voulue : le bouton d'aval est plein, celui d'amont est fantôme.
Le premier est l'action attendue, le second un rattrapage. Le glyphe est avant le
texte : la flèche pointe vers ce qu'on va récupérer.
Variante numerotee — le socle sans JS.
De vraies URL ?page=n, indexables et partageables, avec rel="prev" /
rel="next". La couche « charger plus » s'écrit par-dessus, jamais à la place. La
page courante porte un texte accessible explicite (« Vous êtes sur la page 1 »), pas
seulement un style : c'est le seul bon point de Litter-Robot, et il est à voler. Chaque numéro
porte le mot dans son nom accessible — « Page 3 », jamais « 3 ».
On garde son dessin (pastille pleine ambre) et on corrige deux cotes : la cible passe
de 30 × 23 px à 44 × 44, et le chiffre passe du blanc à l'encre profonde, parce que blanc sur
ambre clair ne tient pas le contraste.
État long — douze pages. Au-delà de cinq
cibles de 44 px, la rangée ne tient plus dans 390 px : c'est le plafond du nombre de numéros
affichables, et les sauts sont la seule réponse honnête. Le compteur, lui, porte un nombre à
quatre chiffres sans casser l'alignement (chiffres tabulaires).
États chargement, succes,
erreur. Chargement : le bouton reste en place et devient inerte — s'il
disparaissait, la page se raccourcirait sous le doigt au moment précis où le visiteur vient de
cliquer dessus. Succès : tout est chargé, le bouton est remplacé par le compteur
final ; il ne reste jamais affiché et désactivé, parce qu'un bouton grisé se clique quand même
et que ne rien voir se passer est pire que ne pas voir le bouton.
États rupture, vide,
desactive. Rupture : le lot demandé n'existe plus — la collection a changé
sous l'URL partagée. On le dit et on ramène à un endroit qui existe, au lieu de rendre une
grille vide sans explication. Désactivé, enfin, est le réglage réel de Catharsis :
quatre références n'ont pas de problème de pagination, et leur en donner un serait fabriquer un
composant pour un besoin qui n'existe pas.
Ce qui n'est pas su, et qui n'est pas inventé. Le
Load More ↓ de cutsclothing.com n'a jamais pu être capturé — leur front-end ne
s'hydrate pas dans un Chrome sans interface, et la seule tentative a rendu trois PNG
parfaitement nets d'une page noire aux images cassées. Son libellé est attesté par un
relevé de texte ; sa géométrie ne l'est pas. La cote retenue ici est donc celle de
Gymshark, qui est mesurée deux fois.
La collection assemblée
Fiches 31 + 30 + 29 + 28 + 32 · c'est ceci qui se juge, pas les pièces isolées
⚠ Douze produits, dont huit inventés. La collection
réelle en compte quatre — CatLang 599,00 €, Cartouche aromatique 19,90 €, Sacs de
déchets 14,90 €, Pack CatLang Essentiel 619,00 € (vérifiés à l'API Admin le 2026-08-22). Les
huit autres sont des remplaçants déclarés (data-placeholder sur la grille)
et n'existent pas. Ils sont là parce qu'un filtre, un tri et une pagination ne se
voient pas sur quatre vignettes : on ne juge pas un composant vide.
Aucune note, aucun avis, aucune étoile nulle part — y compris ici.
Boutique
Tous les produits
Quatre références, un seul appareil : tout ce qui est ici va avec CatLang.
CatLang, ses cartouches aromatiques et ses recharges de sacs. Un bac qui se vide seul, une odeur qui ne s'installe pas, et une application qui traduit ce que votre chat vous dit depuis toujours. Chaque accessoire de cette page est pensé pour le même appareil et pour le même geste : ne plus avoir à y penser.
La même collection, filtrée à zéro. C'est l'état que
personne ne dessine et que tout le monde rencontre. La barre garde sa place et son compte
(« 0 produit »), les puces disent quels filtres sont posés, et l'issue est à un
geste — retirer le filtre nommé. La grille ne laisse pas un blanc : elle est remplacée par la
phrase qui explique.
La même collection, en cours de rechargement après
une facette cochée. Une ossature de cartes, jamais un écran blanc : la grille garde
exactement la hauteur qu'elle aura, donc la page ne saute pas et le pouce ne clique pas à côté
au moment où le contenu arrive.
Nouveau