Sept composants, fiches 21 à 27. Chacun dans toutes ses
variantes et tous ses états. Un composant qui n'a qu'un état heureux est un
composant à moitié fait.
Le fil conducteur du lot. Les sept fiches disent la
même chose de sept façons : ne pas simuler une profondeur qui n'existe pas. Trois
articles ne justifient ni méga-menu à deux colonnes, ni recherche prédictive, ni fil d'Ariane
à trois niveaux, ni pied de page à quatre colonnes. La place ainsi libérée va aux devoirs —
légal, aide, marché, paiement — qui, eux, ne dépendent pas de la taille du catalogue.
Un message, aucune commande. Gymshark fait tourner
quatre messages parce qu'il porte quatre programmes commerciaux distincts (parrainage,
étudiants, e-mail, livraison) ; Catharsis en a un. Pas de carrousel supprime d'un coup le
bouton pause, les flèches et la région live — et le défaut invisible qui va avec : Slick
duplique ses diapositives, donc le vidage texte de Gymshark rend ses quatre messages
dix fois. Quarante promotions annoncées avant le logo.
Le graphite, jamais l'ambre. L'ambre
#F2B361 est le signal du CTA primaire ; s'en servir comme fond
décoratif lui retire sa valeur de signal partout ailleurs. Le bandeau et le pied de page
partagent le même graphite : le haut et le bas encadrent la page dans une seule couleur.
Variante chaude — le sable de la marque, pour une
attention plutôt qu'une promesse commerciale.
Emballage sans plastique, imprimé en France.
Variante discrète — le parti pris d'Oura : aucun
fond propre, le message posé sur la porcelaine se lit comme la première ligne du document et
non comme une barre.
Précommandes ouvertes. Premier lot expédié à son arrivée.
État long — 103 caractères. Le message passe à deux
lignes puis se clampe : au-delà, le bandeau devient une section et vole le premier écran. Il
n'est jamais tronqué à l'horizontale — un message coupé au milieu d'un mot est pire qu'un
message absent.
Livraison offerte en France métropolitaine dès 60 € d'achat, retours gratuits sous 30 jours, garantie 24 mois.
États vide et désactivé — rien ne se rend, et c'est
le point. Un bandeau sans message ne doit pas laisser une barre de couleur vide de 48 px :
« un rendu vide ne ressemble pas à une erreur, il ressemble à un espacement ». Les deux
rendus ci-dessous sont donc invisibles à 390 px, volontairement.
(aucun message configuré)
Masqué sur téléphone, visible au-delà de 768 px.
En-tête
Fiche 22 · en-tete · 3 variantes · 4 états
Quatre objets, pas cinq. Menu · logo centré ·
recherche · panier. Pas de compte : il n'y a pas d'espace client au lancement, et un
pictogramme qui mène à une page de connexion vide est une promesse non tenue — Whisker, Oura
et Jones Road s'en passent tous les trois. Le jour où il existe, il s'écrira « Compte » en
toutes lettres : aucune icône de visage dans cette bibliothèque.
La grille en trois colonnes n'est pas un détail de mise
en page, c'est la correction d'un défaut mesuré. Chez Gymshark le lien du logo fait
314 × 24 px à partir de x = 38 : il recouvre géométriquement la recherche (x = 60) et le
compte (x = 286). Seul l'ordre de pile décide alors qui reçoit le tap, et un tap au bord d'un
pictogramme peut partir vers l'accueil. Ici le logo est dimensionné à son dessin dans une
colonne auto — le recouvrement est impossible, pas improbable.
Peau « sur média » — sur un héros pleine image :
fond transparent, marque et pictogrammes en porcelaine. La scène est assombrie pour figurer le
héros ; aucune image générée n'entre dans cette phase.
Peau « épinglée » — dès le premier pixel de
défilement : porcelaine opaque, filet 1 px, transition ≤ 200 ms. Jamais de
backdrop-filter : le flou coûte un repaint par image sur téléphone et brouille
le logo. Et pas d'auto-masquage à la Gymshark — sur une fiche de 12 000 px, obliger l'acheteur
à remonter pour faire réapparaître la barre ajoute un geste à chaque décision.
États du panier. Vide : aucune pastille — le
0 gravé en permanence dans le pictogramme de Jones Road affiche en continu que le
panier est vide. Chargement : une ossature, jamais un « 0 » provisoire, parce qu'un zéro faux
est un message alors qu'une ossature est une attente. Long : douze articles et un nom de
marque à rallonge — la colonne centrale cède avant que les cibles de 44 px ne bougent.
État désactivé — parcours de caisse (fiche 46) :
l'en-tête reste pour la marque et la sortie de secours, mais menu et recherche deviennent
inertes plutôt que de disparaître. Une barre qui perd deux objets d'une page à l'autre se lit
comme un bug.
La fiche s'appelle « méga-menu » et conclut qu'il n'y en
a pas. Sept rangées, aucun niveau 2, aucun accordéon : une rangée qui ouvre une rangée pour
trois articles est une porte qui ouvre sur une porte. L'ordre suit les deux couloirs de
Whisker sans doubler les boutons — « CatLang » achète, « Comprendre CatLang » explique, et un
filet sépare les deux états mentaux.
Le tiroir laisse le chrome visible (modèle Jones
Road, mesuré 390 × 720 px à y = 124). L'acheteur garde le logo, le panier et le repère de la
page. Le chevron est à abscisse fixe : chez Ridge la flèche est posée juste après le
libellé, donc à une abscisse différente à chaque rang — l'œil perd sa ligne de balayage et la
zone cliquable change de forme à chaque rangée.
Variante plein écran — construite, non retenue.
Gymshark couvre bandeau et en-tête ; il faut ensuite y remettre une recherche, une croix, un
cœur et un ruban d'onglets : quatre affordances pour réparer ce que la couverture totale a
détruit. Un tiroir qui laisse l'en-tête en place n'a besoin d'aucune des quatre. Reste
disponible comme réglage d'éditeur.
État long — un libellé de navigation ne se tronque
jamais. Un titre de carte coupé reste devinable ; un menu illisible ne se contourne pas. Le
libellé passe à deux lignes, la rangée grandit, et c'est l'abscisse du chevron qui
reste fixe, pas la hauteur de la rangée.
États chargement et erreur. Le menu arrive par la
Section Rendering API, donc après le premier écran : l'ossature a la forme des rangées, au
même pas de 56 px, et rien ne saute à l'arrivée des libellés. En erreur, le tiroir dit ce qui
a échoué et laisse une issue — un tiroir vide ne ressemble pas à une panne, il ressemble à un
menu qui n'a rien dedans.
État désactivé — parcours de caisse : la navigation
reste visible comme repère mais devient inerte. Même raisonnement que l'en-tête désactivé.
Construite complète, éteinte par défaut. La fiche
tranche : pas de recherche prédictive au lancement. Sur « litière », elle rendrait la fiche que
la première rangée du menu donne déjà en un tap. Elle est écrite ici parce que le jour où un
contenu éditorial existe, elle s'allume par un réglage — pas par un chantier.
Deux rubriques titrées, jamais entrelacées : des mots
d'abord, des objets ensuite (modèle Gymshark, SUGGESTIONS puis
PRODUCTS). Le corps du champ est à 16 px — plancher, pas préférence :
Gymshark est à 14 px, et sous 16 px Safari iOS zoome à la mise au point. La page saute,
l'échelle change, et c'est invisible aussi bien en audit de bureau que sur les captures,
puisque le zoom survient après la mise au point.
État vide — requête sans correspondance. Jamais un
panneau blanc : une phrase qui dit ce qui s'est passé, et le catalogue entier en trois liens.
Le « TRENDING SEARCHES » à cinq termes de Gymshark est un dispositif de catalogue large ; il
n'a rien à arbitrer ici.
Chargement et erreur — le piège majeur de la fiche
est que chargement, zéro résultat et panne se ressemblent à
l'écran. Chez Jones Road : champ rempli, croix de vidage apparue, curseur actif… et rien. Tout
a l'air de fonctionner. Chacun des trois porte donc son propre texte, et l'ossature a la forme
exacte du contenu attendu.
État long — une requête de 52 caractères. Le bouton
« Annuler » est en flex: none : le champ ne le pousse jamais hors de l'écran. Les
suggestions passent à la ligne plutôt que d'être tronquées — une suggestion coupée ne dit plus
ce qu'on gagne à la choisir, ce qui est sa seule fonction.
Variante « champ seul » et état désactivé — la
configuration réelle du lancement. Le formulaire soumet vers /recherche même sans
JavaScript : c'est le socle de Jones Road, et c'est le bon. En variante champ-seul, le
balisage n'émet nirole="combobox"niaria-expanded — annoncer une liste d'options qui n'existe pas est pire que ne
rien annoncer.
Le fait qui commande la fiche : sur les 58 vidages
texte des 11 marques capturées, il y a zéro chaîne « Accueil › Catégorie › Produit » et
zéro caractère ›. Aucune marque premium ne sert de fil multi-niveaux à 390 px.
Le défaut Catharsis est donc le surtitre de Gymshark : le parent au-dessus du titre,
deux fois plus petit, en gris, sans chevron. Zéro rangée ajoutée.
Variante retour — le motif Dyson : ‹
Aspirateurs, un seul parent, souligné. Ce n'est pas un chemin, c'est un bouton retour de
rayon : « d'où viens-je et comment j'y retourne ». Réservé aux pages atteintes depuis une
liste — jamais à la fiche produit, où ces 40 px appartiennent à la galerie et au prix.
Variante chemin — construite pour le jour où elle serait
imposée. Séparateurs en CSS et non dans le texte : chez Apple le › est un
nœud de contenu, donc un lecteur d'écran l'annonce entre chaque maillon. Le maillon courant
porte aria-current="page" et n'est pas cliquable — un lien vers la page où l'on
est déjà est une cible tactile qui ne fait rien.
État long — cinq niveaux. C'est précisément
l'arborescence que Catharsis n'a pas ; elle est montrée pour prouver que le composant
tient sans déborder. Le fil retourne à la ligne : jamais de overflow-x, qui
cacherait les maillons du milieu et rejouerait le piège B1.
Variante sœurs — la règle 4, et la meilleure des
quatre. Plutôt qu'un chemin ascendant, une rangée latérale : sur la fiche d'un accessoire, les
sœurs sont le reste du catalogue. C'est directement de la vente croisée, ce qu'un fil d'Ariane
ne fait jamais.
États vide et désactivé. Vide, c'est le piège
Shopify : sur /collections/x/products/y l'objet collection est
renseigné, sur /products/y atteint depuis le menu il est nul — le même
produit affiche donc parfois un parent, parfois rien. Rien ne se rend à l'écran (les deux
rendus ci-dessous sont vides, volontairement) et le BreadcrumbList JSON-LD
continue de sortir dans les deux cas : les moteurs de réponse lisent la position dans le
graphe même quand l'écran ne montre rien.
Un globe, jamais un drapeau. Ce n'est pas une
préférence graphique : un drapeau n'est ni un pays, ni une langue, ni une devise. Un
francophone belge, suisse ou algérien lit le tricolore comme une exclusion, et à 24 px
plusieurs drapeaux européens sont indiscernables. La deuxième option de la feuille Gymshark
est un rond sans un seul mot.
La feuille ouverte. Le libellé porte les deux
informations — langue et pays — parce qu'elles ne varient pas ensemble, plus la
devise dès qu'elle change : sur une boutique dont l'article principal est à
599,00 €, la devise est l'information la plus sensible de la page.
La ligne de sortie de secours vient de Whisker, seule marque des six à prévoir le client hors
zone — sur un appareil à 599 € expédié de France, c'est un client à ne pas perdre.
Variante rangée — le même contrôle posé dans une
liste (dernière rangée du tiroir). Il perd sa pilule et prend la forme de ses voisines : un
contrôle qui garde son contour au milieu d'une liste de liens se lit comme une erreur de mise
en page.
États long, chargement, erreur. « Reste de l'Union
européenne · English · EUR » fait 44 caractères et c'est un libellé réel. En chargement les
options deviennent inertes : un second tap pendant le rechargement envoie un second
locale_code, et c'est la dernière réponse du serveur qui gagne — l'acheteur
atterrit dans un marché qu'il n'a pas choisi en dernier. En erreur, on dit dans quel
marché la boutique est restée, sans quoi personne ne sait si les prix affichés sont les
anciens ou les nouveaux.
État désactivé — un seul marché publié, ce qui est
l'état réel au lancement : France. Le contrôle disparaît complètement (le rendu ci-dessous est
vide, volontairement) plutôt que de proposer une liste à un élément. Jones Road fait
l'inverse : un LOCALIZATION-FORM complet dont toutes les options mesurent
0 × 0 px — l'audit automatique répond « oui, il y a un sélecteur », l'acheteur sur téléphone
répond « non ».
Pied de page
Fiche 26 · pied-de-page · 2 variantes · 6 états
Le chiffre qui commande la fiche. Gymshark, plusieurs
milliers de références : 17 liens visibles dans 855 px. Jones Road, quelques dizaines de
références : 17 liens dans 1 145 px. Trois ordres de grandeur d'écart, le même nombre de
liens. La taille d'un pied n'est donc pas dictée par le catalogue mais par les devoirs
— aide, légal, contact, marché, paiement. Ici : 13 liens dont exactement trois liens produit.
Les six marques de paiement sont distinctes, et c'est un
défaut corrigé, pas une finition. Constat B2 : le thème rendait
icon name:'credit-card' pour toutes les méthodes — six fois le même glyphe. Chez
Whisker, les cinq badges sont posés 2 + 2 + 1, sans grille ni ligne de base commune. Ici, une
grille unique, même hauteur, même gouttière. Décision à valider : le cartouche porte le
nom de la marque plutôt qu'une approximation dessinée de son logo — un logo de
paiement mal redessiné est faux et juridiquement discutable ; les vrais SVG arrivent au port
par payment_icons.
Aucun accordéon, aucun retour en haut. Un
<details> qui cache 4 liens coûte un tap pour économiser ~130 px et retire
les liens du Ctrl+F ; les trois accordéons de Gymshark en cachent 30. Et le bouton flottant
« retour en haut » de Whisker recouvre son propre dernier badge de paiement — l'en-tête
épinglé rend déjà le retour permanent.
Variante claire — le parti pris Jones Road, os
chaud sur texte graphite. Construite comme réglage d'éditeur ; le défaut reste le graphite,
qui referme la page sur la couleur du bandeau d'annonce.
États de l'infolettre : succès, erreur, chargement.
Le message de succès remplace le formulaire et le micro-texte — deux phrases sur le
même formulaire, l'une au futur et l'autre au passé, se contredisent à l'écran. En chargement,
le bouton devient inerte : le vrai défaut ici est la double soumission, donc deux inscriptions
et deux courriels.
États vide, long et désactivé. Vide : aucun réseau
alimenté, aucun moyen de paiement configuré — les blocs disparaissent plutôt que de rendre un
cadre vide, qui inquiète. Long : les libellés français longs sont la norme ici, pas
l'exception (« Médiation de la consommation »), et ils passent à la ligne sans jamais défiler
horizontalement. Désactivé : l'infolettre n'est pas branchée, le formulaire reste visible mais
inerte — le retirer ferait varier la hauteur du pied d'une page à l'autre.
Ce qui manque encore, et qui appartient au fondateur :
la forme juridique et le SIREN. Ce sont des props, jamais des valeurs inventées ici — absents,
la ligne ne rend rien plutôt qu'un numéro plausible. L'adresse, elle, est celle qui sert déjà
d'adresse d'importateur UE et de contact GPSR.
